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

  • 相关阅读:
    METHODS OF AND APPARATUS FOR USING TEXTURES IN GRAPHICS PROCESSING SYSTEMS
    Display controller
    Graphics processing architecture employing a unified shader
    Graphics-Processing Architecture Based on Approximate Rendering
    Architectures for concurrent graphics processing operations
    Procedural graphics architectures and techniques
    DYNAMIC CONTEXT SWITCHING BETWEEN ARCHITECTURALLY DISTINCT GRAPHICS PROCESSORS
    Thermal zone monitoring in an electronic device
    System and method for dynamically adjusting to CPU performance changes
    Framework for Graphics Animation and Compositing Operations
  • 原文地址:https://www.cnblogs.com/yehui-mmd/p/5882603.html
Copyright © 2011-2022 走看看