Blogger Information
Blog 64
fans 2
comment 1
visits 46880
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery常用的选择器函数——2018年4月3日
Y的博客
Original
579 people have browsed it

使用选择器代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.green{background-color: green;}
	.bg-wheat {background-color: wheat;}
</style>
</head>
<body>
<form action="" method="post">
	<fieldset>
		<legend id="name">用户注册</legend>
		<p class="name1">用户名:<input type="text" name="name" required></p>
		<p>邮箱:<input type="email" name="email" required></p>
		<p>密码:<input type="password" name="password1" required></p>
		<p>确认密码:<input type="password" name="password2" required></p>
		<p>性别:
			<input type="radio" name="gender" value='male' checked>男
			<input type="radio" name="gender" value='female'>女
		</p>
		<p>上传头像: <input type="file" name=""></p>
		<p>Web语言:
			<input type="checkbox" name="lang[]" value="javascript">JavaScript
			<input type="checkbox" name="lang[]" value="php" checked>PHP
			<input type="checkbox" name="lang[]" value="java">Java
			<input type="checkbox" name="lang[]" value="python">Python
		</p>
		<p>级别:
			<select>
				<option value="0">小白</option>
				<option value="1" selected>入门</option>
				<option value="2">中级</option>
				<option value="3">高级</option>
				<option value="4">去火星吧</option>
			</select>
		</p>
		<p>简介:<textarea cols="40" rows="5"></textarea></p>
		<p><input type="hidden" name="userId" value="1010" disabled=""></p>
		<p>
			<button type="submit" name="submit">提交</button>
			<button type="reset" name="reset">重填</button>
		</p>
	</fieldset>				
	</form>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	$('form').css('text-align','center')
	$('#name').css('color','red')
	$('.name1').css('background-color','lightskyblue')
	$('p:nth-child(8) ~ *').css('backgroundColor', 'pink')
	$('p textarea').addClass('green')
	$('p:eq(5)').addClass('green')
    $('p:contains("邮箱")').addClass('bg-wheat')


</script>

运行实例 »

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

效果图:


360截图20180404155511278_副本.jpg

总结:

选择器有很多。最常用的一定要熟悉。要用最简单的选择器达到选择的效果。

Correction status:qualified

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