8つのjQueryの方法、あなたは知っているべきです!

jQueryは最も有名なJSフレームワークになっています.それは簡単だからです.以前javascriptの煩雑な開発者が嫌いだったのも、jQueryのせいで考えが変わったはずだ.多くの時間を節約しました
jQueryドキュメントはjQueryの成功に役立ち、本当に役立ち、簡潔です.これらのドキュメントを通じて、私はいくつかの良い、面白い方法を見つけて、漏れないようにしたいと思っています.

1 .data()

.data()メソッドの代わりに.$.Data(element,key,value)はDOM要素に任意のタイプのデータを添付できますが、循環参照によるメモリ漏洩の問題は回避してください.
HTML 5では、以下のようにクラス別に使用できます.

< div data-type = "page" data-hidden = "true" data-options = '{"name":"John"}' ></ div >
 
//We can call it via:
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

以下は上と同じ効果です.

$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "John"});

説明:jQuery Documentation-.data()

2 .stop( [ clearQueue ], [ jumpToEnd ] )

この方法は、アニメーションを処理するときに非常に役立ちます.既存のすべてのアニメーションを終了し、現在の1つを再生できます.

$(this).find('img').stop(true, true).fadeOut();

説明:jQuery Documentation-.stop()

3 .toggleClass()

toggleClass()は、選択した要素を設定または削除する1つ以上のクラスを切り替えます.
1 $('#home').toggleClass('active');
上と同じ:

if ($('#home').hasClass('active')) {
     $('#home').removeClass('active');
   }
   else {
     $('#home').addClass('active');
   }

説明:jQuery Documentation-.toggleClass()

4 .delay( duration, [ queueName ] )

この方法は一連のアニメーションでいくつかの遅延を行い、効果的です.

$('#content').slideUp(300).delay(800).fadeIn(400);

説明:jQuery Documentation-.delay()

5 .each()

jqueryのeach関数は便利です$.each()関数は、1次元配列、多次元配列、DOM、JSONなど、Javascriptの開発中に$eachを使用すると、私たちの作業量を大幅に軽減する強力な遍歴機能をカプセル化しています.

/Given this HTML Structure
< ul >
     < li >Apple</ li >
     < li >Orange</ li >
     < li >Mango</ li >
     < li >Blueberry</ li >
     < li >Watermelon</ li >
</ ul >
 
//We can retrieve the value with:
$('li').each(function(index) {
     alert(index + ': ' + $(this).text());
});
 
 
//Alternatively, loop through JSON
var data = "{ name: "John", lang: "JS" }";
 
$.each( data, function(k, v){
    alert( "Key: " + k + ", Value: " + v );
}); 

説明:jQuery Documentation-.each()

6 .size()

それは簡単に理解され、覚えられます.

//Given this HTML Structure
< ul >
     < li >Apple</ li >
     < li >Orange</ li >
     < li >Mango</ li >
     < li >Blueberry</ li >
     < li >Watermelon</ li >
</ ul >
 
var size1 = $("li").size();
var size2 = $("li").length;

の上の例は5を返します.
説明:jQuery Documentation-.size()

7 .closest(selector)

エレメントに一致するセレクタ文字列

$('li.item-a').closest('ul').css('background-color', 'red');

説明:jQuery Documentation-.closest()

8 .position()

親要素に対する一致する要素のオフセットを取得します.返されるオブジェクトには、topとleftの2つの整数属性が含まれます.

var p = $("p:first");
var position = p.position();
alert("left: " + position.left + ", top: " + position.top);

説明:jQuery Documentation-.position()