jQuery中:first,:first-child,first()的使用區別
阿新 • • 發佈:2017-11-04
on() color light 分享 jquery baidu head fcm art
的第一個li子元素,然後添加樣式,不論這個元素在本頁面有多少個,它只找第一個
:first 獲取第一個元素。
:first-child 選擇器選取屬於其父元素的第一個子元素的所有元素。
first() 返回被選元素的首個元素。
測試代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <ul> <li>ul_1 item 1</li> <li>ul_1 item 2</li> <li>ul_1 item 3</li> <li>ul_1 item 4</li> <li>ul_1 item 5</li> </ul> <ul> <li>ul_2 item 1</li> <li>ul_2 item 2</li> <li>ul_2 item 3</li> <li>ul_2 item 4</li> <li>ul_2 item 5</li> </ul> </body> </html>
先測試 :first,代碼如下
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul li:first").css("background-color","yellow"); }) </script>
效果如下; 只有第一個被選中,
測試:first-child,代碼如下
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul li:first-child").css("background-color","yellow"); }) </script>
效果如下:
發現每一個ul的第一個li元素都被選中,
測試first(),代碼如下
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul li").first().css("background-color","yellow"); }) </script>
效果如下:
結果發現只有第一個被選中,
這裏發現,:first選中的是第一個ul元素
而:first-child選擇的是所有ul下面的第一個子元素是li的元素,有兩個ul父元素,ul_1,ul_2他們都擁有各自的子元素li。
最後是first()它和:first 類似,獲取的第一個ul元素的第一個li子元素,不管有多少個本元素
jQuery中:first,:first-child,first()的使用區別