jQuery Selectors รูปแบบคำสั่งการอ้างถึง element ของ jQuery Library Framework

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderator: mindphp, ผู้ดูแลกระดาน

M008
PHP Hero Member
PHP Hero Member
โพสต์: 109
ลงทะเบียนเมื่อ: 03/05/2013 10:44 am

jQuery Selectors รูปแบบคำสั่งการอ้างถึง element ของ jQuery Library Framework

โพสต์ที่ยังไม่ได้อ่าน โดย M008 »

jQuery Selectors ความสามารถของ jQuery ที่ได้รับการยอมรับว่ายอดเยี่ยมที่สุด ก็คือการ Selectors อ้างถึง element และจัดการกับกลุ่มของ element ได้อย่างมีประสิทธิภาพ โดยสามารถเข้าถึง elemment ถึงประดับองค์ประกอบ Attribute ของ element สามารถเรียกจากหนึ่งหรือว่าจัดการในระดับกลุ่มของ element ที่อยู่ในชนิดเดียวกันได้ หรือระดับที่อยู่ลึกเข้าไปใน element ย่อยก็สามารถอ้างถึงได้เช่นเดียวกัน ซึ่งจะเป็นประโยชน์มาก ๆ ในการนำคุณสมบัติเหล่านี้เข้ามาช่วยพัฒนาโปรแกรม และ จัดการกับ element ต่าง ๆ หน้าใน Web Page ได้อย่างมีประสิทธิภาพ และการเขียน Code อันสั้น ๆ กับ Syntax ที่ง่าย ๆ ถือว่ายอดเยี่ยมที่สุด
Syntax

โค้ด: เลือกทั้งหมด

$(selector).action()
ตัวอย่างการใช้งาน 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
11.jpg (6.24 KiB) Viewed 4005 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.jpg (12.84 KiB) Viewed 4005 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
13.jpg (26.21 KiB) Viewed 4005 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" หลายตัว)
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 70