jQuery使用手册之 事件处理


Posted in Javascript onMarch 24, 2007

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的事件都可以按以上方法扩展。

                                       :Ajax支持

 通用方式:
$.ajax(prop)    通过一个ajax请求,回去远程数据,prop是一个hash表,它可以传递的key/value有以下几种
         (String)type:数据传递方式(get或post)。
         ((String)url:数据请求页面的url
         ((String)data:传递数据的参数字符串,只适合post方式
         ((String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
         ((Boolean)ifModified: 当最后一次请求的相应有变化是才成功返回,默认值是false
         ((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout
         ((Boolean)global:是否为当前请求触发ajax全局事件,默认为true
         ((Function)error:当请求失败时触发的函数。
         ((Function)success:当请求成功时触发函数
         ((Function)complete:当请求完成后出发函数
jQuery代码及说明

$.ajax({url: "ajax.htm",
          success:
function(msg){ 
                         $(div
"#a").html(msg);
                } 
    });
将ajax.htm返回的内容作为id为a的div内容
$.ajax({ url: "ajax.aspx",
              type:
"get",           
             dataType:
"html",
             data: 
"name=John&location=Boston",
             success:
function(msg){ 
                                 $(
"#a").html(msg);
                              } 
         });

用get方式向ajax.aspx页面传参数,并将返回内容负给id为a的对象。

$.ajaxTimeout(time) 设置请求结束时间
   $.ajaxTimeout( 5000 )

其它简化方式:

$.get(url, params, callback)  用get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选择

$.get( "ajax.htm" , function(data){ $("#a").html(data)  })
$.get(   "ajax.asp"
            { name: 
"young", age: "25" },
            function(data){ alert("Data Loaded: " + data); }
        ) 
$.getIfModified(url, params, callback)  用get方式向远程页面传递参数,从最后一次请求后如果数据有变化才作出响应,执行函数callback
$.getJSON(url, params, callback)  用get方式向远程json对象传递参数,请求完成后处理函数callback。
$.getScript(url, callback)  用get方式载入并运行一个远程javascript文件。请求完成后处理函数callback。
$.post(url, params, callback)  用post方式向远程页面传递参数,请求完成后处理函数callback
load(url, params, callback)  载入一个远程文件并载入页面DOM中,并执行函数callback
$("#a").load("ajax.htm"function() { alert("load is done"); } );
向ajax.htm页面发出请求,将返回结果装入id为a的内容中,然后再执行函数callback。
loadIfModified(url, params, callback)  用get方式向远程页面传递参数,从最后一次请求后如果数据有变化才作出响应,将返回结果载入页面DOM中,并执行函数callback
ajaxStart(callback) 当ajax请求发生错误是时执行函数callback
ajaxComplete(callback)  当ajax请求完成时执行函数callback
ajaxError(callback)  当ajax请求发生错误时执行函数callback
ajaxStop(callback)  当ajax请求停止时执行函数callback
ajaxSuccess(callback)  当ajax请求成功时执行函数callback

   

                                       :jQuery插件

     随着jQuery的广泛使用,已经出现了大量jQuery插件,如thickbox,iFX,jQuery-googleMap等,简单的引用这些源文件就可以方便的使用这些插件。这里我简单的介绍一些网址供大家参考,这些网站头提供了大量的demo,并且使用及其简单,及时E文不好,也能快速掌握!
    http://jquery.com/plugins     官方推荐
    http://interface.eyecon.ro/demos    效果超级棒,使用更简单,一定有你喜欢的!
    http://www.dyve.net/jquery/
    http://bassistance.de/jquery-plugins

   还有其它很多插件,大家可以google以下,如果大家发现好的了,可以留言共享以下!

    ——————————————————————————————————————————————

    至此jQuery已经介绍完毕,并合并整理提供给大家 下载 ,更多详细的使用请大家参考官方网站,下面我再推荐一些jQuery的学习网站方便大家更好的掌握这项工具!
    http://keel.sike.googlepages.com/jQuery_getting_started.html     中文入门介绍,Keel翻译
    http://jquery.com/api      jquery提供全部基本方法的介绍及demo,方便大家查询!

Javascript 相关文章推荐
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
jQuery使用手册之三 CSS操作
Mar 24 #Javascript
jQuery使用手册之二 DOM操作
Mar 24 #Javascript
jQuery使用手册之一
Mar 24 #Javascript
5 cool javascript apps
Mar 24 #Javascript
用JQuery 实现的自定义对话框
Mar 24 #Javascript
JQuery 简便实现页面元素数据验证功能
Mar 24 #Javascript
AutoSave/自动存储功能实现
Mar 24 #Javascript
You might like
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
python实现给数组按片赋值的方法
2015/07/28 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python dlib人脸识别代码实例
2019/04/04 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
幼儿园家长评语
2014/02/10 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
员工保密协议书
2014/09/27 职场文书
高中生逃课检讨书
2014/10/10 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
导游词之阆中古城
2019/12/23 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
MySQL 如何限制一张表的记录数
2021/09/14 MySQL