首页 > 代码库 > jQuery-选择器（2）
jQuery-选择器（2）
jQuery选择器（2）
继续学习jquery选择器，感受它对于操作DOM节点的方便。
【属性筛选选择器】
属性选择器可以让你基于属性来定位一个元素。可以只指定该元素的某属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素。
使用率大的两个：
[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等。[attr*="value"]能在网站中帮助我们匹配不同类型的文件。
例子：
<div class="left" testattr="true" > <div class="div" testattr="true" name=‘p1‘> <a>[att=val]</a> </div> <div class="div" testattr="true" p2> <a>[att]</a> </div> <div class="div" testattr="true" name="-"> <a>[att|=val]</a> </div> <div class="div" testattr="true" name="a b"> <a>[att~=val]</a> </div> </div> <script type="text/javascript"> //查找所有div中，属性name=p1的div元素 $(‘div[name = p1]‘).css("border", "3px groove red"); </script> <script type="text/javascript"> //查找所有div中，有属性p2的div元素 $(‘div[p2]‘).css("border", "3px groove blue"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素 $(‘div[name|="-"]‘).css("border", "3px groove #00FF00"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个连字符“空”的div元素 $(‘div[name~="a"]‘).css("border", "3px groove #668B8B"); </script>
【子元素筛选选择器】
不常使用，和元素选择器不太一样，:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算。
jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的。
【表单元素选择器】
jquery专门加入表单选择器是为了更加方便的获取到某个类型的表单元素。
大部分表单类别筛选器可以使用属性筛选器替换。比如 $(‘:password‘) == $(‘[type=password]‘)。
【表单对象属性筛选选择器】
该选择器是专门针对表单元素的选择器，可以附加在其他选择器后面，主要功能是对所选择的表单进行筛选。
【特殊选择器this】
this是javascript中的关键字，指的是当前上下文对象，简单的说就是方法/属性的所有者。在DOM中this就指向了这个html元素的
对象，因为this就是DOM元素本身的一个引用。
<h2>特殊选择器this</h2> <p id="test1">点击测试：通过原生DOM处理</p> <p id="test2">点击测试：通过原生jQuery处理</p> <script type="text/javascript"> var p1 = document.getElementById(‘test1‘) p1.addEventListener(‘click‘,function(){ //直接通过dom的方法改变颜色 this.style.color = "red"; },false); </script> <script type="text/javascript"> $(‘#test2‘).click(function(){ //通过包装成jQuery对象改变颜色 $(this).css(‘color‘,‘blue‘); }) </script>
总体上：this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法；$(this)，代表的上下文对象是一
个jquery的上下文对象，可以调用jquery的方法和属性值。
总结：jquery强大的选择器，对于我们对DOM节点的操作带来了极大的方便，但是对于选择器的多而杂，我们应该在适当的时候选择适当选择器，除此之外，还应该在日常中不断的练习来加深理解及掌握。
jQuery-选择器（2）