jQuery选择器

258 阅读2分钟

1.基本选择器:

所有选择器

* 标签选择器 
标签名 
ID选择器 #id 
类选择器 .className 
群组选择器 .one,.two 多个选择器使用都好分隔,取并集 
复合选择器 .one.two 多个选择器组合使用,取交集

2.层次选择器:

后代选择器   .one .two   
    两个选择器使用空格隔开,表示可以获取当前元素的子代以及孙子代等等后代元素。
子代选择器   .one>.two
    两个选择器使用>隔开,表示只能获取当前选中元素的子代元素。

3.基本过滤器:

  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)    

4.内容过滤器:

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

5.属性过滤器:

   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的元素

6.后代选择器:

   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元素中每种类型子元素中的最后一个

7.表单过滤器:

   :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的表单元素