<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$("ul li:first-child").toggle();
}); //在每个ul中查找第一个li
$("#but2").click(function(){
$("ul:first-of-type").toggle();
}); //查找ul所在的父级中的第一个ul
$("#but3").click(function(){
$("ul li:last-child").toggle();
}); //在每个ul中查找最后一个li
$("#but4").click(function(){
$("ul:last-of-type").toggle();
}); //查找ul所在的父级中的最后一个ul
//CSS规范n值是“1索引”，从1开始计数。对于所有其他选择器表达式，jQuery遵循JavaScript的“0索引”的计数。
$("#but5").click(function(){
$("ul li:nth-child(2)").toggle(); //要匹配元素的序号，从1开始
}); //查找每个ul里的第二个li
$("#but6").click(function(){
$("ul li:nth-last-child(2)").toggle();
}); //查找每个ul里的倒数第二个li
$("#but7").click(function(){
$("ul li:nth-last-of-type(2)").toggle();
}); //查找每个ul里的倒数第二个li
$("#but8").click(function(){
$("li:nth-of-type(2)").toggle();
}); //每个li中的第二个
$("#but9").click(function(){
$("ul li:only-child").toggle();
}); //查找ul中唯一一个li
$("#but10").click(function(){
$("ul li:only-of-type").toggle();
}); //查找所有没有兄弟级的ul，但有相同的元素
});
</script>
</head>
<style>
</style>
<body>
<div id="in">
<input id="but1" type="button" value="每个第一个">
<input id="but2" type="button" value="父级第一个">
<input id="but3" type="button" value="每个最后一个">
<input id="but4" type="button" value="父级最后一个">
<input id="but5" type="button" value="每个序号">
<input id="but6" type="button" value="每个倒数">
<input id="but7" type="button" value="每个倒数2">
<input id="but8" type="button" value="每个中的第二">
<input id="but9" type="button" value="唯一一个">
<input id="but10" type="button" value="没兄弟的同类">
</div>
<div id="lb">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul>
<li>9</li>
</ul>
</div>
</body>
</html>
