博客列表 >jQuery选择器—2018年4月4日10时01分

jQuery选择器—2018年4月4日10时01分

Gee的博客
Gee的博客原创
2018年04月04日 10:08:41614浏览

jQuery选择器与css选择器类似,但更强大

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>homework</title>
	<style type="text/css">
		.content {
			width: 40px;
			height: 40px;
			padding: 10px;
			text-align: center;
		}
		.bg-black {
			background-color: black;
		}
		.font-white {
			color: white;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td class="third">别</td>
			<td>踩</td>
			<td class="third">白</td>
			<td></td>
			<td class="third">儿</td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>1</td>
		</tr>
	</table>
</body>
</html>

<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('table td').css({
		'border': '1px solid #333',
	});

	$('table').css({
		'border-collapse': 'collapse',
		'text-align': 'center',
	});

	$('tr > *').addClass('content');

	$('td:even').addClass('bg-black');

	$('.third').addClass('font-white');

	$('td:eq(11)').css('color', 'black');

	$('td').eq(13).text('块');

	$('td:gt(9)').css('font-size', '1.2em');

	$('td:last').addClass('font-white');

	$('td:last').prev().text('level');
</script>

运行实例 »

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

效果图:

搜狗截图20180404100604.png

总结:

jQuery选择器更加灵活,选择方式丰富,同时也容易搞混

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议