8 つの実践的な jQuery のヒント_jquery-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:57:26

オリジナル

1062 人が閲覧しました

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( '画像が読み込まれました…');
});