一般的な jquery 関数とメソッドのまとめ_jquery

1.delay(duration,[キュー名])

遅延を設定して、キュー内の後続のアイテムの実行を遅らせます。

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

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

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) 委任イベントの実装

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

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

ぼかし、フォーカス、mouseenter、mouseleave、change、submit

はまだサポートされていません

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

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

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

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

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

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

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

使用例:

<div class=”myDiv”></div>

jquery:

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

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

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

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

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

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

2. ライブバインドされたイベントを削除します

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

例:

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

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

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

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

var X = $('#DivID').offset().top; 
var Y = $('#DivID').offset().left; 

例:

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

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

var X = $('#DivID').position().top; 
var Y = $('#DivID').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判断某个元素是否含有某个class,是否存在某些属性，怎样移除某些属性。

在JQuery编码中,我们会判断元素是否存在某个属性.比如是否包含 class="new" 的样式呢.JQuery判断就非常简单了,因为有 hasClass这个方法 $("input[name=new]").hasClass("new") 即可判断.

这时就没有现成的方法了. 如果存在某个属性 $("#aid").attr("rel") 会返回 rel的值,如果不存在 rel属性则会返回"undefined"
undefined 就是 undefined类型 , if($("#aid").attr("rel")=="undefined") 这个判断可能不成立.
因为类型不相同.

建议使用 if(typeof($("#aid").attr("rel"))=="undefined") 即可。

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("div").stop(false,true);
  $(this).children("div").slideDown(400).end();              
},function(){
  $(this).children("a").removeClass("curr");
  $(".nav li.has_list").children("div").stop(false,true);
  $(this).children("div").slideUp(400).end();
  }
);

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