Panduan Pemula untuk Pemilihan Dom dengan JQuery

Sebagai pemaju depan atau pereka, anda mesti menggunakan Model Objek Dokumen (DOM) dalam projek harian anda. Dalam tahun -tahun kebelakangan ini, dengan peningkatan teknologi JavaScript, memilih elemen dan menggunakan fungsi dinamik di DOM telah menjadi semakin biasa. Oleh itu, kita perlu menguasai pengetahuan menggunakan elemen DOM untuk mengelakkan konflik dan mengoptimumkan prestasi. JQuery adalah salah satu perpustakaan JavaScript yang paling popular dan biasa digunakan, dengan pemilihan DOM dan keupayaan penapisan. Dalam artikel ini, kami akan meneroka cara menapis unsur -unsur DOM dengan mempertimbangkan senario sebenar dengan bantuan jQuery. Mari bermula.

mata utama

JQuery adalah perpustakaan JavaScript yang biasa digunakan yang menyediakan pemilihan DOM dan keupayaan penapisan DOM. Bagi pemaju depan, adalah penting untuk mempunyai pemahaman yang mendalam tentang unsur-unsur DOM untuk mengelakkan konflik dan mengoptimumkan prestasi.
tag elemen HTML, ID, kelas, dan atribut data digunakan untuk memilih unsur -unsur di Dom Tree. ID adalah pengecam unik, kelas digunakan untuk elemen gaya dan untuk menapis dan memilih elemen, dan atribut data mentakrifkan data peribadi untuk elemen.
JQuery membolehkan memilih elemen unik, memilih pelbagai elemen dengan kelas, memilih elemen dengan pelbagai kelas, memilih elemen dengan atribut data, dan memilih elemen dengan pelbagai atribut data. Adalah penting untuk mengelakkan pertindihan elemen dengan ID yang sama dan membezakan kelas gaya untuk tujuan pemilihan dan fungsi.

Pengenalan kepada ID, kelas dan atribut data

Biasanya, kami menggunakan tag elemen HTML, ID, kelas, dan atribut data untuk memilih unsur -unsur di Dom Tree. Kebanyakan pemaju sudah biasa menggunakan tag HTML untuk pemilihan. Walau bagaimanapun, orang baru sering menyalahgunakan ID, kelas, dan atribut data tanpa mengetahui makna dan keperluan mereka yang tepat dalam pelbagai senario. Jadi, sebelum kita masuk ke dalam senario sebenar, mari kita tentukan setiap tiga pilihan ini terlebih dahulu.

• id - digunakan sebagai pengenal unik dalam dokumen. Oleh itu, kita tidak boleh menggunakan ID yang sama untuk pelbagai elemen, walaupun ini mungkin. Biasanya, kami menggunakan ID Element untuk memilih elemen menggunakan jQuery.
• Kelas - Digunakan untuk elemen gaya menggunakan CSS. Walau bagaimanapun, kelas biasanya digunakan untuk menapis dan memilih elemen apabila ID tidak dapat ditapis.
• - digunakan untuk menentukan data peribadi untuk elemen. Kami boleh menetapkan pelbagai atribut data untuk satu elemen untuk menyimpan semua data yang diperlukan oleh fungsi front-end.

senario praktikal menggunakan atribut ID, kelas, dan data

Dalam bahagian ini, kami akan merangkumi beberapa kes penggunaan biasa untuk menggunakan penapisan dan memilih pilihan, dan bagaimana setiap pilihan dapat disesuaikan dengan senario yang berbeza. Malah, kemungkinan menggunakan pilihan ini dalam senario yang berbeza adalah tidak berkesudahan. Oleh itu, kami akan mempertimbangkan skop artikel ini dan memberi tumpuan kepada kandungan yang paling penting.

adegan 1 - Pilih elemen unik dalam dokumen

Ini adalah senario yang paling asas dan biasa yang kami gunakan untuk memilih mana -mana elemen. Memilih nilai borang untuk pengesahan boleh dianggap sebagai contoh yang baik dari senario tersebut. Kami menggunakan HTML Element ID untuk memilih elemen, seperti yang ditunjukkan dalam kod jQuery berikut:

$("#elementID").val();

Apabila menggunakan kaedah ini, penting untuk mengelakkan pertindihan elemen dengan ID yang sama.

adegan 2 - pilih pelbagai elemen menggunakan kelas

Biasanya, apabila kita mahu menapis pelbagai elemen dalam dokumen, kita menggunakan atribut kelas. Tidak seperti ID, kita boleh menggunakan pelbagai elemen dengan kelas CSS yang sama. Biasanya, jenis elemen yang serupa dihasilkan oleh gelung. Katakan kami mempunyai senarai rekod yang mengandungi data pengguna, seperti yang ditunjukkan dalam kod HTML di bawah. Kami mempunyai butang "Padam" yang pengguna boleh memadam rekod dengan mengkliknya.

<table>
  <tr><td>Mark</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>John</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>Mike</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
</table>

Sekarang, kita mempunyai banyak contoh unsur -unsur yang sama, jadi kita tidak boleh menggunakan ID untuk menapis rekod yang tepat. Mari lihat cara menapis baris menggunakan kelas CSS yang diberikan.

var rows = $(".user_data");

Dalam kod sebelumnya, pembolehubah baris akan mengandungi ketiga -tiga baris dengan kelas user_data. Sekarang mari kita lihat cara memadam baris apabila mengklik butang menggunakan pemilih kelas.

$(".user_data").click(function(){
  $(this).parent().parent().remove();
});

Dalam teknik ini, kami melangkah melalui semua elemen yang sepadan dan melaksanakan fungsi pada projek semasa menggunakan objek $ (ini) yang menunjuk pada butang yang diklik. Ini adalah kaedah yang paling banyak digunakan untuk menangani pelbagai elemen. Sekarang mari kita lihat beberapa kesilapan biasa untuk pemaju pemula dalam senario sedemikian.

• Gunakan ID dan bukan kelas

Terdapat banyak kes di mana pemaju menggunakan ID yang sama dalam gelung untuk menghasilkan kod HTML yang serupa dan bukannya kelas. Sebaik sahaja ID yang sama digunakan, ia hanya mempengaruhi elemen pertama. Selebihnya unsur -unsur tidak akan berfungsi seperti yang diharapkan. Oleh itu, pastikan untuk membuat ID dinamik dalam gelung dan gunakan nama kelas untuk pemilihan elemen.

• Gunakan nama kelas bukannya $ (ini) objek

Satu lagi kesilapan yang dibuat oleh banyak pemaju baru adalah kekurangan pemahaman konteks dan penggunaan objek semasa. Apabila meleleh melalui pelbagai elemen, kita boleh menggunakan jQuery $ (ini) untuk merujuk elemen semasa. Ramai pemaju menggunakan nama kelas dalam gelung dan oleh itu tidak dapat mendapatkan hasil yang diharapkan. Oleh itu, jangan gunakan nama kelas dalam gelung, seperti yang ditunjukkan dalam kod berikut:

$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});

Ini adalah kaedah yang digunakan secara meluas untuk memilih elemen, jadi penting untuk memahami cara menggunakan kaedah ini dengan berkesan. Kelas CSS digunakan untuk tujuan gaya. Tetapi di sini kita menggunakannya untuk tujuan pemilihan elemen. Menggunakan kelas CSS untuk tujuan pemilihan bukan cara terbaik untuk melakukannya, kadang -kadang ia boleh membawa kepada konflik susun atur. Sebagai contoh, apabila bekerja dengan pasukan, pemaju mungkin hanya menggunakan kelas CSS untuk menyediakan fungsi dinamik untuk jQuery. Pereka bentuk mungkin mendapati bahawa kelas -kelas ini tidak digunakan untuk tujuan gaya, jadi mungkin untuk memadamkannya tanpa mengetahui kepentingan mereka. Oleh itu, adalah lebih baik untuk menggunakan beberapa awalan untuk kelas CSS yang hanya digunakan untuk pelbagai fungsi dan bukan gaya.

adegan 3 - pilih elemen menggunakan pelbagai kelas

Sesetengah aplikasi dan laman web sangat bergantung pada JavaScript dan menyediakan fungsi klien yang sangat dinamik. Dalam kes ini, kami boleh menggunakan sejumlah besar kelas dan ID untuk menapis, memilih dan memohon fungsi. Katakan kami mempunyai senarai rekod pengguna yang perlu ditapis pada pelanggan mengikut peranannya. Kita boleh menentukan peranan sebagai kelas CSS untuk memudahkan proses penapisan. Pertimbangkan coretan kod berikut:

$("#elementID").val();

Katakan kami ingin memperoleh pengguna dengan peranan pemaju dan pereka. Dalam kes ini, kita boleh menggunakan pelbagai kelas CSS, seperti yang ditunjukkan dalam kod berikut:

<table>
  <tr><td>Mark</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>John</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>Mike</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
</table>

kita boleh menggunakan mana -mana kelas untuk memadankan pelbagai kelas pada elemen yang sama satu demi satu. Pastikan tidak menggunakan ruang antara kelas, kerana ia akan mengubah makna dan hasil pemilihan. Pertimbangkan baris kod yang sama dengan ruang:

var rows = $(".user_data");

Kod kini mencari pereka dengan elemen induk yang dipanggil pemaju. Oleh itu, terbiasa dengan perbezaan antara kedua -dua pelaksanaan ini dan menggunakannya dengan bijak. Begitu juga, kita boleh mencampurkan ID dan kelas apabila menggunakan teknik ini.

adegan 4 - pilih elemen menggunakan atribut data

HTML5 memperkenalkan sifat data tersuai di mana kita boleh menentukan data yang berkaitan dengan elemen HTML. Atribut data ini mempunyai satu set konvensyen tertentu dan dianggap data peribadi. Jadi sekarang kita boleh menggunakan atribut data untuk menyimpan data yang berkaitan dengan mana -mana elemen dan bukannya membuat permintaan Ajax berganda ke pelayan. Mari lihat bagaimana untuk melaksanakan senario 2 menggunakan sifat data tersuai dan bukannya kelas CSS.

$(".user_data").click(function(){
  $(this).parent().parent().remove();
});

Seperti yang anda lihat, kita boleh menggunakan sifat data dan bukannya kelas CSS untuk mendapatkan hasil yang sama. JQuery menyediakan pemilih atribut lanjutan untuk menyokong atribut data tersuai. Oleh itu, mari kita pertimbangkan beberapa pilihan pemilih lanjutan untuk sifat tersuai. Katakan kami menyimpan e -mel pengguna sebagai sifat tersuai dan kami ingin memilih pengguna berdasarkan kriteria tertentu dalam e -mel. Pertimbangkan coretan kod berikut menggunakan sifat data:

$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});

Pilih elemen yang mengandungi "gmail" dalam e -mel

<ul>
  <li class='role-developer role-designer'>Mark</li>
  <li class='role-developer'>Simon</li>
  <li class='role-developer role-manager'>Kevin</li>
</ul>

Pilih elemen dengan alamat e -mel "UK"

var selected_users = $('.role-developer.role-designer');

Pilih elemen untuk e -mel tidak sah tanpa simbol "@"

var selected_users = $('.role-developer .role-designer');

Seperti yang dapat anda lihat, atribut data berkuasa dalam mengendalikan data yang berkaitan dengan elemen HTML, dan JQuery memberikan sokongan komprehensif melalui fungsi terbina dalamnya. Anda boleh mencari rujukan pemilih harta lengkap di https://www.php.cn/link/2705e8fde87cd2883e9fc1f00335685f .

adegan 5 - pilih elemen menggunakan pelbagai atribut data

Ini serupa dengan apa yang kita bincangkan di Scene 3 dan mempunyai beberapa sambungan. Dalam senario lanjutan, menggunakan kelas CSS untuk mengendalikan pelbagai nilai data boleh menjadi rumit. Oleh itu mari kita lihat bagaimana menggunakan pelbagai atribut data untuk pemilihan.

$("#elementID").val();

di sini, kita boleh menyemak kewujudan pelbagai atribut data dan pilih melalui nilai carian separa. Sekarang anda harus dapat memahami perbezaan antara kelas CSS dan atribut data dalam pemilihan elemen. Atribut data menyediakan cara untuk mengatur pemprosesan data elemen. Teknik -teknik yang dibincangkan di sini boleh digunakan bersempena dengan penapis jQuery lain untuk memenuhi apa -apa jenis keadaan maju, dan penting untuk menggunakannya dengan bijak.

Ringkasan

Artikel ini bertujuan untuk membantu pemula memahami asas -asas ID elemen, kelas, dan sifat data tersuai. Kami membincangkan masing-masing melalui senario sebenar dengan bantuan fungsi terbina dalam jQuery. Dalam proses ini, kami juga mengenal pasti beberapa kesilapan dari pemaju pemula. Mari kita semak perkara utama yang dibincangkan dalam artikel ini untuk membina panduan pemilihan DOM yang berguna:

• Gunakan IDS apabila mungkin untuk pemilihan elemen, kerana ia memberikan pengenal unik dalam dokumen.
• Gunakan atribut kelas atau data dalam pelbagai senario elemen dan bukannya bergantung pada ID elemen.
• Pastikan anda membezakan antara kelas gaya dan kelas untuk tujuan pemilihan dan fungsi.
• Gunakan atribut data dalam senario kompleks, kerana kelas tidak bertujuan untuk menyediakan data mengenai unsur -unsur.

Saya harap artikel ini dapat memberi anda pengenalan yang baik untuk pemilihan elemen. Jika anda mempunyai panduan yang lebih baik dan teknik pemilihan elemen, jangan ragu untuk berkongsi di bahagian komen.

FAQs Mengenai Pemilihan JQuery Dom (FAQ)

Apakah Model Objek Dokumen (DOM) dalam JQuery?

Model Objek Dokumen (DOM) dalam JQuery adalah antara muka pengaturcaraan untuk dokumen HTML dan XML. Ia mewakili struktur dokumen dan menyediakan cara untuk memanipulasi kandungan dan struktur. Menggunakan DOM, pengaturcara boleh membuat, menavigasi, dan mengubah suai elemen dan kandungan dalam dokumen HTML dan XML.

Bagaimana untuk memudahkan operasi DOM dalam jQuery?

JQuery memudahkan operasi DOM dengan menyediakan API yang mudah digunakan untuk mengendalikan acara, membuat animasi, dan membangunkan aplikasi AJAX. JQuery juga menyediakan sintaks mudah untuk menavigasi dan memanipulasi DOM. Ia menafsirkan banyak kerumitan mengendalikan JavaScript mentah dan DOM API, menjadikannya lebih mudah bagi pemaju untuk menggunakan dokumen HTML.

Apakah jenis pemilih DOM dalam jQuery?

Terdapat beberapa jenis pemilih DOM dalam jQuery, termasuk pemilih elemen, pemilih ID, pemilih kelas, pemilih atribut, dan pemilih kelas pseudo. Pemilih Elemen Memilih Elemen berdasarkan nama elemen mereka. Pemilih ID memilih elemen berdasarkan atribut IDnya. Pemilih kelas memilih elemen berdasarkan atribut kelasnya. Pemilih atribut memilih elemen berdasarkan atribut atau nilai atribut. Pemilih kelas pseudo memilih elemen berdasarkan keadaan tertentu.

Bagaimana untuk memilih elemen oleh IDnya dalam jQuery?

Untuk memilih elemen dengan ID dalam jQuery, gunakan tanda pound (#) diikuti oleh ID elemen. Sebagai contoh, untuk memilih elemen dengan id "myelement", anda akan menggunakan $ ("#myelement").

Bagaimana untuk memilih elemen oleh kelas mereka dalam jQuery?

Untuk memilih unsur -unsur oleh kelas mereka dalam jQuery, gunakan notasi dot (.) Diikuti dengan nama kelas. Sebagai contoh, untuk memilih elemen dengan kelas "MyClass", anda akan menggunakan $ (". MyClass").

Apakah pemilih harta dalam jQuery dan bagaimana mereka berfungsi?

Pemilih atribut dalam jQuery memilih elemen berdasarkan atribut atau nilai atributnya. Mereka ditulis dalam kurungan persegi ([]). Sebagai contoh, untuk memilih semua elemen dengan atribut "contoh data", anda akan menggunakan $ ("[contoh data]").

Bagaimana untuk memilih pelbagai elemen dalam jQuery?

Anda boleh memilih pelbagai elemen dalam jQuery dengan memisahkan setiap pemilih dengan koma. Sebagai contoh, untuk memilih semua elemen dengan kelas "myclass" dan semua elemen dengan id "myid", anda akan menggunakan $ (". MyClass, #myid").

Apakah pemilih kelas pseudo dalam jQuery?

pemilih kelas pseudo dalam jQuery memilih elemen berdasarkan keadaan tertentu. Sebagai contoh, pemilih kelas pseudo ": diperiksa" akan memilih semua kotak semak atau butang radio yang dipilih.

Bagaimana menggunakan jQuery untuk mengendalikan DOM?

JQuery menyediakan beberapa kaedah untuk memanipulasi DOM, seperti .append (), .prigur (), .fter (), .before (), .remove (), dan .empty (). Kaedah ini membolehkan anda memasukkan, menggantikan, dan memadam elemen dalam DOM.

Bagaimana jQuery mengendalikan peristiwa di DOM?

jQuery menyediakan kaedah untuk mengendalikan peristiwa di dom, seperti .click (), .dblclick (), .hover (), .mousedown (), .mouseup (), .mouseMove (), .mouseout (), . . Kaedah ini membolehkan anda menentukan apa yang berlaku apabila peristiwa -peristiwa ini berlaku pada unsur -unsur di DOM.

Atas ialah kandungan terperinci Panduan Pemula untuk Pemilihan Dom dengan JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!