實用的jQuery小技巧

jQuery是最好的JavaScript庫之一，用於簡化動畫，事件處理，支援Ajax和HTML 的客戶端指令碼。網路中有大量的 jQuery 外掛，有助於在短時間內通過簡單容易的方法建立網站。今天，我們來分享一些很有用的技巧和竅門給jQuery的技術開發人員。所以我們選取了幾個對jQuery 開發人員非常有用的程式碼片段。希望你的下一個專案中能用得上這些程式碼。

1) 禁止右鍵 　　在開發 Web 應用的時候，有些情況需要禁用右鍵單擊功能。使用此程式碼，jQuery 開發人員可以在網頁上禁用滑鼠右鍵點選。程式碼如下： $(document).ready(function() { //catch theright-click context menu $(document).bind("contextmenu",function(e){
//warningprompt - optional alert("Noright-clicking!");

    //deletethe default context menu
    returnfalse;
});

});

2) 文字縮放 　　使用下面的程式碼，使用者可以更具需要增大或者縮放網頁中的字型大小，程式碼如下： $(document).ready(function() { //find the currentfont size varoriginalFontSize = $('html').css('font-size');

//Increase the textsize
$(".increaseFont").click(function(){
    varcurrentFontSize = $('html').css('font-size');
    varcurrentFontSizeNumber = parseFloat(currentFontSize, 10);

    varnewFontSize = currentFontSizeNumber*1.2;
    $('html').css('font-size',newFontSize);
    returnfalse;
});

//Decrease the TextSize
$(".decreaseFont").click(function(){
    varcurrentFontSize = $('html').css('font-size');
    varcurrentFontSizeNum = parseFloat(currentFontSize, 10);

    varnewFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size',newFontSize);
    returnfalse;
});

// Reset Font Size
$(".resetFont").click(function(){
$('html').css('font-size',originalFontSize);

}); });

3) 在新視窗開啟連結 　　使用這個 jQuery 程式碼，使用者會點選你的網站的任何連結都會在新的視窗中開啟。如下： $(document).ready(function() { //select all anchortags that have http in the href //and apply thetarget=_blank $("a[href^='http']").attr('target','_blank'); });

4) 樣式表切換 　　你知道網站換膚是怎麼做的嗎？下面的程式碼可以幫助你實現樣式表切換功能，如下： $(document).ready(function() { $("a.cssSwap").click(function(){ //swapthe link rel attribute with the value in the rel
$('link[rel=stylesheet]').attr('href', $(this).attr('rel')); }); });

5) 回到頂部 這是現在網站中很常用的回到頂部功能，特別適合頁面很長的情況。程式碼很簡單，如下： $(document).ready(function() { //when theid="top" link is clicked $('#top').click(function(){ //scollthe page back to the top $(document).scrollTo(0,500); } });

本文為Anyforweb技術分享部落格，需要了解網站建設相關，請訪問anyforweb.com。