jQuery筛选器

最新推荐文章于 2024-07-04 09:58:07 发布

不甘_

最新推荐文章于 2024-07-04 09:58:07 发布

阅读量1k

点赞数

分类专栏： jQuery笔记 # JS笔记笔记文章标签： jquery javascript css

本文链接：https://blog.csdn.net/qq_57731353/article/details/122970256

版权

笔记同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

JS笔记

35 篇文章 0 订阅

订阅专栏

jQuery笔记

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选选择器</title>
    <script src="js/jquery3.6.0.js"></script>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: gray;
        }
    </style>
</head>
<body>
<div></div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

<script>
    //jquery 筛选选择器
    //语法                    用法                     描述
    //:first                $("li:first")               获取第一个li元素
    //:last                 $("li:last")                获取最后一个li元素
    //eq(index)             $("li:eq(2)")               获取到的li元素中，选择索引号index从0开始
    //:odd                  $("li:odd")                 获取到的li元素中，选择索引号是奇数的元素
    //:even                 $("li:even")                获取到的l元素中，选择索引号是偶数的元素

    //parent()              $("li").parent()            查找父级
    //children(selector)    $("ul").children("li")      相当于$('ul>li'),最近一级，查找子级
    //find(selector)        $("ul").find("li")          相当于$('ul li') 后代选择器
    //siblings(selector)    $(".first').siblings("li")  查找兄弟节点，但不包括自己
    //nextAll([expr])       $(".first').nextAll()       c查找当前元素之后的所有同辈元素
    //prevAll([expr])       $(".first').prevAll()       c查找当前元素之前的所有同辈元素
    //hasClass(class)       $('div').hasClass('protected')  检查当前元素是否含有某个特定的类，如果有则返回true
    //eq(index)             $("li").eq(2)               相当于$('li.eq(2)'),index从0开始

    $(function () {
        $('ul li:first').css('color', 'red')
        $('ul li:last').css('color', 'red')
        $('ul li:eq(2)').css('color', 'blue')
        $('ol li:odd').css('color', 'orange')
        $('ol li:even').css('color', 'brown')
    })
</script>

</body>
</html>

 //jquery 筛选选择器
    //语法                    用法                     描述
    //:first                $("li:first")               获取第一个li元素
    //:last                 $("li:last")                获取最后一个li元素
    //eq(index)             $("li:eq(2)")               获取到的li元素中，选择索引号index从0开始
    //:odd                  $("li:odd")                 获取到的li元素中，选择索引号是奇数的元素
    //:even                 $("li:even")                获取到的l元素中，选择索引号是偶数的元素

    //parent()              $("li").parent()            查找父级
    //children(selector)    $("ul").children("li")      相当于$('ul>li'),最近一级，查找子级
    //find(selector)        $("ul").find("li")          相当于$('ul li') 后代选择器
    //siblings(selector)    $(".first').siblings("li")  查找兄弟节点，但不包括自己
    //nextAll([expr])       $(".first').nextAll()       c查找当前元素之后的所有同辈元素
    //prevAll([expr])       $(".first').prevAll()       c查找当前元素之前的所有同辈元素
    //hasClass(class)       $('div').hasClass('protected')  检查当前元素是否含有某个特定的类，如果有则返回true
    //eq(index)             $("li").eq(2)               相当于$('li.eq(2)'),index从0开始