jQuery基础选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

 

 

 

 代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基础选择器</title>
    </head>
    <body>
        <div id="mydiv1">
            id选择器1
            <span>span中的内容</span>
        </div>
        <div id="mydiv1" class="blue">
            元素选择器
        </div>
        <span class="blue">样式选择器</span>
    </body>
    <!-- 
     基础选择器
        id选择器            #id属性值                $("#ID属性值")                选择id为指定值的元素对象（如果有多个同名id，则以第一个为准)
        类选择器            .class属性值                $(".class属性值")            选择class为指定值的元素对象
        元素选择器        标签名\元素名            $("标签名\元素名")            选择所有指定标签的元素对象
        
        通用选择器            *                    $("*")                        选择页面中所有的元素对象
        组合选择器        选择器1，选择器2，...        $("选择器1，选择器2，...    ")    选择指定选择器选中的元素对象
     -->
     <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript">
         //id选择器        #id属性值
        var mydiv = $("#mydiv1");
        console.log(mydiv);
        
        //类选择器        .class属性值
        var clas = $(".blue");
        console.log(clas)
        
        //元素选择器        标签名\元素名
        var spans = $("span")
        console.log(spans);
        
        //通用选择器            *
        var all =$("*")
        console.log(all);
        
        //组合选择器        选择器1，选择器2，...    
        var group = $("#mydiv1,div,.blue")
        console.log(group);
      </script>
</html>

 

posted @ 2022-04-17 13:41  今天穿秋裤了吗  阅读(31)  评论(0)    收藏  举报