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 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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/03 新手入门
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
用C++封装MySQL的API的教程
2015/05/06 Python
python基于递归解决背包问题详解
2019/07/03 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
荟萃全球保健品:维他购
2018/05/09 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
远程研修随笔感言
2014/02/10 职场文书
幼儿园开学寄语
2014/04/03 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
教师对学生的评语
2014/04/28 职场文书
广告宣传策划方案
2014/05/21 职场文书
作风建设演讲稿
2014/05/23 职场文书
好的旅游活动方案
2014/08/19 职场文书
六年级学生期末评语
2014/12/26 职场文书
经营场所证明范本
2015/06/19 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js