博客列表 >jQuery常用的选择器函数——2018年4月3日

jQuery常用的选择器函数——2018年4月3日

Y的博客
Y的博客原创
2018年04月04日 15:53:07578浏览

使用选择器代码:

实例

<!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

总结:

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

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