jquery学习之选择器与过滤器

版权声明：转载请注明出处： https://blog.csdn.net/qq_38262910/article/details/82752217

基本选择器

   普遍选择器   *   所有的
   id选择器     #id
   类选择器    .class
   标签选择器  标签名
   群组选择器    #one,.two 取并集
   复合选择器   div#one    取交集

子代或后代选择器

   子代选择器    >    直接孩子
   后代选择器      空格  所有的后代
   body *  body中的所有的后代元素

兄弟选择器

 下一个兄弟节点   +
  之后所有的兄弟节点   ~

过滤器

 **在选择器之后使用**
 **基本过滤器**
         :first  第一个元素，例:$('div:first');   body元素中的第一个div
         :last  最后一个元素,列:$('div:last');  body元素中的最后一个div
         :eq(index)  索引为index的
         :lt(index)   索引小于index的
         :gt(index)  索引大于index的
        :even       索引为偶数的
        :odd        索引为奇数的
        :not(选择器/过滤器)    选不为选择器/过滤器的
        :header 选择h1~h6标题  这里注意是这样用$('div :header'); 
         div后有空格，意思为选择div的后代元素中为h1~h6标题的
          ，若没有空格，那么选中的是div
  **内容过滤器**
        :contains(e)   $(‘选择器：contains(e)’)  选择器中文本包含e的
        :empty   选择没有文本也没有子元素的
        :paretn  选择有内容或子元素的
        :has(选择器)    选择有选择器的 $('div:has("p")')
  **可见性过滤器**
        :hidden     选择不占据屏幕空间的元素
            body体中不占据空间的：display:none; input type="hidden"
       :visible    选择占据屏幕空间的元素  
              body体中在页面显示出来的都是
                 visibility:hidden;    opacity:0;
 **属性过滤器**
       [attr]    选择有某个属性名的
       [attr=val]   选择有属性名且属性值为val的
       [attr^=val]  选择有属性名且属性值以val开头的
       [attr$=val]  选择有属性名且属性值以val结束的
       [attr*=val]   选择有属性名且属性值包含val的
       [attr!=val]   选择没有attr属性的或者有attr属性名但不等于val值的
**子代过滤器**
       div :first-child   获取每个div父元素的第一个儿子
       div :last-child    获取每个div父元素最后一个儿子
       div :nth-child(index)   获取每个父元素中的第几个孩子节点  index从1开始
       div :only-child  获取每个父元素中的独生子元素
       div :first-of-type 获取每个父元素中的每种类型的第一个元素
       div :last-oftype 获取每个父元素中的每种类型的最后一个元素