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

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

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

M008
PHP Hero Member
PHP Hero Member
Posts: 109
Joined: 03/05/2013 10:44 am

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

Postby M008 » 08/06/2013 5:49 pm

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

Code: Select all

$(selector).action()

ตัวอย่างการใช้งาน Selectors ในการอ้างถึง element
1. $(this).action():ใช้ Selectors อ้างถึง element ใน ปัจจุบัน

Code: Select all

<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 681 times

คำอธิบายใต้รูป
จากตัวอย่างบรรทัด $("#btnClick").click(function() มีการอ้างถึง element id="btnClick" ของปุ่ม button โดยเมื่อ event มีการ click จะเปลี่ยนข้อความใน button เป็นคำว่า Hello

2. $("#test").action():ใช้ Selectors อ้างถึง element ที่อยู่ภายใต้ id="test"

Code: Select all

<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 681 times

คำอธิบายใต้รูป
จากตัวอย่างมีการเรียกใช้ $("#txt1") จาก id="txt1" โดยเมื่อคลิกที่ปุ่มของ button จะมีการ input ค่าและ clear ค่า

3. $("p").action(): ใช้ Selectors อ้างถึง element ที่อยู่ภายใต้ แทกทั้งหมด <p>หรือ <div> หรือ <span>

Code: Select all

<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 681 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" หลายตัว)

Return to “Share Knowledge”

Who is online

Users browsing this forum: No registered users and 24 guests