Petua dan helah jQuery yang anda tidak boleh pelajari di tempat lain (dialu-alukan untuk mengumpul)_jquery

Editor di bawah telah menyusun 8 petua yang sangat membantu untuk pengaturcaraan adalah seperti berikut:

1) Lumpuhkan klik kanan tetikus

Pengaturcara jQuery boleh menggunakan kod ini untuk melumpuhkan klik kanan tetikus pada halaman web.

$(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) Gunakan jQuery untuk melaraskan saiz teks

Menggunakan kod ini, pengguna boleh mengubah saiz (menambah dan mengurangkan) teks di tapak web

$(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) Buka pautan dalam Windows baharu

　Cuba kod ini dan tingkatkan tera tapak anda kerana menggunakan kod jquery ini pengguna akan pergi ke tetingkap baharu selepas mengklik mana-mana pautan tapak anda di bawah: -

$(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) Tukar Helaian Gaya

Tukar helaian gaya menggunakan kod ini dan skrip "Pertukaran helaian gaya" ada di bawah: -

$(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) Kembali ke pautan atas

　Itu adalah fungsi yang sangat biasa yang boleh anda lihat di laman web pada masa kini ialah "Kembali ke Atas".

$(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) Dapatkan paksi x dan y kursor tetikus

Anda boleh mencari nilai penyelaras X dan Y penunjuk tetikus: -

$().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) Kesan koordinat tetikus semasa

Menggunakan skrip ini, anda boleh mencari koordinat tetikus semasa dalam mana-mana pelayar web yang disokong oleh jQuery. Kodnya adalah seperti berikut:

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

8) Pramuat imej dalam jQuery

Skrip pramuat imej ini membantu memuatkan imej atau halaman web dengan cepat. Anda tidak perlu menunggu imej dimuatkan. Kod:

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

Lakukan perkara berikut untuk memastikan prestasi jQuery anda dipertingkatkan dengan baik

1. Tambah Di Luar Gelung

Apa-apa sahaja yang melibatkan DOM mempunyai harga. Jika anda menambahkan banyak elemen pada DOM, anda perlu menambahkan kesemuanya sekali gus daripada melakukannya beberapa kali. Masalah biasa timbul apabila menambahkan elemen pada gelung.

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

Teknik biasa ialah menggunakan serpihan dokumen. Pada setiap lelaran gelung, tambahkan elemen pada serpihan dan bukannya elemen DOM. Apabila gelung tamat, tambahkan serpihan pada elemen 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 ); 

Satu lagi helah mudah ialah membina rentetan secara berterusan pada setiap lelaran gelung. Apabila gelung tamat, tetapkan HTML elemen DOM kepada rentetan ini.

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

Sudah tentu ada teknik lain yang anda boleh cuba. Tapak yang dipanggil jsperf menyediakan saluran yang baik untuk menguji sifat ini. Tapak ini membolehkan anda menanda aras setiap teknik dan memvisualisasikan hasil prestasi merentas platformnya.

2. Panjang Cache Semasa Gelung

Dalam gelung untuk, jangan akses sifat kepanjangan tatasusunan setiap kali ia harus dicache terlebih dahulu.

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

3. Tanggalkan Elemen untuk Bekerja dengannya

Memanipulasi DOM adalah perlahan, jadi anda mahu melakukannya dengan penjajaran sesedikit mungkin. jQuery memperkenalkan kaedah yang dipanggil detach() dalam versi 1.4 untuk membantu menyelesaikan masalah ini, yang membolehkan anda menanggalkan elemen daripada DOM apabila beroperasi padanya.

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

4. Jangan Bertindak Atas Elemen Tidak Hadir

Jika anda merancang untuk menjalankan banyak kod pada pemilih kosong, jQuery tidak akan memberi anda sebarang petunjuk - ia akan terus melaksanakan seolah-olah tiada ralat berlaku. Terpulang kepada anda untuk mengesahkan berapa banyak elemen yang terkandung dalam pemilih.

// 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/

}); 

Panduan ini amat berguna untuk widget UI jQuery yang memerlukan banyak overhed apabila pemilih tidak mengandungi elemen.

5. Pemilih Optimumkan

Pengoptimuman pemilih tidak begitu penting seperti pada masa lalu, kerana banyak penyemak imbas melaksanakan kaedah document.querySelectorAll() dan jQuery mengalihkan beban pemilih kepada penyemak imbas. Tetapi masih ada beberapa petua yang perlu diingat.

Pemilih berasaskan ID

Adalah yang terbaik untuk memulakan pemilih anda dengan ID.

// Fast:
$( "#container div.robotarm" );
// Super-fast:
$( "#container" ).find( "div.robotarm" ); 

采用 .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）保存在你的收藏夹内，经常的查阅参考。