美文网首页jQuery
jQuery 选择器

jQuery 选择器

作者: sky丶星如雨 | 来源:发表于2017-07-06 11:43 被阅读0次

    以下皆为举例说明

    ID选择器 :$("#id");
    类名选择器 : $(".class");
    标签选择器 : $("ele");
    群组选择器 : $("#id , .class , ele");
    后代选择器 : $("ul li a");
    等价方法 : $("#ID").find("ele");
    通配符选择器 : $("*"); //  一般用在局部环境中 
    比如 : $("ul li *"); 选择到ul里的li的所有标签
    

    选择器灵活使用,可以使得选择元素更加精准和快速;
    还有一种选择器,可以在ID和类中指明元素前缀,比如

    $("div.box") // 获取类名为box的div
    

    类有一个特殊的模式,就是同一DOM多个类名,对于这种模式,我们有多个类可以使用,但要注意和群组选择器之间的区别

    $(".box.pic") // 获取类名既有box又有pic的元素
    

    警告:在构造选择器时,有一个通用的优化原则:只追求必要的确定性。当选择器筛选越复杂,jQuery内部的选择器引擎处理字符串的时间就越长。

    子选择器 : $("#ID > ele") ;
    等价方法 : $("#ID").children("ele");
    
    next选择器 : $("div + p")  //只获取某一个节点的后一个同级DOM对象
    等价方法 : $("div").next("p")
    prev选择器 :$("div").prev("p") // 获取同级的上一个节点
    等价方法  : $("div").prevAll("p") // 获取同级上面所有的节点
    siblings选择器 : $("div").siblings("p") // 获取同级上下所有的节点
    
    nextAll选择器 : $("div~p") // 获取某节点后面所有的同级节点
    等价方法 :$("div').nextAll("p")
    

    如果 等价方法里不书写任何内容,其实,就相当于里面书写了*号,通常情况下,不建议这样使用,对性能有一定的影响且精准度不佳
    比如

    $("div").next(); // next方法里没有限定节点,所以,无论与div同级的下一个节点是什么,都会被选中,而如果限定为p节点,那么假如,div的下一个同级节点不是p,那么将不会被选中
    

    那么这么多选择器,在实际工作中,我们究竟应该如何选择呢?
    其实,无论从性能,还是语义化及jQuery本身来考虑,我们都应该选择jQuery提供的方法,毕竟css的模式过于死板,所以,如果jQuery提供了独立的方法来代替某些选择器的功能,我们建议优先使用此类方法。

    属性选择器

    $("a[title]") // 标签为a,且具有title属性的节点 
    $("a[title = num]") // 标签为a,且具有title属性且属性值为num的节点
    $("a[title != num]") // 标签为a,且具有title属性且属性值不为num的节点
    

    过滤选择器

    $("li:first") // 获取第一个li
    $("li:last") // 获取最后一个li
    $("li:not(.red)") // 获取li 里类名不是red的所有节点
    $("li:even") // 获取偶数li,索引号从0开始
    $("li:odd") // 获取奇数li,索引号从0开始
    $("li:eq(3)") // 获取li里的第四个,索引号从0开始,所以是3+1; 值可以为负,即从尾部开始计算
    $("li:gt(2)") // 获取索引号大于2的所有元素,索引号从0开始
    $("li:lt(2)") // 获取索引号小于2的所有元素,索引号从0开始
    $("focus") // 选择当前焦点闪烁的元素  注意,是网页初始状态就已经激活的焦点,并不是事件触发的,所以需做以下处理
    $(":focus").get(0).focus();
    

    jQuery为最常规的过滤选择器提供了专用的方法,用来提高性能和效率

    $("li").first(); // 在使用first() , last()方法时,为了避免相同元素造成的影响,应指明其父元素
    $("li").last();
    $("li").not();
    $("li").eq(2);
    

    内容过滤器

    $("div:contains('baidu.com')") // 选取含有"baidu.com"文本的元素
    $("div:empty") // 选取不包含子元素或空文本的元素
    $(":has(.red)")  // 选取子元素含有class是red的元素
    比如 : $("ul:has('.red')") // 选择的就是整个ul , 而不是含有red类名的li
    等价方法 : $("ul").has(".red")
    $(":parent") // 选取含有子元素或文本的元素
    $("li").parent() // 选取当前元素的父节点
    $("li").parentUntil("body") // 选取当前元素的父节点遇到body节点停止
    

    可见性过滤器

    $(":hidden") // 选取所有不可见元素
    $(":visible") // 选取所有可见元素
    

    子元素过滤器

    $("li:first-child") // 获取每个父元素的第一个子元素
    $("li:last-child") // 获取每个父元素的最后一个子元素
    $("li:only-child") // 获取只有一个子元素的元素
    // 下面三个选择器,索引值皆为从1开始
    $("li:nth-child(even)") // 获取每个父元素的偶数li元素
    $("li:nth-child(odd)") // 获取每个父元素的奇数li元素
    $("li:nth-child(2)") // 获取每个父元素的第2个li元素
    

    其他方法

    $(".red").is("li")
    $("li").slice(0,2) // 前三个元素被选中
    $("li").slice(2,4) // 3,4被选中
    $("li").slice(0,-2) // 从后向前数,倒数第一个和倒数第二个不选,其他全选
    $("li").slice(2,-2) // 前两个不选,后两个不选,其他全选
    $("div").contents() // 返回子节点数量(包含文本节点)
    $("li").filter(".red , :first-child , :last-child") // 可灵活组合选择器
    // 可实现精确查找
     $(function () {
                $("li").filter(function () {
                    return $(this).attr("class") == "red" && $(this).attr("title") == "列表3";
                }).css("background", "#ccc");
            })
    

    本文只是列出一些较为常用的选择器,并不是说jQuery只有这些选择器,具体请参考jQuery官方网站 http://jquery.com/

    相关文章

      网友评论

        本文标题:jQuery 选择器

        本文链接:https://www.haomeiwen.com/subject/xzgchxtx.html