Jquery选择器1

偏执的太偏执、 2022-05-16 03:41 147阅读 0赞

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。具体方法见下面代码，

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery选择器1</title>
    </head>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            // 选择#box中所有的p标签
            $("#box p").css({'color':'red', 'font-size':'23px'});
            // 选择#box中所有的儿子辈的p标签
            $("#box>p").css({'color':'red', 'font-size':'23px'});
            // 选择紧邻在.one后面的一个p标签
            $(".one+p").css({'color':'red', 'font-size':'23px'});
            // 选择.one后面的所有同级p标签
            $(".one ~p").css({'color':'red', 'font-size':'23px'});
    
            // 基本筛选器
            // 选择的是#box里的第一个p标签
            $("#box p:first").css({'color':'red', 'font-size':'23px'});
            // 选择的是#box里的最后一个p标签
            $("#box p:last").css({'color':'orange','font-size':'21px'});
            // 选择#box里所有的p标签，排除class是one的那个标签
            $("#box p:not(.one)").css({'color':'orange','font-size':'21px'});
            // 选择#box里所有序号是偶数的p标签
            $("#box p:even").css({'color':'orange','font-size':'21px'});
            // 选择#box里所有序号是奇数的p标签
            $("#box p:odd").css({'color':'orange','font-size':'21px'});
            // 选择#box里序号是3的p标签
            $("#box p:eq(3)").css({'color':'orange','font-size':'21px'});
            // 选择#box里序号大于3的p标签
            $("#box p:gt(3)").css({'color':'orange','font-size':'21px'});
            // 选择#box里序号小于3的p标签
            $("#box p:lt(3)").css({'color':'orange','font-size':'21px'});
            // 选择#box里内容包含“做”字样的p标签
            $("#box p:contains(做)").css({'color':'orange','font-size':'21px'});
           // 选择空标签
            $("#box p:empty").css({'width':'30px','height':'10px','backgroundColor':'orange'});
           //  选择非空标签
            $("#box p:parent").css({'color':'orange','font-size':'21px'});
           //  选择#box里包含span标签的p标签 
            $("#box p:has(span)").css({'color':'orange','font-size':'21px'});
        })
    </script>
    <body>
    <div id="box">
        <p>后盾人</p>
        <p class="one">后盾人</p>
        <p>后盾人<span>我是span</span></p>
        <p>后盾人<span>我是span</span></p>
        <p>后盾人</p>
        <p></p>
        <p></p>
    <div>
        <p>人人做后盾</p>
        <p>人人做后盾</p>
        <p>人人做后盾</p>
    </div>
    </div>
    </body>
    </html>