jQuery选择器探究：语法汇总

爱被打了一巴掌 2021-09-15 07:36 363阅读 0赞

首先概略汇总一下jQuery常见选择器，大概分为这么几类：基本选择器、层次选择器、过滤选择器。基本选择器包含id/class/tag等，层次选择器包含祖孙、父子、兄弟、同级选择器四种，过滤选择器比较多样化，有根据当前元素在同级元素集合中的位置选择的，有根据相对父元素的子元素选择的，有根据属性选择的，也有根据内容选择的，还有表单元素等多种过滤选择器。  
  
  
一 基本选择器  
 ID选择器 \#id  
 类选择器 .class  
 标签选择器 tag,\*  
 群组选择器 s1,s2,s3  
  
  
二 层次选择器  
 祖孙选择器 ancestor descendant  
 父子选择器 parent>child  
 兄弟选择器 prev+next  
 同级选择器 prev~siblings  
  
  
三 过滤选择器  
 位置过滤选择器  
 :first  
 :last  
 :even  
 :odd  
 :nth(index)  
 :eq(index)  
 :gt(index)  
 :lt(index)  
 子元素过滤选择器  
 :first-child  
 :last-child  
 :nth-child(index/even/odd/equation)  
 :only-child  
 属性过滤选择器  
 \[attribute\]  
 \[attribute=value\]  
 \[attribute!=value\]  
 \[attribute^=value\]  
 \[attribute$=value\]  
 \[attribute\*=value\]  
 \[attribute|=value\]  
 \[attribute~=value\]  
 内容过滤选择器  
 :contains(text)  
 :empty  
 :parent  
 可见性过滤选择器  
 :hidden  
 :visible  
 表单对象属性过滤选择器  
 :enabled  
 :disabled  
 :checked  
 :selected  
 表单选择器  
 :input  
 :text  
 :password  
 :radio  
 :checkbox  
 :submit  
 :reset  
 :button  
 :image  
 :file  
 :hidden  
 其他过滤选择器  
 :has(selector)  
 :not(selector)  
 :header  
 :animated

:focus

## jquery基本选择器 ##

jquery基本选择器，包括id选择器、class选择器、标签选择器、通配符选择器，同时配合选择器的空格、逗号等语法，可以实现大部分需要的选择功能。   
代码如下：

$("#myid");                     //根据id获取元素，等价于document.getElementById(),
    $("#myid\\#b");                 //根据id为myid#b的元素，对于属性中含有.#([等特殊字符的要转义获取
    $("label");                     //根据标签名称获取元素列表，等价于document.getElementByTagName(),
    $(".myclass");                  //根据class获取元素列表
    $("div.myclass");               //根据class获取元素列表
    $("label,div,input");           //根据元素并集
    $("body *");                     //*获取所有元素,空格表示后代元素