วันก่อนขอให้เพื่อนที่บริษัทสอนเขียน Jquery ให้ ใช้เวลาเรียน 1 ชม. กว่าๆ เกี่ยวกับ Selector ล้วนๆ ตอนนี้เริ่มเขียนได้บ้างแล้ว รู้สึกว่า Jquery ไม่ยากอย่างที่เคยคิด

โดยปกติแล้วเวลาที่เราเขียนเว็บ เราจะใช้ ID, Class หรือ Tag HTML ต่างๆ ซึ่ง Selectors ก็คือ การบอกตำแหน่งของโค้ดที่เราต้องการใส่ action นั้นๆลงไปนั่นเอง การเลือก selector ใน Jquery เหมือนใน CSS ทุกประการ และมีเพิ่มเติมจาก CSS2 มาบ้างเล็กน้อย ซึ่งรายละเอียดของ Selectors ทั้งหมดสามารถหาอ่านได้ใน Docs ของเว็บ Jquery

การเรียก Selectors

การเรียก Selectors เป็นพื้นฐานที่ควรรู้อย่างแรกในการเรียนรู้ Jquery เพราะเราจำเป็นต้องระบุตำแหน่งที่ต้องการให้เกิด action ที่จะเขียนขึ้นมา โดยเราจะประกาศ ในรูปแบบของ $(selector) โดยในส่วนของ [selector] นั้นจะใส่เป็นตัวแปร string ก็ได้ แล้วแต่สะดวก มาดูตัวอย่างกันเยอะๆเพื่อความเข้าใจดึกว่า

สมมติว่าเรามีโค้ดตามนี้

<div id="content">

<div class=”a”>Hello world </div>
<div class=”b”>

<ul>
<li>ciao!</li>
</ul>

<div>

</div>

สมมติเราต้องการชี้ตำแหน่งของข้อความ “Hello world” เราจะสามารถเรียกตำแหน่งของข้อความนี้เป็น

$(“div#content div.a”) -> ผลที่ได้ออกมาเป็น div.a ซึ่งมี text อยู่ภายในคือ Hello world

หรือ ถ้าต้องการชี้ตำแหน่งที่ “ciao!” จะเรียกเป็น

$(“#content .b ul > li”)

สรุปง่ายๆจากตรงนี้ก็คือ เราต้องการทำอะไรตรงไหน เราก็ชี้ไปที่ Tag ที่ครอบตัวนั้นอยู่นั่นเองค่ะ ถ้ามีปัญหาเรื่อง Tag ซ้ำซ้อนมีเยอะ ให้แก้ปัญหาด้วยการใส่ id หรือ class เข้าไปเพื่อให้ระบุตำแหน่งได้ง่ายขึ้นค่ะ

จากโจทย์ เราต้องการเปลี่ยน คำว่า “Hello world” ให้เป็นอักษรสีแดง เราสามารถแก้ CSS ได้ โดยเพิ่ม .css() เข้าไปข้างหลัง selector ตัวอย่างนี้คือ

$(“#content .a”).css(‘corlor’,’red’); -> ผลที่ได้จะได้คำว่า Hello World เป็นสีแดง

เราสามารถเรียกใช้ selector ผ่าน ตัวแปรได้ เช่น จากตัวอย่างเดียวกันนี้สามารถเขียนได้เป็น

var selector = “#content .a”;

$(selector).css(‘corlor’,’red’);

หรือ

var id = “#content”;

var class = “.a”;

$(id+” “+class).css(‘corlor’,’red’);

ทั้ง 3 แบบนี้จะให้ผลลัพธ์เดียวกันหมด

ถ้าเราเคยเขียน CSS มาก่อน คงจะคุ้นกับการเขียน Selectors ใน Jquery ไม่มากก็น้อย ส่วนฟังชั่นอื่นๆที่ตามมาข้างหลังมาหลากหลายมาก ทั้ง Event เช่น เมื่อกดเม้าส์ เมื่อกดปุ่ม เป็นต้น หรือการดึงค่าต่างๆใน selectors นั้นๆออกมา เพื่ออ่าน หรือแก้ไขมัน

ตัวอย่างง่ายๆเช่น

จากโค้ดข้างบน ถ้าเราต้องการดึงคำว่า “Hello world” ออกมา เราสามารถสั่งได้เป็น

var a = $(“#content .a”).text();  -> ค่าของ a จะเท่ากับ “Hello world”

ในที่นี้ คำสั่ง text() จะดึงเฉพาะ text ออกมาเท่านั้น ถ้าต้องการดึง HTML ออกมาให้ใช้คำสั่ง html() แทน

var a = $(“#content .a”).html();  -> ค่าของ a จะเท่ากับ “Hello world”

หรือ ถ้าต้องการดึงโค้ดทั้งหมดใน class b จะต้องสั่งเป็น

var b = $(“#content .b”).html();  -> ค่าของ b จะเท่ากับ <ul><li>ciao!</li></ul>

การดึงโค้ดเป็น html เราสามารถนำโค้ดดังกล่าวไปแปะในส่วนอื่นๆได้

นี่เป็นตัวอย่างการใช้ jquery แบบคร่าวๆ ค่ะ คำสั่งอื่นๆสามารถอ่านเพิ่มเติมได้จาก Jquery Docs

• javascript
• jquery