jquery 的:first-child 和:last-child 選擇器例項
阿新 • • 發佈：2019-01-06
:first-child 選擇器被用來選擇父標籤的第一個子標籤，此是:nth-child(1)的簡便形式。
例如：
$(‘li:first-child’)—用來選擇所有li的父標籤的第一個li子標籤。
$(‘tr:first-child’)—類似。
:last-child 選擇器被用來選擇它們父標籤的中的最後一個匹配的子匹配。
例如：
$(‘li:last-child’)—選擇所有li父標籤中的最後一個li子標籤。
$(‘tr:last-child’)—類似。
<html> <head> <title>jquery first child and last child example</title> <script type="text/javascript" src="../jquery-1.11.1.min.js"></script> </head> <body> <h1> jquery first child and last child example</h1> <ul> <li>li #1</li> <li>li #2</li> <li>li #3</li> <li>li #4</li> <li>li #5</li> </ul> <button>li:first-child</button> <button>li:last-child</button> <script type="text/javascript"> $("button").click(function(){ var str=$(this).text(); $("li").css("background","white"); $(str).css("background","coral"); }); </script> </body> </html>
效果：
點選按鈕1：
點選按鈕2：
