jQuery 选择器
测试jQuery模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 引用在线jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>jQuery 选择器</title>
</head>
<body>
<!-- 将下面测试代码放在 body 里面 -->
</body>
</html>
简单选择器
元素选择器获取所有 p 元素并设置字体颜色为红色
<p>让努力成为一种习惯</p>
<script>
$("p").css("color","red")
</script>
ID选择器
ID在页面只允许出现一次
将 id 为 xiu 元素设置字体颜色为红色
<p id="xiu">让努力成为一种习惯</p>
<script>
$("#xiu").css("color","red")
</script>
class选择器
class 可以多次出现
获取所有 class 为 xiu 元素并设置字体颜色为红色
<p class="xiu">让努力成为一种习惯</p>
<script>
$(".xiu").css("color","red")
</script>
进价选择器
群组选择器同时选择两个或以上叫群组选择器，每个元素用逗号隔开
将 id 为 xiu，id为 kang 的元素设置字体颜色为红色
<p id="xiu">让努力成为一种习惯</p>
<p id="kang">让努力成为一种习惯</p>
<script>
$("#xiu,#kang").css("color","red")
</script>
后代选择器
选择元素的后代元素
将 ul 标签里面的 a 标签设置字体颜色为红色
<ul>
<li>
<a href="#">超链接</a>
</li>
</ul>
<script>
$("ul a").css("color","red")
</script>
通配选择器
选择所有元素，一般用的并不多，这种方法效率低，影响性能，建议少用
将所有元素设置字体颜色为红色
<p id="xiu">让努力成为一种习惯</p>
<p id="kang">让努力成为一种习惯</p>
<script>
$("*").css("color","red")
</script>
层次选择器
后代选择器选择元素的后代元素
将 ul 标签里面的 a 标签设置字体颜色为红色
<ul>
<li>
<a href="#">超链接</a>
</li>
</ul>
<script>
$("ul a").css("color","red")
</script>
jQuery为后代选择器提供了一个等价find()方法
将 ul 标签里面的 a 标签设置字体颜色为红色
<ul>
<li>
<a href="#">超链接</a>
</li>
</ul>
<script>
$("ul").find("a").css("color","red")
</script>
子选择器
选择元素的子元素
将 li 标签的子元素 a 标签设置字体颜色为红色
<ul>
<li>
<a href="#">超链接</a>
</li>
</ul>
<script>
$("li > a").css("color","red")
</script>
jQuery为子选择器提供了一个等价children()方法
将 li 标签的子元素 a 标签设置字体颜色为红色
<ul>
<li>
<a href="#">超链接</a>
</li>
</ul>
<script>
$("li").children("a").css("color","red")
</script>
next选择器
选择下一个同级节点
选择 id 为 xiu 的第一个同级节点 id 为 kang 的元素设置字体颜色为红色
<p id="xiu">让努力成为一种习惯</p>
<p id="kang">让努力成为一种习惯</p>
<script>
$("#xiu+#kang").css("color","red")
</script>
jQuery为next选择器提供了一个等价next()方法
选择 id 为 xiu 后面第一个同级节点 id 为 kang 的元素设置字体颜色为红色
<p id="xiu">让努力成为一种习惯</p>
<p id="kang">让努力成为一种习惯</p>
<script>
$("#xiu").next("#kang").css("color","red")
</script>
nextAll选择器
选择后面所有同级节点
选择 class 为 xiu 后面所有同级节点 class 为 kang 的元素设置字体颜色为红色
<p class="xiu">让努力成为一种习惯</p>
<p class="kang">让努力成为一种习惯</p>
<p class="kang">让努力成为一种习惯</p>
<script>
$(".xiu ~ .kang").css("color","red")
</script>
jQuery为nextAll选择器提供了一个等价nextAll()方法
选择 class 为 xiu 后面所有同级节点 class 为 kang 的元素设置字体颜色为红色
<p class="xiu">让努力成为一种习惯</p>
<p class="kang">让努力成为一种习惯</p>
<p class="kang">让努力成为一种习惯</p>
<script>
$(".xiu").nextAll(".kang").css("color","red")
</script>
属性选择器
获取属性为 href 的 DOM 对象并设置字体颜色为红色
<a href="#">超链接</a>
<script>
$("a[href]").css("color","red")
</script>
获取属性为 href 且属性值为 # 的 DOM 对象并设置字体颜色为红色
<a href="#">超链接</a>
<script>
$("a[href=#]").css("color","red")
</script>
获取属性为 href 且属性值开头为 abc 的 DOM 对象并设置字体颜色为红色
<a href="abcdef">超链接</a>
<script>
$("a[href ^= abc]").css("color","red")
</script>
获取属性为 href 且属性值开头为 abc（连接符'-'前面的） 的 DOM 对象并设置字体颜色为红色
<a href="abc-def">超链接</a>
<script>
$("a[href |= abc]").css("color","red")
</script>
获取属性为 href 且属性值结尾为 def 的 DOM 对象并设置字体颜色为红色
<a href="abcdef">超链接</a>
<script>
$("a[href $= def]").css("color","red")
</script>
获取属性为 href 且属性值不是 xx 的 DOM 对象并设置字体颜色为红色
<a href="#">超链接</a>
<script>
$("a[href != xx]").css("color","red")
</script>
获取属性为 href 且属性值为 # 的 DOM 对象并设置字体颜色为红色
<a href="#">超链接</a>
<script>
$("a[href ~= #]").css("color","red")
</script>
获取属性为 href 且属性值包含 xx 的 DOM 对象并设置字体颜色为红色
<a href="abxxcd">超链接</a>
<script>
$("a[href *= xx]").css("color","red")
</script>
获取属性为 href 和属性为 title 且值为 xx 的 DOM 对象并设置字体颜色为红色
<a href="#" title="xx">超链接</a>
<script>
$("a[href][title=xx]").css("color","red")
</script>
基本过滤器
选择第一个 p 元素并设置字体颜色为红色
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
$("p:first").css("color","red")
</script>
选择最后一个 p 元素并设置字体颜色为红色
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
$("p:last").css("color","red")
</script>
选择第3个 p 元素并设置字体颜色为红色（选择索引从0开始）
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
$("p:eq(2)").css("color","red")
</script>
选择索引小于3的所有 p 元素并设置字体颜色为红色（选择索引从0开始）
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
$("p:lt(3)").css("color","red")
</script>
选择索引大于0的所有 p 元素并设置字体颜色为红色（选择索引从0开始）
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
$("p:gt(0)").css("color","red")
</script>
选择 class 不是 xiu 的 p 元素并设置字体颜色为红色
<p class="xiu">让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
$("p:not(.xiu)").css("color","red")
</script>
选择索引为偶数的 p 元素并设置字体颜色为红色
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
$("p:even").css("color","red")
</script>
选择索引为奇数的 p 元素并设置字体颜色为红色
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
$("p:odd").css("color","red")
</script>
选择所有标题元素（h1~h6）
<h1>让努力成为一种习惯</h1>
<h3>让努力成为一种习惯</h3>
<h5>让努力成为一种习惯</h5>
<script>
$(":header").css("color","red")
</script>
将正在执行的动画背景元素设置为蓝色
<div class="xiu" style="width : 100px;height : 100px;background : red"></div>
<script>
$(".xiu").hide(10000);
$(":animated").css("background","blue")
</script>
选择当前获取焦点的文本框添加文本 "让努力成为一种习惯"
<input type="text">
<script>
// 让文本框获取焦点
$("input").focus();
$(":focus").val("让努力成为一种习惯");
</script>
内容过滤器
选择p标签的不为空元素修改文本（）
<p></p>
<p>让努力成为一种习惯</p>
<script>
$("p:parent").html("修改")
</script>
选择p标签的空元素添加文本（）
<p></p>
<p>让努力成为一种习惯</p>
<script>
$("p:empty").html("添加文本")
</script>
选择包含文本 "习惯" 的 p 元素设置字体颜色为红色
<p>让努力成为一种</p>
<script>
$("p:contains('习惯')").css("color","red")
</script>
获取子元素class为xiu的元素设置字体颜色为红色
没有效果
<a href="#"><p class="xiu">文本</p></a>
<script>
$("a:has(.xiu)").css("color","red")
</script>
可见性过滤器
选择所有不可见元素
<script>
$(":hidden")
</script>
选择所有可见元素
<script>
$(":visible")
</script>
子元素过滤器
获取第一个元素
<p>文章1</p>
<p>文章2</p>
<p>文章3</p>
<script>
$("p:first-child").css("color","red")
</script>
获取最后一个元素
获取只有一个子元素的元素
获取每个自定义子元素的元素
其他方法
略~~~~~~~~~