Contoh penggunaan menggunakan jQuery untuk memproses elemen_jquery halaman

Contoh dalam artikel ini menerangkan penggunaan jQuery untuk memproses elemen halaman. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Untuk elemen halaman, ia boleh diuruskan melalui pelbagai kaedah pertanyaan dan pengubahsuaian dalam pengaturcaraan DOM, yang sangat menyusahkan. jQuery menyediakan satu set keseluruhan kaedah untuk memanipulasi elemen halaman. Termasuk kandungan, salinan, pemindahan dan penggantian elemen. Berikut adalah beberapa yang biasa digunakan.

1. Dapatkan dan edit kandungan secara langsung.

Dalam jQuery, kandungan halaman diperoleh dan diedit terutamanya melalui dua kaedah html() dan text(). Antaranya, html() adalah bersamaan dengan mendapatkan atribut innerHTML nod. Menambah parameter html(text) set innerHtml text() digunakan untuk mendapatkan teks biasa bagi elemen, dan text(content) menetapkan plain teks.

Kedua-dua kaedah ini kadangkala digunakan bersama-sama text() digunakan untuk menapis teg dalam halaman, manakala html(teks) digunakan untuk menetapkan innerHtml dalam nod. Contohnya:

Salin kod Kod adalah seperti berikut:

$(function() {
var sString = $("p:first").text(); //Dapatkan teks biasa
$("p:last").html(sString);
});

Gunakan kaedah text() untuk mendapatkan teks P pertama, dan kemudian gunakan kaedah html() untuk menetapkannya kepada

yang terakhir.

Penggunaan kaedah text() dan html() yang bijak.

Salin kod Kod adalah seperti berikut:

Satu klik, dua klik dan tiga klik tetikus boleh digunakan untuk mendapatkan dan memindahkan kod.

2. Gerakkan dan salin elemen

Dalam DOM biasa, jika anda ingin menambah elemen selepas elemen, anda biasanya menggunakan kaedah appendChild() atau insertBefore() bagi elemen induk Dalam banyak kes, anda perlu mencari kedudukan nod tersebut. Ia sangat menyusahkan. jQuery menyediakan kaedah append(), yang boleh terus menambah sub-elemen baharu pada sesuatu elemen.

Salin kod Kod adalah seperti berikut:

Selain menambah kod html secara langsung, kaedah append() juga boleh digunakan untuk menambah nod tetap, seperti

Salin kod Kod adalah seperti berikut:

$("p").append($("a") );

Situasi ini akan menjadi sedikit berbeza. Jika

yang ditambahkan ialah satu-satunya elemen, maka $("a") akan dialihkan ke bahagian belakang semua elemen anak unsur tersebut, dan jika sasaran

Berbilang elemen, kemudian $("a") akan menambah elemen anak pada setiap P dalam bentuk salinan, sementara elemen itu sendiri kekal tidak berubah. Contoh: Gunakan kaedah append() untuk menyalin dan memindahkan elemen.

Salin kod Kod adalah seperti berikut:

Kod di atas menetapkan dua hiperpautan untuk panggilan tambah(). Untuk hiperpautan pertama, tambahkan sasaran $("p"), yang mempunyai dua elemen

Anda boleh melihat bahawa hiperpautan pertama ditambah dengan menyalin, dan hiperpautan kedua ditambah dengan bergerak.

Selain itu, seperti yang dapat dilihat dari di atas, teg selepas append() digunakan pada gaya sasaran

, sambil mengekalkan gayanya sendiri. Ini kerana append() menambah sebagai sub-teg

, meletakkan di belakang semua sub-teg (teks) nod

.

Selain kaedah append(), jQuery juga menyediakan kaedah appendTo(target), yang digunakan untuk menambah elemen sasaran pada elemen anak sasaran yang ditentukan. Penggunaan dan hasilnya sama sekali dengan append().

Salin kod Kod adalah seperti berikut:

$(function() {
$("img:eq(0)").appendTo($("p")); //Tambah berbilang sasaran

$("img:eq(1)").appendTo($("p:eq(0)")); //Sasaran yang ditambah adalah unik

});

---

Untuk foto pertama, rakan sekerja saya menambahkannya pada tiga tag p, dan untuk foto kedua, dia menambahkannya pada satu elemen P Daripada hasil pelaksanaan, kita dapat melihat bahawa foto pertama yang disalin ditambah kepada tiga Unsur P dalam bentuk , manakala gambar kedua ditambah dengan cara mudah alih.

Bersesuaian dengan kaedah append() dan appendTo(), JQ juga menyediakan kaedah prepend() dan prependTo() Kedua-dua kaedah ini adalah untuk menambah elemen sebelum semua elemen anak sasaran, dan juga mengikuti: menyalin dan memindahkan penambahan pada dasarnya.

Selain daripada empat kaedah di atas, Jq juga menyediakan before(), insertBefore(), after(), dan insertAfter(), yang digunakan untuk menambah elemen secara langsung sebelum atau selepas nod dan bukannya sebagai Elemen kanak-kanak sisipan.

Before() betul-betul sama dengan insertBefore(), dan after() dan insertAfter() juga betul-betul sama di sini kita ambil after() sebagai contoh

Salin kod Kod adalah seperti berikut:

Hasil daripada menjalankan kod di atas, anda dapat melihat bahawa kaedah after() juga mengikut prinsip mengalihkan satu sasaran dan menyalin berbilang sasaran, dan tidak lagi ditambahkan sebagai elemen anak. Sebaliknya, ia adalah elemen adik beradik serta-merta mengikut elemen sasaran.

3.

Dalam pengaturcaraan DOM, untuk memadamkan elemen, anda sering menggunakan kaedah removeChild() bagi elemen induk, dan jQuery menyediakan kaedah remove() untuk memadamkan elemen secara terus.

Sebagai contoh, $("p").remove(); memadam semua tag elemen p dalam keseluruhan halaman.

move() juga menerima parameter.

Salin kod Kod adalah seperti berikut:

Dalam kod di atas, remove() menggunakan pemilih penapis, dan elemen P yang kandungan teksnya mengandungi 1 dipadamkan.

Walaupun remove() boleh menerima parameter, ia biasanya disyorkan untuk menentukan objek yang akan dipadamkan dalam peringkat pemilih, dan kemudian gunakan remove() untuk memadam semuanya sekaligus. ("p:contains('1')").remove(); Kesannya adalah sama, dan kesannya konsisten dengan gaya kod lain.

Dalam DOM, jika anda ingin memadamkan semua elemen anak elemen, anda sering menggunakan gelung for dengan hasChildNodes() untuk menilai, dan gunakan removeChildNode() untuk memadamkannya satu demi satu. ) kaedah untuk memadam terus semua elemen anak.

Salin kod Kod adalah seperti berikut:

4.

Bahagian kedua menyebut penyalinan dan pemindahan elemen, tetapi ini bergantung pada bilangan sasaran Banyak kali pembangun berharap walaupun terdapat satu objek sasaran, operasi penyalinan masih boleh dilakukan.

jQuery menyediakan kaedah klon() untuk menyelesaikan tugas ini.

Salin kod Kod adalah seperti berikut:

Hasil yang dicapai oleh kaedah appendTo() dalam bahagian sebelumnya juga telah selesai.

Selain itu, fungsi klon() juga menerima objek nilai Boolean sebagai parameter Apabila parameter itu benar, sebagai tambahan kepada klon itu sendiri, kaedah masa yang dibawanya akan disalin bersama.

Salin kod Kod adalah seperti berikut:

Kod di atas mengklon butang itu sendiri apabila butang diklik, dan mengklon acara klik pada masa yang sama Butang klon juga mempunyai fungsi pengklonan sendiri.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.