以下是常见的JQ选择器函数
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
li{
list-style-type: none;
font-size: 1.3em;
line-height: 1.3em;
font-family: microsoft yahei;
}
p{
line-height: 1.1em;
font-family: microsoft yahei;
}
a{
padding-left: 20px;
}
.left{
float: left;
width: 250px;
height: 490px;
background-color:#F5F5F5;
margin-left: 30px;
border-radius: 5px;
}
.right{
background-color: #F5F5F5;
float: right;
margin-right: 200px;
height: 490px;
border-radius: 5px;
}
.list{
overflow: hidden;
width:900px;
height: 600px;
/*background-color: lightgray;*/
margin: 30px auto;
}
</style>
</head>
<body>
<div class="list">
<div class="left">
<ul>
<li>test1 <a href="" title="">test1</a></li>
<li>test2 <a href="" title="">test2</a></li>
<li>test3 <a href="" title="">test3</a></li>
<li class="fourth">test4 <a href="" title="">test4</a></li>
<li>test5 <a href="" title="">test5</a></li>
<li>test6 <a href="" title="">test6</a></li>
<li>test7 <a href="" title="">test7</a></li>
<li>test8 <a href="" title="">test8</a></li>
<p>This is 1th paragraph</p>
<p>This is 2th paragraph</p>
<li>test9 <a href="" title="">test9</a></li>
</ul>
</div>
<div class="right">
<form action="" method="post">
<fieldset>
<legend>用户注册</legend>
<p>用户名:<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>
</div>
</div>
</body>
</html>
<script>
$('li:lt(2)').css('color','red') //第一个到第2个
$('li:eq(-1)').css({'font-size':'1.6em','color':'blue'}) //倒数第1个元素
$('p:contains("1")').text('Being Changed!') //包含 1 的p标签文本会改变
$(':button:reset').css('background-color','yellow')//类型为reset的button
$('li.fourth').next().css('background-color','gray') //指定类名的下一个元素、
$('a').slice(5,8).css('background-color','lightgreen') //从第6到第8个
$(':text').css('background-color','#778899')//type为文本的类型
$(':input:password').css('background-color','wheat')//input下type为password的类型
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
