jQuery-选择器

Posted 2020-08-09 只要闪电降临 就会有跳舞的火焰

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