30 の古典的な jQuery コード開発スキル_jquery-jsチュートリアル-php.cn

30 の古典的な jQuery コード開発スキル_jquery

WBOY

リリース： 2016-05-16 16:26:57

オリジナル

1401 人が閲覧しました

この記事の例では、30 の古典的な jQuery コード開発スキルを要約しています。皆さんの参考に共有してください。詳細は以下の通りです。

1. ネストされたフィルターを作成します

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

.filter(":not(:has(.selected) ))" ) //class .selected

を含まないすべての要素を削除します

2. 要素クエリを再利用します

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

var allItems = $("div.item"); 

var keepList = $("div#container1 div.item");
クラス名: $(formToLookAt " input:checked").each(function() { keepListkeepList = keepList.filter("." $(this).attr("name"));

});

3. has() を使用して、要素に特定のクラスまたは要素が含まれているかどうかを判断します

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

//jQuery 1.4.* には has メソッドのサポートが含まれていますこのメソッドは 
 を見つけます。
//要素に特定の他の要素クラスまたはそれが何であれ含まれる場合

//あなたは彼らを探しており、彼らに望むことは何でもします。

$("input").has(".email").addClass("email_icon");

4. jQuery を使用してスタイルを切り替えます

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

//切り替えたいメディア タイプを探します。次に、href を新しいスタイル シートに設定します

$('link[media='screen']').attr('href', 'Alternative.css');

5. 選択した領域を制限します

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

// 可能な場合は、クラス名の前に次の文字を付けます。タグ名
//jQuery が検索にさらに時間を費やす必要がないようにします
// 目的の要素についても覚えておいてください
//要素の場所をより具体的にすることができます
//ページの実行/検索時間が短縮されます
var in_stock = $('#shopping_cart_items input.is_in_stock');

/li>
/li>
/li>

6. ToggleClass の正しい使い方

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

//Toggle クラスを使用すると、クラスを追加または削除できます。

//その存在に応じて要素から

// 一部の開発者が使用するクラス:

a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');

//toggleClass を使用すると、a.toggleClass('blueButton');

を使用してこれを簡単に行うことができます

7. IEで指定された機能を設定します

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

if ($.browser.msie) {

// Internet Explorer はサディストです。

}

8. jQuery を使用して要素 を置き換えます

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

$('#thatdiv').replaceWith('fnuh ');

9. 要素が空かどうかを確認します

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

if ($('#keks').html( )) {

//何も見つかりませんでした ;
}

10. 順序なしセット内の要素のインデックスを見つけます

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

$("ul > li").click( function () { var インデックス = $(this).prevAll().length });

11. 関数をイベントにバインドします

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

$('#foo').bind('click ', function () {alert('ユーザーが「foo」をクリックしました' });

12. 要素に HTML を追加します

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

$('#lal').append('sometext ');

13. 要素の作成時にオブジェクトを使用して属性を定義する

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

var e = $("", { href: " #"、クラス: "a-クラス、別のクラス"、タイトル: "..." });

14. フィルターを使用して複数の属性をフィルター処理します

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

//この精度ベースのアプローチは、次のような場合に役立ちます。 
を使用してください
//異なる型を持つ類似した入力要素が多数ある

var 要素 = $('#someid input[type=sometype][value=somevalue]').get();

15. jQuery を使用して画像をプリロードします

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

jQuery.preloadImages = function() { for(var i = 0; i').attr('src', } }; // 使用法 $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

16. セレクターに一致するイベントのイベントハンドラーを設定します
[コード]$('button.someClass').live('click', someFunction); //jQuery 1.4.2 では、デリゲートおよびデリゲート解除のオプションが
になっていることに注意してください。 //コンテキストのサポートが向上するため、live を置き換えるために導入されました
//たとえば、テーブルに関しては、以前は..
を使用していました。 //
.live() $("テーブル").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }) ; });
//今すぐ使用してください。
$("テーブル").delegate("td", "ホバー", function(){ $(this).toggleClass("ホバー"); });

17. 選択したオプション要素を検索します

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

$('#someElement').find('option :選択済み' );

18. 特定の値を含む要素を非表示にする

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

$("p.value:contains('thetextvalue' )") .hide();

19. ページの特定の領域まで自動的にスクロールします

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

jQuery.fn.autoscroll = function(selector) { $ ('html ,body').animate( {scrollTop: $(selector).offset().top}, 500 ); //次に、次のように取得したいクラス/エリアまでスクロールします:

$('.エリア名').autoscroll();

20. さまざまなブラウザを検出します

コードをコピーコードは次のとおりです:Detect Safari (if( $.browser.safari)) 、IE6 以降を検出 (if ($.browser.msie && $.browser.version > 6 ))、IE6 以下を検出 (if ($.browser.msie && $.browser.version <= 6 ))、 FireFox 2 以降を検出します (if ($.browser.mozilla && $.browser.version >= '1.8' ))

21. 文字列内の単語を置換します

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

var el = $('#id'); .html( el.html().replace(/word/ig, ''));

22. 右クリックメニューを閉じます

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

$(document).bind('contextmenu',function (e) { return false });

23. カスタムセレクターを定義します

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

$.expr[':'].mycustomselector = function (要素、インデックス、メタ、スタック){

// 要素 - は DOM 要素です

// インデックス - スタック内の現在のループ インデックス

// メタ - セレクターに関するメタデータ

// stack - ループするすべての要素のスタック

// 現在の要素を含めるには true を返します

// 現在の要素を除外するには false を返します

};

// カスタム セレクターの使用法:

$('.someClasses:test').doSomething();

24. 要素が存在するかどうかを判断します

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

if ($('#someDiv').length) {

//やったー!!! 存在します...

}

25. jQuery を使用してマウスの左右のクリックを決定します

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

$("#someelement").live('click ', function (e) { if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {alert("マウスの左ボタンがクリックされました" ); } else if(e.button == 2)alert("マウスの右ボタンがクリックされました");

26. 入力ボックスのデフォルト値を表示または削除します

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

//このスニペットは、デフォルトを維持する方法を示します。値
//ユーザーが入力していない場合のテキスト入力フィールド
// 置き換える値
swap_val = []; $(".swap").each(function(i){ swap_val[i] = $(this).val();
$(this).focusin(function(){ if ($(this).val() == swap_val[i]) { $(this).val(""); } }).focusout(function(){ if ($.trim($(this).val()) == "") { $(this).val(swap_val[i]) } });

27. 指定した時間が経過すると要素を自動的に非表示または閉じる (1.4 でサポート)

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

//1.3 で使用していた方法を次に示します。 2 setTimeout

 を使用する
setTimeout(function() { $('.mydiv').hide('blind', {}, 500) }, 5000);
//そして、ここでは、1.4 で、delay() 機能を使用してそれを行う方法を示します (これは sleep によく似ています)

$(".mydiv").lay(5000).hide('blind', {}, 500);

28. DOM への要素の動的作成

コードをコピーコードは次のとおりです。var newgbin1Div = $('');

newgbin1Div.attr('id','gbin1.com').appendTo('body');

テキストエリアの文字数を制限します

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

jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase(); 

var inputType = this.type? this.type.toLowerCase() : null; if(type == "入力" && 

inputType == "テキスト" || inputType == "パスワード"){

//標準の maxLength を適用します this.maxLength = max;

} else if(type == "textarea"){ this.onkeypress = function(e){ var ob = e ||イベント;

var keyCode = ob.keyCode;

var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;

return !(this.value.length >= max &&

(keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); }; 

this.onkeyup = function(){ if(this.value.length > max){ this.value = this.value.substring(0,max); } }; } }); }; 

//使用法: 

$('#gbin1textarea').maxLength(500);

30. 関数数创建一基本的试用例

复制代码代码如下:

//テストをモジュールに分割します。

module("モジュール B");

test("他の gbin1.com テスト", function() {

// テスト内で実行されることが予想されるアサーションの数を指定します。期待(2); //JUnit のassertEquals と同等の比較アサーション。 

等しい( true, false, "失敗したテスト" );

等しい( true, true, "テストに合格" ); 

});

ここで説明されている大規模な jquery プログラムの設計が役立つことを望みます。