jQuery的ID选择器

基本选择器在实际应用中比较广泛，建议重点掌握jQuery的基本选择器，它是其他类型选择器的基础，基础选择器是jQuery选择器中最为重要的部分。

jQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。本篇介绍ID选择器。

一 ID选择器（#id）

ID选择器#id顾名思义就是利用DOM元素的id属性值来筛选匹配的元素，并以jQuery包装集的形式返回给对象。

这就像一个学校中每个学生都有自己的学号一样，学生的姓名是可以重复的但是学号却是不可以的，根据学生的学号就可以获取指定学生的信息。

ID选择器的使用方法如下：

$("#id");

其中，id为要查询元素的ID属性值。

例如，要查询ID属性值为user的元素，可以使用下面的jQuery代码： 

$("#user");

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

二 应用

在页面中添加一个ID属性值为testInput的文本输入框和一个按钮，通过单击按钮来获取在文本输入框中输入的值。

三 代码

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<input type="text" id="testInput" name="test" value=""/>
<input type="button" value="输入的值为"/>
<script type="text/javascript">
$(document).ready(
	function()
	{
		$("input[type='button']").click(
			function()	//为按钮绑定单击事件
			{                   
				var inputValue = $("#testInput").val();               //获取文本输入框的值
		        alert(inputValue);
		    }
	    );
	}
);
</script>

 

四 运行效果

 

五 运行说明

1、在上面的代码中，使用了jQuery中的属性选择器匹配文档中的按钮，并且为按钮绑定单击事件。

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