jQuery中的选择器

jQuery中的选择器非常的多、繁杂，除了几个非常重要（使用频率非常高）的选择器以外，其他选择器这里不细节的分析，只提及。
一、基本选择器
基本选择器主要包括5种类型：ID选择器，类型选择器（笔者也理解为标签选择器），类选择器，通配符选择器，分组选择器，这里与CSS基本选择器相一致。
1、ID选择器
原生js：

var element = document.getElementById（“id”）；

jQuery：

$（“#id”）；

附：1、由于jQuery需要解析的关系，原生的js执行效率是比jQuery的执行效率更高的；
2、在ID选择器中，如果选择器包含特殊字符，可以在jQuery中使用两个斜杠对特殊字浮进行转义。

2、类型选择器
原生js：

var elements = document.getElementByTagName（“tagName”）；

jQuery：

$（“element”）；

3、类选择器
原生js：

var elements = document.getElementByClassName（“red”）；

jQuery：

$（“.className”）；

4、通配符选择器
原生js：

var elements = document.getElementByTagName（“*”）；

jQuery：

$（“*”）；

附：通配符选择器常用在别的标签下（如：$(“body *”).css(“color”,“red”);），单个通配符选择器将选择所有标签元素。
5、分组选择器
jQuery支持CSS的分组选择器，通过这种方式可以扩大选择器的选择范围，同时增强jQuery选择器引擎的应用能力。
选择多种元素可以通过逗号分隔符来分割多个不同的选择器，这些选择器可以是任意类型的，也可以是复合选择器。
如：

$("h2,#wrap,span.red,[title='text'");

二、结构选择器
1、层级选择器
<1>包含选择器，如：$("forminput");<2>子选择器，如：$(“form > input”);
<3>相邻选择器，如：$("label+input");<4>兄弟选择器，如：$(“form ~ input”)。
2、子元素选择器
<1>:nth-child(),通过括号内的表达式进行选择；
<2>:first-child,匹配第一个子元素；
<3>:last-child，匹配最后一个子元素；
<4>:only-child，匹配父元素下的唯一一个子元素。
三、过滤选择器
1、定位过滤器；
2、内容过滤器；
3、可见过滤器。
四、属性选择器
根据元素的属性及其属性值作为过滤的条件，来匹配Dom元素。
五、表单选择器
1、基本表单选择器
jQuery定义了一组伪类选择器，利用它们可以获取页面中的表单类型元素。如：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test :button").…("#test :disabled").val(“修改后”)//匹配所有的不可用元素。
六、jQuery选择器优化
1、多用ID选择器；
2、少直接使用Class选择器；
3、多用父子关系，少用嵌套关系；
4、缓存jQuery对象。
七、使用原生选择器
两个方法：querySelector()和querySelectorAll()。