บทที่ 3 jQuery Selectors ตอนที่ 2
จากบทเรียน บทที่ 3 jQuery Selectors ตอนที่ 1 ที่ได้ยกตัวอย่าง jQuery selectors พื้นฐานไปแล้ว จากหลายๆตัวอย่าง จะสังเกตว่าในโค๊ดคำสั่งแต่ล่ะชุดนั้นจะมี document ready function
$(document).ready(function() document ready function มีหน้าที่ควบคุม javascript ที่อยู่ใน function ดังกล่าว เพื่อทำงานเมื่อหน้า html โหลดเสร็จเรียบร้อยโดยอัตโนมัติ ทั้งนี้ก็เพื่อให้ javascript ที่เราต้องการเรียกใช้งานนั้นอยู่ในสภาพพร้อมใช้
<script>
$(document).ready(function(){
$("h2").fadeOut(4000);
});
</script>จากตัวอย่างเมื่อหน้า html โหลดเสร็จเรียบร้อย ก็จะทำการเลือกแท็ก h2 แล้วจัดการ fadeOut (ค่อยๆจางหายไป) แท็ก h2
การใช้งาน document ready function นั้นสามารถเขียนให้สั้นเข้าไปอีกได้ดังนี้
<script type>
$(function() {
$("h2").fadeOut(4000);
});
</script>
jQuery สามารถเลือกอิลิเมนต์เป็นกลุ่มหรือเลือกอิลิเมนต์เดียว,เลือกตามชื่ออิลิเมนต์,เลือกตามแอตตริบิวต์,หรือเลือกตามเนื้อหาดังนี้
jQuery Element Selectors
jQuery ใช้ css ในการเลือก อิลิเมนต์ HTML (DOM)
$("p") เลือกอิลิเมนต์ <p> ทั้งหมด
$("p.intro")เลือกอิลิเมนต์<p>และอิลิเมนต์ class="intro"
$("p#demo")เลือกอิลิเมนต์ <p> และอิลิเมนต์ id="demo"
jQuery Attribute Selectors
jQuery ใช้ xPath expressions ในการเลือกอิลิเมนต์ในแอตตริบิวต์
$("href")เลือกอิลิเมนต์ทั้งหมดที่มีแอตตริบิวต์ href
$("[href=#]")เลือกอิลิเมนต์ทั้งหมดที่มีแอตตริบิวต์ href =?#?
$("[href!=#]")เลือกอิลิเมนต์ทั้งหมดที่แอตตริบิวต์ href ไม่เท่ากับ=?#?
$("[href$='.jpg']")เลือกอิลิเมนต์ทั้งหมดที่มีแอตตริบิวต์ href และค่าของแอตตริบิวต์ลงท้ายด้วย .jpg
jQuery CSS Selectors
jQuery css selectors สามารถกำหนด,สร้าง,เปลื่ยนแปลง คุณสมบัติของ css ได้ จากตัวอย่างจะเป็นการเปลี่ยนพื้นหลังของอิลิเมนต์ <p>เป็นสีเหลืองทั้งหมดดังนี้
$("p").css("background-color","yellow");
อ่านเพิ่มเติม
บทที่ 3 jQuery Selectors ตอนที่ 1
บทที่ 3 jQuery Selectors ตอนที่ 3