jQuery 사용자 매뉴얼 이벤트 처리_jquery-JS 튜토리얼-php.cn

jQuery 사용자 매뉴얼 이벤트 처리_jquery

WBOY

풀어 주다： 2016-05-16 19:16:23

원래의

1351명이 탐색했습니다.

hover(Function, Function) 当鼠标move over时触发第一个function，当鼠标move out时触发第二个function
样式：
Html代码：

sdf

jQuery代码及效果

$(function(){
  $("#a").hover(function(){$(this).addClass("red");},
                            function(){ $(this).removeClass("red");
                          });
})

最终效果是当鼠标移到id为a的层上时图层增加一个red样式，离开层时移出red样式

toggle(Function, Function) 当匹配元素第一次被点击时触发第一个函数，当第二次被点击时触发第二个函数
样式：
Html代码：

sdf

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인 콘텐츠에 로드한 다음 함수 콜백을 실행합니다.
loadIfModified(url, params, callback) get 메소드를 사용하여 원격 페이지에 매개변수를 전달합니다. 마지막 요청 이후 데이터가 변경된 경우에만 응답하고 반환된 결과를 로드합니다. 페이지 DOM , 콜백 함수 실행
ajaxStart(callback) ajax 요청에 오류가 발생하면 콜백 함수 실행
ajaxComplete(callback) ajax 요청이 완료되면 콜백 함수 실행
ajaxError(callback) ajax 요청이 발생하면 콜백 함수 실행
ajaxStop(callback) ajax 요청이 발생하면 중지하고 콜백 함수 실행
ajaxSuccess( callback) ajax 요청 성공 시 콜백 함수 실행

🎜>
: jQuery 플러그인 jQuery가 널리 사용되면서 Thickbox, iFX, jQuery-googleMap 등 수많은 jQuery 플러그인이 등장했습니다. Simple 이러한 소스 파일을 참조하면 이러한 플러그인을 쉽게 사용할 수 있습니다. 여기에서는 참고할 수 있는 몇 가지 URL을 간략하게 소개합니다. 이 웹사이트 헤더는 수많은 데모를 제공하며, 좋은 전자 텍스트가 없더라도 빠르게 마스터할 수 있습니다.
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
중국어 소개, 용골 번역

http://jquery.com/api
제공 jquery 여러분의 편의를 위해 기본적인 메소드를 모두 소개하고 시연해 드립니다!