jQuery——(第三章——jQuery选择器的使用)

jQuery选择器的使用

3.1 jQuery的工厂函数

jQuery的工厂函数是$。
在jQuery中，无论使用那种类型的选择符都需要从一个$符号和一对“()”开始。在“()”中通常使用字符串参数，参数中可以包含任何CSS选择符表达式。
1、在参数中使用标记名

	$("div"):用于获取文档中全部的<div>.

2、在参数中使用ID

	$("#username"):用于获取文档中ID属性值为username的一个元素。

3、在参数中使用CSS类名

	$(".btn_grey"):用于获取文档中使用CSS类名为btn_grey的所有元素。

3.2 jQuery选择器是什么

简单来说，jQuery选择器是jQuery库中非常重要的部分之一。

3.3jQuery选择器的优势

与传统的JavaScript获取页面元素和编写事物相比，jQuery选择器具有明显的优势，包括：
1、代码更简单
2、支持CSS1到CSS3选择器
3、完善的检测机制
例如使用jQuery获取网页中不存在的元素也不会报错：

		<div>测试这个页面</div>
		<script>
			alert($("#mr").val());		//无需判断$("#mr")是否存在		
		</script>

所以有了jQuery的这个防护措施，即使以后因为某种原因删除了网页上曾经使用过的元素，也不用担心网页的JavaScript代码会报错。 $("#mr")获取的是jQuery对象，.val()用来返回或设置被选元素的value属性值。

3.4 基本选择器

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

3.4.1 ID选择器(#id)

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

	$("#id");

id为要查询元素的ID属性值。
【例】在页面添加一个ID属性值为testInput的文本输入框和一个按钮，通过单击按钮来获取在文本输入框中输入的值
首先要先引入jQuery库

<script language="javascript" src="js/jquery-3.4.1.min.js"></script>

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

3.4.2 元素选择器(element)

元素选择器是根据元素名称匹配相应的元素。通俗地讲元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。通过元素选择器匹配到的元素是可能有多个的，也可能只有一个。多数情况下，元素选择器匹配的是一组元素。
元素选择器的使用方法：

	$("element");

【例】在页面中添加两个<div>标记和一个按钮，通过单击按钮来获取这两个<div>,并修改他们的内容。

		<div>这里种植了一颗草莓</div>
		<div>这里养了一条鱼</div>
		<input type="button" id="button" value="若干年后" />
		<script>
			$(document).ready(function(){
				$("#button").click(function(){				//为按钮绑定单击事件
					$("div").eq(0).html("这里长出了一片草莓");
					//获取第一个div元素
					$("div").get(1).innerHTML="这里的鱼没有了";
					//获取第二个div元素
				});
			});
		</script>

3.4.3 类名选择器(.class)

类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中可以有多个CSS类，一个CSS类又可以匹配多个元素，如果元素中有一个匹配的类的名称就可以被类名选择器选取到。
类名选择器的使用方法：

	$(".class");

【例】在页面中，首先添加两个<div>标记，并为其中的一个设置CSS类，然后通过jQuery的类名选择器选取设置了CSS类的<div>标记，并设置其CSS样式

		<div class="myClass">注意观察我的样式</div>
		<div>我的样式是默认的</div>
		<script>
			$(document).ready(function(){
				var myClass=$(".myClass");					//选取DOM元素
				myClass.css("backgound-color","#C50210");	//为选取的DOM元素设置背景颜色
				myClass.css("color","#FFF");				//为选取的DOM元素设置文字颜色
			});
		</script>