jQuery常用选择器

1. 选择器

jQuery其实就是对网页进行操作的,要进行操作总得有个操作对象,jQuery就是通过选择器选择操作对象的。

jQuery选择器其实就是jQuery(rule)方法,该方法通过指定选择规则rule,返回选定的对象。例如jQuery("div")表示选择网页中的div元素。

因为选择器太常用了,所以提供了$操作符代替jQuery$("div")明显简洁明了多了。(PS:其实就相当于+代替了add()函数)。

2. 选择器用法示例

演示下最基本的几种用法,只要记住jQuery的选择器基本能满足所有选择需求就是了,具体怎么选择可以去查查手册,记住最常用的就行:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.min.js"></script>
<title></title>
</head>
<body>
	<!-- 用法1,按id选择元素,只会匹配到1个元素 -->
	<div id="id1"></div>
	<script>$("#id1").html("hello my id1")</script>
	<!-- 用法2,按元素名称选择元素,会匹配到所有该名称的元素 -->
	<span id="span1"></span>
	<span id="span2"></span>
	<script>$("span").html("hello span elements")</script>
	<!-- 用法3,匹配class名称 -->
	<div class="class1"></div>
	<div class="class1"></div>
	<script>$(".class1").html("hello elements of class1")</script>
	<!-- 用法4,逗号代表同时应用多个规则,符合任何一个规则的元素都会被选中 -->
	<div id="id4"></div>
	<script>$("#id1,.class1").css("color","red");</script>
	<!-- 用法5,"rule1 rule2"表示选中rule1内部所有rule2元素 -->
	<div id="id5">
		<div><span></span></div>
		<div><span></span></div>
		<span></span>
		<span></span>
	</div>
	<script>$("#id5 span").html("id5's inner span");</script>
	<!-- 用法6,"rule1>rule2"表示选中rule1元素内符合rule2规则的儿子辈元素,不包括孙子、重孙子等 -->
	<div id="id6">
		<div><span></span></div>
		<div><span></span></div>
		<span></span>
		<span></span>
	</div>
	<script>$("#id6>span").html("id6's son span");</script>
	<!-- 用法7,选择第一个、最后一个、指定序号的子元素 -->
	<div id="id7">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
	</div>
	<script>
		$("#id7 span:first-child").css("color","red");
		$("#id7 span:last-child").css("color","green");
		$("#id7 span:nth-child(3)").css("color","blue");
	</script>
	<!-- 用法8,选择子元素中的奇数odd偶数even元素 -->
	<div id="id8">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
	</div>
	<script>
		$("#id8 span:nth-child(odd)").css("color","red");
		$("#id8 span:nth-child(even)").css("color","green");	
	</script>
</body>
</html>

如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页