//Kelebihan jQuery:
1 Ringan
2 Pemilih Berkuasa
3 Enkapsulasi cemerlang operasi DOM
4 Mekanisme pengendalian acara yang boleh dipercayai
5 Ajax Sempurna
6 Jangan cemarkan pembolehubah peringkat atas
7 Keserasian penyemak imbas yang sangat baik
Mod operasi rantai
10 Tingkah laku diasingkan daripada lapisan struktur
11 Sokongan pemalam yang kaya
12 Dokumentasi lengkap
13 Sumber Terbuka
$("#foo") dan jQuery("#foo") adalah bersamaan
$.ajax dan jQuery.ajax adalah bersamaan Simbol $ ialah singkatan bagi jQuery
$(function(){ }) adalah bersamaan dengan peristiwa window.onload dalam js Ia dilaksanakan serta-merta selepas halaman dimuatkan. Hanya ini yang sama dengan window.onload
Tetapi window.onload hanya boleh menulis satu, tetapi $(function(){ }) boleh menulis berbilang
Apabila tiada singkatan, ia adalah $(document)ready(function(){ })
//Gaya operasi rantai:
$(".level1>a").click(function(){ $(this).addClass("current") //给当前元素添加"current"样式 .next().show(); //下一个元素显示 .parent().siblings()//父元素的同辈元素 .children("a") //子元素<a> .removeClass("current")//移出"current"样式 .next().hide();//他们的下一个元素隐藏 return false; })
var cr = $[0]; //objek DOM
var cr = $cr.get(0);//objek DOM
//Tukar objek DOM kepada objek jQuery:
Kaedahnya ialah: $(DOM object);
var $cr = $(cr); //jQuery object
//Selesaikan konflik:
var $jaovo = jQuery.noConflict(); $jaovo(function(){ $jaovo("p").click(function(){ alert($jaovo(this).text()); }); });
jQuery(function(){ jQuery("p".click(function(){ alert(jQuery(this).text()); })); });
//pemilih jQuery
1 Pemilih Asas
Pemilih asas ialah pemilih yang paling biasa digunakan dalam jQuery dan juga pemilih paling mudah Ia mencari elemen DOM melalui id elemen, kelas dan nama tag
//jQuery :
Hanya dapatkan objek label Ia adalah tatasusunan
//pemerolehan objek jQuery:
$("p");//Dapatkan semua objek tag p ---- Objek yang diperoleh ialah tatasusunan
$("#aa");//Dapatkan objek tag dengan id aa --- Objek yang diperoleh ialah tatasusunan
$(".aaa");//Dapatkan objek tag dengan kelas aaa --- Objek yang diperoleh ialah tatasusunan
//Penukaran antara objek jQuery dan objek DOM:
Kaedah jQuery dan kaedah DOM tidak boleh digunakan (dipanggil) antara satu sama lain, tetapi objek boleh ditukar antara satu sama lain
$("p");//ialah objek jQuery
Document.documentElementsTagName("p");//Ia ialah objek DOM
$(document.documentElementsTagName("p"));//Tukar objek DOM ke objek jQuery
$("p").get(1);//Ia ialah objek DOM,
Get(1); mewakili digit kedua tatasusunan p, (subskrip 1 ialah digit kedua)
$($("p").get(1));//Objek jQuery ditukar menjadi
//objek jQuery ditukar kepada objek DOM:
1 Objek jQuery ialah objek seperti tatasusunan, dan objek DOM yang sepadan boleh diperolehi melalui kaedah [index]
var $cr = $("#cr");//objek jQuery
var cr = $[0]; //objek DOM
2 Kaedah lain disediakan oleh jQuery sendiri, dan objek DOM yang sepadan diperolehi melalui kaedah get(index)
var $cr = $("#cr");//objek jQuery
var cr = $cr.get(0);//objek DOM
//objek DOM ditukar kepada objek jQuery:
Untuk objek DOM, anda hanya perlu membalut objek DOM dengan $() untuk mendapatkan objek jQuery.
Kaedahnya ialah: $(DOM object);
var cr = document.getElementById("cr");//objek DOM
var $cr = $(cr); //jQuery object
//Buat elemen:
$("
//text() nod teks:
text(): fungsi/kaedah untuk mendapatkan teks dalaman teg yang dipilih (kandungan boleh dilihat oleh mata manusia)
var li = $("li").text();//Dapatkan data dalam nod teks li (iaitu kandungan 123)
//attr() Dapatkan atribut/Tetapkan atribut/Tukar atribut:
;var i = $("p").attr("title");//Ini adalah untuk mendapatkan nilai atribut tajuk dalam tag p
$("p").attr("title"," bbb");//Tukar nilai atribut tajuk dalam tag p kepada bbb
//removeAttr() memadamkan nilai atribut elemen yang ditentukan:
Apakah buah kegemaran anda?
//append() untuk menambah elemen:
Tambahkan elemen anak yang dipadankan pada elemen induk yang ditentukan.
Panggilan berantai berfungsi: Mengapakah panggilan berantai boleh digunakan?
Ini kerana fungsi sebelumnya masih mengembalikan objek yang dipanggil
Contohnya, a.append(b).append(c) di bawah a ialah objek teg induk Panggil fungsi untuk menambah b padanya dan nilai yang dikembalikan masih menjadi objek a, jadi anda juga boleh memanggil fungsi dan tambah c padanya
//a, b dan c adalah semua objek label
var $li_1 = $("
$parent.append($li_1).append($li_2);
a.append(b);//Tambah b pada penghujung a (tambah), a ialah teg induk dan b ialah teg anak
a.append(c);//Tambah c pada penghujung a (tambah), a ialah teg induk dan c ialah teg anak
a.append(b).append(c);//Tambah b dan c pada a B dan c ialah rakan sebaya, tetapi b berada di atas c (tambahan panggilan berantai)
a.prepend(b)//Tambah b ke hadapan a a ialah tag induk b ialah tag anak
a.insertAfter(b);//Tambahkan a pada bahagian belakang b (daripada generasi yang sama)
a.insertBefore(b);//Tambahkan a pada hadapan b (daripada generasi yang sama)
//Panggil nod mudah alih
//Masukkan elemen yang ditentukan kami di hadapan elemen yang dipadankan (elemen yang ditentukan.insertBefore("elemen yang dipadankan"))
//appendTo() menambah elemen:
//a ialah objek b ialah nama tag
appendTo(): menambah elemen yang ditentukan pada set elemen padanan
$("li").appendTo("ul");//Tambah tag li pada ul
a.appendTo("b"); //Ya, b ditambah pada a (a ialah label dan b ialah label)
Elemen yang ditentukan.appendTo(elemen padanan);
//Padam elemen (tersembunyi) alih keluar():
a.remove();//Alih keluar daripada html (tersembunyi)
var $li = $("ul li:eq(1)").remove();//Alih keluar tag li kedua dalam ul eq(1); iaitu elemen li dengan subskrip 1, iaitu elemen li Dua , kerana subskrip bermula dari 0
$li.appendTo("ul");//Tambah semula elemen yang baru dipadamkan pada ul
$("ul li").remove("li[title !=Apple]");//Padam semua elemen li dalam elemen ul yang atribut tajuknya bukan milik Apple
//removeAttr() memadamkan nilai atribut bagi elemen yang ditentukan:
removeAttr(xx,xx); padamkan nilai atribut
Apakah buah kegemaran anda?
//Kosongkan kosong():
$("ul li:eq(1)").empty();//Cari elemen li kedua dalam ul dan padam kandungannya, (nod teks,
//Salin klon nod():
klon(true): Salin nod Apabila benar, pendengar peristiwa yang terikat pada nod juga disalin jika tidak ditulis, lalainya adalah palsu
$("li").clone()//Salin nod semasa
$("li").clone().appendTo("ul");//Salin nod li dan tambahkannya pada ul (tambah pada bahagian dalam ul)
$("li").clone(true).appendTo("ul");//Salin nod li, salin pendengar acara yang terikat pada li dan tambahkannya pada ul bersama-sama (tambah pada bahagian dalam ul)
//Gantikan nod yang dipilih replaceWith(),replaceAll():
a ialah objek yang digantikan
b ialah teg lengkap yang akan digantikan
a.replaceWith(b);//b akan menggantikan a (b berikut menggantikan a sebelumnya) Yang terakhir menggantikan sebelumnya
b.replaceAll(a);//bGanti a (b sebelumnya menggantikan yang berikut a) Bahagian hadapan menggantikan yang berikut
//Jika terdapat berbilang ps, ia akan diganti
$("p").replaceWith("Buah yang paling tidak digemari teman wanita anda ialah???");//Gantikan keseluruhan tag p dengan < ;strong>Apakah kepunyaan teman wanita anda buah yang paling tidak digemari???//Jika terdapat berbilang ps dan anda hanya mahu menggantikan satu
$($("p") tag digantikan
Anda juga boleh menambah ID pada teg yang ingin anda ganti, iaitu, hanya satu akan diganti
$("#abc").replaceWith("
//gantikanSemua():
$("Apakah buah yang paling tidak disukai ibu anda???").replaceAll("#abc");//Yang pertama menggantikan yang kedua dengan ID #abc Tag itu
$("
//Balut balut() wraoAll() balutBatin() :
//bungkus() :
wrap(): Balut elemen yang dipadankan dengan teg HTML baharu.
objek label (dibalut) b ialah label (dibalut dengan label b)
Semua tag akan dibalut
a.wrap(b);
//Jika terdapat teg, bungkusnya ke dalam:
keluar <
//Jika terdapat berbilang tag, bungkusnya ke dalam:
keluar <
keluar <
keluar <
Masing-masing dipisahkan dari pemisahan pembalut bersama-sama
a.wrap("b");//Ia menambahkan teg induk pada a dibalut oleh b
$("p").wrap("");//Tambahkan teg induk pada teg p, iaitu, balut teg p dengan teg ;i> ;
Saya p tag
wrapAll(): Balut semua label bersama-sama Walaupun label yang akan dibalut tidak bersama dan terdapat label lain di tengah, label yang akan dibalut akan digerakkan bersama dan dibalut bersama
//Sebelum bungkusan
aaa
aaa
Apple
//Kesan menukar toggleClass():
Ia merujuk kepada penukaran antara kesan Terdapat kesan apabila tiada penukaran untuk kali pertama Apabila bertukar, ia merujuk kepada kesan yang terdiri daripada semua kelas
Ini bermakna bertukar-tukar antara kesan semasa dan kesan yang ditentukan