jquery技巧

以下转自jquery文档

 

 

jquery的toggle

返回值:jQuerytoggle(fn, fn2, [fn3, fn4, ...])

概述

每次点击后依次调用函数。

如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。

可以使用unbind("click")来删除。

参数

fnFunction

第一数次点击时要执行的函数。

fn2Function

第二数次点击时要执行的函数。

fn3, fn4, ... (可选)Function

更多次点击时要执行的函数。

示例

描述:

对表格的切换一个类

HTML 代码:

  <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>
    <li>Take a jog</li>
  </ul>

jQuery 代码:

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

描述:

对列表的切换样式

HTML 代码:

  <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>
    <li>Take a jog</li>
  </ul>

jQuery 代码:

    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":", "color":"});
      }
    ); 

jQuery外观效果
 
addClass(class)和removeClass(class)
代码：
$(".stripe tr").mouseover(function(){
               $(this).addClass("over");}).mouseout(function(){
               $(this).removeClass("over");})
});
 也可以写成：
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });
 
作用：为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码