jQuery使用手册之事件处理(7)

简介: jQuery的事件处理,有方法:hover(Function, Function) 当鼠标move over时触发第一个function,当鼠标move out时触发第二个function 样式: .

jQuery的事件处理,有方法:
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样式

另外jQuery的事件处理还有:
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提供的函数有以下

  • 用于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):增加一个点击时不触发某函数的事件。

上面列举的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法扩展。
目录
相关文章
N..
|
2月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
13 1
|
2月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
12 0
|
2月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
23 1
|
7月前
|
JavaScript 前端开发
前端基础 - JQuery事件切换(原来还有这种写法)
前端基础 - JQuery事件切换(原来还有这种写法)
31 0
|
7月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery:数组遍历和事件】
Javascript知识【jQuery:数组遍历和事件】
|
10天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
1月前
|
Web App开发 JavaScript 前端开发
jquery的冒泡事件event.stopPropagation()
jquery的冒泡事件event.stopPropagation()
8 0
|
2月前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
10 0
|
2月前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
9 0
|
4月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
42 0