jQuery Syntax : jQuery Basic Syntax
jQuery Syntax : jQuery Basic Syntax |
jQuery Syntax รูปแบบคำสั่งพื้นฐานของ jQuery Library Framework
jQuery การทำงานส่วนมากใน Web Form จะให้ความสำคัญในการอ้างถึง (Selectors) element ในรูปแบบต่าง ๆ หากจะเข้าใจง่าย ๆ ในระบบการเขียน JavaScript แบบดังเดิมจะใช้ document.form.element หรือ document.getElementById ในการอ้างถึง element เช่น
1.<input type="text" id="txtname">
ถ้าในระบบเดิมของ JavaScript เราจะเรียกใช้ element นี้ได้โดยการใช้คำสั่ง
1.document.form.txtname.value = 'myText';2.document.getElementById("").value = 'myText';
แต่ใน Syntax ของ jQuery คำสั่งพวกนี้จะไม่ได้ถูกเรียกใช้อีกเลย โดย ใช้สั้น ๆ เพียง
1.$("#txtname").val("myText");
นอกจากนี้ jQuery ยังมีความสามารถอ้างถึง (Selectors) element ได้หลายหลายรูปแบบมาก เช่น
สามารถ Selectors จาก id="test" , แท็ก HTML ต่าง ๆ <p> <span> <div> หรือ class="test" และอื่น ๆ อีกมาก
ซึ่งสามารถศึกษาได้จากหัวข้อถัดไป
Selectors ที่พบเจอเป็นประจำ
$(this).action()
ใช้ Selectors อ้างถึง element ใน ปัจจุบัน
$("#test").action()
ใช้ Selectors อ้างถึง element ที่อยู่ภายใต้ id="test"
$("p").action()
ใช้ Selectors อ้างถึง element ที่อยู่ภายใต้ แทกทั้งหมด <p>หรือ <div> หรือ <span>
$(".test").action()
ใช้ Selectors อ้างถึง element ที่อยู่ภายใต้ แทกทั้งหมด ที่เรียกใช้ css style sheet เช่น class="test"
ตัวอย่างการใช้งาน Selectors ในการอ้างถึง element แบบง่าย ๆ
Code (jQuery)
01.<html>02.<head>03.<title>ThaiCreate.Com jQuery Tutorials</title>04.<script type="text/javascript" src="jquery-1.6.4.js"></script>05.<script type="text/javascript">06.$(document).ready(function(){07.$("#btnClick").click(function(){08.$(this).val("Hello");09.});10.});11.</script>12.</head>13.<body>14.<input type="button" id="btnClick" value="Click">15.</body>16.</html>
Screenshot
คำอธิบาย
จากตัวอย่างบรรทัด $("#btnClick").click(function() มีการอ้างถึง element id="btnClick" ของปุ่ม button โดยเมื่อ event มีการ click จะเปลี่ยนข้อความใน button เป็นคำว่า Hello
สำหรับการใช้งาน Selectors เบื้องต้น สามารถศึกษาได้จากหัวข้อถัดไป