jQuery ancestor descendan选择器

一 介绍

ancestor descendan选择器中的ancestor代表祖先，descendant代表子孙，用于在给定的祖先元素下匹配所有的后代元素。

ancestor descendan选择器的使用方法如下： 

$("ancestor descendant");

ancestor是指任何有效的选择器。

descendant是用以匹配元素的选择器，并且它是ancestor所指定元素的后代元素。

例如，要匹配ul元素下的全部li元素，可以使用下面的jQuery代码：

$("ul li");

 

二 应用

通过jQuery为版权列表设置样式。

 

三 代码

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<style type="text/css">
#bottom{
      width:800px;         /*设置宽度*/
      height:58px;         /*设置高度*/
      clear: both;         /*设置左右两侧无浮动内容*/
      text-align:center;   /*设置居中对齐*/
      padding-top:10px;    /*设置顶边距*/
      font-size:9pt;       /*设置字体大小*/
}
.copyright{
      color:red;      /*设置文字颜色*/
      list-style:none;    /*不显示项目符号*/
      line-height:20px;   /*设置行高*/
}
</style>
<div id="bottom">
<ul>
      <li>技术服务热线：400-675-1234 传真：0431-84971234 企业邮箱：123@m12isoft.com</li>
      <li>Copyright &copy; www.123.com All Rights Reserved! </li>
</ul>
</div>
<ul>
      <li>技术服务热线：400-675-1234 传真：0431-84971234 企业邮箱：123@m12isoft.com</li>
      <li>Copyright &copy; www.123.com All Rights Reserved! </li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $("div ul").addClass("copyright");          //为div元素的子元素ul添加样式
});
</script>

 

 

四 运行效果

 

 

五 运行说明

其中上面的版权信息是通过jQuery添加样式的效果，下面的版权信息为默认的效果。

• 
• 大小: 8.6 KB

• 查看图片附件