jQuery中的筛选（六）：first()、last()、has()、is()、find()、siblings()等-CSDN博客

本文链接：https://blog.csdn.net/qq_36791569/article/details/81123577

<!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 {
    		width: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")必须写在表达式中。