実用的な jQuery コードのコレクション スニペット_jquery

以下の jQuery スニペットはほんの一部です。学習プロセス中によく使用される jQuery コードを見つけた場合は、共有してください。これらのコードスニペットを見てみましょう。

1.jQuery はユーザー IP を取得します:

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

$.getJSON("http://jsonip.appspot.com?callback=?", function (data) {
alert("Your ip: " data.ip);
} );

2.jQuery で画像の幅と高さを表示します:

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

var theImage = new Image();
theImage.src = $('#imageid').attr("src"); ("Width: " theImage.width);
alert("Height: " theImage.height);

3.jQuery は指定された文字列を検索します:

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

var str = $('*:contains("the string")');
4.js ブラウザで Cookie を有効にするかどうかを決定します:
$(document).ready(function () {
document.cookie = "cookieid=1;expires=60";
var result = document.cookie.indexOf("cookieid=") != -1 ;
if (!result) {
alert("ブラウザは Cookie を有効にしていません");


5.jQuery はキーボード キーを検出します:

コードをコピー コードは次のとおりです: $(document).ready(function () {

$(this).keypress(function (e) {

switch (e.that) {
ケース 13:
alert("Enter キーが押されました");
break ;
//more detect
}
});


, この記事はここにまとめられています。この jQuery コード スニペットの記事が皆様のお役に立てれば幸いです

1. jQuery の上部/下部へのスクロール

jQuery のスクロールについては、このサイトで以前に同様の記事を公開しています。 jQuery を先頭に戻し、以下に再度整理します。これは次のとおりです。




コードをコピーします

コードは次のとおりです //一番上までスクロールします$( "html, body").animate({scrollTop: "0px" },

//一番上までスクロールしますbottom

//$("#container"): スクロールする要素
$( "html, body").animate({
scrollTop: $("#container").height()
}, 1000);


2.jQuery は要素が存在するかどうかを判断します
jQuery を使用して要素が存在するかどうかを判断するには、多くの jQuery 学習者がこの質問をすると思います。

コードをコピー

コードは次のとおりです: if ($(" #elementid").length) { //要素が存在します

}

3 .abort() メソッドを使用して Ajax リクエストをキャンセルします
js の非同期リクエストを実行するときに最後のリクエストをキャンセルする abort() メソッド。メソッドは次のとおりです。

コードをコピー

は次のとおりです: var req = $.ajax({ type: "post",

url: "/article/form/ comment.aspx",

data : { "id": 1 },
success: function() {
//handle
}
});
//Ajax リクエストをキャンセル
if (req) {
req.abort()
}


jQuery Ajax は jQuery の初心者であれば、興味があるかもしれません。馴染みのない方は、「jQuery 学習のまとめ (5) jQuery Ajax」をご覧ください。

4.jQuery はマウスの右ボタンを無効にします

コードをコピーします

コードは次のとおりです: $(document).ready(function() { $(document).bind("contextmenu", function() {

return false;

});
} );


5. setTimeout() によって呼び出されるメソッドにパラメータを渡します

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

$(document).ready(function() { timeout = setTimeout(function() { showMess("succeed") } , 2000); } );

関数 showMess(m) {

}


1.jQuery Countdown

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

$( document).ready(function () {
var count = 10;
countdown = setInterval(function () {
$("p.countdown").html(count "秒以内にジャンプします!" );
if (count == 0) {
clearInterval(countdown)
window.location = 'http://google.com';
count--; >} , 1000);
});


2.jQuery はブラウザの種類とバージョン番号を決定します

jQuery はブラウザの種類とバージョン番号を決定するので、直接使用できます。 $.browser メソッド 判断を行います。しかし、自分でテストしてみたところ、Chrome ブラウザを判定すると、インターネットで検索した結果、次のコードが返されたことがわかりました。

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

var browserName = navigator.userAgent.toLowerCase();

mybrowser = {
version: (browserName.match (/. (? :rv|it|ra|ie)[/: ]([d.] )/) || [0, '0'])[1],
safari: /webkit/i. test(browserName) && !this.chrome、
opera: /opera/i.test(browserName)、
firefox: /firefox/i.test(browserName)、
msie: /msie/i。 test(ブラウザ名) && !/opera/.test(ブラウザ名),
mozilla: /mozilla/i.test(ブラウザ名) && !/(互換性|ウェブキット)/.test(ブラウザ名) && !this.chrome,
chrome: / chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)
}
$(document).ready(function () {
if (mybrowser.msie) {
alert("ブラウザは Internet Explorer で、バージョン番号は " $.browser.version);
}
else if (mybrowser.mozilla) ) {
alert( "ブラウザは Firefox で、バージョン番号は " $.browser.version);
}
else if (mybrowser.opera) {
alert("ブラウザは: Opera、バージョン番号は:" $ .browser.version);
}
else if (mybrowser.safari) {
alert("ブラウザは: Safari、バージョン番号は: " $.browser.version);
}
else if (mybrowser.chrome) {
alert("ブラウザは Chrome で、バージョン番号は " mybrowser.version); 🎜>else {
alert("神马");
} ( jQuery を使用して要素を中央に配置する方法が比較的簡単であることを以下で参照してください。




コードをコピー

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

//プラグイン形式で記述(function ( $) { jQuery.fn.center = function () { this.css('position', 'absolute'); this.css('top', ($ (window).height () - this.height()) /2 $(window).scrollTop() 'px'); this.css('left', ($(window).width() - this.width() ) / 2 $(window).scrollLeft() 'px'); これを返します;

}

})(jQuery); function () {
//Call
$("#somediv").center();
});


4.jQuery は画像が完全にロードされているかどうかを判断します




コードをコピー


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

$("#demoImg").attr ("src", "demo. jpg").load(function() {

alert("画像読み込み完了"); }); 何か役に立つことがあればjQuery コード スニペット。jQuery に投稿してください。学習した内容をみんなと共有してください。