5 petua untuk pemilih jQuery yang lebih cekap

Teras jQuery terletak pada pertanyaan. Ia menggunakan sintaks pemilih CSS untuk mencari elemen DOM dan melaksanakan kaedah pada koleksi unsur -unsur ini. JQuery menggunakan kaedah API penyemak imbas asli untuk mendapatkan koleksi DOM. Penyemak imbas baru menyokong

, getElementsByClassName dan querySelector, yang boleh menghuraikan sintaks CSS. Walau bagaimanapun, pelayar yang lebih tua hanya menawarkan querySelectorAll dan getElementById. Dalam kes yang paling teruk, enjin Sizzle JQuery mesti menghuraikan rentetan pemilih dan mencari elemen yang sepadan. Berikut adalah lima petua untuk membantu anda mengoptimumkan pemilih jQuery anda: getElementByTagName

1. lebih suka menggunakan pemilih id

atribut HTML ID adalah unik di setiap halaman, dan bahkan pelayar yang lebih tua dapat mencari elemen individu dengan cepat:

$("#myelement");

2. Elakkan menggunakan hanya pemilih kelas

pemilih kelas berikut berjalan sangat cepat dalam pelayar moden:

$(".myclass");

Jika kita melayakkannya dengan nama tag, pemilih akan lebih cekap, contohnya:

$("div.myclass");

jQuery kini boleh mengehadkan carian ke elemen div.

3. Pastikan pemilih mudah

Elakkan pemilih CSS yang terlalu kompleks. Kecuali dokumen HTML anda sangat kompleks, jarang sekali memerlukan lebih daripada dua atau tiga kelayakan. Pertimbangkan pemilih kompleks berikut:

$("body #page:first-child article.main p#intro em");

mesti unik, jadi pemilih dapat dipermudahkan untuk: p#intro

$("p#intro em");

4. Meningkatkan kekhususan pemilih dari kiri ke kanan

Adalah berguna untuk memahami bagaimana enjin pemilih JQuery berfungsi. Ia berfungsi dari pemilih terakhir, jadi dalam pelayar yang lebih tua, pertanyaan seperti ini:

$("p#intro em");

akan memuatkan semua

elemen ke dalam array. Ia kemudian melangkah ke atas melalui nod induk setiap nod dan menolak nod yang tidak dapat dijumpai. Sekiranya terdapat beratus -ratus tag em pada halaman, pertanyaan akan sangat tidak cekap. Bergantung pada dokumentasi anda, anda boleh mengoptimumkan pertanyaan dengan terlebih dahulu mengambil pemilih yang paling berkelayakan. Ia kemudiannya boleh digunakan sebagai titik permulaan untuk subselektor, contohnya: p#intro em

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

Elakkan duplikasi pemilih
jarang sekali menggunakan pemilih yang sama dua kali. Kod berikut memilih setiap tg p tiga kali:

ingat JQuery menyokong operasi rantai; Oleh itu, kod yang sama boleh ditulis semula untuk memohon hanya kepada pemilih tunggal:

$("p").css("color", "blue");
$("p").css("font-size", "1.2em");
$("p").text("Text changed!");

Jika anda perlu menggunakan set elemen yang sama beberapa kali, anda harus menyingkirkan objek jQuery dalam pembolehubah, contohnya:

$("p").css({ "color": "blue", "font-size": "1.2em"}).text("Text changed!");

$("#myelement");

Tidak seperti koleksi DOM standard, koleksi jQuery tidak dinamik dan objek tidak dikemas kini apabila tag perenggan ditambah atau dikeluarkan dari dokumen. Anda boleh menyelesaikan batasan ini dengan membuat koleksi DOM dan menyampaikannya ke fungsi jQuery apabila diperlukan, sebagai contoh:

$(".myclass");

Adakah anda mempunyai petua pengoptimuman pemilih jQuery yang lain?

Soalan -soalan yang sering ditanya mengenai pemilih jQuery yang cekap (FAQ)

(bahagian FAQ ditinggalkan di sini kerana ia sangat diduplikasi dengan kandungan FAQ yang asal, pseudo-asalnya sukar dan terlalu lama. Beberapa masalah FAQ boleh dikekalkan atau ditulis semula secara pilihan seperti yang diperlukan.)

Atas ialah kandungan terperinci 5 petua untuk pemilih jQuery yang lebih cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!