พื้นฐานการใช้งาน jQuery ตอนที่ 2 คำสั่งพื้นฐาน

การใช้งานพื้นฐานคำสั่ง
เมื่อเลือกส่วนที่ต้องการแล้ว การทำงานจะทำตามคำสั่งจะเป็นลูกโซ่ ถัดต่อไปเรื่อยๆ เช่น
$("p").addClass("box").text("Hello World").appendTo("body");
การใช้งาน jQuery นั้นสามารถทำได้คือ
•    เลือกส่วนต่างๆ (DOM) ในหน้า HTML
•    ท่องเข้าไปใน DOM และแก้ไข
•    จัดการ event เช่น click , mouse-over
•    เข้าถึงคุณสมบัติ(attribute,css styling) ในส่วนต่างๆ และแก้ไขเปลี่ยนแปลง
•    เพิ่มความหน้าสนใจ การเคลื่อนไหวและเอฟเฟค
•    ควบคุม AJAX เบื้องต้น

ท่องไปใน DOM ผ่านคำสั่ง
เลือกตามลำดับ
$("p").eq(1);

การกรอง
$("div").filter("#next");
$("div").not("#next");
$("span").first();
$("span").last();
$("div").has("span"); /* เลือก div ที่มี span */
$("div>span:eq(1)").is(".blue"); /* span ใน div ลำดับที่ 2 มีคลาสเป็น blue ใช่หรือไม่ ส่งค่ากลับเป็น true หรือ false */
$("div>span").slice(1); /* เลือก span ตั้งแต่ลำดับที่ 2 เป็นต้นไป */
$("div>span").slice(1,2); /* เลือก span ตั้งแต่ลำดับที่ 2 ถึง 3 */
$("div>span").slice(-2); /* เลือก span สองลำดับจากท้าย */
$("div").children(); /* โหนดลูกที่อยู่ภายใน div */
$("div").children(".blue"); /* โหนดลูกที่อยู่ภายใน div มีคลาสชื่อ blue*/
$("span").closest("div"); /* หา div ที่ใกล้ span ที่สุด */
$("body").find("span"); /* หา span ที่อยู่ภายใต้ body ทั้งหมด */
$("span").next(); /* ส่วนที่อยู่ถัดจาก span หนึ่งอัน */
$("div").next("div"); /* ส่วน div ที่ถัดจาก div หนึ่งอัน */
$(".blue").nextAll("p"); /* ส่วน p ทั้งหมดที่ถัดจากคลาส blue ทั้งหมด*/
$("p").nextUntil("#p1");  /* ส่วน p ทั้งหมดที่ถัดจากไอดี p1 */
$("#p3").prev(); /* ส่วนที่อยู่ก่อน p3 หนึ่งอัน */
$("#p3").prevAll(); /* ส่วนที่อยู่ก่อน p3 ทั้งหมด */
$("#p3").prevUntil(".blue"); /*ส่วนที่อยู่ก่อน p3 ทั้งหมดจนถึงคลาส blue */
$("span").siblings("p"); /* p ที่อยู่รอบ span */
$("#child").parent(); /* โหนดแม่ของไอดี child */
$("#child").parent("div"); /* โหนดแม่ของไอดี child ที่เป็น div */
$("#p4").parents(); /* โหนดแม่ทั้งหมดของไอดี p4 */
$("#p4").parentsUntil("body"); /* โหนดแม่ทั้งหมดของ p4 ก่อนถึง body*/
เพิ่มส่วนต่างๆแต่ไม่แสดงผล
$("#next2").add('<span id="sp1">Hello</span>');
ค้นหา p ใน div รวมทั้งตัว div ด้วย
$("div").find("p").andSelf();
คืนค่า text ที่อยู่ในโหนด
$("span").contents()
$("span").contents()[0].textContent
คืนค่าส่วนที่ถูกเลือกหลังสุด
$("div").find("span").end() /* คืนค่า div */