首页 > 编程笔记 > JavaScript笔记 阅读：2

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

ID 选择器（#id）顾名思义就是利用 DOM 元素的 id 属性值来筛选匹配的元素，并以 jQuery 包装集的形式返回给对象。这就好似在学校中每个学生都有自己的学号一样，学生的姓名是可以重复的，但是学号是不能重复的，因此根据学号就可以获取指定学生的信息。

ID 选择器的使用方法如下： 
$("#id");
其中，id 为要查询元素的 id 属性值。

例如，要查询 id 属性值为 user 的元素，可以使用下面的 jQuery 代码： 
$("#user");

等效的 JavaScript 代码为： 
document.getElementById("user");

注意，如果在页面中出现了两个相同的 id 属性值，程序运行时页面会弹出 JavaScript 运行错误的对话框，所以在页面中设置 id 属性值时要确保该 id 属性值在页面中是唯一的。

【实例 1】在页面中添加一个 id 属性值为 testInput 的文本输入框和一个按钮，通过单击按钮来获取在文本输入框中输入的值。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。 
<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，添加一个 id 属性值为 testInput 的文本输入框和一个按钮，代码如下： 
<input type="text" id="testInput" name="test" value=""/>
<input type="button" value="输入的值"/>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现单击按钮来获取在文本输入框中输入的值，具体代码如下： 
<script type="text/javascript">
$(document).ready(function(){
    $("input[type='button']").click(function(){  // 为按钮绑定 click 事件
        var inputValue = $("#testInput").val();  // 获取在文本输入框中输入的值
        alert(inputValue);
    });
});
</script>
在上面的代码中，第 3 行使用了 jQuery 的属性选择器匹配页面中的按钮，并为按钮绑定 click 事件。

ID 选择器是以“#id”的形式来获取对象的，在以上代码中用 $("#testInput") 获取了一个 id 属性值为 testInput 的 jQuery 包装集，然后调用包装集的 val() 方法获取在文本输入框中输入的值。

在浏览器中运行本实例，在文本输入框中输入“天生我材必有用”，如下图所示：


图 1 在文本输入框中输入文字

单击“输入的值为”按钮，将弹出提示对话框显示输入的值，如下图所示：


图 2 弹出的提示对话框

jQuery 的 ID 选择器相当于传统的 JavaScript 中的 document.getElementById() 方法，jQuery 用更简洁的代码实现了相同的功能。虽然两者都获取了指定的对象，但是两者调用的方法是不同的。使用 JavaScript 获取的对象是 DOM 对象，而使用 jQuery 获取的对象是 jQuery 对象，这点要尤为注意。

相关文章