优秀js开源框架-jQuery使用手册(4)

原创 2007年10月01日 10:49:00

 六:事件处理

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以下,如果大家发现好的了,可以留言共享以下!

相关文章推荐

APP自动化框架LazyAndroid使用手册(4)--测试模板工程详解

概述前面的3篇博文分别对lazyAndroid的框架简介、元素抓取和核心API进行了说明,本文将基于框架给出的测试模板工程,详细阐述下使用该框架进行安卓UI自动化测试的步骤。...

Web自动化框架LazyUI使用手册(4)--控件抓取工具Elements Extractor详解(批量抓取)

概述 前面的一篇博文详细介绍了单个控件抓取的设计思路&逻辑以及使用方法,本文将详述批量控件抓取功能。 批量抓取:打开一个web页面,遍历页面上所有能被抓取的元素,获得每个元素的iframe、和三个...

JS+JQuery使用手册

  • 2010年07月20日 18:47
  • 3.97MB
  • 下载

JS与jquery 使用手册

  • 2014年07月15日 11:04
  • 1.13MB
  • 下载

jQuery使用手册之DOM操作

jQuery使用手册之DOM操作
  • wzh1215
  • wzh1215
  • 2011年03月18日 11:42
  • 366

表单效验jQuery.validate.js+使用手册

  • 2016年09月01日 10:59
  • 187KB
  • 下载

Jquery使用手册7--Ajax支持 作者:choy

====================================================== 注:本文源代码点此下载 =============================...

jQuery使用手册

明:该css选择Xpathhtml来匹配目标jQuery基础参数::字符串,一个查询html 行前: ponep div ptwop divpthreep a ="#"="te...
  • zztfj
  • zztfj
  • 2011年05月26日 18:24
  • 884

jQuery使用手册(七)

jQuery 使用手册,大家可以耐心的看完,就基本上入门了。 七: Ajax支持 通用方式: $.ajax(prop) 通过一个ajax请求,回去远程数据,prop是一个hash表,它可以传...

jQuery 使用手册(一)

jQuery 使用手册,大家可以耐心的看完,就基本上入门了。 一:核心部分 $(expr) 说明:该函数可以通过css选择器,Xpath或Html代码来匹配目标元素,所有的jQuery操作都以此...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:优秀js开源框架-jQuery使用手册(4)
举报原因:
原因补充:

(最多只允许输入30个字)