祖先后代选择器ancestor descendant（jQuery）

来源：互联网发布：mac还原网络默认设置编辑：程序博客网时间：2024/05/05 06:51

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）点击“点击”按钮后