JQuery に関する 14 の役立つヒントshared_jquery

1.

メソッドを通じて Jquery オブジェクトのインスタンスを返します。

var someDiv = $(‘#someDiv’); の代わりに var someDiv = $(‘#someDiv’).hide(); を使用します。

2. 検索を使用して

を検索します。

$('#someDiv p.someClass').hide(); をトリガーする必要がないため、$('#someDiv').find('p.someClass').hide(); を使用します。 Jquery の Sizzle エンジンと同時に、セレクターを作成するときは、セレクターをシンプルにし、右端のセレクターを最適化するようにしてください。

3. $(this) を乱用しないでください

$('#someAnchor').click(function() {alert($(this)) の代わりに $('#someAnchor').click(function() {alert(this.id ); }); を使用します。 .attr('id'));});

4.readyの略。

$(document).ready(function() {}); の代わりに $(function() { }); を使用します。

5. コードを安全にする

方法 1 (noConflict を使用)

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

var j = jQuery.noConflict();

j(‘#someDiv’).hide();
// 以下の行は、他のライブラリの $ 関数を参照します。
$('someDiv').style.display = 'none';


方法 2 (パラメーター Jquery を渡す)

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

(関数($) {

// この関数内では、$ は常に jQuery
を参照します。 })(jQuery);


方法 3 (既製のメソッド経由)

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

jQuery(ドキュメント).ready(function($) {

// $ は jQuery
を参照します });

6. コードを簡略化します

for の代わりに each を使用し、一時変数を保存するために配列を使用し、ドキュメントのフラグメントを使用します。これは、ネイティブ Javascript を作成するときに注意する必要があることと実際には同じです。

7. Ajax の使用方法

Jquery は、getgetJSON post ajax などの便利な ajax メソッドを提供します

8. ネイティブのプロパティとメソッドにアクセスする

たとえば、要素 ID を取得する方法は
です。

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

// オプション 1 – jQuery

を使用する var id = $(‘#someAnchor’).attr(‘id’);
// オプション 2 – DOM 要素にアクセスします
var id = $(‘#someAnchor’)[0].id;
// オプション 3 – jQuery の get メソッドを使用する
var id = $(‘#someAnchor’).get(0).id;
// オプション 3b – get
にインデックスを渡さない アンカー配列 = $(‘.someAnchors’).get();
var thirdId = アンカー配列[2].id;

9. PHP を使用して Ajax リクエストを確認します

xhr.setRequestHeader(“X-Requested-With”, “XMLHttpRequest”) を使用することで、PHP などのサーバー側で

を渡すことができます。

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

関数 isXhr() {

return $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
}


Ajax リクエストかどうかを確認するために、JavaScript が無効になっている状況で使用される場合があります

10.Jquery と $

の関係 Jquery コードの下部に、次のコードがあります

window.jQuery = window.$ = jQuery $ は実際には Jquery

のショートカットです。

11. JQuery の条件付き読み込み

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

<script>!window.jQuery && document.write(‘<script src=”js/jquery-1.4.2.min.js”></script>')


CDN が Jquery にダウンロードされない場合は、ローカルから読み取ります

12.Jquery フィルター

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

<スクリプト>
$('p:first').data('info', 'value'); // $ のデータ オブジェクトに何かを設定します
$.extend(
jQuery.expr[":"]、{
ブロック: function(elem) {
return $(elem).css(“display”) === “ブロック”;
}、
hasData : function(elem) {
return !$.isEmptyObject( $(elem).data() );
}
}
);
$(“p:hasData”).text(“has data”) // データが添付されたパラを取得します
$(“p:block”).text(“are block level”); // 「block」
の表示を持つ段落のみを取得します。

注: $.expr[":"] は $.expr.filters と同等です。

13.hover メソッド

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

$('#someElement').hover(function() {
// ここで toggle メソッドを使用すると、スライドオーバーとスライドアウトの効果を実現できます
});

14. 属性オブジェクト

を渡します。

要素を作成するときに、Jquery1.4 は属性オブジェクトを渡すことができます

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

$('', {
id : 'someId',
クラス名 : 'someClass',
href : ‘somePath.html’
});

テキストなどJqueryで指定したプロパティやイベントでもをクリック