jQuery 使用手册(六)


Posted in Javascript onSeptember 23, 2009

:事件处理

 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提供的函数
用于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的事件都可以按以上方法扩展。

Javascript 相关文章推荐
JS 文件本身编码转换 图文教程
Oct 12 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
js正则表达式的使用详解
Jul 09 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
ES6的新特性概览
Mar 10 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
Vue父子之间值传递的实例教程
Jul 02 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
jQuery 使用手册(五)
Sep 23 #Javascript
jQuery 使用手册(四)
Sep 23 #Javascript
jQuery 使用手册(三)
Sep 23 #Javascript
jQuery 使用手册(二)
Sep 23 #Javascript
jQuery 使用手册(一)
Sep 23 #Javascript
JavaScript 变量命名规则
Sep 23 #Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 #Javascript
You might like
调频问题解答
2021/03/01 无线电
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
js函数调用的方式
2014/05/06 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
费用会计岗位职责
2014/01/01 职场文书
教育学习自我评价
2014/02/03 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
优秀实习生感言
2014/03/01 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
考研导师推荐信范文
2015/03/27 职场文书
思想品德课教学反思
2016/02/24 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis
win10更新失败无限重启解决方法
2022/04/19 数码科技