Lv.3 jQuery Selectors

jQuery Selectors เป็นสิ่งที่สำคัญมากที่สุดใน jQuery ไลบรารี

jQuery Selectors

jQuery Selectors สามารถเลือก HTML element มาใช้งานได้ เราสามารถเลือกได้จาก ชื่ออิลิเมนต์, id, class, type, attributes, ค่าของแอตทริบิวต์ และอื่นๆ โดยค่า Selectors ต่างๆ ก็ใช้เหมือนกันกับ CSS seletors ได้เลย

การเลือกอิลิเมนต์ต่างๆ สามารถทำได้โดย $().

เลือกอิลิเมนต์จากชื่อ

โครตเบสิกเลย คือการเลือกอิลิเมนต์จากชื่อ

$("p")

จากบรรทัดบนคือการเลือกแท็ก p ทั้งหมดเลย

ตัวอย่างการใช้งาน

$("button").click(function(){
	$("p").hide();
});

จากตัวอย่างเมื่อกดที่ปุ่ม จะทำการซ่อนแท็ก p ทั้งหมด

เลือกอิลิเมนต์จาก #id

เป็นการเลือกอิลิเมนต์จาก id ของ HTML element ชื่อ id ไม่สามารถมีชื่อซ้ำได้

$("#test")

ตัวอย่างการใช้งาน

$("button").click(function(){
	$("#test").hide();
});

จากตัวอย่างเมื่อกดที่ปุ่ม จะทำการซ่อนอิลิเมนต์ที่มี id ชื่อว่า test เพียง id เดียวเท่านั้น

เลือกอิลิเมนต์จาก .class

ชื่อคลาสเหมือนกัน แต่คนละอิลิเมนต์ ทำให้เลือกเพียงชื่อคลาสก็สามารถใช้งาน 2 อิลิเมนต์ได้

$(".test")

ตัวอย่างการใช้งาน

$("button").click(function(){
	$(".test").hide();
});

จากตัวอย่างจะทำการซ่อนคลาสที่มีชื่อว่า test ทั้งหมด แท็กไหนมีคลาสเป็น test โดนซ่อนหมด

เลือกไฟล์ jQuery จากภายนอก

หากเว็บไซต์ของเรามีหน้าจำนวนมากๆ และเราต้องการให้ Function ของ jQuery ดูแลรักษาง่าย เราสามารถแยกไฟล์ jQuery ได้

ตัวอย่าง

<body>

	<script src="asset/js/jquery-v3.6.0.min.js"></script>
	<script src="asset/js/main_jquery_functions.js"></script>

</body>

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Top