jQueryの使い方を簡単にまとめたtips_jquery

1. 最新の jquery バージョンを使用する
この提案には議論の余地があると思いますが、新しい jquery バージョンはパフォーマンスが向上していますが、1.4.2 から 1.4.2 への変更などにより、依然としていくつかのバグが発生します。 1.5 では、多くの友人が ajax の問題について不満を言いました。古いページの jquery をアップグレードするときは注意する必要があり、新しいプロジェクトには新しいバージョンの jquery を大胆に使用できるという提案です。

もう 1 つの提案は、Google の CDN で jquery ファイルを使用することです。これにより、読み込みが速くなります。 Google Libraries API をクリックして表示します。

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

2. セレクターはシンプルにしてください Minghe はこの提案に非常に同意します。要素にスタイルや ID を追加し、それを維持したい HTML は単純なので、要素を取得するために jquery の強力なセレクターを使用するのは良い習慣ではありません。まず、セレクターが複雑になればなるほど、走査効率が低下することは明らかです。次に、複雑なセレクターではタグ名と階層構造が固定化されます。 html 構造の変更やラベルの変更は、取得失敗の直接の原因となります。

コードをコピー コードは次のとおりです。

$('li[data-selected= "true" ] a') // 派手だが遅い
$('li.selected a') // より良い
$('#elem') // 最高

DOM にアクセスします。これは JavaScript の中で最もリソースとパフォーマンスを消費する部分であるため、DOM の複雑な走査や繰り返しの走査は避けるようにしてください。
DOM を繰り返し走査することを避ける方法は、$() で取得した要素を次のコードのような変数に格納することです:

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

var button = $('#navigation a.button');

// とても良いです。 $ プレフィックスを使用して jquery オブジェクトの習慣をマークすることを推奨します。

コードをコピー コードは次のとおりです。

var $buttons = $('#navigation a.button ');
var $buttons = $('#navigation a.button');

jquery セレクターは、:visible などのほとんどの css3 疑似クラス メソッドをサポートします。 hidden、:アニメーションは非常に便利ですが、使用には注意してください。擬似クラス セレクターを使用する場合、jQuery は querySelectorAll() を使用する必要があり、パフォーマンスの損失が大きくなるからです。


3. jQuery オブジェクトは配列として処理されます。 jQuery オブジェクトは配列形式で操作されると、実際には DOM 要素になります。次のコードのように、子 jQuery オブジェクトではなく要素を使用します。

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

// すべてのナビゲーション ボタンを選択します:
var button = $('#navigation a.button');

// ボタン オブジェクトを移動します

コードをコピーします コードは次のとおりです。

for(var i=0;iconsole.log(buttons[i]); // これは jQuery オブジェクトではなく DOM 要素です。
}

// スライスすることもできます:

コードをコピー コードは次のとおりです。

var firstFour = button.slice(0,4);

実験によると、$ よりも for または while ループを使用した方が実行効率が高くなります。それぞれ（） 。詳細なテストについては、「数倍高速化」を参照してください。
長さ属性を使用して要素の存在を確認します:

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

if(buttons){ // これは常に true
// 何かを実行します
}

if(buttons.length){ // ボタンに要素が含まれている場合にのみ true
/ / 何かをしてください
}


4.selector 属性
jQuery オブジェクトはすべて、セレクター名を取得するために使用される selector 属性を持っています。

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

$('#container li:first-child').selector // #container li:first-child
$( '#container li').filter(':first-child').selector // #container li.filter(:first-child)

2 番目に注目してくださいコード行、セレクターの戻り値 要素の完全なセレクターを取得します。
この属性は、jquery プラグインを作成するときによく使用されます。

5. 空の jQuery オブジェクトを作成する
この場合、最初に空の jQuery オブジェクトを作成する必要がある場合は、add() メソッドを使用します。 jQuery オブジェクトをオブジェクトに挿入するときに使用されます。

コードをコピー コードは次のとおりです。

varcontainer = $([]);
container.add(another_element);)

6. ランダムな要素を選択します
たとえば、ランダムに実行する必要があるアプリケーション シナリオはそれほど多くありません。 li クラスに赤を追加します。
jquery のセレクターを拡張する必要があります。このコードは、jQuery.expr の使用法を非常によく示しています。

コードをコピー コードは次のとおりです。

(function($){
var ランダム = 0;

$.expr[':'].random = function(a, i, m, r) {
if (i == 0) {
random = Math .floor( Math.random() * r.length);
return i == ランダム;
11.})(jQuery); >12.
14.



15.$('li:random').addClass('glow');フック

jQuery.cssHooks は 1.4.3 で追加された新しいメソッドですが、実際には、新しい CSS フックを定義するときに、getter メソッドと setter メソッドを定義します。 border-radiuscircle angular 属性を Firefox や WebKit などのブラウザに正常に適用したい場合は、-moz-border-radius や -webkit-border-radius などの属性プレフィックスを追加する必要があります。 CSS プロパティを 1 つずつ設定するのではなく、CSS フックを定義することで、統合インターフェイス borderRadius にカプセル化できます。

コードをコピー

コードは次のとおりです: $.cssHooks['borderRadius'] = { get: function(elem, computed, extra){ // ブラウザに応じて、 の値を読み取ります// -moz-border-radius、-webkit-border-radius または border- radius

},

set: function(elem, value){
// 適切な CSS3 プロパティを設定します
}
10.// を使用します。ブラウザが実際にどのプロパティを理解するかを気にする必要はありません:
12.$('#rect').css('borderRadius',5);



8. カスタム イージングを使用します (イージング アニメーション効果) 関数

イージング プラグインは非常に一般的に使用される関数であり、多くの豪華な効果を実現できます。組み込みのイージング効果ではニーズを満たせない場合は、イージング関数をカスタマイズすることもできます。

コードをコピー
コードは次のとおりです。

$.easing.easeInOutQuad = function (x , t, b, c, d) { if ((t/=d/2) return -c/2 * ((--t )*( t-2) - 1) b; } // 使用方法:

$('#elem').animate({width:200},'slow ','easeInOutQuad');

9. $.proxy()

については、Minghe が詳しく説明しました。ポータルはこちら「jquery1 .4 チュートリアル 3: 新しいメソッドのチュートリアル (3)」です。
Jquery には厄介な点があります。コールバック関数が多すぎるため、コンテキストが常に変化し、その方向を制御する必要がある場合、$.proxy() メソッドが必要になります。

コードをコピー

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

<ボタン>閉じる

$('#panel').fadeIn(function(){ //これは #panel $('#panel button').click(function(){ // これはボタン

$(this).fadeOut();

}) を指します;
10.});


2 つのネストされたコールバック関数の点が異なります。ここで、これが #panel 要素を指すようにします。コードは次のとおりです:




コードをコピーします

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

$('#panel').fadeIn(function(){
// $.proxy を使用してこれをバインドします:

$('#panel button').click( $.proxy(function(){
// これは #panel
$(this).fadeOut();
},this)) を指します

10. ノードの数をすばやく取得します これは一般的な手法です。コードは次のとおりです:

コードをコピー コードは次のとおりです。

console.log( $('*').length );

11. jquery プラグインを構築します

コードをコピーします コードは次のとおりです:

(function($){
$. fn.yourPluginName = function(){
// ここにコードが入ります
return this;
};
})(jQuery);

jquery プラグインについて 構築するには、Minghe がかつて一連のチュートリアル「Portal: jquery テキスト プロンプト プラグインの作成—jquery プラグイン実践チュートリアル (1)」を投稿しました。
ここでは詳細には触れません。


12. ajax グローバル イベントの設定 ajax グローバル イベントについては、Minghe がポータルに完全な紹介記事を投稿しました: 「jquery での ajax グローバル イベントの詳細な説明 - Minghe が jquery について語る」 「。」


13. アニメーションを遅延します

コードをコピーします コードは次のとおりです。 >

// これは間違っています:

$('#elem').animate({width:200},function(){
setTimeout(function(){
$( '#elem ').animate({marginTop:100});
},
});
$('#elem); ').animate({width:200}).lay(2000).animate({marginTop:100});


アニメーションアニメーションが複数ある場合の実行順序をどうするか元の記事の著者は、上記のコードのように、delay() 関数を使用することを提案していますが、Minghe の提案は、遅延の場合はどのくらいの時間を遅延させるかを考慮する必要があるため、 queue() メソッドを使用することです。しかし、キューにはこの問題はなく、キューに入った関数は 1 つずつ実行されます。 Minhe の以前の記事キューとデキューを読むことができます。Minghe は jquery について話しています。

15. jquery のローカル ストレージ

jquery には、$.jStorage jQuery プラグインと呼ばれるローカル ストレージ専用のプラグインがあり、ますます頻繁に使用されています。


コードをコピー

コードは次のとおりです: // 「キー」が存在するかどうかを確認します。ストレージ var value = $.jStorage.get("key");

if(!value){

// そうでない場合は、サーバーからデータをロードします
value =load_data_from_server() ;
// 保存します
$.jStorage.set("key",value)