JQuery_jquery での DOM イベント合成の使用分析例

この記事の例では、JQuery での DOM イベント合成の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

jQuery には、hover() メソッドと toggle() メソッドという 2 つの合成イベントがあります。前述の ready() メソッドと同様に、hover() メソッドと toggle() メソッドは両方とも jQuery のカスタム メソッドです。

hover() メソッド

hover() メソッドの構文構造は次のとおりです:
ホバー(入る、離れる);

hover() メソッドは、カーソルホバーイベントをシミュレートするために使用されます。カーソルが要素上に移動すると、指定された最初の関数 (enter) がトリガーされ、カーソルが要素の外に移動すると、指定された 2 番目の関数 (leave) がトリガーされます。

コードは次のとおりです:

$(function(){
 $("#panel h5.head").hover(function(){
  $(this).next().show();
 },function(){
  $(this).next().hide(); 
 })
})

コードを実行した後の効果は、次のコードを実行した後の効果と同じです。カーソルを「タイトル」リンク上にスライドさせると、対応する「コンテンツ」が表示され、カーソルを「タイトル」リンクからスライドさせると、対応する「コンテンツ」が非表示になります。

$(function(){ 
 $("#panel h5.head").mouseover(function(){ 
  $(this).next("div.content").show(); 
 }); 
 $("#panel h5.head").mouseover(function(){ 
  $(this).next("div.content").hide(); 
 }) 
});

注:

1. CSS には「:hover」などの疑似クラス セレクターがあり、ユーザーのカーソルが要素の上に置かれたときに要素の外観を変更します。ほとんどの準拠ブラウザでは、疑似クラス セレクターを任意の要素で使用できます。ただし、IE 6 では、擬似クラス セレクターはハイパーリンク要素にのみ使用できます。他の要素については、jQuery の hover() メソッドを使用できます。

2. hover() メソッドは、bind("mouseover") と binding("mouseout") を置き換えるのではなく、jQuery の binding("mouseenter") と binding("mouseleave") を正確に置き換えます。したがって、hover() メソッドの 2 番目の関数をトリガーする必要がある場合は、trigger("mouseout") の代わりにtrigger("mouseleave") を使用する必要があります。

toggle() メソッド

toggle() メソッドの文法構造は次のとおりです:
toggle(fn1, fn2, ...fnN);

toggle() メソッドは、連続的なマウス クリック イベントをシミュレートするために使用されます。初めて要素をクリックすると、指定された最初の関数 (fn1) がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数 (fh2) がトリガーされ、さらに関数がある場合は最後まで順番にトリガーされます。 1つ。後続のクリックごとに、これらの関数の呼び出しが順番に繰り返されます。

効果を強化する前の例では、次の jQuery コードが使用されました:

$(function(){
 $("#panel h5.head").toggle(function(){
  $(this).next().show();
 },function(){
  $(this).next().hide();
 })
})

toggle() メソッドを使用すると、同じ効果が得られるだけでなく、コードも簡素化されます。

toggle() メソッドには、jQuery における別の役割があります。それは、要素の表示状態を切り替えることです。要素が表示されている場合は、クリックして切り替えた後に非表示になります。要素が非表示の場合は、クリックして切り替えた後に表示されます。したがって、上記のコードは次の jQuery コードとして記述することもできます:

$(function(){ 
 $("#panel h5.head").toggle(function(){ 
  $(this).next().toggle(); 
 },function(){ 
  $(this).next().toggle(); 
 }) 
})

より良いユーザーエクスペリエンスを実現するには、ユーザーが「タイトル」リンクをクリックした後に「コンテンツ」を表示するだけでなく、「タイトル」も強調表示する必要があります。コードは次のとおりです:

$(function(){ 
 $("#panel h5.head").toggle(function(){ 
   $(this).addClass("highlight"); 
  $(this).next().show(); 
 },function(){ 
  $(this).removeClass("highlight"); 
   $(this).next().hide(); 
 }); 
})

コードを実行すると、「コンテンツ」が表示されている場合は「タイトル」が強調表示されます。「コンテンツ」が非表示の場合は、「ニュース タイトル」は強調表示されません。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。