JQuery 过滤器大全

霄
2023-05-27 / 0 评论 / 45 阅读 / 正在检测是否收录...

1.基本过滤器:

selector:first  获取所有已选择到的元素中的第一个元素
  selector:last   获取所有已选择到的元素中的最后一个元素
  selector:even    获取所有已选择到的元素中的索引为偶数的元素
  selector:odd     获取所有已选择到的元素中的索引为奇数的元素
  selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
  selector:lt(num)   获取所有已选择到的元素中的索引值小于num的元素
  selector:gt(num)   获取所有已选择到的元素中的索引值大于num的元素
  selector1:not(selector2)  获取所有已选择到的元素中的除了selector2的元素
  selector:header   获取所有已选择到的元素中的标题元素(h1~h6)    

2.内容过滤器:

  selector:contains(text) 
            获取所有已选择到的元素中文本包含text的元素
  selector:empty   
            获取所有已选择到的元素中的空元素(没有子节点)
  selector:parent  
            获取所有已选择到的元素中的非空元素(有子节点),如$("div:parent");
  selector1:has(selector2)  
            获取所有已选择到的元素中包含selector2的元素,如$("div:has('span')");

3.可见性过滤器:

隐藏类型分两种:

1)不占据屏幕空间
        display:none;
        <input type="hidden">   
  2)占据屏幕空间
        visibility:hidden;
        opacity:0;//透明度为0
   使用:
      :visible   选择所有占据屏幕空间的元素
      :hidden    选择所有不占据屏幕空间的元素  

4.属性过滤器:

   selector[attrKey]  
           获取所有已选择到的元素中具有属性attrKey的元素
   selector[attrKey=attrVal]    
           获取所有已选择到的元素中具有属性attrKey,并且属性值为attrVal的元素
   selector[attrKey^=attrVal]  
           获取所有已选择到的元素中具有属性attrKey,并且属性值为以attrVal开头的元素
   selector[attrKey$=attrVal]  
           获取所有已选择到的元素中具有属性attrKey,并且属性值为以attrVal结尾的元素
   selector[attrKey*=attrVal]  
           获取所有已选择到的元素中具有属性attrKey,并且属性值为包含attrVal的元素
   selector[attrKey!=attrVal]  
           获取所有已选择到的元素中具有属性attrKey,并且属性值不为以attrVal的元素或者没有属性attrVal的元素

5.后代选择器:

   selector:nth-child(index)
       获取每个selector元素中索引为index的子元素。【注意】index从1开始
   selector:first-child
       获取每一个selector元素中的第一个子元素(每个父元素的第一个子元素)
   selector:last-child
       获取每一个selector元素中的最后一个子元素(每个父元素的最后一个子元素)
   selector:only-child
       获取每一个selector元素中的独生子子元素(每个父元素如果只有一个孩子元素,获取该元素)
   selector:first-of-type
       获取每个selector元素中每种类型子元素中的第一个
   selector:last-of-type
       获取每个selector元素中每种类型子元素中的最后一个

6.表单过滤器:

   :checked    选取所有被选中的元素,用于复选框、单选框、下拉框
   :selected   选取所有被选中的元素,该选择器只适用于<option>
   :focus   选取当前获取焦点的元素
   :text    选取所有的单行文本框(<input type="text">)
   :password  选取所有的密码框
   :input     选取所有的<input>,<textarea>,<select>,<button>元素。
       *注意,$(":input")是选中可以让用户输入的标签元素;而$("input")是选择名字为input的标签元素。*
   :enable   选取所有可用元素,该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>)
   :disable   选取所有不可用元素,该选择器也仅可用于支持disable属性的html元素。
   :radio      选取所有的单选框
   :checkbox   选取所有的多选框
   :submit     选取所有的提交按钮
   :image      选取所有的input类型为image的表单元素
   :reset   选取所有的input类型为reset的表单元素
   :button  选取所有的input类型为button的表单元素
   :file    选取所有的input类型为file的表单元素
扫描二维码,在手机上阅读!
56

评论

博主关闭了当前页面的评论