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的一个简单的脚本验证插件
Apr 05 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
深入了解JavaScript词法作用域
Jul 29 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生成便于打印的网页
2006/10/09 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
显示、隐藏密码
2006/07/01 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
百度地图api如何使用
2015/08/03 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python3.x实现base64加密和解密
2019/03/28 Python
python如何制作缩略图
2019/04/30 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python中如何写类
2020/06/29 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
2014小学数学教研组工作总结
2014/12/06 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书