Jquery yang hebat - penukaran bersama antara Jquery dan objek DOM dan tiga operasi DOM_jquery

Hanya objek jQuery boleh memanggil pelbagai fungsi perpustakaan kelas jQuery Begitu juga, beberapa sifat dan kaedah objek dom tidak boleh dipanggil pada jQuery, tetapi pada asasnya fungsi yang disediakan oleh perpustakaan kelas jQuery termasuk semua operasi dom. Ini memerlukan kita mengetahui cara menukar objek jQuery ke dan dari DOM.

1. Objek jQuery ialah objek yang dihasilkan dengan membungkus objek DOM melalui jQuery.

2. Penukaran antara objek jQuery dan objek DOM.

Gaya penulisan yang baik:

Salin kod Kod adalah seperti berikut:

var $input=$("input")

Objek yang diperolehi oleh jQuery menambah $ di hadapan pembolehubah.

<1>Tukar objek jQuery kepada objek DOM, dua kaedah: [index] dan get(index)

a:var $cr=$("#cr") //objek jQuery
var cr=$cr[0] //objek DOM
b:var $cr=$("#cr") //objek jQuery
var cr=$cr.get(0); //objek DOM

<2>Tukar objek DOM kepada objek jQuery

var cr=document.getElementById("cr"); //objek DOM
var $cr=$(cr);

3. Selesaikan konflik dengan perpustakaan lain

jQuery.noConflict().
jQuery menggunakan $ sebagai jalan pintasnya sendiri.

4. Kelebihan menggunakan jQuery

<1>Tulisan ringkas
<2>Sokong CC1 kepada CCS3
<3>Mekanisme pemprosesan yang sempurna

Jalankan kod di atas dan penyemak imbas akan melaporkan ralat!
Tetapi jika anda menulisnya seperti ini:

Salin kod Kod adalah seperti berikut:

$('#tt').css("warna","merah");

Pelayar tidak akan melaporkan ralat kerana tiada unsur sedemikian!

pemilih 5.jQuery

Pemilih jQuery ialah keutamaan jQuery!

Pemilih penapis jQuery adalah serupa dengan pemilih kelas pseudo dalam CSS.

<1>Pemilih genap dan ganjil

Nombor genap: $("tr:even")
Nombor ganjil: $("tr:odd")

<2>Pemilih kelas pseudo CSS3 nombor ganjil dan genap

Salin kod Kod adalah seperti berikut:

p:anak ke-(ganjil)
{
latar belakang:#ff0000;
}
p:anak ke-(genap)
{
latar belakang:#0000ff;
}

<2>Pemilih jenis borang

<3>Pemilih melarikan diri untuk mengelakkan ralat

Klasifikasi operasi 6.DOM (1: Teras DOM 2.HTML-DOM 3.CSS-DOM)

Teras 1.DOM

DOM Core bukan eksklusif untuk JavaScript, mana-mana bahasa pengaturcaraan yang menyokong DOM boleh menggunakannya. Penggunaannya tidak terhad kepada pemprosesan halaman web. Ia juga boleh digunakan untuk memproses sebarang dokumen yang ditulis dalam bahasa penanda, seperti XML.

2.HTML_DOM

Apabila menulis skrip untuk fail HTML menggunakan JavaScript dan DOM, terdapat banyak atribut khusus untuk HTML-DOM.
HTML_DOM menyediakan beberapa notasi yang lebih ringkas untuk menerangkan atribut pelbagai elemen HTML.
Seperti:

Salin kod Kod adalah seperti berikut:

dokumen.borang
elemen.src

Hanya untuk WEB

3.CSS_DOM

CSS_DOM ialah operasi untuk CSS. Terutamanya untuk mendapatkan dan menetapkan pelbagai sifat objek gaya.
Dengan menukar pelbagai sifat objek gaya. Tukar kesan yang berbeza.

Salin kod Kod adalah seperti berikut:

element.style.color=“merah”;

7. Nod lintasan

1.anak()
2.next()
3.sebelumnya()
4.adik beradik()
5. terdekat()

8.jquey css

<1> Anda boleh menggunakan kelegapan untuk menetapkan ketelusan dan jQuery telah menangani isu keserasian.

$("p").css("opacity","0.5");

<2>$("p").height(100) //Unit lalai 100 ialah px. Jika anda ingin menggunakan unit lain, anda mesti menggunakan rentetan

Kaedah

<3>offset()

Mengembalikan offset relatif kepada port pandangan

Salin kod Kod adalah seperti berikut:

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

<4>kedudukan()

Salin kod Kod adalah seperti berikut:

//Kembalikan offset relatif kepada gaya kedudukan terkini.
var position=$("p").position();
var left=position.left;
var top=position.top;

<5>scrollTop() dan scrollLeft()

Salin kod Kod adalah seperti berikut:

//Kembalikan jarak dari bahagian atas dan sebelah kiri bar skrol.
var $p=$("p");
var top=$p.scrollTop();
var left=$p.scrollLeft();
//Anda juga boleh menetapkan tatal ke kedudukan yang ditentukan:
$("ab").scrollTop(300);

<6>pageX dan pageY, dapatkan kedudukan tetikus pada halaman

Salin kod Kod adalah seperti berikut:

$(dokumen).mousemove(fungsi(e){
$("span").text("X: " e.pageX ", Y: " e.pageY);
});