<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>位置选择器</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
//获取第一个li
$("li:first").css("border","2px dotted red");
//获取最后一个出现的DIV
$("div:last").css("border","2px dotted black");
//奇数 odd 段落，在jQuery中所有的元素从0开始
$("p:odd").css("border","2px dotted blue");
//偶数 even 输入框
$("input[type='text']:even").css("border","2px dotted orange");
//第三个超链接 使用eq精确指定组建下标位置
$("a:eq(2)").css("border","2px dotted lightblue");
//获取第三个之后的超链接 使用gt获取指定位置之后的所有元素
$("a:gt(2)").css("border","3px dotted red");
//利用lt获取指定位置之前的元素
$("p:lt(1)").css("border","4px soild red");
})
</script>
</head>
<body>
<div>
<ul>
<li>li111111</li>
<li>li2222222</li>
<li>li33333</li>
</ul>
</div>
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
<div>
姓名<input type="text" />
<br>
姓名1<input type="text" /><br>
姓名2<input type="text" /><br>
姓名3<input type="text" /><br>
姓名4<input type="text" /><br>
姓名5<input type="text" /><br>
</div>
<div>
<a href="#">href1</a>
<a href="#">href2</a>
<a href="#">href3</a>
<a href="#">href4</a>
<a href="#">href5</a>
</div>
</body>
</html>