jQuery常见选择器

最新推荐文章于 2023-03-23 09:18:28 发布

Kiki_CC

最新推荐文章于 2023-03-23 09:18:28 发布

阅读量85

点赞数

分类专栏： jQuery 文章标签：选择器

本文链接：https://blog.csdn.net/qq_36785832/article/details/82284776

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<body>
    <div class="container">
        <div class="d1">
            <span class="s s1">
                <p class="p3"></p>
            </span>
            <p class="p1">

            </p>
        </div>
        <div class="d2">
            <span class="s s2"></span>
        </div>
        <div class="d3">
            <span class="s s3"></span>
        </div>
        <p class="p2"></p>
    </div>
    <div class="container2">
        <ul>
            <li class="l1">1</li>
            <li class="l2">2</li>
            <li class="l3">3</li>
            <li class="l4">4</li>
            <li class="l5">5</li>
        </ul>
    </div>
</body>

（以后是html中各个标签的布局）

选出类名为同时为s和s1的标签，注意两个类名之间没有逗号以及空格
$(".s.s1");

选出类名为s1或s2的标签，注意两个类名键用逗号隔开
$(".s1,.s2");

选出第一个li标签（l1）
$("li:first");

选出最后一个li标签（l5）
$("li:last");

选出奇数行的li标签(l1、l2、l3)
$("li:even");

选出偶数行的li标签
$("li:odd");

d2后面的第一个div兄弟标签（d2）
$(".d2 + div");

d2后面的第一个div兄弟标签
$(".d2 ~ div");

选出d1的所有孩子（父子）（s1和p1）；
$(".d1").children();

选出d1的孩子（父子）中全部p标签（p1）
$(".d1").children("p");

选出d1的孩子（父子孙……）中全部p标签（p1和p3）
$(".d1").find("p");

选出d1的孩子（父子孙……）中全部p标签（p1和p3）
$(".d1 p");

d1的所有兄弟（d2、d3、p2）
$(".d1").siblings();

d1兄弟中的p标签（p2）
$(".d1").siblings("p");

d1后面的第一个兄弟（d2）
$(".d1").next();

d2后面的全部兄弟（d3、p2）
$(".d2").nextAll();

d3前面的第一个兄弟（d2）
$(".d3").prev();

d3前面的全部兄弟（d2、d1）
$(".d3").prevAll();

d2的父亲（父子）（container）
$(".d1").parent();

d2的祖先（container、body、html）
$(".d1").parents();

Kiki_CC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery常见选择器

&lt;body&gt; &lt;div class="container"&gt; &lt;div class="d1"&gt; &lt;span class="s s1"&gt; &lt;p class="p3"&gt;&lt;/p&gt;
复制链接

扫一扫