Rumah  >  Artikel  >  hujung hadapan web  >  operasi jquery pada nod dom [disyorkan]_jquery

operasi jquery pada nod dom [disyorkan]_jquery

WBOY
WBOYasal
2016-05-16 15:05:171128semak imbas

1. Di manakah saya harus meletakkan skrip JavaScript?

1. Apabila sesetengah fungsi perlu dipanggil sebelum ia dilaksanakan atau beberapa peristiwa perlu dicetuskan sebelum ia dilaksanakan, kita boleh meletakkan skrip di bahagian kepala HTML untuk memastikan bahawa skrip telah dimuatkan sebelum sebarang panggil.

2. Apabila halaman dimuatkan, skrip yang akan dilaksanakan boleh diletakkan di bahagian badan HTML ini biasanya digunakan untuk menjana kandungan halaman.

3. Untuk skrip yang perlu dilaksanakan sejurus selepas halaman dimuatkan, kita boleh meletakkannya di hujung dan melaksanakannya selepas dokumen dimuatkan. Nasib baik, Jquery mempunyai kawalan acara, jadi dalam bahagian ini kita boleh memuat turun fail luaran yang dirujuk oleh kepala.

2. Fungsi biasa jquery

Seperti: anak(), ibu bapa(), setiap(), teks(), html(), val(), seterusnya();

<ul class="level-1"> 

<li class="item-i">I</li> 

<li class="item-ii">II 

<ul class="level-2"> 

<li class="item-a">A</li> 

<li class="item-b">B 

<ul class="level-3"> 

<li class="item-1">1</li> 

<li class="item-2">2</li> 

<li class="item-3">3</li> 

</ul> 

</li> 

<li class="item-c">C</li> 

</ul> 

</li> 

<li class="item-iii">III</li> 

</ul>

a, kanak-kanak()

Lintasi pepohon DOM dan cari nod anak langsung bagi elemen yang ditentukan; kaedah ini hanya merentasi satu tahap ke bawah dalam pepohon DOM

// jquery 

$('ul.level-2').children().css('background-color', 'red'); 

$('ul.level-2').children('.item-*').css('background-color', 'red');

b、ibu bapa()

Lintas pepohon DOM ke atas untuk mencari elemen induk langsung bagi setiap elemen yang ditentukan. Julat lintasan ini adalah sama dengan fungsi children(), yang merentasi satu tahap.

$('li.item-a').parent().css('background-color', 'red');

c,setiap()

Gelung melalui setiap elemen dalam koleksi.

//数组的遍历 

var arr = ["Test1", "Test2", "Test3"]; 

$.each(arr, function (i, item) { 

alert(i); 

alert(item); 

}); //二维数组的遍历 

var arr = [ 

["Test1", "Test2", "Test3"], 

["Test4", "Test5", "Test6"], 

["Test7", "Test8", "Test9"] 

]; 

$.each(arr, function (i, item) { 

alert(i); 

alert(item); 

}); //遍历json数据 

var obj = { "1": "Test1", "2": "Test2", "3": "Test3", "4": "Test4", "5": "Test5", "6": "Test6" }; 

$.each(obj, function (i, item) { 

alert(i); 

alert(item); 

});

4. fungsi teks()

text() ialah kaedah objek jquery, digunakan untuk mengakses kandungan teks elemen yang ditentukan. Ia menggabungkan kandungan teks elemen yang ditentukan dan mengembalikannya sebagai rentetan. Boleh digunakan untuk tugasan.

5. html() fungsi

Dapatkan kandungan html daripada elemen pertama dalam elemen yang ditentukan dan kembalikannya sebagai rentetan. Boleh digunakan untuk tugasan.

Perbezaan: Perbezaan antara fungsi text() dan html()

Perbezaan 1: Fungsi text() boleh digunakan untuk dokumen xml dan dokumen html, manakala html() hanya boleh digunakan untuk dokumen html.

Perbezaan 2: Fungsi html() bukan sahaja memaparkan teks, tetapi juga mengeluarkan pasangan tag dan teks, manakala text() hanya mempunyai teks.

6. val() fungsi 

Mengembalikan atau menetapkan nilai elemen yang dipilih Nilai elemen ditetapkan melalui atribut nilai. Kaedah ini kebanyakannya digunakan untuk elemen input. Jika kaedah ini tidak menetapkan parameter, ia mengembalikan nilai semasa elemen yang dipilih.

7. next() function Mendapatkan elemen adik beradik yang bersebelahan bagi setiap elemen dalam set elemen padanan. Jika pemilih disediakan, dapatkan semula elemen adik beradik seterusnya yang sepadan dengan pemilih.

3. Operasi pada dom

Seperti: prepend(), prependTo(), clone(), append(), appendTo(), before(), insertBefore(), after(), insertAfter(), remove(), detach(), kosong () , replaceWith() , replaceAll() , wrap() , wrapAll() , warpInner()

Operasi jquery di atas pada nod dom [disyorkan] ialah semua kandungan yang dikongsi oleh editor saya harap ia boleh memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn