Development_jquery で使用できる jQuery のヒント-jsチュートリアル-php.cn

Development_jquery で使用できる jQuery のヒント

WBOY

リリース： 2016-05-16 16:56:23

オリジナル

971 人が閲覧しました

1) 右クリックを無効にする
Web アプリケーションを開発する場合、右クリック機能を無効にする必要がある場合があります。このコードを使用すると、jQuery 開発者は Web ページでのマウスの右クリックを無効にすることができます。コードは次のとおりです。

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

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

//デフォルトのコンテキスト メニューを削除します 
}); 🎜>2) テキストのスケーリング 
次のコードを使用すると、ユーザーは必要に応じて Web ページのフォント サイズを拡大またはズームできます。コードは次のとおりです: 

。コードをコピーします

コードは次のとおりです: $(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 
}); 

//テキスト サイズを小さくします 
$(".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 
}); 
$(".resetFont").click (function(){ 
$('html').css('font-size',originalFontSize); 
}); 

 
3) 新しいウィンドウでリンクを開く
この jQuery コードを使用すると、ユーザーが Web サイト上でクリックしたリンクは新しいウィンドウで開きます。次のように: 




コードをコピー 

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

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

4) スタイルシートの切り替え

Web サイトのスキンの付け方を知っていますか?次のコードは、スタイル シート切り替え関数の実装に役立ちます。 

コードをコピー

コードは次のとおりです。 🎜>

$(document).ready(function() {

$("a.cssSwap").click(function() { //リンク rel 属性を値と交換しますrel $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); }); 🎜> 5) トップに戻るこれは、最近の Web サイトで非常に一般的なトップに戻る機能で、特に長いページに適しています。コードは次のように非常に単純です:

コードをコピー 

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

$(document).ready (function() {
//id="top" リンクがクリックされたとき
$('#top').click(function() {

//ページの先頭に戻る $(document).scrollTo(0,500); } }); 6) マウスの X、Y 座標を取得します

次のコードはマウスの X、Y 座標を取得できます。コードは次のとおりです:

コードをコピー 

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

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

7) 現在のマウスの座標を検出します次のコードを使用します次のように、jQuery をサポートする任意の場所で現在のマウスの座標を取得します:

コードをコピー

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

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

8) 画像のプリロード
この画像のプリロードスニペットを使用すると、待たずに画像をすばやくプリロードできます。コードは次のとおりです:

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

 
jQuery.preloadImagesInWebPage = function() { 
for(var ctr = 0; ctrjQuery("").attr("src", argument[ctr]); 
}

メソッドの呼び出し:

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

$.preloadImages ("image1.gif", "image2.gif", "image3.gif"); 
画像がロードされているかどうかを確認します: 
$('#imageObject') .attr('src', 'image1.gif ').load(function() { 
alert('画像がロードされました...'); 
}); 🎜>