jQuery 选择器

Posted 孔辉

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 选择器相关的知识，希望对你有一定的参考价值。

JQuery选择器

　　作用: 选中DOM

　　注意: 获取的是JQuery对象,哪怕是一个元素,jquery对象 也会有属性(length: 1, 0: jsDom对象)和方法

 

一.基础选择器:

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>

    </script>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script src="jQku/jquery-3.3.1.js"></script>
    <script>
        //入口函数
        $(function(){
            //三种方式获取jquery对象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $(\'div\');

            //操作标签选择器
            jqBox3.css(\'width\', \'100\');
            jqBox3.css(\'height\', 100);
            jqBox3.css(\'background-color\', \'red\');
            jqBox3.css(\'margin-top\', 10);


            //操作类选择器(隐式迭代，不用一个一个设置)
                    jqBox2.css("background", "green");
                    jqBox2.text(\'哈哈哈\')

                    //操作id选择器
                    jqBox1.css("background", "yellow");
                   
        })

    </script>

</body>
</html>
代码实例

 

二.层级选择器

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //获取ul中的li设置为粉色
            //后代：儿孙重孙曾孙玄孙....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：亲儿子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>
代码实例


三.基本过滤选择器

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈，基本过滤选择器</li>
            <li>嘿嘿嘿</li>
            <li>天王盖地虎</li>
            <li>小鸡炖蘑菇</li>
            
        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //获取第一个 :first ,获取最后一个 :last
            
            //奇数
            $(\'li:odd\').css(\'color\',\'red\');
            //偶数
            $(\'li:even\').css(\'color\',\'green\');
            
            //选中索引值为1的元素 *
            $(\'li:eq(1)\').css(\'font-size\',\'30px\');
            
            //大于索引值1
            $(\'li:gt(1)\').css(\'font-size\',\'50px\');
            
            //小于索引值1
            $(\'li:lt(1)\').css(\'font-size\',\'12px\');
            
            
            
            
        })
        
        
    </script>
</html>
代码实例

四.属性选择器

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <h2 class="title">属性元素器</h2>
            <!--<p class="p1">我是一个段落</p>-->
            <ul>
                <li id="li1">分手应该体面</li>
                <li class="what" id="li2">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type=\'text\' value="1" checked="checked" />
                <input name="username1111" type=\'text\' value="1" />
                <input name="username2222" type=\'text\' value="1" />
                <input name="username3333" type=\'text\' value="1" />
                <button class="btn-default">按钮1</button>
                <button class="btn-info">按钮1</button>
                <button class="btn-success">按钮1</button>
                <button class="btn-danger">按钮1</button>


            </form>
        </div>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //标签名[属性名] 查找所有含有id属性的该标签名的元素
            $(\'li[id]\').css(\'color\',\'red\');
            
            //匹配给定的属性是what值得元素
            $(\'li[class=what]\').css(\'font-size\',\'30px\');
            //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
            $(\'li[class!=what]\').css(\'font-size\',\'50px\');
            
            //匹配给定的属性是以某些值开始的元素
            $(\'input[name^=username]\').css(\'background\',\'gray\');
            //匹配给定的属性是以某些值结尾的元素
            $(\'input[name$=222]\').css(\'background\',\'greenyellow\');
            
            //匹配给定的属性是以包含某些值的元素
            $(\'button[class*=btn]\').css(\'background\',\'red\')
        
            
        })
    
    </script>
</html>
代码实例


五.筛选选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <p class="p1">
                <span>我是第一个span标签</span>
                <span>我是第二个span标签</span>
                <span>我是第三个span标签</span>
            </p>
            <button>按钮</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        //获取第n个元素 数值从0开始
        $(\'span\').eq(1).css(\'color\',\'#FF0000\');
        
        //获取第一个元素 :first :last    点语法  ：get方法 和set方法
        $(\'span\').last().css(\'color\',\'greenyellow\');
        $(\'span\').first().css(\'color\',\'greenyellow\');
        
        //查找span标签的父元素（亲的）
        $(\'span\').parent(\'.p1\').css({"width":\'200px\',\'height\':\'200px\',"background":\'red\'});
        
        //选择所有的兄弟元素（不包括自己）
                  $(\'.list\').siblings(\'li\').css(\'color\',\'red\');

                  
                //查找所有的后代元素
                   $(\'div\').find(\'button\').css(\'background\',\'yellow\');

                
                //不写参数代表获取所有子元素。
                   $(\'ul\').children().css("background", "green");
                   $(\'ul\').children("li").css("margin-top", 10);
                   

        
        
    </script>
</html>
代码实例

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            display: none;
        }
        div.active{
            display: block;
        }
    </style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <div class="active">
        1
    </div>
    <div>
        2
    </div>
    <div>
        3
    </div>
    <div>
        4
    </div>
    <div>
        5
    </div>

    <script src="./libs/jquery-3.3.1.js"></script>
    <script>
        $(function () {

            $(\'button\').click(function () {
                console.log( $(this).css(\'backgroundColor\',\'red\'));
                //获取索引

                let i = $(this).index()
                
                //返回了jquery对象
                //链式编程
                $(this).css(\'backgroundColor\',\'red\').siblings(\'button\').css(\'backgroundColor\',\'#666\');
                $(\'div\').eq(i).addClass(\'active\').siblings(\'div\').removeClass(\'active\');
            })
        })
    </script>
</body>
</html>
siblings过滤的方法

 

以上是关于jQuery 选择器的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS选择器

jQ选择器学习片段（JavaScript 部分对应）

VSCode自定义代码片段6——CSS选择器

JQuery02

Android - 片段中的联系人选择器

jQuery 核心函数