เริ่มต้นง่ายๆ กับ Jquery: เรียนรู้ Selectors

Posted by in Coding

วันก่อนขอให้เพื่อนที่บริษัทสอนเขียน 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…read more