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

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选择器，查看更多的选择器，前端实际开发当中根据需要选择不同的方法。