jQuery - 元素选择器 和 #id 选择器 以及 .class 选择器三者的区别

2021年9月18日 27点热度 0条评论 来源: 爱勤海之旅

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作,jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头:$()

1、元素选择器

jQuery 元素选择器基于元素名选取元素,这个选择返回针对的是相同元素名的标签,所有相同元素名的标签都会被选中,$("p")

2、 .class 选择器

jQuery 类选择器可以通过指定的 class 查找元素,这种方式选择针对的是所有类名相同的元素,$(".test") 。如果是$("p.test") 这种方法就说明是针对 p 元素范围里面的类相同的元素会被选中(范围缩小了)。

3、#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素,页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器,$("#test")

下面举个例子:

.html 文件

        <p id="1" class="test"></p>
        <p id="1" class="test"></p>
        <p id="1" class="test1"></p>

        <h2 id="1" class="test"></h2>

        <script> // 下面三种方法都可以调用js函数,2、3 方法是 jQuery 方法调用方式 // 1. jqueryTest(); // 2. $(document).ready(jqueryTest); $(jqueryTest); </script>

.js 文件

function jqueryTest() {  
    // #id 选择器
     $("#1").html("哈哈");

    // .class 选择器
    // $(".test").html("哈哈");

    // 元素选择器
    //$("p").html("哈哈");
}

当采用 #id选择器 时,只有第一段落有文字,说明该方法使用要求元素的 id 必须要有唯一性,不然可能达不到你想要的结果!
当采用 .class选择器 时,1、2 段落和 h2 都有文字,说明不同的元素,只要类相同就会被选中。
当采用 元素选择器 选择器时,所有的 p 标签都会有文字,但是 h2 没有文字,说明只要元素名相同就会被选中,其他的元素名不会被选中。

这里只是介绍了三种常见的jQuery选择器,查看更多的选择器,前端实际开发当中根据需要选择不同的方法。

    原文作者:爱勤海之旅
    原文地址: https://blog.csdn.net/SSY_1992/article/details/79470698
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。