Pusat jQuery - Metode jQuery()

Referensi Manual Pusat jQuery

Contoh

Temukan semua elemen p yang termasuk anak dari elemen div, lalu atur properti batasnya:

$("div > p").css("border", "1px solid gray");

Coba sendiri

Definisi dan penggunaan

Fungsi jQuery() menerima string yang mengandung pemilih CSS untuk mencocokkan kumpulan elemen.

Fungsi jQuery() memiliki tiga grammer:

Grammer 1

Terima string yang mengandung pemilih CSS untuk mencocokkan kumpulan elemen:

jQuery(pemilih, [konteks]

Penggunaan detil

Grammer 2

Buat elemen DOM menggunakan string HTML asli:

jQuery(html,ownerDocument]

Penggunaan detil

Grammer 3

Tautkan fungsi yang akan dijalankan setelah dokumen DOM dimuat selesai:

jQuery( callback )

Penggunaan detil

jQuery( pemilih, [ konteks ] )

Sintaks ini memiliki beberapa penggunaan:

Penggunaan 1: Atur lingkungan pemilih

Syarat

jQuery(pemilih, [konteks]

secara default, pemilih mencari DOM dari akar dokumen. Namun, parameter konteks dapat diset untuk $().

contoh, jika kita ingin mencari elemen di dalam callback, kita dapat membatasi pencarian di bawah ini:

Contoh

$("div.foo").click(function() {
  $("span", this).addClass("bar");
});

Karena kita telah membatasi pemilih span ke lingkungan this, hanya span di dalam elemen yang diklik yang akan mendapatkan class tambahan.

Di dalam, lingkungan pemilih dilaksanakan melalui metode .find(), jadi $("span", this) setara dengan $(this).find("span").

Fungsi ini adalah yang mengimplementasikan fungsi inti jQuery. Semua hal di jQuery berdasarkan fungsi ini, atau di mana saja fungsi ini digunakan secara khusus. Penggunaan dasar fungsi ini adalah untuk mengirim ekspresi (biasanya berupa pemilih CSS), kemudian mencari semua elemen yang cocok berdasarkan ekspresi ini.

Secara default, jika parameter konteks tidak disebutkan, $() akan mencari elemen DOM di dokumen HTML saat ini; jika parameter konteks disebutkan, seperti kumpulan elemen DOM atau objek jQuery, maka pencarian akan dilakukan di konteks ini. Dari jQuery 1.3.2, urutan elemen yang kembalikan setara dengan urutan munculnya di konteks.

Penggunaan 2: Menggunakan elemen DOM

Syarat

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 dipassing ke fungsi callback melalui keyword this:

Contoh

$("div.foo".click(function() {
  $(this).slideUp();
});

Contoh ini akan menghapus elemen dengan animasi gliding saat elemen di klik. Karena penanganan yang menerima objek yang diklik di keyword this adalah 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 kembali dari pemanggilan Ajax, kami dapat menggunakan fungsi $() untuk membalut data dengan objek jQuery. Setelah selesai, kami dapat menggunakan .find() dan metode penggulungan DOM lain untuk mengambil elemen tunggal di struktur XML.

Penggunaan 3: Klon objek jQuery

Syarat

jQuery(objek jQuery)

Ketika mengirim objek jQuery sebagai parameter ke fungsi $(), akan dibuat salinan objek tersebut. Seperti objek awal, objek jQuery yang baru mengacu ke elemen DOM yang sama.

Penggunaan 4: Mengembalikan koleksi kosong

Syarat

jQuery()

Untuk jQuery 1.4, pemanggilan metode jQuery() tanpa parameter akan mengembalikan koleksi jQuery kosong. Dalam versi jQuery sebelumnya, hal ini akan mengembalikan koleksi yang mengandung node dokumen.

jQuery( html, [ ownerDocument ] )

Sintaks ini memiliki beberapa penggunaan:

Penggunaan 1: Membuat elemen baru

Syarat

jQuery(html,ownerDocument]

Anda dapat mengirimkan string HTML yang ditulis tangan, atau string yang dibuat oleh beberapa mesin template atau plugin, atau string yang diunggah melalui AJAX. Namun, ada batasan saat membuat elemen input, silakan lihat contoh kedua.

Tentu string ini dapat mengandung garis miring (misalnya alamat gambar), serta garis melintasi. Saat membuat elemen tunggal, gunakan tag tutup atau format XHTML. Contohnya, membuat span, dapat digunakan $("<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 apakah string adalah HTML (seperti, beberapa posisi string ada tag). Jika bukan, string diartikan sebagai ekspresi pemilih, lihat penjelasan di atas. Namun, jika string adalah bagian HTML, jQuery mencoba membuat elemen DOM yang dijelaskan oleh bagian HTML itu. Lalu akan membuat dan kembalikan objek jQuery yang mengacu kepada elemen-elemen DOM:

Contoh

$("<p id="test">My <em>new</em> text</p>").appendTo("body");

Jika bagian HTML lebih kompleks daripada tag sederhana tanpa atribut, seperti contoh di atas HTML, proses pengembangan elemen sebenarnya disempurnakan melalui mekanisme innerHTML browser. Secara khusus, jQuery akan membuat elemen <div> baru, lalu menetapkan atribut innerHTML elemen yang diberikan bagian HTML. Saat parameter hanya tag sederhana, seperti $("<img />") atau $("<a></a>"), jQuery akan membuat elemen melalui fungsi createElement() JavaScript yang bawaan.

Untuk memastikan kompatibilitas lintas platform, struktur fragmen harus baik. Tag yang dapat mengandung elemen lain harus muncul pasangan (dengan tag penutup):

$("<a href="http://jquery.com"></a>");

Namun, jQuery juga mengijinkan sintaks tag seperti XML:

$("<a/>");

Tanda tag yang tidak dapat mengandung elemen lain dapat ditutup atau tidak ditutup:

$("<img />");
$("<input>");

Penggunaan 2: Atur atribut dan event

Syarat

jQuery(html,props)

Untuk jQuery 1.4, kami dapat mengirimkan peta properti ke parameter kedua. Parameter ini menerima kumpulan properti yang dapat dikirim ke metode .attr(). Selain itu, Anda dapat mengirim jenis event apapun dan dapat memanggil metode jQuery di bawah ini: 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 tentukan properti type, nilai properti, serta beberapa event.

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

jQuery( callback )

Memungkinkan Anda mengikat sebuah fungsi yang akan dijalankan saat dokumen DOM dimuat.

Fungsi ini bertindak seperti $(document).ready(), tetapi saat menggunakan fungsi ini, perlu membalut semua operasi $() lain yang perlu dijalankan saat DOM terload ke dalamnya. Meskipun secara teknis fungsi ini dapat dihubungkan, situasi yang sebenarnya dihubungkan seperti ini sangat jarang.

Contoh

Ketika DOM terload, eksekusi fungsi di dalamnya:

$(function() {
  // Dokumen siap
});

Referensi Manual Pusat jQuery