Thursday, December 1, 2011

5 Tips untuk Memilih jQuery Lebih Efisien

memilih jquery yang efisien
 Seperti yang anda ketahui , jquery berfokus pada sebuah permintaan jadi intinya adalah memungkinkan anda untuk menemukan element DOM menggunakan sebuah CSS pilihan dan menambahkan ke bagian koleksi.

 jQuery browser yang menggunakan metode API asli untuk mengambil koleksi DOM. Browser yang lebih baru dukungan getElementsByClassName, querySelector dan querySelectorAll yang mem-parsing sintaks CSS. Namun, browser lama hanya menawarkan getElementById dan getElementByTagName. Dalam skenario terburuk, yang jQuery Sizzle mesin harus mengurai string pemilih dan berburu untuk elemen yang cocok.

Berikut adalah lima tips yang dapat membantu Anda mengoptimalkan penyeleksi jQuery Anda .


1. Gunakan ID jika di perlukan

HTML ID atribut yang unik di setiap halaman dan bahkan browser lebih lama dapat menemukan satu elemen yang sangat cepat

  • $("#myelement");


2. Hindari Memilih elemen yang berat

Pemilihan elemen jquery yang ringan akan berjalan cepat dalam browser terkini

  • $(".myclass");


3. Tetap menjaga yang berukuran yang normal

Hindari terlalu penyeleksi kompleks. Kecuali Anda memiliki dokumen HTML yang sangat kompleks, itu jarang Anda akan membutuhkan lebih dari dua atau tiga kualifikasi.


  • $("body #page:first-child article.main p#intro em");
p # intro harus unik sehingga pemilih dapat disederhanakan:
  • $("p#intro em");


4. Meningkatkan Spesifisitas dari Kiri ke Kanan

Sebuah sedikit pengetahuan tentang mesin pemilih jQuery berguna. Ia bekerja dari pemilih terakhir pertama sehingga, di browser lama.

  • $("p#intro em");

setiap beban em elemen ke dalam array. Ia kemudian bekerja sampai  dari masing-masing node dan menolak orang-orang dimana p # intro tidak dapat ditemukan. Query akan sangat tidak efisien jika Anda memiliki ratusan em tag pada halaman.

Tergantung pada dokumen Anda, query dapat dioptimalkan dengan mengambil pemilih berkualitas terbaik pertama. Hal ini kemudian dapat digunakan sebagai titik awal untuk penyeleksi, misalnya


  • $("em", $("p#intro")); // or  
  • $("p#intro").find("em");  


5. Hindari Pengulangan Seleksi

Ini jarang diperlukan untuk menggunakan pemilih yang sama dua kali. Kode berikut memilih setiap tag p tiga kali.


  • $("p").css("color", "blue");  
  • $("p").css("font-size", "1.2em");  
  • $("p").text("Text changed!"); 
Ingat jQuery chaining menawarkan; beberapa metode dapat diterapkan pada koleksi yang sama. Oleh karena itu, kode yang sama dapat ditulis ulang sehingga berlaku untuk pemilih tunggal.
  • $("p").css({ "color": "blue", "font-size": "1.2em"}).text("Text changed!");
Anda harus cache objek jQuery dalam variabel jika Anda perlu menggunakan set yang sama elemen beberapa kali, misalnya

var $p = $("p");  
$p.css("color", "blue");  
$p.text("Text changed!")


Tidak seperti koleksi standar DOM, koleksi jQuery tidak hidup dan objek tidak diperbarui bila tag paragraf akan ditambahkan atau dihapus dari dokumen. Anda dapat kode di sekitar pembatasan ini dengan menciptakan koleksi DOM dan diteruskan ke fungsi jQuery ketika itu diperlukan, misalnya

var p = document.getElementByTagName("p");

  • $(p).css("color", "blue");  
  • // update the DOM  
  • $(p).text("Text changed!");

0 comments:

Post a Comment


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam