หลักสูตรที่เลือกตั้ง

jQuery นิ้วทึบหลัก

ตัวอย่าง

แนะนำหลักสูตร

jQuery ศูนย์กลาง - วิธีการ jQuery()หาทุกตัวแปล p ที่เป็นลูกขององค์ประกอบ div และตั้งค่าคุณสมบัติของเข็มขัด

$("div > p")

.css("border", "1px solid gray");

ทดลองด้วยตัวเอง

นิยามและการใช้งาน

ใช้ฟังก์ชัน jQuery() ในรูปแบบของฟราย์ส์ซ์ที่มี CSS โซลูเชอร์สำหรับตัวเลือกประกอบขององค์ประกอบ

jQuery() ฟังก์ชันมีสามทางใช้งาน

jQuery(selector, [context]

การใช้งานละเอียด

การใช้งานบทความที่ 1

การใช้งานบทความที่ 2

jQuery(html,ownerDocument]

การใช้งานละเอียด

บทความที่ 3

ผูกฟังก์ชันที่จะทำงานหลังจากเอกสารเดอะมอนิเตอร์โดยเมาท์และสามารถเข้าถึง DOM

jQuery( callback )

การใช้งานละเอียด

jQuery( selector, [ context ] )

ฟรีมาตร์นี้มีใช้งานดังนี้

การใช้งาน 1 : กำหนดสภาพแวดล้อมตัวเลือก

วลี

jQuery(selector, [context]

โดยมาตรฐาน ตัวเลือกเรียกใช้สำหรับค้นหา DOM จากส่วนต้นของเอกสารออนไลน์ แต่สามารถตั้งค่าตัวแปรที่เลือกได้สำหรับ $() ได้

เช่นนี้ ถ้าเราอยากค้นหาสิ่งต่างๆใน callback อาจจะกำหนดการค้นหาด้านล่างนี้

ตัวอย่าง

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

เนื่องจากเราได้จำกัด selector span ให้มีส่วนในสภาพ this ดังนั้นแค่ span ใน element ที่ถูกกดจะได้รับ class ที่เพิ่มเติม

ในภายใน selector environment นั้นมีการทำงานด้วย method .find() ดังนั้น $("span", this) คิดความหมายเหมือน $(this).find("span")

การทำงานของ core function ของ jQuery ทั้งหมดนั้นเป็นฟังก์ชันนี้ ทั้งหมดใน jQuery ทุกอย่างนั้นมีฐานของฟังก์ชันนี้ หรือใช้ฟังก์ชันนี้ในวิธีหนึ่ง ฟังก์ชันนี้ใช้งานขั้นพื้นฐานสุดๆ คือส่ง expression (ซึ่งมักเป็น selector CSS) และค้นหา element ที่ตรงกับ expression นี้

โดยมาตรฐาน ถ้าไม่ได้กำหนด parameter context ฟังก์ชัน $() จะหา DOM element ใน document HTML ที่อยู่ในตอนนี้; ถ้าได้กำหนด parameter context อย่างเช่น collection DOM element หรือ jQuery object ก็จะหาใน context นี้ หลังจาก jQuery 1.3.2 ฟังก์ชันที่คืนค่ามาจะมีลำดับของ element ตามลำดับที่มีใน context

ใช้งาน 2: ใช้ DOM element

วลี

jQuery(element)

ฟังก์ชันนี้อนุญาตให้เราสร้าง jQuery object โดยใช้ DOM element ที่หาได้ด้วยวิธีอื่น การใช้งานที่มักเกิดขึ้นของฟังก์ชันนี้คือ ทำการเรียก method ของ jQuery บน element ที่มี this keyword ถูกส่งไปยังฟังก์ชัน callback

ตัวอย่าง

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

ตัวอย่างนี้จะใช้ animation slideUp ที่ทำการซ่อน element เมื่อมีการกดที่ element นั้น ตัวฟังก์ชันที่รับ this keyword ใน element ที่ถูกกดนั้นเป็น element DOM แท้จริง ดังนั้น ก่อนที่จะเรียก method ของ jQuery ให้กับมัน ต้องทำการหุ้ม element ด้วย jQuery object

ฟังก์ชันนี้ยังสามารถรับ XML document และ Window object (ถึงแม้ว่ามันไม่ใช่ DOM element) ในฐานะ parameter ที่ถูกต้อง

เมื่อ XML data ถูกคืนค่ามาจาก Ajax call สามารถใช้ฟังก์ชัน $() แบบ jQuery object ที่ทำการหุ้ม data นี้ได้ หลังจากที่ทำการเสร็จสิ้นแล้ว สามารถใช้ .find() และ method การเดินทาง DOM อื่นๆ มาหา element โดยเดี่ยวๆ ใน XML structure

ใช้งาน 3: คลอน jQuery object

วลี

jQuery(jQuery object)

เมื่อส่ง jQuery object ในรูปแบบตัวแปรที่ส่งไปยังฟังก์ชัน $() จะทำการสร้างสำเนาของตัวแปรนี้ ตัวแปร jQuery ใหม่จะนำโดยตรงไปยัง DOM element ที่เดียวกับตัวแปรต้นตอน

ใช้งาน 4: กลับค่าชุดว่าง

วลี

jQuery()

สำหรับ jQuery 1.4 การเรียกฟังก์ชัน jQuery() โดยไม่มีตัวแปรที่ส่งมาจะกลับค่า jQuery ชุดว่าง ใน jQuery ก่อนหน้านี้ การเรียกฟังก์ชันนี้จะกลับค่า jQuery ชุดที่มีองค์ประกอบ document

jQuery( html, [ ownerDocument ] )

ฟรีมาตร์นี้มีใช้งานดังนี้

ใช้งาน 1: สร้างองค์ประกอบใหม่

วลี

jQuery(html,ownerDocument]

คุณสามารถส่งตัวแปรตัวคำภาษาที่เขียนด้วยมือ หรือตัวแปรที่สร้างโดยเครื่องมือหรือเพลิงจูเอลี่ยนหรือตัวแปรที่นำมาด้วย AJAX แต่เมื่อสร้างองค์ประกอบ input จะมีข้อจำกัด คุณสามารถอ้างอิงตัวอย่างที่หลังนี้

ตัวคำภาษานี้สามารถมีสลัก (/) หรือสลักติดตาม (/) ได้ เช่นที่มีที่อยู่ของรูปภาพ ขณะที่สร้างองค์ประกอบเดียว ใช้แบบแท็กปิดหรือรูปแบบ XHTML ตัวอย่างเช่น สร้าง span ด้วย $("<span/>") หรือ $("<span></span>") แต่ไม่แนะนำใช้ $("<span>") ในจูเอลี่ยนนี้ ฟรีมาตร์นี้เทียบเท่ากับ $(document.createElement("span"))

ถ้าส่งตัวแปรตัวคำภาษาเข้าไปใน $() จูเอลี่ยนจะตรวจสอบว่าตัวแปรนั้นเป็น HTML หรือไม่ (เช่น ตัวแปรมีแท็กในบางตำแหน่ง) ถ้าไม่ใช่ จูเอลี่ยนจะแปลงตัวแปรนี้เป็นรูปแบบตัวเลือกเช่นที่มีในบทสนทนาด้านบน แต่ถ้าตัวแปรเป็นส่วนของ HTML จูเอลี่ยนจะพยายามสร้างองค์ประกอบ DOM ที่อธิบายโดยส่วนของ HTML หลังจากนั้นจะสร้างและส่งกลับตัวแปร jQuery ที่อ้างอิงองค์ประกอบ DOM นั้น

ตัวอย่าง

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

ถ้า HTML ส่วนที่มีขึ้นอยู่กับฟิล์ท์เพิ่มเติมเกินกว่าแบบย่อของแท็กที่ไม่มีคุณสมบัติ อย่างเช่น HTML ในตัวอย่างด้านบน ขั้นตอนที่เป็นจริงของการสร้างองค์ประกอบคือกระบวนการ innerHTML ของเว็บเบราเซอร์ โดยเฉพาะ จูเอลี่ยนจะสร้างองค์ประกอบ <div> ใหม่ และตั้งค่าคุณสมบัติ innerHTML ขององค์ประกอบที่นำมาจากส่วนของ HTML ถ้าตัวอุปกรณ์เพียงแบบแท็กที่เรียบง่าย เช่น $("<img />") หรือ $("<a></a>") จูเอลี่ยนจะสร้างองค์ประกอบด้วยการใช้ฟังก์ชัน createElement() ของจาวาสคริปต์ที่มีอยู่แล้ว

เพื่อประกันความเป็นมาตรฐานทางเครื่องคอมพิวเตอร์ โครงสร้างของชิ้นส่วนต้องดี: ตารางแบบที่สามารถรวมองค์ประกอบอื่นได้ต้องปรากฏขึ้นด้านนอกในรูปแบบคู่ (ด้วยตารางแบบปิด):

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

แต่ jQuery ยังอนุญาตให้ใช้วลีสายที่เหมือน XML:

$("<a/>");

ตารางแบบที่ไม่สามารถรวมองค์ประกอบอื่นได้สามารถปิดแบบหรือไม่ปิดแบบ:

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

การใช้งาน 2: กำหนดคุณสมบัติและเหตุการณ์

วลี

jQuery(html,props)

สำหรับ jQuery 1.4 พวกเราสามารถส่งมอบมาตราฐานค่าสำหรับตัวเลือกที่สอบถามในรายละเอียดที่สอบถามในตัวเลือกที่สอบถามใน .attr() ซึ่งเป็นชุดของสิ่งที่สามารถส่งมอบได้. นอกจากนี้ ยังสามารถส่งมอบอายุหลากๆ ของประเภทเหตุการณ์ และสามารถเรียกใช้เมธอดของ jQuery ด้านล่างนี้: val, css, html, text, data, width, height, หรือ offset.

แนะนำว่า Internet Explorer ไม่อนุญาตให้คุณสร้างองค์ประกอบ input และเปลี่ยนรูปแบบของมัน; คุณจะต้องใช้เช่น "<input type="checkbox" />" เพื่อกำหนดรูปแบบ

ตัวอย่าง

สร้างตัวแปลง <input> และกำหนดคุณสมบัติ type ค่าของคุณสมบัติ และบางส่วนของเหตุการณ์

$("<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(){
  // หนังสือแนะนำเสนอเสร็จสมบูรณ์
);

jQuery นิ้วทึบหลัก