在其他地方你學不到的jQuery小貼士和技巧(歡迎收藏)_jquery

下面小編給大家整理了8個技巧對程式設計師來說非常的有幫助，具體如下所示：

1) 停用滑鼠右鍵

　　jQuery程式設計師可以使用此程式碼在網頁上停用滑鼠右鍵點擊。

$(document).ready(function() {
//catch the right-click context menu
$(document).bind("contextmenu",function(e) { 
//warning prompt - optional
alert("No right-clicking!");
//delete the default context menu
return false;
});
});

2) 利用jQuery調整文字大小

使用此程式碼，使用者可以重新網站上文字的大小（增大和減少）

$(document).ready(function() {
//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) 在新的Windows開啟連結

　　Try this code and increase your site impressions because using this jquery code users will go on new window after clicking on any link of your site. Code is below: -

$(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) Style Sheets Swap

　　Swap style sheets using this code and the “Style sheets swap” script is below: -

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

5) 回到頂部連結

　　That is very common function you can see on eve site nowadays is ” Back to Top”. This functionality is very useful for long pages for make short in a single clickality is very useful for long pages for make short in a single click.

$(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軸

　　You can find the values of X and Y coordinator of mouse pointer. Code is blow : -

$().mousemove(function(e){
//display the x and y axis values inside the P element
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

7) 偵測目前滑鼠座標

　　使用這個腳本，你可以在jQuery所支援的任何網頁瀏覽器找到目前滑鼠的座標。程式碼如下：

$(document).ready(function() {
$().mousemove(function(e)
{
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});
});

8) 在jQuery預先載入圖片

　　此圖片預先載入的腳本有助於非常快速載入圖片或網頁。你不必等待圖像加載。代碼：

jQuery.preloadImagesInWebPage = function() 
{
for(var ctr = 0; ctr<arguments.length; ctr++)
{
jQuery("<img alt="">").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 check whether an image has been loaded, you can use the following piece of code:
$('#imageObject').attr('src', 'image1.gif').load(function() {
alert('The image has been loaded…');
}); 

做好以下工作保你jQuery的性能大提升

1. Append Outside of Loops

凡是觸及DOM都是有代價的。如果你在DOM當中附加大量的元素，你會想一次將它們全部附加進來，而不是分多次進行。當在循環當中附加元素就會產生一個常見的問題。

$.each( myArray, function( i, item ) {
var newListItem = "<li>" + item + "</li>";
$( "#ballers" ).append( newListItem );
}); 

一個常用的技巧是利用文件片段（document fragment）。在循環的每一次迭代當中，將元素附加到片段而不是DOM元素當中。當循環結束後，將片段附加到DOM元素當中即可。

var frag = document.createDocumentFragment();
$.each( myArray, function( i, item ) {
var newListItem = document.createElement( "li" );
var itemText = document.createTextNode( item );
newListItem.appendChild( itemText );
frag.appendChild( newListItem );
});
$( "#ballers" )[ ].appendChild( frag ); 

另一個簡單的技巧是在循環的每次迭代當中，持續建立一個字串。當循環結束後，將DOM元素的HTML設定成該字串。

var myHtml = "";
$.each( myArray, function( i, item ) {
myHtml += "<li>" + item + "</li>";
});
$( "#ballers" ).html( myHtml ); 

當然還有其它一些技巧可以供你嘗試。一個名為 jsperf 的網站為測試這些效能提供了一個好的出路。該網站允許你使用基準測試每一個技巧，並將其跨平台的效能測試結果視覺化的展現出來。

2. Cache Length During Loops

在for迴圈當中，不要每次都存取陣列的 length 屬性；應事先將其快取起來。

var myLength = myArray.length;
for ( var i = ; i < myLength; i++ ) {
// do stuff
} 

3. Detach Elements to Work with Them

操作DOM是緩慢的，因此你想盡可能減少對齊進行操作。 jQuery在1.4版本當中引入了名為 detach() 的方法來幫助解決這個問題，它允許你在對元素進行操作時，將它們從DOM當中分離出來。

var $table = $( "#myTable" );
var $parent = $table.parent();
$table.detach();
// ... add lots and lots of rows to table
$parent.append( $table ); 

4. Don't Act on Absent Elements

如果你正打算在一個空的選擇器上運行大量的程式碼，jQuery並不會給予任何的提示 -- 它將繼續的執行，就像是沒有發生任何的錯誤。必須由你來驗證選擇器包含了多少元素。

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();
// Better:
var $mySelection = $( "#nosuchthing" );
if ( $mySelection.length ) {
$mySelection.slideUp();
}
// Best: Add a doOnce plugin.
jQuery.fn.doOnce = function( func ) {
this.length && func.apply( this );
return this;
}
$( "li.cartitems" ).doOnce(function() {

// make it ajax! \o/

}); 

本指南特別適用於那些當選擇器不包含元素時還需要大量的開銷的 jQuery UI 部件。

5. Optimize Selectors

選擇器的最佳化和過去比起來並不是那麼的重要，因為許多瀏覽器都實作了 document.querySelectorAll() 方法並且jQuery將選擇器的負擔轉移到了瀏覽器上面。但仍然有一些技巧需要銘記在心。

基於ID的選擇器

以一個ID作為選擇器的開始總是最好的。

采用 .find() 方法的方式将更加的快速，因为第一个选择器已经过处理，而无需通过嘈杂的选择器引擎 -- ID-Only的选择器已使用 document.getElementById() 方法进行处理，之所以快速，是因为它是浏览器的原生方法。

特异性

尽量详细的描述选择器的右侧，对于左侧则应反其道而行之。

// Unoptimized:
$( "div.data .gonzalez" );
// Optimized:
$( ".data td.gonzalez" ); 

尽量在选择器的最右侧使用 tag.class 的形式来描述选择器，而在左侧则尽量只使用 tag 或者 .class 。

避免过度使用特异性

$( ".data table.attendees td.gonzalez" );
// Better: Drop the middle if possible.
$( ".data td.gonzalez" ); 

去讨好“DOM”总是有利于提升选择器的性能，因为选择器引擎在搜寻元素时无需进行太多的遍历。

避免使用通用选择器

如果一个选择器明确或暗示它能在不确定的范围内进行匹配将会大大影响性能。

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
$( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better. 

6. Use Stylesheets for Changing CSS on Many Elements

假如你使用 .css() 方法来改变超过20个元素的CSS，应当考虑为页面添加一个样式标签作为替代，这样做可以提升将近60%的速度。

// Fine for up to elements, slow after that:
$( "a.swedberg" ).css( "color", "#ad" );
// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #ad }</style>")
.appendTo( "head" ); 

7. Don't Treat jQuery as a Black Box

把jQuery的源码当成文档，可以把它（http://bit.ly/jqsource）保存在你的收藏夹内，经常的查阅参考。