测试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>
获取最后一个元素
获取只有一个子元素的元素
获取每个自定义子元素的元素
其他方法
略~~~~~~~~~