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动态创建div
Sep 25 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
浅析Ajax语法
Dec 05 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
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
一个捕获函数输出的函数
2007/02/14 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
jquery css实现流程进度条
2020/03/26 jQuery
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
python中文乱码的解决方法
2013/11/04 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
Django框架视图介绍与使用详解
2019/07/18 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python自动下载图片的方法示例
2020/03/25 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
大学生旷课检讨书
2014/01/22 职场文书
优秀员工推荐信
2014/05/10 职场文书
申报材料格式
2014/12/30 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
看雷锋电影观后感
2015/06/10 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python