祖先後代選擇器ancestor descendant（jQuery）
阿新 • • 發佈：2018-12-31
1、ancestor descendant：在給定的祖先元素下匹配所有的後代元素
2、（1）ancestor ：任何有效選擇器
（2）descendant：用以匹配元素的選擇器，並且它是第一個選擇器的後代元素
3、例項
ancestor.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>祖先後代選擇器</title> <script type="text/javascript" src="jquery-2.0.3.js"></script> <style type="text/css"> body{ width:100%; height:100%; font-size:18px; } .tab{ width:1280px; height:500px; text-align:center; background-color:#CCFFFF; border:1px solid #660099; padding-left:20px; } tr th{ color:#FFFFFF; background-color:#000000; border: 1px solid #CC0066; } tr td{ border: 1px solid #FF0000; } </style> <script type="text/javascript"> $(function(){ //設定button按鈕距離表格的距離 $("form input").css("margin-top","20px"); //設定button字型的粗細，運用到祖先後代選擇器 $("form input").css("font-weight","bold"); //設定input裡的寬度，運用到祖先後代選擇器 $("form input").css("width","140px;"); //button點選事件 $("input[type='button']").click(function(){ //實現偶數行背景色變色 $("tr:even").css("background-color","#00DD00"); //實現偶數行字型變色 $("tr:even").css("color","#FF0000"); }); }); </script> </head> <body> <form name="form" style="text-align:center;"> <table class="tab" cellpadding="0" cellspacing="0"> <tr> <th>書號</th> <th>書名</th> <th>數量</th> <th>作者</th> <th>單價</th> <th>總價</th> </tr> <tr id="tr_td"> <td>CN-2312</td> <td>Web開發</td> <td>20</td> <td>趙錢孫</td> <td>50.00</td> <td>1000.00</td> </tr> <tr> <td>CN-2313</td> <td>C++程式設計</td> <td>100</td> <td>李華強</td> <td>40.00</td> <td>4000.00</td> </tr> <tr> <td>CN-2321</td> <td>Java程式設計</td> <td>200</td> <td>武德成</td> <td>30.00</td> <td>6000.00</td> </tr> <tr> <td>CN-2398</td> <td>JQuery</td> <td>50</td> <td>趙錢孫</td> <td>50.00</td> <td>2500.00</td> </tr> <tr> <td>CN-2328</td> <td>Java高階程式設計</td> <td>200</td> <td>武德成</td> <td>30.00</td> <td>6000.00</td> </tr> <tr> <td>CN-2358</td> <td>JQuery實戰</td> <td>50</td> <td>趙小孫</td> <td>50.00</td> <td>2500.00</td> </tr> <tr> <td>CN-1328</td> <td>Java程式設計</td> <td>200</td> <td>魏忠賢</td> <td>30.00</td> <td>6000.00</td> </tr> <tr> <td>CN-4358</td> <td>JQuery基礎教程</td> <td>50</td> <td>趙小孫</td> <td>50.00</td> <td>2500.00</td> </tr> <tr> <td>CN-4568</td> <td>JSP例項開發</td> <td>200</td> <td>李佳後</td> <td>30.00</td> <td>6000.00</td> </tr> <tr> <td>CN-6988</td> <td>Servlet</td> <td>50</td> <td>李玉華</td> <td>50.00</td> <td>2500.00</td> </tr> </table> <input type="button" id="click" name="click" value="點選"/> </form> </body> </html>
4、顯示結果如圖所示
（1）未點選“點選”按鈕時
（2）點選“點選”按鈕後
