jquery 隔行变色

<ul>
                <li>我国中长期教育改革提出3种高考方案 近日,国内的民</li>
                <li>2009高等职业教育国际论坛(青岛)”上,青岛职业技术学院院长。</li>
                <li>我国中长期教育改革提出3种高考方案 近日,国内的民</li>
                <li>2009高等职业教育国际论坛(青岛)”上,青岛职业技术学院院长。</li>
                <li>我国中长期教育改革提出3种高考方案 近日,国内的民</li>
                <li>2009高等职业教育国际论坛(青岛)”上,青岛职业技术学院院长。</li>
                <li>我国中长期教育改革提出3种高考方案 近日,国内的民</li>
                <li>2009高等职业教育国际论坛(青岛)”上,青岛职业技术学院院长。</li>
                <li>我国中长期教育改革提出3种高考方案 近日,国内的民</li>
                <li>2009高等职业教育国际论坛(青岛)”上,青岛职业技术学院院长。</li>
                <li>我国中长期教育改革提出3种高考方案 近日,国内的民</li>
                <li>2009高等职业教育国际论坛(青岛)”上,青岛职业技术学院院长。</li>
                <li>我国中长期教育改革提出3种高考方案 近日,国内的民</li>
                <li>2009高等职业教育国际论坛(青岛)”上,青岛职业技术学院院长。</li>
                <li>我国中长期教育改革提出3种高考方案 近日,国内的民</li>
</ul>

<SCRIPT LANGUAGE="JavaScript">
<!--

　
   $(document).ready(function() {

   //自动隔行变颜色
   $("#F_BRight ul li:nth-child(even)").addClass("hr");

   //鼠标移动上去颜色变化 

   $("#F_BRight ul li").hover(function(){$(this).addClass("hr");},function(){$(this).removeClass("hr");}); 
   });
//-->
</SCRIPT>

 

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

返回值

Array<Element>

参数

index (Number) : 要匹配元素的序号，从1开始

示例

在每个 ul 查找第 2 个li

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:

$("ul li:nth-child(2)")

结果:

[ <li>Karl</li>,   <li>Tane</li> ]

hover(over,out)

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

返回值

jQuery

参数

over (Function) : 鼠标移到元素上要触发的函数

out (Function) : 鼠标移出元素要触发的函数

示例

鼠标悬停的表格加上特定的类

jQuery 代码:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);