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 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP4.04简明安装
2006/10/09 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python实现DES加密解密方法实例详解
2015/06/30 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
使用Python进行目录的对比方法
2018/11/01 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
2014年街道办事处工作总结
2014/12/11 职场文书
校车安全管理责任书
2015/05/11 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers