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

この記事の例では、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 プログラムの設計が役立つことを望みます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。