jQuery ສູນກາງ - jQuery() ວິທີກົນລະບຽບ
ຕົວຢ່າງ
ຄົ້ນຫາປະກອບສິ່ງ p ທີ່ເປັນລູກຂອງ div ແລະຈັດການປະກອບ border:
$("div > p").css("border", "1px solid gray");
ການອະທິບາຍ ແລະ ກົນລະບຽບ
jQuery() ມີຄຳສັບທີ່ບັນຈຸປະກອບສິ່ງ CSS ທີ່ຈະຈັດການຄົ້ນຫາກັນ:
jQuery() ມີສາມວິທີກົນລະບຽບ:
ກົນລະບຽບ 1
ທີ່ຈະຍອມຮັບຄຳສັບທີ່ບັນຈຸປະກອບສິ່ງ CSS ທີ່ຈະຈັດການຄົ້ນຫາກັນ:
jQuery(selector, [context]
ກົນລະບຽບ 2
ທີ່ຈະສ້າງ DOM ສຳລັບ HTML ທີ່ເປັນສາຍຄຳສັບ:
jQuery(html,ownerDocument]
ກົນລະບຽບ 3
ທີ່ຈະຖືກຈັດຕັ້ງພຽງບັນດາຄັນທີ່ຈະດຳເນີນຕາມ DOM ທີ່ໄດ້ອອກມາ:
jQuery( callback )
jQuery( selector, [ context ] )
ນີ້ຈະມີກົນລະຍຸດທີ່ຈະໃຊ້:
ກົນລະບຽບ 1: ການຕັ້ງ ສະຖານະ selector
ຂອບເຫດ
jQuery(selector, [context]
ໂດຍປົກກະຕິ selector ຈະຄົ້ນຫາ DOM ຈາກຫຼັກແຫຼ່ງ. ແຕ່ວ່າພວກເຮົາສາມາດຕັ້ງຂໍ້ມູນ context ສຳລັບ $() ຄືນ.
ບໍ່ວ່າພວກເຮົາຕ້ອງການຄົ້ນຫາປະກອບສິ່ງໃນ callback ພວກເຮົາສາມາດກຳນົດການຄົ້ນຫາຢ່າງດັ່ງກ່າວຫຼັງນັ້ນ:
ຕົວຢ່າງ
("div.foo").click(function() {
("span", this).addClass("bar");
});
ຍ້ອນວ່າ ພວກເຮົາໄດ້ຈັດການ selector span ໃຫ້ເປັນ this environment, ພຽງແຕ່ span ທີ່ຢູ່ໃນ element ທີ່ຖືກກົດຂຶ້ນຈະໄດ້ການເພີ່ມ class.
ໃນທາງໄກ, ກົນລະຍຸດ selector environment ແມ່ນຮັບຜົນຈາກ method .find(), ເຖິງວ່າ $("span", this) ແມ່ນຄືກັບ $(this).find("span").
ກົນລະຍຸດສູງສຸດຂອງ jQuery ແມ່ນຈະຮັບຜົນຈາກກົນລະຍຸດນັ້ນ. ທຸກຢ່າງໃນ jQuery ທີ່ພົບພາຍໃນກົນລະຍຸດນັ້ນ, ຫຼື ໃຊ້ກົນລະຍຸດນັ້ນໃນຫຼົກຫຼາຍວິທີ, ຈະຖືກນໍາໃຊ້ກົນລະຍຸດນັ້ນ. ການນໍາໃຊ້ທີ່ສົມບູນຂອງກົນລະຍຸດນັ້ນຈະຈະສະເໜີວ່າຄວາມຄິດຂອງກົນລະຍຸດ, ເຫຼືອາກາດ CSS selector, ແລະ ຊອກຫາສະພາບທີ່ຕົກລົງທັງໝົດ.
ໂດຍກົດໝາຍຄົງຄວາມ, ຖ້າບໍ່ມີ context parameter, $() ຈະຊອກຫາ DOM element ໃນ document HTML ໃນຕອນນັ້ນ; ຖ້າມີ context parameter, ເຊັ່ນສະພາບ DOM element ຫຼື jQuery object, ຈະຊອກຫາໃນ context. ໃນ jQuery 1.3.2 ແລ້ວ, ການຊອກຫາອັນດັບຈະຕາມລຳດັບທີ່ເກີດຂຶ້ນໃນ context.
ການນໍາໃຊ້ 2: ນໍາໃຊ້ DOM element
ຂອບເຫດ
jQuery(element)
ກົນລະຍຸດນັ້ນສາມາດໃຊ້ວ່າ DOM element ທີ່ພົບມາໄດ້ອີກ. ການນໍາໃຊ້ທົ່ວໄປຂອງກົນລະຍຸດນັ້ນຈະຖືກນໍາໃຊ້ເພື່ອກົດຂຶ້ນ method jQuery ຕໍ່ element ທີ່ກັບຄວາມຄິດ this ທີ່ສົ່ງໄປຫາ callback function:
ຕົວຢ່າງ
$("div.foo").click(function() {
$(this).slideUp();
});
ບົດການນັ້ນຈະນໍາໃຊ້ການປິດທີ່ຫຼຸດລົງຂອງ animation ເມື່ອປະກອບຫົວເປັນລູກມືຂອງພວກເຮົາ. ຍ້ອນວ່າ handler ທີ່ກັບຄວາມຄິດ this ທີ່ຖືກກົດຂຶ້ນແມ່ນ DOM element ທີ່ສະຫຼາດ, ພວກເຮົາຕ້ອງທີ່ຈະລວມກັບ jQuery object ກ່ອນທີ່ຈະເພີ່ມການໃຊ້ method jQuery.
ກົນລະຍຸດນັ້ນຈະຍິນຍອມກັບ XML ຂອງໂປດແລະ Window ວັດຖຸ (ເຖິງວ່າພວກມັນບໍ່ແມ່ນ DOM ສະພາບ).
ບໍ່ດັງ XML ຂໍ້ມູນທີ່ກັບຄືນຈາກ Ajax ການໂຫຼດ, ພວກເຮົາສາມາດໃຊ້ $() ວັດຖຸ jQuery ເພື່ອລວມຂໍ້ມູນດັ່ງກ່າວ. ເມື່ອສຳເລັດ, ພວກເຮົາສາມາດໃຊ້ .find() ແລະ ກົນລະຍຸດ DOM ອື່ນໆ ເພື່ອເອົາສະພາບປະກອບດຽວທີ່ຢູ່ໃນ XML ພາບ.
ການນໍາໃຊ້ 3: ສ້າງຄວາມຄິດ jQuery
ຂອບເຫດ
jQuery(jQuery object)
ບໍ່ດັງສະເໜີອັນດັບປະກອບວ່າ $() ວັດຖຸ jQuery ຈະສ້າງຄວາມຄິດຂອງອັນດັບນັ້ນ. ຄືກັບອັນດັບຕົ້ນ, ອັນດັບ jQuery ອີງຕາມ DOM ສະພາບດຽວກັນ.
ກົນລະຍຸດ 4 : ກັບຄືນການມີການຄອບຄອງລັງ
ຂອບເຫດ
jQuery()
ສໍາລັບ jQuery 1.4, ການເອິ້ນ jQuery() ທີ່ບໍ່ມີຄຳມູນຈະກັບຄືນ jQuery ກັບການມີການຄອບຄອງ. ໃນ jQuery ກ່ອນອາຍິດ, ຈະກັບຄືນ jQuery ທີ່ມີການຄອບຄອງ document.
jQuery( html, [ ownerDocument ] )
ນີ້ຈະມີກົນລະຍຸດທີ່ຈະໃຊ້:
ກົນລະຍຸດ 1 : ສ້າງປະກອບອາກາດໃໝ່
ຂອບເຫດ
jQuery(html,ownerDocument]
ທ່ານສາມາດສົ່ງ HTML ຄຳມູນທີ່ຂຽນໄດ້, ຫຼື HTML ຄຳມູນທີ່ຈະສ້າງໂດຍການສະໜັບສະໜູນຫຼື ສະຫຼັດການ, ຫຼື HTML ຄຳມູນທີ່ຈະອອກມາຈາກ AJAX. ແຕ່ຖ້າທ່ານສ້າງປະກອບອາກາດ input, ຈະມີຂໍ້ຈຳກັດ, ອີງຕາມຄຳທີ່ສອງ.
ຄືດັ່ງກ່າວ, ຄຳມູນຈະສາມາດມີສາຍ (ອີງຕາມ, ສາຍທີ່ມີທາງອຸນຫະກຳ), ແລະ ສາຍກົງກັນ. ເມື່ອສ້າງປະກອບອາກາດດຽວ, ຈະໃຊ້ປ້ອງແບບປິດຫຼື XHTML. ອີງຕາມ, ສ້າງ span, ຈະໃຊ້ $("<span/>") ຫຼື $("<span></span>"), ບໍ່ມີຄວາມເຫັນດີ $("<span>") . ໃນ jQuery, ສິ່ງນີ້ຕົງກັບ $(document.createElement("span")) .
ຖ້າຈະສົ່ງຄຳມູນຄ່າໃຫ້ $() ທາງຄຳມູນ, jQuery ຈະກວດກາວ່າຄຳມູນຈະແມ່ນ HTML (ອີງຕາມ, ຄຳມູນມີສາຍແບບຫຼາຍລາຍ). ຖ້າບໍ່ແມ່ນ, ຈະຈັດຄຳມູນວ່າເປັນການເລືອກຈາກຄຳມູນ, ຍັງຄົງພິສູດ. ແຕ່ຖ້າຄຳມູນແມ່ນ HTML ສາຍພາຍ, jQuery ຈະພະຍາຍາມສ້າງປະກອບອາກາດ DOM ທີ່ອາດຖືກອະທິບາຍໂດຍ HTML ສາຍພາຍນັ້ນ. ຕໍ່ມາ, ຈະສ້າງແລະກັບຄືນຄຳມູນ jQuery ທີ່ອະທິບາຍປະກອບອາກາດທັງໝົດ.
ຕົວຢ່າງ
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
ຖ້າ HTML ສາຍພາຍຫຼາຍກວ່າ ປ້ອງແບບທີ່ບໍ່ມີຜະສານວິທະຍານໃນ HTML, ຄືດັ່ງກ່າວຂອງ HTML, ຂະບວນການສ້າງປະກອບອາກາດຢ່າງແທ້ຈິງແມ່ນສຳລັບການສ້າງ innerHTML ຂອງການຄົ້ນຫາ. ຄຳກ່າວກ່ວາ, jQuery ຈະສ້າງປະກອບອາກາດບໍລິໂພກຂອງ <div>, ແລະໃສ່ innerHTML ຂອງປະກອບອາກາດສຳລັບ HTML ສາຍພາຍທີ່ເຂົ້າມາ. ເມື່ອຄຳມູນຄ່າຈະເປັນປ້ອງແບບທີ່ບໍ່ມີຜະສານວິທະຍານ, ອີງຕາມ $("<img />") ຫຼື $("<a></a>"), jQuery ຈະສ້າງປະກອບອາກາດຜ່ານການສ້າງ createElement() JavaScript ຂອງພວກເຂົາ.
ເພື່ອຮັບປະກັນຄວາມສາມາດຫລາຍບັນດາພາບັດ ຂໍ້ຄວາມຂອງຫົວໜ້າຕ່າງໆຕ້ອງຢູ່ໃນຄວາມສາມາດ (ກັບປິດໝາຍ):
$("<a href="http://jquery.com"></a>");
ນອກຈາກນັ້ນ jQuery ກັນວ່າກັບ XML ຄຳເວົ້າທີ່ສາມາດ:
$("<a/>");
ປະກອບທີ່ບໍ່ສາມາດກວມປະກອບອື່ນໆໄດ້ປິດຫລືບໍ່ປິດ:
$("<img />");
$("<input>");
ການນໍາໃຊ້ 2: ການກຳນົດບັນດາລັກສະນະ ແລະ ການເປັນສະຖານະການ
ຂອບເຫດ
jQuery(html,props)
ສໍາລັບ jQuery 1.4, ພວກເຮົາສາມາດສົ່ງຕົວຢ່າງຂອງບັນດາລັກສະນະໃຫ້ຄະແນນນະໂຍບາຍທີ່ສອງ. ຄະແນນນະໂຍບາຍນີ້ຈະຍອມຮັບບັນດາລັກສະນະທີ່ສາມາດສົ່ງໃຫ້ .attr() ຂັ້ນຄັນ. ນອກຈາກນັ້ນ ສາມາດສົ່ງຕົວຢ່າງທີ່ສາມາດສົ່ງໃຫ້ບັນດາລັກສະນະທີ່ສາມາດສົ່ງໃຫ້ .attr() ກໍ່ຕາມ. ນອກຈາກນັ້ນ ສາມາດສົ່ງຕົວຢ່າງທີ່ສາມາດສົ່ງໃຫ້ບັນດາລັກສະນະທີ່ສາມາດສົ່ງໃຫ້ .val(), .css(), .html(), .text(), .data(), .width(), .height(), ຫລື .offset().
ສັງເກດວ່າ Internet Explorer ບໍ່ອະນຸຍາດໃຫ້ສ້າງປະກອບ input ແລະປ່ຽນບັນດາລັກສະນະຂອງບັນດາລັກສະນະ. ເພາະວ່າເຈົ້າຕ້ອງໃຊ້ <input type="checkbox" /> ເພື່ອກຳນົດບັນດາລັກສະນະ.
ຕົວຢ່າງ
ສ້າງປະກອບ <input> ກັບການກຳນົດບັນດາລັກສະນະຂອງບັນດາລັກສະນະ ແລະ ການເປັນສະຖານະການ.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
ອະນຸຍາດໃຫ້ເຈົ້າປະກອບການເຮັດວຽກທີ່ຈະດຳເນີນໃນເວລາທີ່ໂດຍສານເຊື່ອມໂຫຍດ DOM ບັນຈຸໄດ້ຮັບການເຊື່ອມໂຫຍດຢູ່.
ການດຳເນີນຂອງການໃຊ້ນັ້ນຄືກັບ $(document).ready() ແຕ່ວ່າເມື່ອໃຊ້ການໃຊ້ນັ້ນຈະຕ້ອງການລວມການເຮັດວຽກອື່ນໆທີ່ຕ້ອງເຮັດຈາກ DOM ບັນຈຸໄດ້ຮັບການເຊື່ອມໂຫຍດຂອງ $() ທັງໝົດ. ເຖິງວ່າຈະມີຄວາມສາມາດໃນດ້ານເຕັກນິກທີ່ການເຊື່ອມໂຫຍດໄດ້ຫລາຍຢ່າງນັ້ນ ແຕ່ບໍ່ມີຫລາຍຫລັງທີ່ຈະໃຊ້ນັ້ນໃນວິວັດທະນາການດັ່ງກ່າວ.
ຕົວຢ່າງ
ເມື່ອ DOM ບັນຈຸໄດ້ຮັບການເຊື່ອມໂຫຍດຈະດຳເນີນຕາມຂັ້ນຕອນທີ່ຢູ່ໃນການເຮັດວຽກ:
$(function(){
// ມີໃນຂັ້ນຕອນແບບ
});
