jQuery 选择器

最新推荐文章于 2023-04-17 20:40:29 发布

山有扶苏..

最新推荐文章于 2023-04-17 20:40:29 发布

阅读量135

点赞数 1

文章标签： javascript 前端 html jquery

本文链接：https://blog.csdn.net/luobifeiyeshi0/article/details/130205813

版权

本文介绍了jQuery中的各种选择器，包括基本选择器（ID选择器、类选择器、标签选择器和并集、交集选择器）、层级选择器（子代和后代选择器）以及过滤和筛选选择器（如:eq、:odd、:even、children、find等），并提供了相应的HTML代码和JavaScript操作示例，帮助读者理解和应用jQuery选择器进行DOM操作。

摘要由CSDN通过智能技术生成

jQuery选择器

如何使用jQuery? 直接引用：

 <script src="./js/jquery-3.4.1.min.js"></script>

jQuery选择器：基本选择器、层级选择器、过滤选择器、筛选选择器（方法）

一、基本选择器

HTML部分代码

<body>
    <div id="box">ID盒子</div>
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">c</div>
    <div class="box">d</div>
    <p id="box_1">e</p>
    <div id="box_1">f</div>
    <ul id="ulList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li id="liList">6</li>
        <li>7</li>
        <li>8</li>
        <p>9</p>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </ul>
</body>

1.ID选择器

// 1.ID选择器
    console.log($('#box').css('color', 'red'));

2.类选择器

// 2.类选择器
    console.log($('.box').css('color', 'blue'));

3.标签选择器

// 3.标签选择器
    console.log($('div'));

4.并集选择器

// 4.并集选择器
    console.log($('#box,p'));

5.交集选择器

// 5.交集选择器
    console.log($('p#box_1').css('color', 'yellow'));

二、层级选择器

1.子代选择器

 // 1.子代选择器
    console.log($('#ulList>li').css('color', 'red'));

2.后代选择器

// 2.后代选择器
    console.log($('#ulList li').css('background-color', 'yellow'));

三、过滤选择器

1.:eq（index）

:eq（index）从获取到的元素中，选择索引号为‘index’的元素，索引号index从0开始。

 // 1.:eq ()
    console.log($('li:eq(1)').css('color', 'blue'));

2.:odd

:odd 从获取到的元素中，选择索引号为奇数的元素

// 2.:odd
    console.log($('li:odd'));

3.:even

:even 获取到的元素中，选择索引号为偶数的元素

// 3.:even
    console.log($('li:even'));

四、筛选选择器（多选）

1.children()

children() 相当于$(“ul>li”)，子类选择器，没有参数就获取所有子代

 // 1.children()
    console.log($('#ulList').children().css('font-size', '20px'));

2.find()

find() 相当于$(“ul li”),后代选择器，必须加参数

// 2.find()
    console.log($('#ulList').find('li'));

3.siblings()

siblings() 查找兄弟节点，不包括自己本身。

 // 3.siblings()
    console.log($('#liList').siblings());

4.parent()

parent() 查找父亲
parents() 查找祖先

 // 4.parent()  parents()
    console.log($('#liList').parent());
    console.log($('#liList').parents());

5.eq()

eq() 相当于$(“li:eq(1)”),index从0开始

// 5.eq()
    console.log($('li').eq(1));

6.next()

next() 找下一个兄弟
nextAll() 找下面所有兄弟

// 6.next()   nextAll()
    console.log($('#liList').next());
    console.log($('#liList').nextAll());

7.prev()

prev() 找上一个兄弟
prevAll() 找上面所有兄弟

 // 7.prev()   prevAll()
    console.log($('#liList').prev());
    console.log($('#liList').prevAll());

8.index()

index() 获取当前的位置（索引）

// 8.index()
    console.log($('#liList').index());

9.not()

not() 返回不带有

标签的所有$(‘#liList’)下面所有兄弟元素

// 9.not()
    console.log($('#liList').nextAll().not('p'));