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

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('画像がロードされました...');
}); 🎜>