<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>筛选</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.cGreen{color: #4CA902}
.cPink{color: #ED4A9F}
.cBlue{color: #0092E7}
.cCyan{color: #01A6A2}
.cYellow{color: #DCA112}
.cRed{color: #B7103B}
.cPurple{color: #792F7C}
.cBlack{color: #110F10}
.cOrange{color: #FF4500}
.cGray{color: #A9A9A9}
.hide{display: none;}
span {
float:left;
}
ul li {
120px;
float: left;
margin-left: 10px;
}
</style>
<script type="text/javascript">
/*
first()、last()、is()、parent()、has()、find()、
siblings()。
*/
$(document).ready(function() {
// <input type="button" id="btn1" value="first()筛选中国的第一个城市">
$("#btn1").click(function() {
$("#chn li").first().addClass("cGreen");
console.log($("#chn li").first().text());
});
// <input type="button" id="btn2" value="last()筛选美国的最后一个城市">
$("#btn2").click(function() {
$("#chn li").last().addClass("cGreen");
console.log($("#chn li").last().text());
});
// <input type="button" id="btn3" value="is()判断广州（li）的父元素是否是ul元素，若是则输出该元素的id值">
$("#btn3").click(function() {
if ($("#gz").parent().is("ul")) {
console.log("广州的父元素是ul，并且它的id对应的值为："+
$("#gz").parent().attr("id"));
}
});
// <input type="button" id="btn4" value="has()筛选加粗的城市并将其颜色设置为红色">
/* has针对于寻找特定元素 */
$("#btn4").click(function() {
// 也可以直接$("li")但是速度会慢一点！文档较长的时候会慢很多。
$("ul li").has("span").addClass("cRed");
});
// <input type="button" id="btn5" value="find()查找美国城市中所有的span元素">
/* find着重于搜索 */
$("#btn5").click(function() {
$("#usa li").find("span").addClass("cBlue");
});
// <input type="button" id="btn6" value="parent()查找城市(li元素)的父元素，并且父元素的id为chn">
$("#btn6").click(function() {
$("ul li").parent("#chn").addClass("cPurple");
});
// <input type="button" id="btn7" value="siblings()选取广州(li元素)的所有兄弟城市">
$("#btn7").click(function() {
$("#gz").siblings().addClass("cYellow");
});
});
</script>
</head>
<body>
<span>中国城市</span>：<br>
<ul id="chn">
<li id="bj"><span style="font-weight: bold;">北京</span></li>
<li id="sh">上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
<li id="hk">香港</li>
</ul>
<br><br>
<span>美国城市</span>：<br>
<ul id="usa">
<li id="wst"><span style="font-weight: bold;">华盛顿特区</span></li>
<li id="ny">纽约</li>
<li id="la">洛杉矶</li>
<li id="scg">芝加哥</li>
</ul>
<br><br>
<span>德国城市</span>：<br>
<ul id="ger">
<li id="mnh">慕尼黑</li>
</ul>
<div style="clear:both;"></div>
<br><br>
<hr>
<input type="button" id="btn1" value="first()筛选中国的第一个城市">
<input type="button" id="btn2" value="last()筛选美国的最后一个城市">
<input type="button" id="btn3" value="is()判断广州（li）的父元素是否是ul元素，若是则输出该元素的id值">
<input type="button" id="btn4" value="has()筛选加粗的城市并将其颜色设置为红色">
<input type="button" id="btn5" value="find()查找美国城市中所有的span元素">
<input type="button" id="btn6" value="parent()查找城市(li元素)的父元素，并且父元素的id为chn ">
<input type="button" id="btn7" value="siblings()选取广州(li元素)的所有兄弟城市">
</body>
</html>
其实个人感觉这个方法.first()比前面的基本过滤选择器中的(":first")更加的实用，因为这个.first()可以单独使用一直在方法后面连缀！不像(":first")必须写在表达式中。