jQuery01-入门-选择器

最新推荐文章于 2024-03-08 19:19:11 发布

zhaoji1346790

最新推荐文章于 2024-03-08 19:19:11 发布

阅读量75

点赞数

文章标签： jquery javascript

本文链接：https://blog.youkuaiyun.com/zhaoji1346790/article/details/124260304

版权

本文介绍了jQuery的基础知识，包括其作用、与JavaScript的区别。详细讲解了jQuery的选择器，如通过ID、类和标签选择组件，并提供了基本选择器、层级选择器、表单选择器和过滤选择器的实例。还展示了表格隔行换色和过滤选择器的实践应用，帮助读者快速掌握jQuery操作DOM的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery01-入门-选择器

6 过滤选择器

1 什么是jQuery

前段，作用和js一模一样，里面封装了很多常用的js代码，是一个js代码库,不是封装了所有的js代码

1.1 jQuery的作用与js代码区别

在这里插入图片描述

1.1jQuery的作用

封装的作用：减少代码量

1.2jQuery与js代码之间的区别

1.2.1通过id获取组件

//js方式：document.getElementByid("id");

//jQuery方式：$("#id")

1.2.2通过类获取组件

//js方式：document.getElementByClassName("id");

//jQuery方式：$(".id")

1.2.3通过标签获取组件

//js方式：document.getElementByTagname("id");
//jQuery方式：$("input")

2 基本选择器

</head>
<body>
	<div id="mysa">
		<span id="sa">这是span1</span><br />
		<span id="sb">这是span2</span><br />
		<span id="sc">这是span3</span><br />
		<input type="button" value="按钮" /><br />
		<input type="text" class="sa" value="文本框1"/><br />
		<input type="text" class="sb" value="文本框2"/><br />
	</div>
	<div>
		<span id="sa">这是span4</span><br />
		<span id="sb">这是span5</span><br />
		<span id="sc">这是span6</span><br />
		<input type="text" class="sb" value="文本框3"/><br />
	</div>
</body>

3 层级选择器

</head>
<body>
	<div id="da">
		<input type="ta" value="div里文本框1"/><br />
		<input type="ta" value="div里文本框2"/><br />
		<input type="ta" value="div里文本框3"/><br />
		<span id="sa">
			<input type="text" value="span文本框1"/><br />
			<input type="text" value="span文本框2"/><br />
			<input type="text" value="span文本框3"/><br />
		</span>
	</div>
	<input type="text" value="div后文本框1"/><br />
	<input type="text" value="div后文本框2"/><br />
	<input type="text" value="div后文本框3"/><br />
	<span id="sb">
		<input type="text" value="span文本框4"/><br />
	</span>
</body>

4 表单选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/new_file.js"></script>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
	<body>
		<form id="form1">
			性别：
			<input type="radio" name="sex" value="男" checked="checked"/>男
			<input type="radio" name="sex" value="女" />女<br />
			爱好：
			<input type="checkbox" name="hobby" value="eat" checked="checked"/>吃饭
			<input type="checkbox" name="hobby" value="sleep" />睡觉
			<input type="checkbox" name="hobby" value="play" />玩耍<br />
			地址：
			<select>
				<option value ="1">长沙</option>
				<option value ="2">邵阳</option>
				<option value ="3">怀化</option>
				<option value ="4">株洲</option>
				<option value ="5">湘潭</option>
			</select><br />
			<input type="button" id="ok" value="提交" />
		</form>
	</body>
	<script type="text/javascript">
		$(function(){
			// 获取单选按钮
			// 获取所有单选按钮 
			var da = $("#form1 :radio");
			// 获取选中的单选按钮
			var da = $("#form1 :radio:checked");
			console.info(da.val());
			
			// 获取复选框
			// 获取所有复选框
			var da = $("#form1 :checkbox");
			// 获取选中的复选框
			$("#ok").click(function(){
				var da = $("#form1 :checkbox:checked");
				// // 循环遍历da
				$.each(da,function(i,v){// i表示数组da的下标；v表示数组da 的值
					console.info(v.value);
				});
				// 获取选择的下拉框的值
				var da = $("#form1 option:selected");
				console.info(da.text())
			})
			
		})
	</script>

5 表格隔行换色案例

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function(){
			// 给偶数行按钮添加事件
			$("#odd").click(function(){
				$("table tr:odd").css({"background":"green"})
			});
			//　给奇数行按钮添加事件
			$("#even").click(function(){
				$("table tr:even").css({"background":"yellow"})
			})
				
		})

	</script>
</head>
	<body>
		<table border="1px" align="center" width="300px">
			<tr>
				<th>名字</th>
				<th>性别</th>
				<th>年龄</th>
				<th>地址</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>12</td>
				<td>湖南</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>12</td>
				<td>湖南</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>12</td>
				<td>湖南</td>
			</tr>
			<tr>
				<td>麻子</td>
				<td>男</td>
				<td>12</td>
				<td>湖南</td>
			</tr>
		</table>
		<div align="center">
			<input type="button" value="奇数行(绿色)"  id="odd" />
			<input type="button" value="偶数行(黄色)"  id="even" />
		</div>	
	</body>

6 过滤选择器

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function(){  
		// 1)、:first选择器：将ul里面的第一个li背景设为绿色。
			// $("ul li:first").css({"background":"green"})
		// 2)、:last选择器：将ul里面的最后一个li背景设为蓝色。
			// $("ul li:last").css({"background":"blue"})
		// 3)、:even选择器：将ul里面下标为偶数的li背景设为绿色。
			// $("ul li:even").css({"background":"green"})
		// 4)、:odd选择器：将ul里面下标为奇数的li背景设为红色。
				// $("ul li:odd").css({"background":"pink"})
		// 5)、:lt选择器：将ul里面下标小于3的li元素的背景设为绿色。
				// $("ul li:lt(3)").css({"background":"green"})
		// 6)、:gt选择器：将ul里面下标大于3的li元素背景设为绿色。
				// $("ul li:gt(3)").css({"background":"green"})
				// 下标大于1 小于4
				// $("ul li:lt(4):gt(1)").css({"background":"pink"})
		// 7)、:eq选择器：将table表格里面的第二行的背景设为黄色。
				// $("#mytable tr").eq(1).css({"background":"yellow"})
		
		})
	</script>

</head>
<body>
	<ul id="ua">
		<li>第一个li</li>
		<li>第二个li</li>
		<li>第三个li</li>
		<li>第四个li</li>
		<li>第五个li</li>
		<li>第六个li</li>
		<li>第7个li</li>
		<li>第8个li</li>
		<li>第9个li</li>
	</ul>
	<table id="mytable" border="1px" width="300" style="text-align: center;" height="200px">
		<tr>
			<td>一行一列</td>
			<td>一行二列</td>
			<td>一行三列</td>
		</tr>
		<tr>
			<td>二行一列</td>
			<td>二行二列</td>
			<td>二行三列</td>
		</tr>
		<tr>
			<td>三行一列</td>
			<td>三行二列</td>
			<td>三行三列</td>
		</tr>
	</table>
</body>