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节点的操作带来了极大的方便,但是对于选择器的多而杂,我们应该在适当的时候选择适当选择器,除此之外,还应该在日常中不断的练习来加深理解及掌握。