何年にもわたって収集した JQuery コードのまとめ_jquery

1. ネストされたフィルターの作成方法

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

//コレクション内の一致する要素を減らしてフィルタリングできるようにします。
// 指定されたセレクターに一致する要素のみを残します。この場合、
//クエリは、クラス "selected" (.selected) を含まない (:not) (:has)
// 子ノードを削除します。
.filter(":not(:has(.selected))")

2. 要素検索を再利用する方法

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

var allItems = $("div.item");
var keepList = $("div#container1) div.item" );
//これで、これらの jQuery オブジェクトの操作を続けることができます。たとえば、
//チェック ボックス、チェック ボックスの名前に基づいて「キープ リスト」を切り抜きます。
//

クラス名に準拠します:
$(formToLookAt " input:checked ").each( function () {
keepList = keepList.filter("." $(this).attr("name"));
});

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

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

//jQuery 1.4.* には、この has メソッドのサポートが含まれています。このメソッドは、
//要素に別の要素クラスまたはその他のものが含まれているかどうかを調べます。
//何を探し、操作したいのかを調べます。
$("input").has(".email").addClass("email_icon");

4. jQuery を使用してスタイルシートを切り替える方法

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

//メディア タイプを確認します (media-type)切り替えたい場合は、href を新しいスタイル シートに設定します。
$('link[media="screen"]').attr('href', 'Alternative.css');

5. 選択範囲を制限する方法(最適化の目的に基づく)

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

//使用できる限りタグ名に
// をクラス名の前に付けて、jQuery が必要な
// 要素の検索に時間を費やす必要がなくなるようにします。もう 1 つ覚えておくべきことは、ページ上の要素に対する
// 操作がより具体的であればあるほど、
// の実行時間と検索時間を短縮できるということです。 var in_stock = $('#shopping_cart_items input.is_in_stock');

• アイテム X


• アイテム Y


• アイテム Z
🎜>

6. ToggleClass の正しい使い方

コードをコピーします以下のように: //トグル クラスを使用すると、クラスの // が存在するかどうかに基づいてクラスを追加または削除できます。

//この場合、一部の開発者は次を使用します: 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().trim()) {
//何も見つかりません
}

10ソートされていないセットから要素のインデックス番号を見つける方法

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

$("ul > li").click(function () {
varindex = $(this).prevAll().length;
});11.関数はイベント
$('#foo').bind('click', function () {
alert('User clicked on "foo."');
});12 にバインドされています。 . 要素に HTML を追加または追加する方法
$('#lal').append('sometext');

13. 要素を作成するときにオブジェクト リテラルを使用する方法 (リテラル)属性を定義するには

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

var e = $(" " , { href: "#", class: "a-class another-class", title: "..." });

14. フィルタリングに複数の属性を使用する方法

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

//異なる型の類似した入力要素を多数使用する場合
//この精度ベースのメソッドは便利です var elements = $('#someid input[type=sometype][value=somevalue]').get();15. jQuery を使用して画像をプリロードする方法

jQuery.preloadImages = function () {
for (var i = 0; i < argument.length; i ) {
$(""). ', argument[i]);
}
} //Usage$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

16. セレクターに一致する要素のイベント ハンドラーを設定する方法

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

$('button.someClass').live('click', someFunction); //jQuery 1.4.2 では、デリゲート オプションとデリゲート解除オプションがあることに注意してください。 🎜> // より良いコンテキストサポートを提供するため、live の代わりに導入されました
// たとえば、テーブルの場合、以前は
// .live()
$("table" ).each(function () {
$("td", this).live("hover", function () {
$(this).toggleClass("hover");
}) ;
});
//ここで
$("table").delegate("td", "hover", function () {
$(this) .toggleClass("hover) を使用します。 ");
});


17. 選択されたオプション要素の検索方法

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

$('#someElement').find('option:selected');

18.特定の値テキストを含む要素を非表示にするには

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

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

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

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

jQuery.fn.autoscroll = function (selector) {

$( 'html,body').animate( {scrollTop: $(this ).offset().top },
500
);
}
//次に、目的のクラス/エリアまでスクロールします。こんなふうに行きたい。
$('.area_name').autoscroll();


20. 各種ブラウザの検出方法

コードをコピーします> コードは次のとおりです: if( $.browser.safari) //Safari を検出

if ($.browser.msie && $.browser.version > 6) //IE6 以降のバージョンを検出します

if ($.browser.msie && $.browser.version if ($.browser.mozilla && $.browser.version >= '1.8' ) //FireFox 2 以降のバージョンを検出します


21. 文字列内の単語を置換する方法

コードをコピーします コードは次のとおりです。 var el = $('#id'); .replace(/word/ig , ''));

22. 右クリックのコンテキストメニューを無効にする方法

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

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

23. カスタムセレクターの定義方法

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

$.expr[':'].mycustomselector = function(element,index,meta, stack){
// element - DOM 要素
// Index - スタック内の現在のループ インデックス
// meta - セレクターに関するメタデータ
// stack – ループ内のすべての要素のスタックへ
// 現在の要素が含まれている場合は true を返します
// 現在の要素が含まれていない場合は false を返します
// カスタムの使用法selector:
$( '.someClasses:test').doSomething(); 24. 要素が存在するかどうかを確認する方法
if ($('#someDiv' ).length) {
//Yourお姉さん、やっと見つけました
}

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").each(function (i) {
wap_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 の late() 関数を使用する方法です (これは休止状態に非常に似ています)
$(".mydiv")。 late(5000).hide('blind', {}, 500);28. 作成した要素を DOM に動的に追加する方法
var newDiv = $('');
newDiv.attr('id', 'myNewDiv').appendTo('body' );


29. 「テキスト領域」フィールドの文字数を制限する方法

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

jQuery.fn.maxLength = function (max) {

this.each(function () {
var type = this.tagName.toLowerCase() ;
var inputType = this.type ? this.type.toLowerCase() : null;
if (type == "input" && inputType == "text" || inputType == "パスワード") {
this.maxLength = max;
}
else if (type == "textarea") {
this.onkeypress = function (e ) {
var ob = e ||
var keyCode = ob.keyCode;
var hasSelection = document.selection.createRange().text.length >?
: 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.substring(0, max)
}
}; $('#mytextarea').maxLength(500);


30. 関数の基本的なテストを作成する方法




code

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

// テストをモジュール内に個別に配置します
module("Module B");
test("some other test", function () {
// 内部の期待値を示します実行するアサーションの数
expect(2);
//JUnit のassertEquals と同等の比較アサーション
equals(true, false, "failing test"); , true, "テストに合格");
}); 31. jQuery で要素を複製する方法

var cloned = $('#somediv').clone(); >
32. jQuery で要素が表示されるかどうかをテストする方法

コードをコピーします コードは次のとおりです。 🎜> if ($(element).is(':visible') ) { //要素は表示されます

}

33.画面の中央位置に要素を配置します

コードをコピー

コードは次のとおりです: jQuery.fn.center = function ( ) { this.css('position', 'absolute');

this.css('top', ($(window).height() - this.height) ()) / $(window) .scrollTop() 'px');

this.css('left', ($(window).width() - this.width()) / 2 $(window) .scrollLeft() 'px') ;
return this;
} //上記の関数を次のように使用します:


34.特定の名前を持つすべての要素を返します 値は配列に配置されます

コードをコピー

コードは次のとおりです。 var arrInputValues = new Array(); $("input[name='table[]']").each(function () {

arrInputValues.push ($(this ).val());

} ; >

(function ($) {
$.fn.stripHtml = function () {
var regexp = /< ;("[^"]*"|'[^']* '|[^'">])*>/gi
this.each(function () {

$(this); .html($(this).html().replace(regexp, ""));
return $(this)>}
}); /Usage: $('p').stripHtml();

36. Close を使用して親要素を取得する方法

code

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

$('#searchBox').closest('div');

37. jQuery イベントをログに記録する方法。 Firebug と Firefox を使用する

コードをコピー

コードは次のとおりです: // チェーン ログを許可する// 使用法: $('#someDiv').hide() .log('div hidden').addClass('someClass'); jQuery.log = jQuery.fn.log = function (msg) {

if (console) {

console.log(" %s: %o", msg, this)

return this; >

38. ポップアップ ウィンドウでリンクを強制的に開く方法

コードをコピー

は次のとおりです:

jQuery('a.popup').live('click', function () {
newwindow = window.open($(this).attr('href) '), '', 'height=200,width=150');
if (window.focus) {
newwindow.focus();
} ;


39. リンクを強制的に新しいタブで開く方法

コードをコピー コードは次のとおりです。次のように: jQuery('a.newTab').live('click', function () {

newwindow = window.open($(this).href);

jQuery(this).target = "_blank";
return false;
});


40. jQuery で .siblings() を使用して兄弟要素を選択する方法

コードをコピー

コードは次のとおりです: // これは行わないでください $ ('#nav li').click(function () {

$('#nav li').removeClass('active');

$( this).addClass('active');
}); // 代わりの方法は

$('#nav li').click(function () {
$(this).addClass('active').siblings().removeClass ('アクティブ')
});
41. ページ上のすべてのチェックボックスを切り替える方法

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

var tog = false ;
// ロード時に選択されている場合は true

$('a').click(function () {
$( "input[type =checkbox]").attr("checked", !tog);
tog = !tog;
});

42. 入力テキストに基づいてフィルタリングする方法要素のリスト

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

//値の場合要素の値と入力テキストが
に一致する場合//要素が返されます $('.someClass').filter(function () {
return $(this).attr('value') == $(' input#someId').val();
})

43. マウスパッドのカーソル位置 x と y を取得する方法

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

$(document).ready(function () {
$(document) .mousemove(function (e) {
$('#XY').html("X 軸 : " e.pageX " | Y 軸 " e.pageY);
}); ;

44. リスト要素 (LI) 全体をクリック可能にする方法

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

$("ul li").click(function () {
window.location = $(this).find("a").attr(" href");
return false;
});

• リンク 1


• リンク 2


• リンク 3 ;/li>
  
• リンク 4



45 jQuery を使用して XML を解析する方法 (基本的な例)

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

function parseXml(xml) {

//各チュートリアルを検索し、作成者を出力します
$(xml).find("Tutorial").each(function () {
$("# Output").append($(this ).attr("author") "");
});
}


46. 画像が保存されているかどうかを確認する方法完全にロードされました

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

$('#theImage') .attr('src', 'image.jpg') .load(function () {

alert('この画像は読み込まれています');
});


47 jQuery を使用してイベントの名前空間を指定する方法

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

//イベントは次のように名前空間にバインドできます

$(' input').bind('blur.validation', function (e) {
// ...
}) ;

//data メソッドは名前空間も受け入れます
$( 'input').data('validation.isValid', true);


48. Cookie が有効になっています

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

var dt = new Date( );

dt.setSeconds(dt.getSeconds() 60);
document.cookie = "cookietest=1; 期限切れ =
var cookiesEnabled = document.cookie.indexOf( "cookietest=") != -1;
if (!cookiesEnabled) {
// Cookie が有効になっていません
}


49. Cookie を期限切れにする方法

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

var date = new Date();
date.setTime(date.getTime() (x * 60 * 1000));
$.cookie('example', 'foo', { 有効期限: date });50. クリック可能なリンクを使用してページ内の URL を置き換える方法

$.fn.replaceUrl = function () {
var regexp =
/( ( ftp|http|https)://(w :{0,1}w*@)?(S )(:[0-9] )?(/|/([w#!:.? =&% @ !-/]))?)/gi;
this.each(function () {
$(this).html(
$(this).html().replace(regexp, ' < ;a href="$1">$1')
)
});
return $('p' ); .replaceUrl();

植字も大変な作業です。リソースを収集していない場合は、それらのリソースを子供たちの靴に渡します。

(フィードバックありがとうございます。間違いは修正されました。誤解を招いていないことを願っています)
追伸: 間違いの修正により、レイアウトが変更されました。汚かったので再投稿します。