8個實用的jQuery技巧_jquery

1）停用右鍵點擊功能
如果你想為使用者保護網站訊息，那麼開發者可以使用這段程式碼－停用右鍵點選功能。

複製程式碼 程式碼如下:

$(document).ready(>

$(document).ready(unction() { //catch the right-click context menu
 $(document).bind("contextmenu",function(e) {    
  //warning prompt - optional<.pert.>

  //delete the default context menu
  return false;
 });
});

2）使用jQuery設定文字大小

2）使用jQuery設定文字大小使用這段程式碼，使用者可依需求重新設定文字尺寸（增加或減少）。

複製程式碼

程式碼如下:

$(document).ready(>
$(document).ready(unction() { //find the current font size

 var originalFontSize = $('html').css('font-size');

 //Increase the text 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

 //Decrease the Text Size
 $(".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
 // Reset Font Size

 $(".resetFont").click(function(){

 $('html').css('font-size', originalFontSize);
  } );
});

3）在新窗口打開鏈接
使用這段代碼會幫助用戶在新窗口打開鏈接，為用戶帶來更好的使用者體驗。

複製程式碼 程式碼如下:

$(document).ready(>

$(document).ready(function() { //select all anchor tags that have http in the href
 //and apply the target=_blank
 $("a[href^='http']").attr('target',' _blank');
});

4）更改樣式清單使用這段程式碼幫助你更改樣式清單。

複製程式碼 程式碼如下:

$(document).ready(function() {

$(document).ready(function() {
 $ ("a.cssSwap").click(function() {
  //swap the link rel attribute with the value in the rel   
  $('link[rel=stylesheet]').. , $(this).attr('rel'));
 });

});

5）回到頂部連結
此程式碼對於長時間點擊單頁非常實用，你可以在重要關頭點擊「回到頂部」功能。

複製程式碼

程式碼如下:

$(document).ready(>

$(document).ready(function() { //when the id="top" link is clicked
 $('#top').click(function() {
  //scoll the page back to the top
  $(document) .scrollTo(0,500);

 }
});
6）取得老鼠指標的X / Y軸

複製程式碼

程式碼如下:
$().mousemove(function(e){    //display the x and y axis values inside the P elue.
    $('p').html("X Axis : " e.pageX " | Y Axis " e.pageY);
});

7）偵測目前滑鼠座標 使用這個腳本，你可以在任何網頁瀏覽器取得滑鼠座標。

複製程式碼


程式碼如下:

$(document).ready(function() {$(document).ready(function() {$ ().mousemove(function(e){    $('# MouseCoordinates ').html("X Axis Position = " e.pageX " and Y Axis Position = " e.pageY); });
8）圖片預先載入
此段程式碼可協助使用者快速載入圖片或網頁頁面。

複製程式碼 程式碼如下:

jQuery.preloadImagesInWebWebPage = functionInWeb 🎜>     for(var ctr = 0; ctr     {
         jQuery("").attr("src", arguments[ctr]);
     }
}
To use the above method, you can use the following piece of code:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
To checkeckether an image has been loaded, you can use the following piece of code:
$('#imageObject').attr('src', 'image1.gif').load(function() {
    alert( 'The image 有 been loaded…');
});