//異なる型の類似した入力要素を多数使用する場合
//この精度ベースのメソッドは便利です 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');
if ($.browser.msie && $.browser.version if ($.browser.mozilla && $.browser.version >= '1.8' ) //FireFox 2 以降のバージョンを検出します
21. 文字列内の単語を置換する方法
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 で要素が表示されるかどうかをテストする方法
}
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();
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. リンクを強制的に新しいタブで開く方法
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;
});
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();
植字も大変な作業です。リソースを収集していない場合は、それらのリソースを子供たちの靴に渡します。
(フィードバックありがとうございます。間違いは修正されました。誤解を招いていないことを願っています)
追伸: 間違いの修正により、レイアウトが変更されました。汚かったので再投稿します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
