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

时间: 2024-10-06 09:26:54

jQuery-选择器(2)的相关文章

jQuery 选择器2

jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".intro.demo") 所有 class=&qu

优化jQuery选择器

优化jQuery选择器 选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任.记住这些小技巧可以让你轻松突破学习选择器时的瓶颈. jQuery 扩展 如果可能的话,避免使用jQuery扩展选择器.这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧. 1 2 3 4 5 // Slower (the zero-based :even sele

JavaScript(15)jQuery 选择器

jQuery 选择器 选择器允许对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器允许通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器允许对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 &

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

JQuery选择器

JQuery选择器 通过一个样例来分辨这些选择器,首先做一个初始的页面: 1.HTML 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>选择器</title> 6 <script type="text/javascript" src="../JQue

jquery 选择器(name,属性,元素)大全

jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象属性过滤选择器.选择器是jQuery最基础的东西,下面向大家介绍jquery+%D1%A1%D4%F1%C6%F7/" target="_blank">jquery 选择器的用法 选择器是jQuery的核心组成部分,因为使用jQuery操作DOM时所做的每件事都和选择器密切

jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、

this指的是原生js的DOM对象 .css(""):只写一个值是取值,写俩值是赋值 window.onload   ===   $(document).ready(); $(""):获取元素   标签名..类名.#id jQuery特点 链式编程 jq.shou(3000).html(内容) 相当于 jq.shou(3000) jq.gtml(内容) 隐式迭代 隐式实用for循环.迭代 如何使用jQuery 引包 一定要在使用之前 <script src =

Jquery 选择器大全

jQuery 选择器简介  jQuery 选择器允许对 HTML 元素组或单个元素进行操作. jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器. jQuery 中所有选择器都以美元符号开头:$(). 1 .基本选择器 $("#test") 选择id值为test的元素,id值是唯一的所以返回单个元素. $("div") 选择所有的d

JavaScript强化教程——jQuery选择器

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p&

jQuery选择器和事件

一.jQuery选择器    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.10.1.min.js"></script> <script src="Selector.js"></script>