jQuery Selectors ความสามารถของ jQuery ที่ได้รับการยอมรับว่ายอดเยี่ยมที่สุด ก็คือการ Selectors อ้างถึง element และจัดการกับกลุ่มของ element ได้อย่างมีประสิทธิภาพ โดยสามารถเข้าถึง elemment ถึงประดับองค์ประกอบ Attribute ของ element สามารถเรียกจากหนึ่งหรือว่าจัดการในระดับกลุ่มของ element ที่อยู่ในชนิดเดียวกันได้ หรือระดับที่อยู่ลึกเข้าไปใน element ย่อยก็สามารถอ้างถึงได้เช่นเดียวกัน ซึ่งจะเป็นประโยชน์มาก ๆ ในการนำคุณสมบัติเหล่านี้เข้ามาช่วยพัฒนาโปรแกรม และ จัดการกับ element ต่าง ๆ หน้าใน Web Page ได้อย่างมีประสิทธิภาพ และการเขียน Code อันสั้น ๆ กับ Syntax ที่ง่าย ๆ ถือว่ายอดเยี่ยมที่สุด
Syntax
ตัวอย่างการใช้งาน Selectors ในการอ้างถึง element
1.
$(this).action():ใช้ Selectors อ้างถึง element ใน ปัจจุบัน
โค้ด: เลือกทั้งหมด
<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$(this).val("Hello");
});
});
</script>
</head>
<body>
<input type="button" id="btnClick" value="Click">
</body>
</html>
ผลลัพธ์
- 11.jpg (6.24 KiB) Viewed 4019 times
คำอธิบายใต้รูป
จากตัวอย่างบรรทัด $("#btnClick").click(function() มีการอ้างถึง element id="btnClick" ของปุ่ม button โดยเมื่อ event มีการ click จะเปลี่ยนข้อความใน button เป็นคำว่า Hello
2. $("#test").action():ใช้ Selectors อ้างถึง element ที่อยู่ภายใต้ id="test"
โค้ด: เลือกทั้งหมด
<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnText").click(function(){
$("#txt1").val($("#btnText").val());
});
$("#btnClear").click(function(){
$("#txt1").val('');
});
});
</script>
</head>
<body>
<input type="text" id="txt1">
<input type="button" id="btnText" value="input text = 123 ">
<input type="button" id="btnClear" value="Clear">
</body>
</html>
ผลลัพธ์
- 12.jpg (12.84 KiB) Viewed 4019 times
คำอธิบายใต้รูป
จากตัวอย่างมีการเรียกใช้ $("#txt1") จาก id="txt1" โดยเมื่อคลิกที่ปุ่มของ button จะมีการ input ค่าและ clear ค่า
3. $("p").action(): ใช้ Selectors อ้างถึง element ที่อยู่ภายใต้ แทกทั้งหมด <p>หรือ <div> หรือ <span>
โค้ด: เลือกทั้งหมด
<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnHide").click(function(){
$("p").hide();
$("div").hide();
});
$("#btnShow").click(function(){
$("p").show();
$("div").show();
});
});
</script>
</head>
<body>
<p>string paragraph string paragraph string paragraph</p>
<div>string div string div string div</div>
<input type="button" id="btnHide" value="Hide">
<input type="button" id="btnShow" value="Show">
</body>
</html>
ผลลัพธ์
- 13.jpg (26.21 KiB) Viewed 4019 times
คำอธิบายใต้รูป
จากตัวอย่างมีการเรียกใช้ $("#btnHide") จาก id="btnHide" และ $("p") จาก <p> โดยเมื่อคลิกที่ปุ่มจะสามารถเลือกให้ซ่อนหรือแสดงข้อความได้
การเรียกใช้งาน Selectors อื่น ๆ
$('div#mydiv.myclass') อ้างถึง div ชื่อ id="mydiv" และ css="myclass"
$('div#mydiv1 , div#mydiv1') อ้างถึง div ชื่อ id="mydiv1" , และ div ชื่อ id="mydiv2" (กรณีที่อ้างถึงหลายตัว)
$('div#mydiv1 , p#myp1') อ้างถึง div ชื่อ id="mydiv1" , และ p ชื่อ id="myp1" (กรณีที่อ้างถึลหลายตัว)
$('div.myclass') อ้างถึง div ที่ css="myclass"
$('div#imydiv1:first")อ้างถึง div ที่ id="mydiv1" ที่อยู่ลำดับแรก (ในกรณีที่มี id="mydiv1" หลายตัว)
[b]jQuery Selectors[/b] ความสามารถของ jQuery ที่ได้รับการยอมรับว่ายอดเยี่ยมที่สุด ก็คือการ Selectors อ้างถึง element และจัดการกับกลุ่มของ element ได้อย่างมีประสิทธิภาพ โดยสามารถเข้าถึง elemment ถึงประดับองค์ประกอบ Attribute ของ element สามารถเรียกจากหนึ่งหรือว่าจัดการในระดับกลุ่มของ element ที่อยู่ในชนิดเดียวกันได้ หรือระดับที่อยู่ลึกเข้าไปใน element ย่อยก็สามารถอ้างถึงได้เช่นเดียวกัน ซึ่งจะเป็นประโยชน์มาก ๆ ในการนำคุณสมบัติเหล่านี้เข้ามาช่วยพัฒนาโปรแกรม และ จัดการกับ element ต่าง ๆ หน้าใน Web Page ได้อย่างมีประสิทธิภาพ และการเขียน Code อันสั้น ๆ กับ Syntax ที่ง่าย ๆ ถือว่ายอดเยี่ยมที่สุด
[b]Syntax [/b]
[code]$(selector).action()[/code]
[b]ตัวอย่างการใช้งาน Selectors ในการอ้างถึง element[/b]
1. [b]$(this).action()[/b]:ใช้ Selectors อ้างถึง element ใน ปัจจุบัน
[code]<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$(this).val("Hello");
});
});
</script>
</head>
<body>
<input type="button" id="btnClick" value="Click">
</body>
</html>[/code]
[b]ผลลัพธ์[/b]
[attachment=2]11.jpg[/attachment]
[b]คำอธิบายใต้รูป[/b]
จากตัวอย่างบรรทัด $("#btnClick").click(function() มีการอ้างถึง element id="btnClick" ของปุ่ม button โดยเมื่อ event มีการ click จะเปลี่ยนข้อความใน button เป็นคำว่า Hello
[b]2. $("#test").action()[/b]:ใช้ Selectors อ้างถึง element ที่อยู่ภายใต้ id="test"
[code]<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnText").click(function(){
$("#txt1").val($("#btnText").val());
});
$("#btnClear").click(function(){
$("#txt1").val('');
});
});
</script>
</head>
<body>
<input type="text" id="txt1">
<input type="button" id="btnText" value="input text = 123 ">
<input type="button" id="btnClear" value="Clear">
</body>
</html>[/code]
[b]ผลลัพธ์[/b]
[attachment=1]12.jpg[/attachment]
[b]คำอธิบายใต้รูป[/b]
จากตัวอย่างมีการเรียกใช้ $("#txt1") จาก id="txt1" โดยเมื่อคลิกที่ปุ่มของ button จะมีการ input ค่าและ clear ค่า
[b]3. $("p").action()[/b]: ใช้ Selectors อ้างถึง element ที่อยู่ภายใต้ แทกทั้งหมด <p>หรือ <div> หรือ <span>
[code]<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnHide").click(function(){
$("p").hide();
$("div").hide();
});
$("#btnShow").click(function(){
$("p").show();
$("div").show();
});
});
</script>
</head>
<body>
<p>string paragraph string paragraph string paragraph</p>
<div>string div string div string div</div>
<input type="button" id="btnHide" value="Hide">
<input type="button" id="btnShow" value="Show">
</body>
</html>[/code]
[b]ผลลัพธ์[/b]
[attachment=0]13.jpg[/attachment]
[b]คำอธิบายใต้รูป[/b]
จากตัวอย่างมีการเรียกใช้ $("#btnHide") จาก id="btnHide" และ $("p") จาก <p> โดยเมื่อคลิกที่ปุ่มจะสามารถเลือกให้ซ่อนหรือแสดงข้อความได้
[b]การเรียกใช้งาน Selectors อื่น ๆ[/b]
$('div#mydiv.myclass') อ้างถึง div ชื่อ id="mydiv" และ css="myclass"
$('div#mydiv1 , div#mydiv1') อ้างถึง div ชื่อ id="mydiv1" , และ div ชื่อ id="mydiv2" (กรณีที่อ้างถึงหลายตัว)
$('div#mydiv1 , p#myp1') อ้างถึง div ชื่อ id="mydiv1" , และ p ชื่อ id="myp1" (กรณีที่อ้างถึลหลายตัว)
$('div.myclass') อ้างถึง div ที่ css="myclass"
$('div#imydiv1:first")อ้างถึง div ที่ id="mydiv1" ที่อยู่ลำดับแรก (ในกรณีที่มี id="mydiv1" หลายตัว)