jQuery元素选择器的用法（附带实例）

元素选择器（element）根据元素名称匹配相应的元素。通俗地讲，元素选择器指向的是 DOM 元素的标记名，也就是说元素选择器是根据元素的标记名来匹配相应元素的。

可以把元素的标记名理解成学生的姓名，在一所学校中可能有多个姓名为“刘伟”的学生，但是姓名为“吴语”的学生也许只有一个，因此通过元素选择器匹配的元素可能有多个，也可能只有一个。多数情况下，元素选择器匹配的是一组元素。

元素选择器的使用方法如下：

$("element");

其中，element 是要获取的元素的标记名。

例如，要获取全部标记名为 div 的元素，可以使用下面的 jQuery 代码：

$("div");

等效的 JavaScript 代码为：

getElementsByTagName("div");

【实例】在页面中添加两个 <div> 标记和一个按钮，通过单击按钮来获取这两个 <div> ，并修改它们的内容。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，添加两个 <div> 标记和一个按钮，代码如下：

<div><img src="images/strawberry.jpg">这里种植了一棵草莓</div>
<div><img src="images/fish.jpg">这里养了一条鱼</div>
<input type="button" id="button" value="若干年后" />

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现通过单击按钮来获取全部 <div> 元素，并修改它们的内容，具体代码如下：

<script type="text/javascript">
$(document).ready(function(){
    $("#button").click(function(){  // 为按钮绑定 click 事件
        $("div").eq(0).html("<img src='images/strawberry1.jpg'/>这里长出了一片草莓");
        // 获取第一个div元素
        $("div").get(1).innerHTML="<img src='images/fish1.jpg'/>这里的鱼没有了";
        // 获取第二个div元素
    });
});
</script>

在上面的代码中，使用元素选择器获取了一组 <div> 元素的 jQuery 包装集，它是一组 Object 对象，存储方式为 [Object Object]，但是这种方式并不能显示出单独元素的文本信息，需要通过索引器来确定要选取哪个 <div> 元素，在这里分别使用了两个不同的索引器 eq() 和 get()。这里的索引器类似于房间的门牌号，不同的是，门牌号是从 1 开始计数的，而索引器是从 0 开始计数的。

在本实例中使用了两种方法设置元素的文本内容，html() 方法是 jQuery 对象的方法，innerHTML 方法是 DOM 对象的方法。这里使用了 $(document).ready() 方法，当页面元素载入就绪时就会自动执行程序，自动为按钮绑定 click 事件。

注意，eq() 方法返回的是一个 jQuery 包装集，所以它只能调用 jQuery 对象的方法，而 get() 方法返回的是一个 DOM 对象，所以它只能调用 DOM 对象的方法。eq() 方法与 get() 方法默认都是从 0 开始计数的。

在浏览器中运行本实例，显示下图所示的页面：

图 1 单击按钮前

单击“若干年后”按钮，将显示下图所示的页面：

图 2 单击按钮后

jQuery元素选择器的用法（附带实例）

相关文章