jquery 4 选择器【实现隔行变色】

<!DOCTYPE html>
<html>
<head>
<title>Accordion Menus</title>
<style type="text/css">
    body{font-size:12px;text-align:center}
    #tbStu{width:260px;background-color:#eee}
    #tbStu .trOdd{background-color:#6E7B8B}
</style>
 <script language="javascript" src="jquery-2.1.1.js"> </script>
 <script language="javascript"  type="text/javascript" >
     $(function(){

　　　//:nth-child(n)   第n个子节点，n从1开始;:even  页面范围内偶数的匹配元素
         $("#tbStu tr:nth-child(even)").addClass("trOdd");
     });
 
 </script>
</head>
<body>
    <table id="tbStu">
    <tr><td>姓名</td><td>学号</td><td>年龄</td></tr>
    <tr><td>王杰</td><td>201208373</td><td>26</td></tr>
    <tr><td>程灿</td><td>201208377</td><td>26</td></tr>
    <tr><td>陈晨</td><td>201208365</td><td>24</td></tr>
    </table>
</body>

</html>

　　jquery与JavaScript在检测机制方面的比较，JavaScript必须保证对象存在，否则会报错，而jQuery就算没有也不会报错。

时间： 2024-10-13 11:12:53

jquery 4 选择器【实现隔行变色】的相关文章

jQuery 表格应用：隔行变色，展开关闭，内容筛选

应用一:表格隔行变色 1.普通的隔行变色: 需要用到的 API $(':odd')    --> 匹配所有索引值为奇数的元素,从0开始计数 $(':even')   --> 匹配所有索引值为偶数的元素,从0开始计数 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>

jquery实现html表格隔行变色

效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> 实现表格隔行变色 </title> 5 <meta h

jquery插件之表格隔行变色并鼠标滑过高亮显示

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

8月7日 使用Jquery做表格的隔行变色,点击事件

首先,在php中引入Jquery,之后就可写代码了: <script type="text/javascript"> $(document).ready(function(e){ $("tr").each(function(i){ this.style.backgroundColor = ["#ccc","#fff"][i%2] }); }); </script> 同理,也可做隔单元格变色. 也可使用c

利用jQuery实现表格的隔行变色、高亮显示

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">table{text-align: center;font-weight: bold;}tr{height: 32px;}</style><script src="jquery-1.8

我的第一个jQuery插件--表格隔行变色

虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法:$.extend(object), $.fn.extend(object). 这篇博文对插件制作的讲解挺好的,就是有点长,但值得玩味:http://blog.csdn.net/guorun18/article/details/49819715 下面谈一个我对插件的(片面)理解: 插件分俩种: ·类级别组件开发

使一个特定的表格隔行变色(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>使一个特定的表格隔行变色</title> <script src="jquery-1.7.1.min.js" ty

如何使用jQuery实现隔行变色效果

如何使用jQuery实现隔行变色效果:隔行变色效果在网站有大量应用,尤其是在类似新闻列表这样的功能,对于行与行之间的区分有很大的好处,也提高了网站的人性化程度,虽然是个小功能,但是网站的流量都是从这样的小功能点点滴滴积累起来的.此效果可以使用CSS实现,但是由于现有浏览器对于CSS3支持度还不够好,所以使用js或者jQuery是不错的选择,下面就介绍一下如何使用jQuery实现此种效果.代码实例如下: 1 <!DOCTYPE html> 2 <html> 3 <head>

jquery实现的隔行变色代码实例

jquery实现的隔行变色代码实例: 隔行变色效果在大量的网站应用,尤其是表格或者新闻列表之类的结构,可以有效增强网站的辨识度,更为人性化,下面通过一个简单的实例介绍一下它的实现原理,至于它的美观度这里就不讲究了,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http:/

jQuery 表格隔行变色插件

jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: 1 ;(function($) { 2 $.fn.extend({ 3 //这里写插件代码 4 }); 5 })(jQuery); 例子:编写一个表格隔行变色插件 JS代码 1. 插件编写 1 //插件编写 2 ;(function($) { 3 $.fn.extend({ 4 "alterBgColor":function(op