Python学习 Day37 jQuery框架独有选择器02

最新推荐文章于 2022-05-02 17:51:49 发布

ShengXIABai

最新推荐文章于 2022-05-02 17:51:49 发布

阅读量101

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ShengXIABai/article/details/115465216

版权

前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

jQuery框架独有选择器

概述：jQuery函数库支持我们曾经学过的全部选择器【*、标签、类、id选择器】
但是，jQuery框架给我们提供了一些扩展的CSS选择器【JQ框架独有的：只能在JQ中使用】

一、：first与：last

这两个选择器是JQ框架中独有的，它们两个选择器主要的作用是可以获取匹配节点的第一个或是最后一个元素
语法格式：$(selsector:first)

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 100%;
				height: 60%;
				list-style: none;
				background: green;
			}
			ul li{
				float: left;
				padding: 20px;
			}
		</style>
		<!--引包-->
		<script type="text/javascript" src="js/jQuery.min.js"></script>
	</head>
	<body>
		<ul>
			<li>游戏</li>
			<li>人生</li>
			<li>军事</li>
			<li>体育</li>
			<li>直播</li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	//selector：first 获取匹配节点第一个元素
			//selector：last 获取匹配节点最后一个元素
			$('li:first').css('color','royalblue');
			$('li:last').css('color','orange');
</script>

在这里插入图片描述

二、：odd与：even

这两者也是JQ独有的选择器，可以获取匹配元素奇数索引值、偶数索引值节点
语法格式：$(selector:odd)

//selector：odd 奇数选择器
	//selector：even 偶数选择器
	$('li:odd').css('color','cadetblue');
	$('li:even').css('color','darkblue');

在这里插入图片描述

三、：gt(index)与：lt(index)

它们两者也是JQ独有的选择器，主要的作用是可以获取匹配节点大于某一个索引值、小于某一个索引值节点
语法格式：$(selector:gt(n))


	//gt:(index) 大于选择器
	//lt:(index) 小于选择器
	$('ul li:gt(3)').css('color','red');
	$('ul li:lt(3)').css('color','chocolate');

在这里插入图片描述

四、eq（index）

它也是JQ独有的选择器，主要的作用是获取匹配节点，某一个准确索引值节点

//:eq(index) 准确索引值选择器
	$('ul li:eq(4)').css('color','red');

在这里插入图片描述

五、表格制作

样式部分

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			table,tr,td{
				border: 1px solid black;
				/*解决缝隙问题*/
				border-collapse:collapse;
			}
			td{
				width: 30px;
				height: 30px;
			}
		</style>
		<!--引包-->
		<script type="text/javascript" src="js/jQuery.min.js"></script>
	</head>
	<body>
		<table>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>

选择器部分

<script type="text/javascript">
	//表格隔行变颜色
	$('tr:even').css('background','salmon');
	$('tr:odd').css('background','forestgreen');
</script>

在这里插入图片描述

ShengXIABai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python学习 Day37 jQuery框架独有选择器02

jQuery框架独有选择器概述：jQuery函数库支持我们曾经学过的全部选择器【*、标签、类、id选择器】但是，jQuery框架给我们提供了一些扩展的CSS选择器【JQ框架独有的：只能在JQ中使用】一、：first与：last这两个选择器是JQ框架中独有的，它们两个选择器主要的作用是可以获取匹配节点的第一个或是最后一个元素语法格式：$(selsector:first)<style type="text/css"> *{ margin: 0; paddin
复制链接

扫一扫