我是靠谱客的博主 柔弱大侠，最近开发中收集的这篇文章主要介绍jQuery选择器一、基本选择器 二、层次选择器三、过滤选择器四、内容过滤选择器五、属性过滤选择器六、表单对象选择器，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
目录
一、基本选择器
二、层次选择器
三、过滤选择器
四、内容过滤选择器
五、属性过滤选择器
六、表单对象选择器
一、基本选择器
1、id选择器--> $("#")
2、class选择器--> $(".")
3、元素选择器--> $("元素标签")
4、*匹配所有元素--> $("*")
5、多元素选择器 --> $("选择器A,选择器B,.....")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
/* # id选择器 根据id选择元素 id唯一的不能重复*/
$("#btn1").click(function(){
$("#one").css("background-color","red");
});
$("#btn2").click(function(){
/* . class选择器 */
$(".mini").css("background-color","#00ff00");
});
$("#btn3").click(function(){
/* 元素选择器 选中div*/
$("div").css("background-color","#00ffff");
});
$("#btn4").click(function(){
/* * 匹配所有元素*/
$("*").css("background-color","#00aaff");
});
$("#btn5").click(function(){
/*多个选择器*/
/* 选中元素为span 以及id为two的元素 */
$("span,#two").css("background-color","#aa55ff");
});
});
</script>
</head>
<body>
<input type="button" value="id选择器" id="btn1">
<input type="button" value="class选择器" id="btn2">
<input type="button" value="元素选择器" id="btn3">
<input type="button" value="匹配所有元素" id="btn4">
<input type="button" value="多个选择器" id="btn5">
<br>
<span>爱国1。。。</span>
<div id="one" class="one">
id one
<div class="mini">class mini</div>
</div>
<div id="two" class="one">
id two
<div class="mini">class mini</div>
<div class="mini">class mini</div>
</div>
<h3>我爱中国</h3>
<span>爱国2。。。</span>
</body>
</html>二、层次选择器
1、某元素下的所有元素--> $("选择器A 选择器B")
2、某元素下的子元素--> $("选择器A>选择器B")
3、某元素紧跟着的元素--> $("选择器A+选择器B")
4、某元素的同级别元素--> $("选择器A~选择器B")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#btn1").click(function(){
/* 找body下所有的div元素 */
$("body div").css("background-color","red");
});
$("#btn2").click(function(){
/* 选中body下的所有div子元素 只能选中儿子 不能选中孙子 */
$("body > div").css("background-color","#00ff00");
});
$("#btn3").click(function(){
/* 选中id为one后面紧跟着的div元素*/
$("#one+div").css("background-color","#00ffff");
});
$("#btn4").click(function(){
/* 选中和#one同级别的div元素 其他层次的不选中*/
$("#one~div").css("background-color","#00aaff");
});
});
</script>
</head>
<body>
<input type="button" value="选择body内的所有div元素" id="btn1">
<input type="button" value="选择body内的所有div子元素" id="btn2">
<input type="button" value="选择id为one紧跟着的div元素" id="btn3">
<input type="button" value="选择id为one的同辈div元素" id="btn4">
<br>
<span>爱国1。。。</span>
<div id="one" class="one">
id one
<div class="mini">class mini</div>
</div>
<div id="two" class="one">
id two
<div class="mini">class mini</div>
<div class="mini">class mini</div>
</div>
<h3>我爱中国</h3>
<span>爱国2。。。<div>span div</div></span>
<div class="mini">mydiv</div>
</body>
</html>三、过滤选择器
1、选择第一个元素--> $("选择器A:frist")
2、选择最后一个元素--> $("选择器A:last")
3、不为此元素的其他元素（取否定）--> $("选择器A:not(选择器B)")
4、偶数元素--> $("选择器A:even")
5、奇数元素--> $("选择器A:odd")
6、大于指定索引值元素（等于指定索引值元素、小于指定索引值元素）--> $("选择器A:gt(索引值)")，$("选择器A:eq(索引值)")，$("选择器A:lt(索引值)")
7、选中h1-h6标题元素--> $(":header")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤选择器</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#btn1").click(function(){
/* 选择第一个div元素 */
$("div:first").css("background-color","red");
});
$("#btn2").click(function(){
/* 选择最后一个div元素 */
$("div:last").css("background-color","#00ff00");
});
$("#btn3").click(function(){
/* 选中class不为one的所有div元素 取否定*/
$("div:not(.one)").css("background-color","#00ffff");
});
$("#btn4").click(function(){
/* 选择为偶数的 索引为0开始 从0开始计数 0 2 4 6 8*/
$("li:even").css("background-color","#00aaff");
});
$("#btn5").click(function(){
/* 选择为奇数的 索引为0开始 从0开始计数 1 3 5 7 9*/
$("li:odd").css("background-color","#ffff00");
});
$("#btn6").click(function(){
/* 选择索引值大于2的所有li元素 (不包含索引值2的元素) eq()等于 lt()小于(不包含索引值的元素)*/
$("li:gt(2)").css("background-color","#00aa00");
});
$("#btn7").click(function(){
/* 选中h1~h6的标题标签*/
$(":header").css("background-color","#ff007f");
});
});
</script>
</head>
<body>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
<h2>你好中国</h2>
<input type="button" value="选择第一个div元素" id="btn1">
<input type="button" value="选择最后一个div元素" id="btn2">
<input type="button" value="选择class不为one的所有div元素" id="btn3">
<input type="button" value="选择li为偶数的元素" id="btn4">
<input type="button" value="选择li为奇数的元素" id="btn5">
<input type="button" value="选择li索引大于2的元素" id="btn6">
<input type="button" value="选择标题元素" id="btn7">
<br>
<span>爱国1。。。</span>
<div id="one" class="one">
id one
<div class="mini">class mini</div>
</div>
<div id="two" class="one">
id two
<div class="mini">class mini</div>
<div class="mini">class mini</div>
</div>
<h3>我爱中国</h3>
<span>爱国2。。。<div>span div</div></span>
<div class="mini">mydiv</div>
<h4>我爱中国</h4>
</body>
</html>四、内容过滤选择器
1、元素含有内容元素-->$("选择器A:contains('文本')")
2、选择空元素-->$("选择器A:empty")
3、含有某元素的元素-->$("选择器A:has(选择器B)")
4、含有子元素或文本元素的元素-->$("选择器A:parent")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容过滤选择器</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#btn1").click(function(){
/* div元素中含有di内容的所有元素 */
$("div:contains('di')").css("background-color","red");
});
$("#btn2").click(function(){
/* div为空的元素 返回值为数组对象 Array<Element(s)>*/
var div = $("div:empty");
alert(div.length);
});
$("#btn3").click(function(){
/* 含有class为mini的div元素*/
$("div:has(.mini)").css("background-color","#00ffff");
});
$("#btn4").click(function(){
/* 选择含有子元素或文本元素的div*/
$("div:parent").css("background-color","#00aaff");
});
});
</script>
</head>
<body>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
<h2>你好中国</h2>
<input type="button" value="选择内容含有di的div元素" id="btn1">
<input type="button" value="选择不包含子元素或文本元素的div空元素" id="btn2">
<input type="button" value="选择含有class为mini元素的div元素" id="btn3">
<input type="button" value="选择含有子元素或文本元素的div元素" id="btn4">
<br>
<span>爱国1。。。</span>
<div id="one" class="one">
id one
<div class="mini">class mini</div>
</div>
<div id="two" class="one">
id two
<div class="mini">class mini</div>
<div class="mini">class mini</div>
</div>
<h3>我爱中国</h3>
<span>爱国2。。。<div>span div</div></span>
<div class="mini">mydiv</div>
<h4>我爱中国</h4>
<div></div>
<div></div>
</body>
</html>五、属性过滤选择器
1、含有属性元素-->$("选择器A[属性]")
2、属性值等于文本的元素-->$("选择器A[属性='文本']")
3、属性值以文本开头的元素-->$("选择器A[属性^='文本']")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性过滤选择器</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#btn1").click(function(){
/* 属性含有title的div元素 */
$("div[title]").css("background-color","red");
});
$("#btn2").click(function(){
/* 选择属性值等于test的div元素*/
$("div[title='test']").css("background-color","#ff557f");
});
$("#btn3").click(function(){
/* 选择属性值以t开头的div元素 $=以什么结尾 *=包含*/
$("div[title^='t']").css("background-color","#00ffff");
});
});
</script>
</head>
<body>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
<h2>你好中国</h2>
<input type="button" value="选择属性含有title的div元素" id="btn1">
<input type="button" value="选择属性含有title 属性值等于test的div元素" id="btn2">
<input type="button" value="选择属性含有title 属性值以t开头的div元素" id="btn3">
<br>
<span>爱国1。。。</span>
<div id="one" class="one" title="tt">
id one
<div class="mini">class mini</div>
</div>
<div id="two" class="one" title="test">
id two
<div class="mini">class mini</div>
<div class="mini">class mini</div>
</div>
<h3>我爱中国</h3>
<span>爱国2。。。<div>span div</div></span>
<div class="mini">mydiv</div>
<h4>我爱中国</h4>
<div></div>
<div></div>
<div title="tttt">yyyy</div>
</body>
</html>六、表单对象选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单对象选择器</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#btn1").click(function(){
/* 拿到文本框 .val()方法有参数则设置值，无参数则取值*/
$(":text:enabled").val("zhangsan");//只能给可用的赋值 enabled访问可用文本框
$(":text:disabled").val("lisi");//只能给禁用的赋值 disabled访问不可用文本框
});
$("#btn2").click(function(){
alert($(":checkbox:checked").length);//获取选中的个数 :checked属性为选中
alert($(":checkbox:checked")[0].value);//$(":checkbox:checked")返回值为数组 dom元素
});
$("#btn3").click(function(){
var chks = $(":checkbox:checked");
for(var i = 0; i < chks.length; i++){
console.log(chks[i].value);
}
console.log("-----------------------")
chks.each(function(){
console.log(this.value);
});
});
$("#btn4").click(function(){
var options = $("select option:selected");
alert(options.length);
options.each(function(){
console.log(this.innerHTML);//this指代当前options options是DOM
});
});
});
</script>
</head>
<body>
<input type="button" value="给文本框赋值" id="btn1">
<input type="button" value="获取多选框选中的个数" id="btn2">
<input type="button" value="获取多选框选中的内容" id="btn3">
<input type="button" value="获取下拉框选中的内容" id="btn4">
<br>
<input type="text" name="" id="">
<input type="text" name="" id="" disabled="disabled">
<input type="checkbox" name="loves" checked="checked" value="sport">运动
<input type="checkbox" name="loves" value="internet">网络
<input type="checkbox" name="loves" checked="checked" value="music">音乐
下拉框
<select name="city" multiple="multiple" style="height: 100px;" id="select">
<option value="sh">上海</option>
<option value="sz" selected="selected">深圳</option>
<option value="nb">宁波</option>
<option value="hz" selected="selected">杭州</option>
</select>
</body>
</html>最后
以上就是柔弱大侠为你收集整理的jQuery选择器一、基本选择器 二、层次选择器三、过滤选择器四、内容过滤选择器五、属性过滤选择器六、表单对象选择器的全部内容，希望文章能够帮你解决jQuery选择器一、基本选择器 二、层次选择器三、过滤选择器四、内容过滤选择器五、属性过滤选择器六、表单对象选择器所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![Jquery选择器input:hidden和input[type=hidden]的区别](/uploads/reation/bcimg2.png)
![jquery选择器 .ed input[type='button']](/uploads/reation/bcimg4.png)
发表评论 取消回复