share_jquery への 8 つの超実用的な jQuery 関数コード

この記事では、jQuery ユーザー向けの 8 つの超実践的なヒントを共有します。 jQuery は JavaScript に最適なライブラリの 1 つで、主にアニメーションとイベント処理に使用され、Ajax および HTML スクリプト クライアントをサポートします。さらに、jQuery には、開発者が短時間で迅速に Web サイト/Web ページを作成できるようにするさまざまなプラグインもあります。

この記事で共有した実践的なコードを気に入っていただければ幸いです。

1) 右クリック機能を無効にする
ユーザーのために Web サイト情報を保存したい場合、開発者はこのコードを使用して、右クリック機能を無効にすることができます。

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

$(document).ready(function() {
//右クリックのコンテキスト メニューをキャッチします
$(document).bind("contextmenu",function(e) {
//警告プロンプト - オプション
alert("右クリックは禁止です!");

//デフォルトのコンテキストメニューを削除します
false を返します;
});
});

2) jQuery を使用してテキスト サイズを設定します

このコードを使用すると、ユーザーは必要に応じてテキストのサイズを変更 (増加または減少) できます。

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

$(document).ready(function() {
// 現在のフォント サイズを確認します
varoriginalFontSize = $('html').css('font-size');

//テキストのサイズを大きくします
$(".increaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNumber = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2;
$('html').css('font-size', newFontSize);
false を返します;
});

//テキストのサイズを小さくします
$(".decreaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
false を返します;
});

// フォント サイズをリセット
$(".resetFont").click(function(){
$('html').css('font-size',originalFontSize);
});
});

3) リンクを新しいウィンドウで開きます

このコードを使用すると、ユーザーが新しいウィンドウでリンクを開き、より良いユーザー エクスペリエンスを提供できるようになります。

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

$(document).ready(function() {
// href
に http が含まれるアンカー タグをすべて選択します // そして target=_blank
を適用します $("a[href^='http']").attr('target','_blank');
});

4) スタイルリストの変更

このコードを使用すると、スタイル リストを変更できます。

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

$(document).ready(function() {
$("a.cssSwap").click(function() {
//リンク rel 属性を rel
内の値と交換します $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});
});

5) トップリンクに戻る

このコードは、単一ページを長時間クリックする場合に非常に役立ちます。重要な時点で「トップに戻る」機能をクリックできます。

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

$(document).ready(function() {
// id="top" リンクがクリックされたとき
$('#top').click(function() {
// ページをスクロールして先頭に戻します
$(document).scrollTo(0,500);
}
});

6) マウスポインタの X/Y 軸を取得します

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

$().mousemove(function(e){
//P要素内のx軸とy軸の値を表示
$('p').html("X 軸 : " e.pageX " | Y 軸 " e.pageY);
});

7) 現在のマウス座標を検出します

このスクリプトを使用すると、どの Web ブラウザでもマウス座標を取得できます。

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

$(document).ready(function() {
$().mousemove(function(e)
{
$('# MouseCoowned ').html("X 軸の位置 = " e.pageX " および Y 軸の位置 = " e.pageY);
});

8) 画像のプリロード

このコードは、ユーザーが画像や Web ページをすばやく読み込むのに役立ちます。

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

jQuery.preloadImagesInWebPage = function()
{
for(var ctr = 0; ctr {
jQuery("").attr("src", argument[ctr]);
}
}
上記の方法を使用するには、次のコードを使用できます:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
画像がロードされているかどうかを確認するには、次のコードを使用できます:
$('#imageObject').attr('src', 'image1.gif').load(function() {
alert('画像がロードされました…');
});