Syntax
โค้ด: เลือกทั้งหมด
$(selector).action()
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>
จากตัวอย่างบรรทัด $("#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>
จากตัวอย่างมีการเรียกใช้ $("#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>
จากตัวอย่างมีการเรียกใช้ $("#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" หลายตัว)