zoukankan      html  css  js  c++  java
  • JQuery——JQuery CSS 选择器

    jQuery选择器和CSS选择器的写法十分类似,都具有隐式迭代的特点,无需循环遍历符合选择器要求的每个元素,使用起来相对方便,通常,把css选择器用$("")包起来就成了一个jQuery选择器。

    1、区别

    那么两者的区别如下

    • 两者的作用不同,CSS选择器找到元素后为设置该元素的样式,jQuery选择器找到元素后添加行为
    • jQuery选择器拥有更好的跨浏览器的兼容性
    • 选择器的效率
    • CSS选择器的效率
      • id选择器(#myid)
      • 类选择器(.myclassname)
      • 标签选择器(div,h1,p)
      • 相邻选择器(h1+p)
      • 子选择器(ul > li)
      • 后代选择器(li a)
      • 通配符选择器(*)
      • 属性选择器(a[rel="external"])
      • 伪类选择器(a:hover,li:nth-child)

        上面九种选择器的效率是从高到低排下来的,基中ID选择器的效率是最高,而伪类选择器的效率则是最底。详细的介绍大家还可以点击Writing efficient CSS selectors

    • Query选择器的效率
      • id选择器('#id')和元素标签选择器('form')
      • 类选择器$('.className')
      • 属性选择器$('[attribute=value]')和伪类选择器$(':hidden')

        上面的选择器效率是从高到低排下来的。

    2、选择器

      2.1、分类

        2.1.1、基本选择器

    2.1.1.1、标签选择器(元素选择器)

            $('html标签名')          //获取所有匹配标签的名称的元素

            2.1.1.2、id选择器

            $('#id名')              //获取指定id对应的元素

            2.1.1.3、类选择器

            $('.类名')               //获取所有类名对应的元素

            2.1.1.4、并集选择器

            $('选择器1, 选择器2, 选择器3.....')  //获取多个选择器选中的元素

        2.1.2、层级选择器

            2.1.2.1、后代选择器

            $('选择器A   选择器B')       //获取选择器A匹配元素中所有选择器B的元素,包含选择器B中的选择器B所指定的元素

            2.1.2.2、子代选择器

            $('选择器A >选择器B')        //获取选择器A匹配元素下选择器B的所有元素,不包含选择器B中的选择器B所指定的元素

            2.1.2.3、(+)相邻兄弟选择器

            $('选择器A+选择器B')        //获取选择器A匹配元素后面同级相邻的选择器B所指定的元素

            2.1.2.4、(~)兄弟选择器

            $('选择器A~选择器B')        //获取选择器A匹配元素后面的同级相邻的所有选择器B元素

        2.1.3、属性选择器

            2.1.3.1、属性名称选择器

            $('选择器A[属性名B]')         //获取是选择器A匹配元素并且A中有属性名为B的所有元素

            2.1.3.2、属性选择器

            $('选择器A[属性名B = 值C]')      //获取是选择器A匹配元素并且A中有属性名为B且值为C的所有元素

            2.1.3.3、复合属性选择器

            $('选择器A[属性名B = 值C][属性名D = 值E]'[属性名F = 值G]..')     //获取是选择器A匹配元素并且A中有属性名为B且值为C的且有属性名为D且值为E的且.....所有元素

        2.1.4、过滤选择器

            2.1.4.1、首元素选择器

            $('选择器A:first')            //获取是选择器A匹配的第一个元素

            2.1.4.2、未选择器

            $('选择器A:last')            //获取是选择器A匹配的最后一个元素

            2.1.4.3、非元素选择器

            $('选择器A:not(选择器B)‘)       //获取是选择器A匹配的所有但不包含选择器B匹配的元素

            2.1.4.4、偶数选择器

            $('选择器A:even')               //获取选择器A匹配元素下的所有偶数元素,index从0开始

            2.1.4.5、奇数选择器

            $('选择器A:odd')                      //获取选择器A匹配元素下的所有奇数元素,index从0开始

            2.1.4.6、等于索引选择器

            $('选择器A:eq(index)')       //获取选择器A匹配元素下的指定索引的元素

            2.1.4.7、大于索引选择器

            $('选择器A:gt(index)')        //获取选择器A匹配元素下的指定索引大于index值的元素

            2.1.4.8、小于索引选择器

            $('选择器A:lt(index)')         //获取选择器A匹配元素下的指定索引小于index值的元素

            2.1.4.9、标题选择器

            $('选择器A:header')           //获取是选择器A匹配元素下的h1~h6的所有元素

        2.1.5、表单过滤选择器

            2.1.5.1、可用元素选择器

            $('选择器A:enabled')        //获取匹配标签下的所有可用元素

            2.1.5.2、不可用元素选择器

            $('选择器A:disabled')       //获取匹配标签下的所有不可用元素

            2.1.5.3、单选/复选 选中选择器

            $('选择器A:checked')        //获取选择器A匹配元素中单选/复选选中的元素

            2.1.5.4、下拉列表选中选择器

            $('选择器A:selected')           //获取选择器A匹配元素中下拉框选中的元素

    ——(完)——

    2020年8月16日10:39:09

  • 相关阅读:
    LeetCode 252. Meeting Rooms
    LeetCode 161. One Edit Distance
    LeetCode 156. Binary Tree Upside Down
    LeetCode 173. Binary Search Tree Iterator
    LeetCode 285. Inorder Successor in BST
    LeetCode 305. Number of Islands II
    LeetCode 272. Closest Binary Search Tree Value II
    LeetCode 270. Closest Binary Search Tree Value
    LeetCode 329. Longest Increasing Path in a Matrix
    LintCode Subtree
  • 原文地址:https://www.cnblogs.com/kitor/p/13511756.html
Copyright © 2011-2022 走看看