jQuery的选择器的使用（共有十二个使用）

最新推荐文章于 2022-11-16 12:56:26 发布

些许草率罢了

最新推荐文章于 2022-11-16 12:56:26 发布

阅读量1.2k

点赞数 2

文章标签： jquery javascript 前端 html

本文链接：https://blog.csdn.net/qq_56715530/article/details/121345197

版权

jQuery提供了许多十分有用的选择器，完美的解决了html语言对于结点难以选择的问题，减少了对于父节点和子节点的使用，减少了代码量，体现了jQuery的宗旨（写得少，做的多）……（欧克，停止叭叭）

下面直接上小弟的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery选择器的应用</title>
		<style type="text/css">
			div{
				border:1px solid #000000;
				border-radius: 1em;
				margin-left: 450px;
				margin-right: 450px;
				box-shadow: 1px 1px 1px #000000;
			}
			table{
				text-align: center;
				margin-left: 50px;
				margin-top: 20px;
			}
			td,th{
				padding-left: 30px;
				padding-right: 30px;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			th{
				background-color: #D3D3D3;
			}
			button{
				padding-left: 10px;
				padding-right: 10px;
				border-radius: .3em;
				border: 1px solid #000000;
			}
			#butTab{
				margin-top: 30px;
				text-align: center;
				border:1px solid #000000;
			}
			#butTab td{
				padding: 10px;
				background-color: azure;
			}
			.p1{

				font-family: "楷体";
				font-size: 20px;
				color: #0000FF;
				margin-left: 50px;
			}
			.p2{

				font-family: "楷体";
				font-size: 17px;
				color: green;
				margin-left: 50px;
				padding-right: 50px;
			}
			.p3{
				margin-left: 150px;
			}
			span{
				font-family: "楷体";
				font-size: 20px;
				color: red;
			}
			.abc{	}
		</style>
		<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">//导入jquery包</script>
		<script>
			//下面是一些选择器的使用
			$(document).ready(function(){
				//下面是按钮的函数设置
				$("#but1").click(function(){
					$("#tab td").css("background-color","pink");
					//alert("You caught my heart、、、");
				});
				$("#but2").click(function(){
					$("#tab .abc").css("background-color","green");
				});
				$("#but3").click(function(){
					$("#tab #ab").css("background-color","blue");
				});
				$("#but4").click(function(){
					$("#tab .abc,#ab").css("background-color","red");
				});
				$("#but5").click(function(){
					$("#tab .abc#a").css("background-color","lightblue");
				});
				$("#but6").click(function(){
					$("#tab td*").css("background-color","purple");
				});
				$("#but7").click(function(){
					$("#tab [id]").css("background-color","orange");
				});
				$("#but8").click(function(){
					$("#tab [id*='b']").css("background-color","brown");
				});
				$("#but9").click(function(){
					$("#tab td:odd").css("background-color","chocolate");
				});
				$("#but10").click(function(){
					$("#tab td:even").css("background-color","deeppink");
				});
				$("#but11").click(function(){
					$("#tab td:gt(4)").css("background-color","cyan");
				});
				$("#but12").click(function(){
					$("#tab td:lt(5)").css("background-color","yellowgreen");
				});
				//删除表格颜色的按钮
				$("#recover").click(function(){
					$("#tab td").removeAttr("style")
				});
			});
		</script>
	</head>
	<body>
		<div>
		<table border="1" id="tab">
			<thead></thead>
			<tbody>
				<tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr>
				<tr> <td class="abc" id="a">1.1</td> <td id="ab">1.2</td> <td id="b">1.3</td> </tr>
				<tr> <td class="abc">2.1</td> <td id="ab">2.2</td> <td>2.3</td> </tr>
				<tr> <td class="abc">3.1</td> <td id="ab">3.2</td> <td>3.3</td> </tr>
			</tbody>
			<tfoot></tfoot>
		</table>
		<p class="p1">请使用下面按钮来通过各种选择器来操控样式变化:</p>
		<table id="butTab" >
			<thead></thead>
			<tbody>
				<tr> <td><button id="but1">1</button></td> <td><button id="but2">2</button></td> <td><button id="but3">3</button></td>
				     <td><button id="but4">4</button></td> <td><button id="but5">5</button></td> <td><button id="but6">6</button></td> </tr>
				<tr> <td><button id="but7">7</button></td> <td><button id="but8">8</button></td> <td><button id="but9">9</button></td>
				     <td><button id="but10">10</button></td> <td><button id="but11">11</button></td> <td><button id="but12">12</button></td> </tr>
			</tbody>
			<tfoot></tfoot>
		</table>
		<p class="p3"><button id="recover">除去所有表格颜色属性</button></p>
		<p class="p2">
			第1个按钮是使用<span>标签选择器</span>设置所有td背景色为粉色<br />
			第2个按钮是使用<span>类选择器</span>设置所有的具有abc类的td背景色为绿色，其中第一列td均为abc类<br />
			第3个按钮是使用<span>id选择器</span>设置所有ID为ab的td背景色为蓝色，其中第二列td的ID均为ab<br />
			第4个按钮是使用<span>并集选择器</span>设置所有具有abc类或者ID为ab的td背景色为红色<br />
			第5个按钮是使用<span>交集选择器</span>设置所有具有abc类和ID为a的td背景色为淡蓝色，其中只有第一行第一列id为a<br />
			第6个按钮是使用<span>全局选择器</span>设置所有的td为紫色<br />
			第7个按钮是使用<span>属性类型含有选择器</span>设置所有具有id属性的td为橙色，其中第一含第一列和第二列全部具有id属性<br />
			第8个按钮是使用<span>attribute的value含有选择器</span>设置所有的ID的value包含有b的td为棕色，其中第二列和第一行第三列符合<br />
			第9个按钮是使用<span>基本过滤选择器的奇数选择</span>设置所有奇数的td为巧克力色<br />
			第10个按钮是使用<span>基本过滤选择器的偶数选择</span>设置所有偶数的td为深粉色<br />
			第11个按钮是使用<span>基本过滤选择器的索引大于</span>设置所有td索引大于等于5为天蓝色<br />
			第12个按钮是使用<span>基本过滤选择器的索引小于</span>设置所有td索引小于5为黄绿色<br />
		</p>
		</div>
	</body>
</html>

自己的小创意，哈哈

些许草率罢了

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery的选择器的使用（共有十二个使用）

jQuery提供了许多十分有用的选择器，完美的解决了html语言对于结点难以选择的问题，减少了对于父节点和子节点的使用，减少了代码量，体现了jQuery的宗旨（写得少，做的多）……（欧克，停止叭叭）下面直接上小弟的代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jquery选择器的应用</title> <style type="te
复制链接

扫一扫