JQuery Selectors

最新推荐文章于 2022-04-29 14:19:38 发布

最新推荐文章于 2022-04-29 14:19:38 发布 · 258 阅读

jquery 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了JQuery中各种选择器的使用方法，包括基本选择器、层级选择器、基本过滤选择器及内容过滤选择器等。通过实例展示了如何利用这些选择器高效地选取页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果你的基础扎实，那么你将爬的更高，能接触到的东西更加深

Basics

${'tag'} 标签选择器
${'#id'} id选择器
${'.class'} 类选择器
${'.class,#id,tag'} 或选择器
${'*'} 全部选择器

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>JQuery Selectors</title>
    </head>

    <body>
        <div>JQuery Selectors</div>
        <div class="lei"> JQuery Selectors</div>
        <p id="test">JQuery Selectors</p>
        <button>Click me</button>
        <script src="js/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('button').on('click', function() {
                    //tag选择器
                    //                  $('div').css('backgroundColor', 'yellow');
                    //id选择器
                    //                  $('#test').css('background', 'yellow');
                    //类选择器
                    //                  $('.lei').css('background-color', 'red');
                    //或选择器
                    //                  $('.test,#test,div').css('background-color','blue');
                    //全部选择器
                    //                  $('*').css('background-color','yellow');

                })
            });
        </script>
    </body>

</html>

Hierarchy

${'div code'} div下的code(不关心是否直系子元素)
${'li > ul'} 直系子元素
${'strong + em'} 兄弟选择器(只选中下一个(next))
${'strong ~ em'} 兄弟选择器(选中后面全部(nextAll))

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>JQuery Selectors</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>

    <body>
        <div class="test">test</div>
        <div class="aa">
            <div class="list">
                <div class="test" id="first">1</div>
                <div class="even">2</div>
                <div>3</div>
                <div class="even">4</div>
                <div>5</div>
            </div>
        </div>
        <button>Click Me</button>
    </body>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('button').on('click', function() {
                //全部class为test都设置成yellow
                //              $('.test').css('background-color','yellow');
                //只有div下class为test(不关心是否为直接子元素)的设置成yellow
                //              $('.aa .test').css('background-color', 'yellow');
                //子元素选择器
                //              $('.list > .test').css('background-color', 'yellow');
                //因为不是直接子元素 ,不会起到任何作用
                //              $('.aa > .test').css('background-color', 'yellow');
                //只有2被设置为yellow
                //              $('#first + div').css('background-color','yellow');
                //2到5全部设置成黄色
                //              $('#first ~ div').css('background-color','yellow');

            });
        })
    </script>

</html>

Basic Filters

$('li:first') 第一个li
$('li:last') 最后一个li
$('li:not(ul li)') 不是ul 下的li
$('li:even') 选中li index为偶数
$('li:odd') 选中li index为奇数
$('li:eq(4)') 选中li index为4
$('li:gt(4)')选中li index大于4
$('li:lt(4)')选中li index大于4

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <li>Test</li>
        <button>Click Me</button>
    </body>
    <script src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('button').on('click', function() {
                //              $('li:first').css('background-color','yellow');
                //              $('li:last').css('background-color','yellow');
                //      $('li:not(ul li)').css("background-color",'yellow');
                //          $('li:even').css("background-color",'yellow');
                //              $('li:odd').css("background-color",'yellow');
//              $('li:eq(4)').css("background-color", 'yellow');
//                  $('li:gt(4)').css("background-color", 'yellow');
//                  $('li:lt(4)').css('background-color','yellow');
            });
        })
    </script>

</html>

Content Filters

$(li:contians(second-level)) 检查子元素是否包含选择内容
$(':empty') 内容为空
$('div:has(span)') 是否用span标签
$('div:parent')内容不为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div>Hello World</div>
<div>Rc</div>
<div>LRc</div>
<div>User
    <div><p>Rc</p></div>
</div>
<div>
    <span>Hello</span>
</div>
<div style="height: 50px;width: 50px;background-color: red"></div>
<button>Click Me</button>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('button').on('click', function () {
            //包含，div User Rc LRc被选中
//            $('div:contains(Rc)').css('backgroundColor', 'yellow');
            //内容是否为空
//            $('div:empty').css('backgroundColor', 'yellow');
            //span heloo被选中
//            $('div:has(span)').css('backgroundColor', 'yellow');
            //div:parent 和div :empty的作用是相反的，内容不为空
//            $('div:parent').css('backgroundColor', 'yellow');
        })
    })
</script>
</body>
</html>