var allItems = $("div.item");
var keepList = $("div#container1 div.item");
クラス名: $(formToLookAt " input:checked").each(function() { keepListkeepList = keepList.filter("." $(this).attr("name"));
});
// 可能な場合は、クラス名の前に次の文字を付けます。タグ名
//jQuery が検索にさらに時間を費やす必要がないようにします
// 目的の要素についても覚えておいてください
//要素の場所をより具体的にすることができます
//ページの実行/検索時間が短縮されます
var in_stock = $('#shopping_cart_items input.is_in_stock');
6. ToggleClass の正しい使い方
7. IEで指定された機能を設定します
8. jQuery を使用して要素 を置き換えます
9. 要素が空かどうかを確認します
//何も見つかりませんでした ;
}
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 への要素の動的作成
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 プログラムの設計が役立つことを望みます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
