ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryにはどのような機能があるのでしょうか?

jQueryにはどのような機能があるのでしょうか?

藏色散人
藏色散人オリジナル
2020-11-26 11:35:183533ブラウズ

jquery 関数には次のものが含まれます: 1. "delay(duration,[queueName])" 関数; 2. "jQuery live(type, fn)" 関数; 3. ".live()" 関数; 4. " 「position()」関数; 5. 「stop()」関数など。

jQueryにはどのような機能があるのでしょうか?

推奨: 「jquery チュートリアル

  • この方法は、すべてのブランドのコンピューター。

一般的な jquery 関数とメソッドの概要

1.lay(duration,[queueName])

遅延を設定して、キュー内の後続の項目の実行を遅らせます。

jQuery 1.4 の新機能。キュー内の関数の実行を遅らせるために使用されます。アニメーション キューの実行を遅らせることも、カスタム キューで使用することもできます。

duration: 遅延時間、単位: ミリ秒

queueName: キュー名詞、デフォルトは Fx、アニメーション キューです。

例:

頭部と下部の遅延読み込みアニメーション効果

$(document).ready(function() {
  $('#header') .css({ 'top':-50 }) .delay(1000).animate({'top': 0}, 800);
  $('#footer') .css({ 'bottom':-15 }) .delay(1000).animate({'bottom': 0}, 800); 
});

2.jQuery live(type, fn) 委任イベントの実装

Query 1.3 の新しいメソッド。イベント ハンドラー (クリック イベントなど) を現在および将来の一致するすべての要素にバインドします。カスタム イベントをバインドすることもできます。

現在、クリック、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress、keyup をサポートしています。

Blur、focus、mouseenter、mouseleave、change、submit はまだサポートされていません。

bind() とは異なり、live() は一度に 1 つのイベントのみをバインドできます。

このメソッドは従来のバインドと非常に似ていますが、ライブを使用してイベントをバインドすると、(委任を使用して) イベントをページ上の現在および将来のすべての要素にバインドする点が異なります。たとえば、live を使用してクリック イベントをページ上のすべての li にバインドするとします。その後、将来このページに li が追加された場合でも、この新しく追加された li のクリック イベントは引き続き使用できます。この新しく追加された要素にイベントを再バインドする必要はありません。

.live() は人気のある liveQuery プラグインに非常に似ていますが、いくつかの大きな違いがあります:

.live は現在、すべてのイベントのサブセットのみをサポートしています。リストについては上記の説明を参照してください。

.live は、liveQuery が提供する「イベントなし」スタイルのコールバック関数をサポートしていません。 .live はイベント処理関数のみをバインドできます。

.live には「セットアップ」および「クリーンアップ」プロセスがありません。すべてのイベントは要素に直接バインドされるのではなく委任されるためです。

ライブにバインドされたイベントを削除するには、die メソッドを使用してください

使用例:

<p class=”myp”></p>

jquery:

$(“.myp”).live(“click”, function(){
alert(“clicked!”);
});

JavaScript を使用してクラス myp の要素を動的に作成する場合でも、要素をクリックするとポップアップが表示されます。ライブ使用後にこの問題が発生するのはなぜですか?これは、jquery がイベント バブリング メカニズムを使用してイベントをドキュメントに直接バインドし、event.target を通じてイベントのソースを見つけるためです。これは jquery.livequery プラグインとは異なります。jquery.livequery は 20 ミリ秒ごとにチェックし、新しいイベントがある場合はイベントを再バインドします。

もちろん、ライブの使用には利点と欠点があります:

利点は、要素が更新されたときにイベントを繰り返し定義する必要がないことです。

欠点は、イベントをドキュメントにバインドすると、ページ上のすべての要素に対して 1 回呼び出されるということであり、不適切に使用すると、パフォーマンスに重大な影響を及ぼします。

また、ぼかし、フォーカス、mouseenter、mouseleave、change、submit はサポートされていません。

2. live でバインドされたイベントを削除する

Jquery では、live を使用してイベントをバインドし、イベントを削除したい場合は die メソッドを使用します。

例:

$(“.myp”).die("click");

これにより、バインド クリック イベントが削除されます。

3. 絶対および相対位置座標を取得するための JQuery offset()、position() メソッド

ページ上の要素の絶対 X、Y 座標を取得するには、 offset() メソッドを使用できます: (body 属性設定 margin: 0; padding: 0;)

var X = $(&#39;#pID&#39;).offset().top; 
var Y = $(&#39;#pID&#39;).offset().left;

例:

$(".produc a span").click(function(){
 $(&#39;body, html&#39;).animate({scrollTop:$(&#39;#buy&#39;).offset().top }, &#39;slow&#39;);
 });

相対 (親要素) 位置を取得します:

var X = $(&#39;#pID&#39;).position().top; 
var Y = $(&#39;#pID&#39;).position().left; 
var left = $("selector").offset().left;//元素相当于窗口的左边的偏移量
var top = $("selector").offset().top;//元素相对于窗口的上边的偏移量
var pleft = $("selector").scrollLeft();//元素相对于滚动条左边的偏移量
var pTop = $("selector").scrollTop();//元素相对于滚动条顶部的偏移量

4.jquery はマウスの位置を取得します

 $(function () {
      //e为事件名;
      $(document).mousemove(function (e) {
        $("p").text("X:" + e.pageX + "  Y:" + e.pageY);
      });

    });

5.jquery は要素に特定のクラスが含まれているかどうか、特定の属性が存在するかどうか、および特定の属性を削除する方法を決定します属性。

JQueryのコーディングでは、要素が何らかの属性を持っているかどうか、例えばclass="new"というスタイルが含まれているかどうかを判定しますが、JQueryの判定はhasClassメソッドがあるため非常に簡単です。 $( "input[name=new]").hasClass("new") を使用して判断できます。

現時点では既製のメソッドはありません。特定の属性がある場合$("#aid") .attr("rel") は rel の値を返します。 rel 属性が存在しない場合は、「unknown」を返します。
unknown は未定義の型です。if($("# aid").attr("rel")== "unknown") この判断は当てはまらない可能性があります。
型が異なるためです。

if(typeof( $("#aid").attr("rel"))==" 未定義") で十分です。

jquery は jquery オブジェクトの属性を削除します: $(".main").removeAttr("style");

6.jquery stop() の使用法 (効果的な方法)アニメーションの蓄積をクリアします)

1、stop([stopAll], [gotoEnd])方法有两个参数(当然可以不传或直传一个),其中stopAll的意思是清除之后的所有动画。gotoEnd的意思是,执行完当前动画。

2、stopAll == true时,停止队列中的所有动画, stopAll ==false时,只停止队列中的当前动画,后续动画继续执行。

3、gotoEnd == true时,立即跳到当前动画的末尾, gotoEnd ==false时,停在当前状态。且gotoEnd只有在设置了stopAll的时候才起作用

4、在项目中,如果不进行动画队列清理,就会产生动画积累的问题。因此在写入动画时,最好先清除队列中的重复动画。

在项目中,例如做下拉二级导航效果,用到jquery的slideDown()与slideUp()方法,当鼠标快速晃动后,如果不进行动画队列清理,就会产生动画积累,出现问题。

例如:

$(".nav li.has_list").hover(function(){
  $(this).children("a").addClass("curr");
  $(".nav li.has_list").children("p").stop(false,true);
  $(this).children("p").slideDown(400).end();              
},function(){
  $(this).children("a").removeClass("curr");
  $(".nav li.has_list").children("p").stop(false,true);
  $(this).children("p").slideUp(400).end();
  }
);

以上内容就是本文关于jquery常用函数与方法汇总,希望大家喜欢。

以上がjQueryにはどのような機能があるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。