8 つの実践的な jQuery のヒント_jquery

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

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

$(document).ready(function( ) {
//右クリックのコンテキスト メニューをキャッチ
$(document).bind("contextmenu",function(e) {
//警告プロンプト - オプション
alter("No right -クリック! ");

//デフォルトのコンテキストメニューを削除します
return 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);
return 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);
return 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){
//x を表示しますP 要素内の Y 軸値
$('p').html("X 軸 : " e.pageX " | Y 軸 " e.pageY);
});

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

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

$(document).ready(function() {
$ ().mousemove(function(e)
{
$('# マウス座標 ').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( '画像が読み込まれました…');
});