Jquery系列-Jquery过滤器

最新推荐文章于 2018-08-23 16:14:58 发布

jackson_fighting

最新推荐文章于 2018-08-23 16:14:58 发布

阅读量765

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/SDN_SUPERUSER/article/details/13431059

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题页</title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
//基本过滤器
	$(function(){
		//:first 选择第一个元素
		//：last ：not(不满足选择器的元素)
		//$("div:first")
		//:even :odd 选择索引是奇数还是偶数
		//:eq :gt :lt 选取索引 等于、大于、小于的元素
		//：header 选择所有 h1...h6的元素
		//:animated 选择正在执行动画的DIV元素

/**
**表格的奇数行是黄色背景
第一行是表头,显示大字体 fontsize 20
最后一行汇总 红色字体

前三行是前三名 显示稍大字体 18

*/	

$('#rating tr:gt(0):even').css('background','red');


	$('#rating tr:first').css('fontSize',30);
	
	

	$('#rating tr:last').css('fontSize',20);

	//从新的序列开始第三个
	$("#rating tr:gt(0):lt(3)").css('fontSize',60);
	
	//相对选择器
	$('#div1').click(function(){
		$('ul',$(this)).css('background','red');
	});

	//相对选择器
	$('#tb2 tr').click(function(){
		$('td',$(this)).css('background','yellow');
	});

	});
</script>	
</head>
<body>

<table id="rating">
	<tr>
	<td>姓名</td>
	<td>成绩</td>
	<tr>
	<td>A</td>
	<td>100</td>
	</tr>
	<tr>
	<td>B</td>
	<td>99</td>
	</tr>
	<tr>
	<td>C</td>
	<td>97</td>
	</tr>
	<tr>
	<td>D</td>
	<td>98</td>
	</tr>
	<tr>
	<td>E</td>
	<td>90</td>
	</tr>
	<tr>
	<td>F</td>
	<td>90</td>
	</tr>
	<tr>
	<td>G</td>
	<td>90</td>
	</tr>
	<tr>
	<td>平均</td>
	<td>98.5</td>
	</tr>
</table>

<div>
	<div id="div1">
		<ul>
			<li>111111111111</li>
			<li>111111111111</li>
			<li>111111111111</li>
			<li>111111111111</li>
		</ul>
	</div>

	<div id="div1">
		<ul>
			<li>111111111111</li>
			<li>111111111111</li>
			<li>111111111111</li>
			<li>111111111111</li>
		</ul>
	</div>
</div>

<table id="tb2">
	<tr>
		<td>dddd</td><td>eeeeeeee</td>
	</tr>
	<tr>
		<td>dddd</td><td>eeeeeeee</td>
	</tr>
	<tr>
		<td>dddd</td><td>eeeeeeee</td>
	</tr>
	<tr>
		<td>dddd</td><td>eeeeeeee</td>
	</tr>


</table>

</body>
</html>

jackson_fighting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery系列-Jquery过滤器

无标题页//基本过滤器 $(function(){ //:first 选择第一个元素 //：last ：not(不满足选择器的元素) //$("div:first") //:even :odd 选择索引是奇数还是偶数 //:eq :gt :lt 选取索引等于、大于、小于的元素 //：header 选择所有 h1...h6的元素 //:animated 选择正在
复制链接

扫一扫

专栏目录