Pusat jQuery - Metode jQuery()
Contoh
Cari semua elemen p yang merupakan anak dari elemen div, lalu atur atribut garisnya:
$("div > p").css("border", "1px solid gray");
Definisi dan penggunaan
Fungsi jQuery() menerima string yang mengandung pemilih CSS untuk menggabungkan koleksi elemen.
Fungsi jQuery() mempunyai tiga gramma:
Gramma 1
Menerima string yang mengandung pemilih CSS untuk menggabungkan koleksi elemen:
jQuery(pemilih, [konteks]
Gramma 2
Membuat elemen DOM menggunakan string HTML asli:
jQuery(html,ownerDocument]
Gramma 3
Tautan fungsi yang dijalankan setelah dokumen DOM disiapkan:
jQuery( callback )
jQuery( pemilih, [ konteks ] )
Sintaks ini mempunyai beberapa penggunaan:
Penggunaan 1: Tetapkan lingkungan pemilih
Sintaks
jQuery(pemilih, [konteks]
secara baku, pemilih mencari DOM dari akar dokumen. Namun, parameter konteks boleh ditetapkan untuk $().
contoh, jika kami ingin mencari elemen dalam callback, dapat menentukan pencarian di bawah ini:
Contoh
$("div.foo").click(function() {
$("span", this).addClass("bar");
);
Karena kami telah membatasi pemilihan span ke lingkungan this, hanya span yang ada di dalam elemen yang disentuh yang akan mendapatkan class tambahan.
Dalam internal, lingkungan pilihannya disampaikan melalui metode .find(), jadi $("span", this) setara dengan $(this).find("span").
Fungsi ini adalah yang melaksanakan fungsi inti jQuery. Semua yang ada di dalam jQuery berdasarkan fungsi ini, atau dianggap menggunakan fungsi ini dalam beberapa cara. Penggunaan dasar dari fungsi ini adalah untuk memasukkan ekspresi (biasanya disusun dalam pilihannya), kemudian mencari semua elemen yang cocok berdasarkan ekspresi ini.
Secara default, jika parameter konteks tidak disesuaikan, $() akan mencari elemen DOM di dalam dokumen HTML saat ini; jika parameter konteks disesuaikan, seperti kumpulan elemen DOM atau objek jQuery, maka pencarian akan dilakukan di dalam konteks ini. Dari jQuery 1.3.2, urutan elemen yang dikembalikan setara dengan urutan munculnya di konteks.
Penggunaan 2: Menggunakan elemen DOM
Sintaks
jQuery(element)
Fungsi ini memungkinkan kami untuk membuat objek jQuery melalui elemen DOM yang ditemukan dengan cara lain. Penggunaan biasa dari fitur ini adalah, memanggil metode jQuery untuk elemen yang sudah dipasang ke dalam fungsi callback melalui keyword this:
Contoh
$("div.foo".click(function() {
$(this).slideUp();
);
Contoh ini akan menghapus elemen dengan animasi penyeretan saat elemen disentuh. Karena penanganan ini menerima objek yang disentuh di dalam keyword this sebagai elemen DOM penuh, maka sebelum memanggil metode jQuery, elemen harus dibalut dengan objek jQuery.
Fungsi ini juga dapat menerima dokumen XML dan objek Window (walaupun mereka bukan elemen DOM) sebagai parameter yang sah.
Ketika data XML dikembalikan dari pemuat Ajax, kami dapat menggunakan fungsi $() untuk membalut data ini melalui objek jQuery. Setelah selesai, kami dapat menggunakan .find() dan metode pengembangan DOM lain untuk mengambil elemen tunggal dalam struktur XML.
Penggunaan 3: Klon objek jQuery
Sintaks
jQuery(objek jQuery)
Apabila objek jQuery disampaikan kepada fungsi $() dalam bentuk parameter, akan dihasilkan salinan objek tersebut. Seperti objek asli, objek jQuery baru mengacu kepada elemen DOM yang sama.
Penggunaan 4: Mengembalikan kumpulan kosong
Sintaks
jQuery()
Untuk jQuery 1.4, pemanggilan metode jQuery() tanpa parameter akan mengembalikan kumpulan jQuery kosong. Dalam versi jQuery yang lama, ini akan mengembalikan kumpulan yang mengandungi nod document.
jQuery( html, [ ownerDocument ] )
Sintaks ini mempunyai beberapa penggunaan:
Penggunaan 1: Membuat elemen baru
Sintaks
jQuery(html,ownerDocument]
Anda boleh membawa string HTML yang ditulis tangan, atau string yang dihasilkan oleh beberapa enjin templat atau plugin, ataupun string yang dimuat melalui AJAX. Tetapi ada had untuk mencipta elemen input, boleh lihat contoh kedua.
Tentu string ini boleh mengandungi garis miring (contoh alamat imej), serta garis melintasi. Apabila anda membuat elemen tunggal, gunakan tag tutup atau format XHTML. Contohnya, untuk membuat span, boleh gunakan $("<span/>") atau $("<span></span>"), tetapi tidak disarankan $("<span>"). Dalam jQuery, sintaks ini setara dengan $(document.createElement("span")).
Jika string disampaikan sebagai parameter kepada $(), jQuery akan memeriksa sama ada string adalah HTML (contoh, beberapa posisi string mengandungi tag). Jika bukan, string akan diartikan sebagai ekspresi pemilihan, lihat pengertian di atas. Tetapi jika string adalah bahagian HTML, jQuery akan mencuba untuk membuat elemen DOM yang dijelaskan oleh bahagian HTML itu sendiri. kemudian akan membuat dan mengembalikan objek jQuery yang merujuk kepada DOM elemen ini:
Contoh
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
Jika bahagian HTML lebih kompleks daripada label sederhana tanpa atribut, seperti contoh di atas HTML, proses pembuatan elemen sebenarnya dijalankan oleh mekanisme innerHTML pelayar. Secara khusus, jQuery akan membuat elemen <div> baru, lalu menset atribut innerHTML elemen untuk mengisi bahagian HTML yang disampaikan. Apabila parameter hanya label sederhana, seperti $("<img />") atau $("<a></a>"), jQuery akan membuat elemen melalui fungsi createElement() JavaScript bawaan.
Untuk memastikan kompatibilitas platform yang transparan, struktur fragmen harus baik. Tag yang dapat mengandung elemen lain harus muncul dalam pasangan (dengan tag tutup):
$("<a href="http://jquery.com"></a>");
Namun, jQuery juga mengijinkan sintaks tag seperti XML:
$("<a/>");
Tanda buka tag yang tidak dapat mengandung elemen lain dapat ditutup, atau tidak ditutup:
$("<img />");
$("<input>");
Penggunaan 2: Tetapkan atribut dan peristiwa
Sintaks
jQuery(html,props)
Untuk jQuery 1.4, kita dapat mengirimkan peta atribut ke parameter kedua. Parameter ini menerima kumpulan atribut yang dapat disampaikan ke metode .attr(). Selain itu, dapat disampaikan jenis peristiwa apapun, dan dapat dipanggil metode jQuery di bawah: val, css, html, text, data, width, height, atau offset.
Perhatikan, Internet Explorer tidak mengijinkan Anda membuat elemen input dan mengubah tipe; Anda harus menggunakan seperti "<input type="checkbox" />" untuk menentukan tipe.
Contoh
Buat elemen <input> dan tetapkan atribut type, nilai atribut, serta beberapa peristiwa.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
Memungkinkan Anda mengikat fungsi yang akan dijalankan setelah dokumen DOM dimuat.
Fungsi ini bertindak seperti $(document).ready(), tetapi ketika menggunakan fungsi ini, perlu membalut semua operasi $() lain yang perlu dijalankan saat DOM disiap untuk dijalankan ke dalamnya. Meskipun secara teknis fungsi ini dapat dihubungkan, situasi yang sebenarnya dihubungkan seperti ini sangat jarang.
Contoh
Ketika DOM disiapkan untuk dijalankan, eksekusi fungsi di dalamnya:
$(function() {
// Dokumen siap
);
