jQuery 选择器

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>

获取最后一个元素

获取只有一个子元素的元素

获取每个自定义子元素的元素

其他方法

略~~~~~~~~~

posted @ 2018-02-02 13:12 黄强小菜鸟阅读(592) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

黄强

让努力成为一种习惯

jQuery 选择器

公告