会员中心
用户名:    密码:    验证码:      免费注册会员

jquery手册   CSS2手册       请关注健康

来源: 作者: 发布时间:2007-02-06
雅虎收藏夹 百度收藏 Google书签 Yahoo书签 新浪ViVi 搜狐网摘 365Key网摘 天极网摘 diglog 和讯网摘 POCO网摘 YouNote网摘 博拉网 天下图摘 Del.icio.us digg reddit spurl BlinkList blogmarks

六:事件处理

hover(Function, Function)   

当鼠标move over时触发第一个function,当鼠标move out时触发第二个function
样式:<style>.red{color:#FF0000}</style>
Html代码: <div id="a">sdf</div>

jQuery代码及效果

$(function(){
  $("#a").hover(function(){$(this).addClass("red");},
                            function(){ $(this).removeClass("red");
                          });
})

最终效果是当鼠标移到id为a的层上时图层增加一个red样式,离开层时移出red样式

toggle(Function, Function)   

当匹配元素第一次被点击时触发第一个函数,当第二次被点击时触发第二个函数
样式:<style>.red{color:#FF0000}</style>
Html代码: <div id="a">sdf</div>

jQuery代码及效果

$(function(){
  $("#a"). toggle (function(){$(this).addClass("red");},
                              function(){ $(this).removeClass("red");
                            });
})

最终效果是当鼠标点击id为a的层上时图层增加一个red样式,离开层时移出red样式

bind(type, fn)  

用户将一个事件和触发事件的方式绑定到匹配对象上。

trigger(type)  

用户触发type形式的事件。$("p").trigger("click")
还有:unbind()   unbind(type)    unbind(type, fn)

Dynamic event(Function)   

绑定和取消绑定提供函数的简捷方式

例:

$("#a").bind("click",function() {
                                       $(this).addClass("red");
})

也可以这样写:

$("#a").click(function() {
                        $(this).addClass("red");
});

最终效果是当鼠标点击id为a的层上时图层增加一个red样式,


相关文章

  • 如何用jquery返回一个DOM对象

    作者: http://www.csser.com 首先我们针对以下html源码获取p对象: divimg src="test1.jpg"/ pimg src="test2.jpg"//p/di

  • jQuery入门指南第一步

    用jquery开始吧 这个指南是对jquery库的一个总的介绍,当然你也被要求具备javascript和DOM(文档对象模型)的相关知识。该

  • jQuery函数$支持的参数总结

    作者: http://www.csser.com/ jquery 函数支持的 参数总结,如有遗漏请指出,谢谢: 1、jquery 对象支持接受 html 字符串

  • jQuery的选择器的使用

    无常翻译: http://wuchang.cnblogs.com wuChang@guet.edu.cn QQ: 3263262 Retrieved from " http://www.docs.jquery.com/

  • XHTML代码规范

    文章来源:网页设计师 1.所有的标记都必须要有一个相应的结束标记 以前在HTML中,你可以打开许多标签,例如p和li而不一定

  • DOCTYPE(文档类型)简介

    先来看一段代码声明: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

  • 在MOZ(firefox)下使没有空格的英文折行

    原文: 在MOZ(firefox)下使没有空格的英文折行 作者:比尔-盖帽 解决办法: IE: 在容器的css中加word-break:break-all

  • HTML元素的默认CSS设置

    Google了一下,这篇文章属于老文了,鉴于它还是比较实用的文章,所以转过来,没看过的可以看一下,早就看过的就温习下,出