jQuery 选择器
- 在 jQuery 中选择元素，就是暴露在全局的两个函数
$div = $("div");
//或者
$div = jQuery("div");
其实就是相当于使用 js 获取的 dom 元素，但是使用 jQuery 获取到的元素，不能使用原生的 js 方法来操作，必须使用jQuery提供的方法操作。
js原生获取到的dom元素也不能使用jQuery的方法来操作。
- jquery获取元素获取到的都是伪数组 - jquery对象；jquery对象不能使用原生js操作dom元素的方法来操作，除非将jquery对象取下标拿到精准的dom元素：
$("div")[0] // 取下标
$("div").get(下标); // 下标
- 原生js的dom元素也不能使用jquery提供的方法操作，除非将dom元素转为jquery对象：
var div = document.querySelector("div");
$(div).text();
注意：在原生js中的this，在jquery中是$(this)
基础选择器
$("div") // 标签选择器
$("#div") // id选择器
$(".div") // 类名选择器
$("*") // 通配选择器
$("div1,div2") // 并集选择器
层级选择器
<ul>
<li>1</li>
<li>2
<ol>
<li>3</li>
<li>4</li>
</ol>
</li>
</ul>
<dl>
<dt>5</dt>
<dd>6</dd>
<dd>7</dd>
</dl>
ancestor descendant // 在给定的祖先元素下匹配所有的后代元素
例如：$("ul li") // 选中的是 1,2，3,4
parent > child // 在给定的父元素下匹配所有的子元素
例如：$("ul>li") // 选中的是 1,2
prev + next // 匹配所有紧接在 prev 元素后的 next 元素
例如：$("dt+dd") // 选中的是 6
prev ~ siblings // 匹配 prev 元素之后的所有 siblings 元素
例如：$("dt~dd") // 选中的是 6,7
属性选择器
<input name="abc"/> <!-- 1 -->
<input name="dbc"/> <!-- 2 -->
<input name="aca"/> <!-- 3 -->
<input type="text" name="ccc"/> <!-- 4 -->
[attribute] // 匹配包含给定属性的元素
$("[name]") // 选中的是 1,2,3
[attribute=value] // 匹配给定的属性是某个特定值的元素
$("input[name='abc']") // 选中的是 1
[attribute!=value] // 匹配所有属性不等于特定值的元素
$("input[name='abc']") // 选中的是 2,3
[attribute^=value] // 匹配给定的属性是以某些值开始的元素
$("input[name='a']") // 选中的是 1,3
[attribute$=value] // 匹配给定的属性是以某些值结尾的元素
$("input[name='c']") // 选中的是 1,2
[attribute*=value] // 匹配给定的属性是以包含某些值的元素
$("input[name='d']") // 选中的是 2
[attrSel1][attrSel2] // 复合属性选择器，需要同时满足多个条件时使用
$("input[type][name='ccc']") // 选中的是 4
伪类选择器
$("li:first-child")
$("li:last-child")
$("li:nth-child(数字)") // 第一个元素对应的是1
$("li:first-of-type");
$("li:last-of-type");
$("li:nth-of-type");
$("li:only-child")
$("li:only-of-type");
内容和可见性选择器
$("div:contains('John')") // 匹配包含给定文本的元素
$("div:empty") // 匹配所有不包含子元素或者文本的空元素
$("div:has(p)") // 匹配含有选择器所匹配的元素的元素
$("div:parent") // 匹配含有子元素或者文本的元素
$("div:hidden") // 匹配所有不可见元素，或者type为hidden的元素
$("div:visible") // 匹配所有的可见元素
表单元素选择器
$(":input") // 匹配所有的表单元素 包括：文本框（input）下拉列表(select)、文本域(textarea)
$(":text") // 匹配单行文本框type="text" $("input:text") $("input[type=text]")
$(":password") // 匹配单行密码框
$(":radio") // 匹配单选按钮
$(":checkbox") // 匹配多选按钮
$(":submit") // 匹配提交按钮
$(":reset") // 匹配重置按钮
$(":image") // 匹配图片按钮
$(":button") // 匹配普通按钮
$(":file") // 匹配文件上传
表单对象选择器
$("input:enabled") // 所有可用表单元素
$("input:disbaled") // 所有禁用表单元素
$("input：checked") // 所有选中的表单元素
$("select:selected") // 被选中的下拉框元素
jQuery 筛选器
基础筛选器
$("li:first") // 找到所有 li 中的第一个
$("li:last") // 找到所有 li 中的最后一个
$("li:event") // 找到所有 li 中索引为 偶数 的
$("li:odd") // 找到所有 li 中索引为 奇数 的
$("li:eq(数字)") // 选择下标是指定数字的元素
$("li:lt(数字)") // 下标小于指定数字的元素
$("li:gt(数字)") // 下标大于指定数字的元素
$(":header") // 匹配如 h1, h2, h3之类的标题元素
$(":focus") // 匹配当前获取焦点的元素。
$(":root") // 选择该文档的根元素<html>
筛选器方法
$("div").eq(数字) // 指定下标的div元素，0开头
$("li").first() // 第一个元素
$("li").last() // 最后一个元素
$("div").next() // div的下一个兄弟元素
$("div").prev() // div的上一个兄弟元素
$("div").nextAll() // div后面的所有兄弟元素
$("div").prevAll() // div前面的所有兄弟元素
$("div").parent() // div的父元素
$("div").parents() // div的所有祖先元素
$("div").siblings() // div的所有兄弟元素
$("div").children([expr]) // div所有的子元素
$("div").find(选择器) // div下的指定元素
$("div").slice(start, [end]) // 选取一个匹配的子集
合。