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 插件 人性化的消息显示
Jan 21 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
Vue官方文档梳理之全局配置
Nov 22 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 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/12/06 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
Python清空文件并替换内容的实例
2018/10/22 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python实现动态数组的示例代码
2019/07/15 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
2014年电信员工工作总结
2014/12/19 职场文书
介绍信的写法
2015/01/31 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android