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