posts - 167,  comments - 30,  trackbacks - 0
 

六:事件处理

 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"); 
                          });
})

最终效果是当鼠标移到ida的层上时图层增加一个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"); 
                            });
})

最终效果是当鼠标点击ida的层上时图层增加一个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");
});

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

jQuery
提供的函数
用于browers事件
error(fn)    load(fn)     unload(fn)    resize(fn)    scroll(fn)

用于form事件
change(fn)    select(fn)    submit(fn)

用于keyboard事件
keydown(fn)    keypress(fn)    keyup(fn)
用于mouse事件
click(fn)    dblclick(fn)    mousedown(fn)   mousemove(fn)
mouseout(fn)  mouseover(fn)     mouseup(fn)

用于UI事件
blur(fn)    focus(fn)


以上事件的扩展再扩展为5
举例,click(fn) 扩展 click()  unclick()  oneclick(fn)  unclick(fn)
click(fn)
:增加一个点击时触发某函数的事件
click()
:可以在其他事件中执行匹配对象的click事件。
unclick ()
:不执行匹配对象的click事件。
oneclick(fn)
:只增加可以执行一次的click事件。
unclick (fn)
:增加一个点击时不触发某函数的事件。
上面列举的用于browersformkeyboardmouseUI的事件都可以按以上方法扩展。

posted on 2010-09-02 14:15 David1228 阅读(254) 评论(0)  编辑  收藏 所属分类: JQuery

只有注册用户登录后才能发表评论。


网站导航:
 

<2010年9月>
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

常用链接

留言簿(4)

随笔分类

随笔档案

文章档案

新闻分类

新闻档案

相册

收藏夹

Java

Linux知识相关

Spring相关

云计算/Linux/虚拟化技术/

友情博客

多线程并发编程

开源技术

持久层技术相关

搜索

  •  

积分与排名

  • 积分 - 356970
  • 排名 - 154

最新评论

阅读排行榜

评论排行榜