jQuery选择器

it夜神 · 发表于 2019-8-9 15:35:23

一、选择器分类
      1.基本选择器
      2.层级选择器
      3.属性选择器
      4.过滤选择器
      5.可见选择器

二、选择器详解
      *1.基本选择器
            1）标签选择器语法：$("h2") 选取HTML中所有的h2标签
            2）id选择器             语法：$("#one") 选取id为one的元素（可以很好的获取单个元素）与css中格式相同
            3）类选择器             语法：$(".one") 选取class为one的所有元素       与css中格式相同
            4）并集选择器       语法： $("div,p,.title") 选取所有div、p和class为title的元素（注意：每个元素以逗号（,）分隔开
            5）交集选择器       语法：$("h2 .title) 选取所有拥有class为title 的h2元素
            6）全局选择器       语法：$("*") 选取所有元素（注意：* 代表匹配所有）
      *2.层级选择器
            1）后代选择器       语法：$("#menu span")选取id为menu的所有后代为<span>的元素（不仅包括子代，孙子代。。。也包括）
                     例：
                     <div id="menu">
                              <div class="one">
                                    <SPAN></SPAN>
                              </div>
                              <SPAN>
                                    <SPAN></SPAN>
                              </SPAN>
                     </div>
            2）子代选择器       语法：$("parent>child") 如$("#menu>span") 选取id为menu的所有子类元素（注意：用>对不同元素进行分隔）
                     例：
                     <div id="menu">
                              <div class="one">
                                    <span></span>
                                    <span></span>
                              </div>
                              <SPAN>
                                    <span></span>
                              </SPAN>
                              <div></div>
                              <SPAN></SPAN>
                     </div>
            3）相邻选择器       语法：$("div+span")选取div之后的同辈的相邻元素（注意：用+对不同元素进行分隔）
            4）同辈选择器       语法：$("div~span")选取div的所有同辈元素（注意：用~对多个元素进行分隔）
      *3.属性选择器       （注意属性选择器都需要使用方括号[]对元素进行包裹）
            1.不给定条件的属性选择器语法：$("[href]")选取含有属性href的所有元素
            2.给定单条件的属性选择器
                     1）选取属性为特定值得属性  语法：$("[href='#']")选取href属性值为“#”的元素
                     2）选取属性不等于某值的属性  语法：$("[href!='#']")选取属性href属性值不等于“#”的所有元素
                     3）选取属性值以特定值开头的选择器  语法：$("[href^='en']")选取href属性值以en开头的属性（注意：^是以什么开头的的意思）
                     4）选取属性值以特定值结尾的选择器  语法：$("[class$='en']")选取class以en结尾的元素。（注意：$的意思是以什么结尾）
                     5）选取属性值包含特定值的选择器          语法：$("[class*='en']")选取class包含en的元素。
            3.给定多条件的属性选择器
                     1）选取满足多条件的复合属性选择器  语法：$("li[id][title=新闻要点]")选取含有id属性和title属性为“新闻要点”的<li>元素。
      *4.过滤选择器
            1.过滤选择器通过特定的过滤规则来筛选元素。其语法特点是使用“:”
                              1.基本过滤选择器：注意：索引值从0开始
                                    1）:first  选取第一个元素       $("li:first")
                                    2) :last       选取最后一个元素 $("li:last")
                                    3) : odd             选取索引为奇数项的元素 $("li: odd")
                                    4）: even       选取索引值为偶数项的元素 $("li:even")
                                    5) : eq(index) 选取索引值等于index的元素 $("li:eq(1)")
                                    6) : gt(index) 选取索引值大于index的元素 $("li:gt(1)")
                                    7) : lt(index) 选取索引值小于index的元素 $("li:lt(5)")
                                    8)  :not(selector)
                                    9) :header
                                    10):focus

            2.可见性过滤选择器
                     1）:visible  选取所有可见的元素  例：$("p:visible").hide() 令所有显示的p标签隐藏
                     2）:hidden 选取所有隐藏的元素       例：$(" P : hidden").show() 令所有隐藏的p标签进行显示

补充内容 (2019-8-9 15:36):
本人小白，自己平时课堂自己手打的一些笔记。供大家参考，有错误的请指正。