jQuery 选择器

首先在前端文件中引入：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

前端就有了 jQuery 变量，它是一个函数，并且有一个别名叫 $ ，这个函数叫「标签选择器」

函数的返回值叫「 jQuery 对象 」，这种对象有下标，可以使用 [2] 来获取第 3 个元素，选出来的元素叫 DOM 对象。

jQuery 中的元素是 DOM 对象，使用索引获取；DOM 对象可以使用 $(DOM 对象) 转换成 jQuery 对象。

【常规操作】

$('form') 获取所有 form 标签

$('#a3') 获取所有 id 值是 a3 的标签

$('.col-md-3') 获取所有类属性值包含 col-md-3 的标签

$('div#c3') 获取所有 id 值是 c3 的 div 标签

$('div.c3') 获取所有类属性值包含 c3 的 div 标签

$('.c1, h2') 获取所有类属性值包含 c1 的标签和所有 h2 标签

【层级选择器】

$('x y') 获取 x 标签下的各层的所有 y 标签

$('x > y') 获取 x 标签下第一层的所有 y 标签

$('x >> y') 获取 x 标签下第二层的所有 y 标签

$('x >>> y') 获取 x 标签下第三层的所有 y 标签

$('x > .c2') 获取 x 标签下第一层所有类属性值包含 c2 的标签

$('x + y') 获取 x 后面紧挨着的那一个同级 y 标签，如果紧挨着的标签不是 y ，就不选

$('x ~ y') 获取 x 标签同级的所有 y 标签

【基本选择器】

$('div ~ p:first') 获取 div 标签的所有同级 p 标签，然后选择第 1 个

$('div ~ p:last') 获取 div 标签的所有同级 p 标签，然后选择最后 1 个

$('div ~ p:eq(n)') 获取 div 标签的所有同级 p 标签，然后选择索引（下标）为 n 的那个

$('div ~ p:even') 获取 div 标签的所有同级 p 标签，然后选择索引为偶数的那些

$('div ~ p:odd') 获取 div 标签的所有同级 p 标签，然后选择索引为奇数的那些

$('div ~ p:gt(n)') 获取 div 标签的所有同级 p 标签，然后选择索引大于 n 的那些

$('div ~ p:lt(n)') 获取 div 标签的所有同级 p 标签，然后选择索引小于 n 的那些

$('div ~ p:not(.c2)') 获取 div 标签的所有同级 p 标签，然后选择类属性值不包含 c2 的那些

$('div ~ p:has(a)') 获取 div 标签的所有同级 p 标签，然后选择标签下含有子标签 a 的那些

【属性选择器】

注：标签有很多属性，其中较为特殊的是 id 和 class ，要用到此外的属性需要使用属性选择器

$('input[name]') 获取有 name 属性的 input 标签

$('input[name=hobby]') 获取 name 属性值是 hobby 的 input 标签

$('input[name!=hobby]') 获取 name 属性值不是 hobby 的 input 标签

【 form 表单常用选择器】

注：表单内通常会有 input 标签，这个标签可能会被 label 标签包裹，以下选择器都是针对 input 标签的

$(':text') 获取 type 属性值为 text 的 input 标签

$(':password') 获取 type 属性值为 password 的 input 标签

$(':file') 获取 type 属性值为 file 的 input 标签

$(':disabled') 获取有 disabled 属性的 input 标签

$(':checked') 获取被选中的 input 标签（就是单选框和多选框）

【 jQuery 对象的常用方法】

$('#one').next() 获取 id 值为 one 的标签的下一个同级标签

$('#one').nextAll() 获取 id 值为 one 的标签后面所有的同级标签

$('#one').nextUntil('.c3') 获取 id 值为 one 的标签后面所有的同级标签，直到出现 class 属性值为 c3 的标签（不包括）为止

注：prev 、prevAll 、prevUntil 获取所选标签上一个同级标签、上面所有的同级标签、直到某个条件为止
注：parent 、parents 、parentsUntil 是获取所选标签的父标签、所有层级的父标签、直到某个条件为止

$('form').children() 获取 form 标签下的所有子标签，注意只是最近一层，再深层的不选

$('#d2').siblings() 获取 id 值为 d2 的标签的所有同级同名标签，例如匹配的是 a 标签，就获取所有同级 a 标签，注意这里不包含 id 值为 d2 的这个标签

【 jQuery 对象的 find 方法】

以上操作都是使用 jQuery 方法查找标签，返回值是 jQuery 对象。如果需要针对 jQuery 对象进行再次筛选，可以使用 find 方法，方法内部的字符串规则同上。

// $form 就是 jQuery 对象
var $form = $('form');    
//  调用 jQuery 对象的 find 方法，查找 form 标签内的所有 label 标签
var x = $form.find('label');   

这种写法通常是已经给定了 $form 对象，需要从中获取一些符合条件的标签。