基本选择器在实际应用中比较广泛,建议重点掌握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>
四 运行效果
![](https://i-blog.csdnimg.cn/blog_migrate/dfb75c93b169e090ff9cd9064cbc08f5.png)
五 运行说明
1、在上面的代码中,使用了jQuery中的属性选择器匹配文档中的按钮,并且为按钮绑定单击事件。
2、ID选择器是以“#id”的形式获取对象的,在这段代码中用$("#testInput")获取了一个id属性值为testInput的jQuery包装集,然后调用包装集的val()方法取得文本输入框的值。