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

niulanshan

浏览: 564226 次

最近访客更多访客>>

扶起之秀

qijojo

qy86615069

yungaoyue2005

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1540)

社区版块

存档分类

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