jqueryイベント関数

文書ディレクトリ

jqueryイベント関数

ドキュメントロード関数

イベント関数

をクリック

非表示要素関数

フォーカス関数を失う

データ変更トリガ関数

マウスダブルクリックイベント関数

その他の単純関数

要素バインドイベントメソッド

サブエレメントイベント付加方法

イベントローテーション方法

イベント励起方法

イベント属性

jQuery名競合

jqueryイベント関数
イベントハンドラとは、HTMLでイベントが発生したときに呼び出されるメソッドです.用語は、イベント「トリガ」(または「励起」)によってよく使用される.
ドキュメントのロード関数

//    body   οnlοad=
//            
$(document).ready(function() {
   //     
});

イベント関数をクリック

$("button").click(function() {..some code... } ); // buttion   onclick  

要素関数の非表示

$("#p1").hide(); // id=p1     

フォーカスを失う関数

$("selector").blur(function() {...some code...}); //  onblur  

データへんこうトリガかんすう

$("selector").change();

イベント関数をダブルクリック

$("selector").dblclick();

その他の単純関数
このような単純なイベント関数は、たとえば

focus(); //    
keydown(); //        
keypress(); //           
keyup(); //        
mousedown(); //      
mouseenter(); //        ,                ,      
mouseleave(); //        ,                ,      
mousemove(); //          
mouseover(); //        ,                ,      
mouseout(); //        ,                ,      
mouseup(); //          
resize(); //           ,   resize  
scroll(); //           ，    scroll   
select(); //  textarea        input           ，    select   
submit(); //      ,    submit  
$("selector").error(); //       （      ） ，   error   
load(); //     （    ）    ，    load()   。
unload(); //        ,    unload  

要素バインドイベントメソッド

$("selector").bind(functionName, function);//              ,            
$("selector").live(childSelector, functionName, function); //              ,            
$("selector").one(functionName, function); //         ,           
$("selector").unbind(); //    bind     
$("selector").die(); //          live()                      

サブエレメントイベントの追加方法

$("selector").delegate(childSelector, functionName, function);
// childSelector  selector    
// functionName   childSelector       
/*
	             ,            ,            
*/
//  : 
$("div").delegate("$('p')", "click", function() {
    $(this).css("color", "red");
}); //      div    p  ,     color    
//     ,  undelegate()  

イベントのローテーション方法

$("selector").toggle(function1, function2, ...,functionn); //          ,           
//   
$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
); //     body    ,      toggle  ,      .    green,    red....

イベント励起方法

$("selector").trigger(event);//  selector event  
$("button").click(function(){
  $("input").trigger("select");
}); //        ,    input select  

イベントのプロパティ
次のプロパティを実行する場合は、eventイベントパラメータをメソッドに渡す必要があります.
例はw 3 cを表示することができる:

event.pageX, event.pageY //                   

event.preventDefault(); //         ,     submit        
$("a").click(function(event){
  event.preventDefault();
});

event.result(); //       
$("button").click(function(e) {
  $("p").html(e.result);
});

event.target(); //        DOM  
$("p, button, h1, h2").click(function(event){
  $("div").html("Triggered by a " + event.target.nodeName + " element.");
});

event.timeStamp//       1970 1 1        
$("button").click(function(event){
  $("span")html(event.timeStamp);
});

event.type //         
$("p").bind('click dblclick mouseover mouseout',function(event){
  $("div").html("Event: " + event.type);
});

event.which //           ,          

jQuery名の競合
jQueryは、jQueryのプロフィールとして$記号を使用します.Prototypeなどの他のJavaScriptライブラリの関数でも$記号が使用されています.noConflict()メソッドを使用して$の名前を変更します.

var jq = jQuery.noConflict(); // $  jq