8個實用的jQuery技巧_jquery-js教程-PHP中文網

8個實用的jQuery技巧_jquery

WBOY

發布： 2016-05-16 16:57:26

原創

1063 人瀏覽過

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…');
});