利用jquery子属性过滤器实现隔行变色

利用jquery子属性过滤器实现隔行变色

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>   
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="text/javascript">  
$(function(){
    $("table tr:nth-child(even)").css("background-color","yellow");
    //选择所有偶数行,table是母元素,tr是子元素。之后一个冒号,后面是过滤器名称。其实感觉设计成$("table tr").(nth-child(even)也行。不过既然这么设计了,就得按这个来~
    $("table tr:nth-child(odd)").css("background-color","pink");
})
</script>  
</head>  
  
<body>  
<div align="left">隔行变色</div>  
<table width="462" height="152" border="1">  
    <tr>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
    </tr>  
    <tr>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
    </tr>  
    <tr>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
    </tr>  
    <tr>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
    </tr>  
    <tr>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
    </tr>  
</table>  
</body>  
</html>

之前这个方法不够简单
css实现隔行换色 - 简书

参考

jQuery子属性过滤选择器用法分析jquery脚本之家

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,849评论 0 44
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 5,610评论 0 11
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,765评论 18 503
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 4,671评论 0 2
  • 预习: **、str() 2.3.5 使用字符串时避免语法错误 在用单引号括起的字符串中,如果包含撇号,就会导致错...
    Mr_wang001阅读 2,629评论 1 1