jQuery各种选择器
id选择器
$("#id");
<script type="text/javascript">
//通过jQuery直接传入id
//id的唯一，只选择到了第一个匹配的id为imooc的div节点
$("#imooc").css("border", "3px solid red");
</script>类选择器
$(".class");
<script type="text/javascript">
//通过jQuery直接传入class
//class选择器可以选择多个元素
$(".imooc").css("border", "3px solid red");
</script>元素选择器
$(“element”);
<script type="text/javascript">
//通过jQuery直接传入标签名p
//标签是可以多个的，所以得到的同样也是一个合集
$("p").css("border", "3px solid red");
</script>全选择器
$("*");
层级选择器
<script type="text/javascript">
//子选择器
//选择所有div元素里面的子元素P
$('div>p').css("border", "1px groove red");
//后代选择器
//选择所有div元素里面的p元素（包括孙子元素）
$('div p').css("border", "1px groove red");
//相邻兄弟选择器
//选取prev后面的第一个的div兄弟节点
$(".prev+div").css("border", "3px groove blue");
//一般相邻选择器
//选取prev后面的所有的div兄弟节点
$(".prev ~ div").css("border", "3px groove blue");
</script>基本筛选选择器
<script type="text/javascript">
//找到第一个div
$(".div:first").css("color", "#CD00CD");
//找到最后一个div
$(".div:last").css("color", "#CD00CD");
//:even 选择所引值为偶数的元素，从 0 开始计数
$(".div:even").css("border", "3px groove red");
//:odd 选择所引值为奇数的元素，从 0 开始计数
$(".div:odd").css("border", "3px groove blue");
//:eq
//选择单个
$(".aaron:eq(2)").css("border", "3px groove blue");
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border", "3px groove blue");
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color", "#CD00CD");
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
$("input:not(:checked)+p").css("background-color", "#CD00CD");
</script>内容筛选选择器
<script type="text/javascript">
//查找所有class='div'中DOM元素中包含"contains"的元素节点
//并且设置颜色
$(".div:contains(':contains')").css("color", "#CD00CD");
//查找所有class='div'中DOM元素中包含"span"（指定选择器）的元素节点
//并且设置颜色
$(".div:has(span)").css("color", "blue");
//选择所有包含子元素或者文本的a元素
//增加一个蓝色的边框
$("a:parent").css("border", "3px groove blue");
//找到a元素下面的所有空节点(没有子元素)
//增加一段文本与边框
$("a:empty").text(":empty").css("border", "3px groove red");
</script>可见性筛选选择器
元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden。
不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式。
<body>
<h2>可见性筛选选择器</h2>
<h3>:visible/:hidden</h3>
<div class="left">
<div class="div">
<a>display</a>
<p id="div1" style="display:none;">display</p>
</div>
<div class="div">
<a>width</a>
<a>height</a>
<p id="div2" style="width:0;height:0">width/height</p>
</div>
<div class="div">
<a>visibility</a>
<a>opacity</a>
<p id="div3" style="visibility:hidden;opacity:0">visibility</p>
</div>
</div>
<p id="show"></p>
<script type="text/javascript">
function show (ele) {
if (ele instanceof jQuery) {
$("#show").html('元素的长度 = ' + ele.length)
} else {
alert(ele+' 不是jQuery对象')
}
}
</script>
<script type="text/javascript">
//查找id = div1的DOM元素,是否可见
show($('#div1:visible') );//元素的长度 =0
//查找id = div2的DOM元素,是否可见
show( $('#div2:visible') );//元素的长度 =0
//查找id = div3的DOM元素,是否可见
show( $('#div3:visible') );//元素的长度 =1
//查找id = div1的DOM元素,是否隐藏
show( $('#div1:hidden') );//元素的长度 =1
//查找id = div2的DOM元素,是否隐藏
show( $('#div2:hidden'));//元素的长度 =1
//查找id = div3的DOM元素,是否隐藏
show( $('#div3:hidden') );//元素的长度 =0
</script>
</body>属性筛选选择器
<script type="text/javascript">
//查找所有div中，属性name=p1的div元素
$('div[name=p1]').css("border", "3px groove red");
//查找所有div中，有属性p2的div元素
$('div[p2]').css("border", "3px groove blue");
//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]').css("border", "3px groove #00FF00");
//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
$('div[name~="a"]').css("border", "3px groove #668B8B");
//查找所有div中，属性name的值是用imooc开头的
$('div[name^=imooc]').css("border", "3px groove red");
//查找所有div中，属性name的值是用imooc结尾的
$('div[name$=imooc]').css("border", "3px groove blue");
//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div[name*="test"]').css("border", "3px groove #00FF00");
//查找所有div中，有属性testattr中的值没有包含"true"的div
$('div[testattr!="true"]').css("border", "3px groove #668B8B");
</script>子元素筛选选择器
注意事项：
- :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
- :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
- 如果子元素只有一个的话，:first-child与:last-child是同一个
- :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
- jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
- nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算
<script type="text/javascript">
//查找class="first-div"下的第一个a元素
//针对所有父级下的第一个
$('.first-div a:first-child').css("color", "#CD00CD");
//查找class="first-div"下的最后一个a元素
//针对所有父级下的最后一个
//如果只有一个元素的话，last也是第一个元素
$('.first-div a:last-child').css("color", "red");
//查找class="first-div"下的只有一个子元素的a元素
$('.first-div a:only-child').css("color", "blue");
//查找class="last-div"下的第二个a元素
$('.last-div a:nth-child(2)').css("color", "#CD00CD");
//查找class="last-div"下的倒数第二个a元素
$('.last-div a:nth-last-child(2)').css("color", "red");
</script>表单元素选择器
<script type="text/javascript">
//查找所有 input, textarea, select 和 button 元素
//:input 选择器基本上选择所有表单控件
$(':input').css("border", "1px groove red");
//匹配所有input元素中类型为text的input元素
$('input:text').css("background", "#A2CD5A");
//匹配所有input元素中类型为password的input元素
$('input:password').css("background", "yellow");
//匹配所有input元素中的单选按钮,并选中
$('input:radio').attr('checked','true');
//匹配所有input元素中的复选按钮,并选中
$('input:checkbox').attr('checked','true');
//匹配所有input元素中的提交的按钮,修改背景颜色
$('input:submit').css("background", "#C6E2FF");
//匹配所有input元素中的图像类型的元素,修改背景颜色
$('input:image').css("background", "#F4A460");
//匹配所有input元素中类型为按钮的元素
$('input:button').css("background", "red");
//匹配所有input元素中类型为file的元素
$('input:file').css("background", "#CD1076");
</script>表单对象属性筛选选择器
注意事项：
- 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
- 在某些浏览器中，选择器:checked可能会错误选取到元素，所以保险起见换用选择器input:checked，确保只会选取元素
<script type="text/javascript">
//查找所有input所有可用的（未被禁用的元素）input元素。
$('input:enabled').css("border", "2px groove red");
//查找所有input所有不可用的（被禁用的元素）input元素。
$('input:disabled').css("border", "2px groove blue");
//查找所有input所有勾选的元素(单选框,复选框)
//移除input的checked属性
$('input:checked').removeAttr('checked')
//查找所有option元素中,有selected属性被选中的选项
//移除option的selected属性
$('option:selected').removeAttr('selected')
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
