简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 第14章 4_3jQuery选择器-作业
Blogger Information
Blog 18
fans 0
comment 0
visits 9780
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第14章 4_3jQuery选择器-作业
唐朝的博客
Original
518 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<style type="text/css">
		table,td {
			border:1px solid #333;
		}
		table {
			border-collapse:collapse;
			margin:30px auto;
			width:80%;
			text-align:center;

		}
		table caption {
			font-size: 1.5em;
			margin-bottom:50px;
		}

		.bg-orange {
			font-weight:bolder;
			color:white;
			background-color:orange;
		}
	</style>
</head>
<body>
	<table>
		<caption>用户信息表格</caption>
		<tr id="title">
			<td>01</td>
			<td>02</td>
			<td>03</td>
			<td>04</td>
			<td>05</td>
		</tr>
		<tr>
			<td>01</td>
			<td>02</td>
			<td>03</td>
			<td>04</td>
			<td>05</td>
		</tr>
		<tr>
			<td>01</td>
			<td>02</td>
			<td>03</td>
			<td>04</td>
			<td>05</td>
		</tr>
		<tr>
			<td>01</td>
			<td>02</td>
			<td>03</td>
			<td>04</td>
			<td>05</td>
		</tr>
		<tr class="mark">
			<td>01</td>
			<td>02</td>
			<td>03</td>
			<td>04</td>
			<td>05</td>
		</tr>
	</table>
</body>
</html>

<script type="text/javascript" src ="../js/jquery-3.3.1.js"></script>

<script type="text/javascript">
	//tag标签选择器
	// $('td').css('backgroundColor','wheat')


	//id选择器
	$('#title').css('backgroundColor','green')

	// class选择器:
	$('.mark').addClass('bg-orange')

	//通配符选择器
	$('tr:nth-child(2) ~*').css('backgroundColor','pink')
</script>

运行实例 »

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





实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级选择器</title>
	<style type="text/css">
		.green{
			color:green;
		}

		.red{
			color:red;
		}
	</style>
</head>
<body>
	<ul>
		<li>流行歌曲01<a href="">立即播放1</a></li>
		<li>流行歌曲02<a href="">立即播放2</a></li>
		<li>流行歌曲03<a href="">立即播放3</a></li>
		<li>流行歌曲04<a href="">立即播放4</a></li>
		<li>流行歌曲05<a href="">立即播放5</a></li>
		<li>流行歌曲06<a href="">立即播放6</a></li>
		<li>流行歌曲07<a href="">立即播放7</a></li>
		<li>流行歌曲08<a href="">立即播放8</a></li>
		<li>流行歌曲09<a href="">立即播放9</a></li>
		<li>流行歌曲10<a href="">立即播放10</a></li>
	</ul>
</body>
</html>

<script type="text/javascript" src ="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	//后代选择器:空格
	$('li a').addClass('green')

	//所有子元素选择器
	//孙子元素<a>文本不会发生变化

	//$('ul > *').addClass('red')

	//相邻兄弟选择器+  将第5个li的下一个兄弟:第6个li前景色变更为绿色
	// $('li:nth-child(5)+li').addClass('red')
	////4. 全部兄弟元素 ~
	$('li:nth-child(5) ~li').addClass('green')
</script>

运行实例 »

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


Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！