博主信息
博文 48
粉丝 3
评论 1
访问量 46223
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JQuery里选择器的使用——2018年4月3日
JackBlog
原创
1168人浏览过

QQ截图20180404005724.jpg

实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
<style type="text/css">
	.cp{
		width: 600px;
		height: 450px;
		text-align: center;
		margin: auto;
		background-color:  darksalmon;
	}
	.cp .time{
		background-color:  #F77979;
height: 50px;
		line-height: 50px;
}

	.cp .lb{
		width: 590px;
		margin: auto;
}
	.cp .lb table{
		width: 100%;
		border-collapse: collapse;

	}
	.cp .lb table tr{
		height: 30px;
	line-height: 30px;

	}
	.color-a{
		color: #26A8FE;
	}
</style>

</head>
<body>
	<div class="cp">
		<div class="time"><span>彩票开奖表</span></div>
		<div class="lb">
			<table>
				<tr>
					<th>序号</th>
					<th>开奖号码</th>
					<th>结果</th>
				</tr>
				<tr>
					<td>01</td>
					<td id="kjnum"><span>1</span><span>+</span><span>3</span><span>+</span><span>8</span></td>
					<td>12</td>
				</tr>
				<tr>
					<td>02</td>
					<td id="kjnum"><span>1</span><span>+</span><span>3</span><span>+</span><span>8</span></td>
					<td>12</td>
				</tr>
				<tr>
					<td>03</td>
					<td id="kjnum"><span>1</span><span>+</span><span>3</span><span>+</span><span>8</span></td>
					<td>12</td>
				</tr>
				<tr>
					<td>04</td>
					<td id="kjnum"><span>1</span><span>+</span><span>3</span><span>+</span><span>8</span></td>
					<td>12</td>
				</tr>
				<tr>
					<td>05</td>
					<td id="kjnum"><span>1</span><span>+</span><span>3</span><span>+</span><span>8</span></td>
					<td>12</td>
				</tr>
				<tr>
					<td>06</td>
					<td id="kjnum"><span>1</span><span>+</span><span>3</span><span>+</span><span>8</span></td>
					<td>12</td>
				</tr>
				<tr>
					<td>07</td>
					<td id="kjnum"><span>1</span><span>+</span><span>3</span><span>+</span><span>8</span></td>
					<td>12</td>
				</tr>
				<tr>
					<td>08</td>
					<td id="kjnum"><span>1</span><span>+</span><span>3</span><span>+</span><span>8</span></td>
					<td>12</td>
				</tr>
				<tr>
					<td>09</td>
					<td id="kjnum"><span>1</span><span>+</span><span>3</span><span>+</span><span>8</span></td>
					<td>12</td>
				</tr>
				<tr>
					<td>10</td>
					<td id="kjnum"><span>1</span><span>+</span><span>3</span><span>+</span><span>8</span></td>
					<td>12</td>
				</tr>
			</table>
		</div>
	</div>


</body>
</html>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
	$('.time').css("color","#fff")
	$('tr>td').css("height","30px")
	$("td").css({"color":"white"})
	$('td:contains("+")').css({"color":"#FF0000","font-weight":"bolder"})
	$('tr:even').css("background-color","#E4EBEC")
	$('td span:nth-child(1)').css({
		"display":"inline-block",
		"color":"#F0F0F0",
		"width":"30px",
		"height":"30px",
		"background-color":"#ef768b",
		"border-radius":"50%",
		"margin":"0 2px"
		})
	$('td span:nth-child(3)').css({
		"display":"inline-block",
		"color":"#F0F0F0",
		"width":"30px",
		"height":"30px",
		"background-color":"#ef768b",
		"border-radius":"50%",
		"margin":"0 2px"
		})
	$('td span:nth-child(5)').css({
		"display":"inline-block",
		"color":"#F0F0F0",
		"width":"30px",
		"height":"30px",
		"background-color":"#ef768b",
		"border-radius":"50%",
		"margin":"0 2px"
		})
  	$('td+td+td').css({
		"display":"inline-block",
		"color":"#F0F0F0",
		"width":"30px",
		"height":"30px",
		"background-color":"#ef768b",
		"border-radius":"50%",
		"margin":"0 2px"
		})
	$('tr td:first-child').addClass('color-a')

</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学