Jquery （第二章）

最新推荐文章于 2024-07-18 15:03:25 发布

软件2201谢佩霖

最新推荐文章于 2024-07-18 15:03:25 发布

阅读量292

点赞数 4

文章标签：笔记 jquery

本文链接：https://blog.csdn.net/a_fiv/article/details/134862868

版权

Jquery自创选择器

jquery不仅可以使用CSS选择器也有自带的选择器

<body>
        <span>111</span>
		<span>222</span>
		<span>333</span>
		<span>444</span>
		<span>555</span>

:eq(xxx)选择器表示获取第xxx个 0表示第一个

$("span:eq(4)").text("~~~")

:lt(xxx)选择器表示获取小于xxx的元素 0表示第一个

$("span:lt(4)").text("~~~")

:gt(xxx)选择器表示获取大于xxx的元素 0表示第一个

$("span:gt(2)").text("~~~")

:not选择器--> 表示获取除了指定位置外的其他元素

$("span:not(:gt(2))").text("~~~");

一个小案例

<style>
			div{
				width: 100px;
				height: 100px;
				float: left;
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
	
		<div>
		</div>
		
		<div>
		</div>
		
		<div>
		</div>
		
		<div>
		</div>
		
		<div>
		</div>

		<script src="js/jquery.js"></script>
		<script>
			//div的特点: 默认高根据内容来     默认宽 :默认100%  
            所以块级元素   div  hr   p  
			//div 
			//在页面上绘制5个div   宽高各位100px   排成一行
			
			
			setInterval(function(){
				
				if(  $("div:eq(2)").css("background-color") =="rgb(255, 0, 0)"  ){
					$("div:eq(2)").css("background-color" , "yellow");
					$("div:not(:eq(2))").css("background-color" , "red");
				}else{
					$("div:eq(2)").css("background-color" , "red");
					$("div:not(:eq(2))").css("background-color" , "yellow");
				}
				
			},1000);
		
		</script>
	</body>

:even选择器获取下标为偶数

$("div:even").css("background-color","Red");

:odd选择器获取下标为为奇数

$("div:odd").css("background-color","blue");

:first选择器获取下标为0

$("div:first").css("background-color","yellow");

:last选择器获取最后一个

$("div:last").css("background-color","pink");

<style>
			div{
				width: 100px;
				height: 100px;
				float: left;
				margin-left: 20px;
			}
		</style>
	</head>
	<body>

		<div>
		</div>
		
		<div>
		</div>
		
		<div>
		</div>
		
		<div>
		</div>
		
		<div>
		</div>

又一个无聊案例

<body>
		
		
		<table border="1px" style="width: 500px;">
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>地址</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>1</td>
				<td>jack</td>
				<td>22</td>
				<td>湖南</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1</td>
				<td>jack</td>
				<td>22</td>
				<td>湖南</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1</td>
				<td>jack</td>
				<td>22</td>
				<td>湖南</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1</td>
				<td>jack</td>
				<td>22</td>
				<td>湖南</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1</td>
				<td>jack</td>
				<td>22</td>
				<td>湖南</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1</td>
				<td>jack</td>
				<td>22</td>
				<td>湖南</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1</td>
				<td>jack</td>
				<td>22</td>
				<td>湖南</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1</td>
				<td>jack</td>
				<td>22</td>
				<td>湖南</td>
				<td>男</td>
			</tr>
			
		</table>

		<script src="js/jquery.js"></script>
		<script>
			
			
			$("tr:odd").css("background-color","yellow");
			$("tr:even").css("background-color","blue");
	
			$("tr:first").css("background-color","Red");
			$("tr:last").css("background-color","pink");
			
		</script>
	</body>