JQuery（3）

最新推荐文章于 2023-07-11 14:31:34 发布

源源睡不着

最新推荐文章于 2023-07-11 14:31:34 发布

阅读量81

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/WJY898989/article/details/127378759

版权

1.基础选择器（img\基础选择器.png）

描述，名称，用法

ID选择器，$("#id")，获取指定ID的元素

全选选择器，$('*')，匹配所有元素

类选择器$，(".class")，获取同一类class的元素

标签选择器，$("div")，获取同一类标签的所有元素

并集选择器，$("div,p,li")，选取多个元素

交集选择器，$("li.current")，交集元素

层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器。

名称，用法，描述

子代选择器，s("ul>li")，使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素

后代选择器，$("ul li")，使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等


<title></title>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            
            $(function(){
                var a1 =$("#d1")//JQ的ID选择器获取元素
                console.log(a1)
                var a2 =$(".d2")//JQ的class选择器获取元素
                console.log(a2)
                var a3 =$("p")//JQ的元素选择器获取元素
                console.log(a3)
                var a4 =$("ul li")//JQ的层级选择器获取元素
                console.log(a4)
                console.log(a4.text())
                var a5 =$("ul>li")
                console.log(a5)
                console.log(a5.text())    
            })
            
        </script>
    </head>
    <body>
        <h2>JQuery选择器</h2>
        <div id="d1">id选择器</div>
        <div class="d2">class选择器</div>
        <p>标签选择器</p>
        
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <ol>
                <li>5.1</li>
                <li>5.2</li>
            </ol>
        </ul>
    </body>