แนะนำการใช้งาน jQuery เบื้องต้น เพื่อเตรียมตัวเป็น "Web programming"
ในการจะทำให้ใช้ javascript ได้ง่ายขึ้นในการเขียนคำสั่งจะต้องมีการ เรียกใช้งาน library ตามด้วย <script type="text/javascript">......คำสั่งการทำงาน.....</script>
ตัวอย่าง
ตัวอย่าง การเรียกใช้งาน
|
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //คำสั่ง.... </script>
|
ตัวอย่างการเขียนคำสั่ง jQuery
ในการเรียกใช้งาน สามารถเรียกใช้ได้ 2 วิธี
1. ขึ้นต้นด้วย $
2. ขึ้นต้นด้วย jQuery
จุดเด่นของ jQuery ใช้ในการหา selector ดังตัวอย่าง
ไฟล์ตัวอย่าง :: code_5.html |
<!DOCTYPE html> <html> <head> <title> CSS </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body { font-size: 36px; } #mindphp{ font-size: xx-small; background-color: #00FF00; } .classmindphp{ font-size: larger; font-style: italic; } div { background-color: #0000FF; } p.classmindphp { background-color:#999999; } </style> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#mindphp').hide(); }) </script> </head> <body> <div>ตัวอย่าง</div> <div id="mindphp">Mindphp.com</div> <div class="classmindphp">ข้อความที่อยู่ใน classmindphp Mindphp.com</div> <p class="classmindphp">ข้อความที่อยู่ใน classmindphp Tag p</p> </body> </html>
|
คำอธิบาย :: เราจะให้ทำการหาตำแหน่ง #mindphp เเล้วให้ทำการปิดไม่ให้ทำการแสดงผล ในตำแหน่ง #mindphp
ผลที่ได้ :: ในตำแหน่งที่ #mindphp ก็จะไม่แสดงผล
ตัวอย่างการเขียนคำสั่ง jQuery
ไฟล์ตัวอย่าง :: code_6.html |
<!DOCTYPE html> <html> <head> <title> CSS </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body { font-size: 36px; } #mindphp{ font-size: xx-small; background-color: #00FF00; } .classmindphp{ font-size: larger; font-style: italic; } div { background-color: #0000FF; } p.classmindphp { background-color:#999999; } </style> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#mindphp').html('Mindphp From jQuery'); }) </script> </head> <body> <div>ตัวอย่าง</div> <div id="mindphp">Mindphp.com</div> <div class="classmindphp">ข้อความที่อยู่ใน classmindphp Mindphp.com</div> <p class="classmindphp">ข้อความที่อยู่ใน classmindphp Tag p</p> </body> </html>
|
คำอธิบาย :: เราจะให้ทำการหาตำแหน่ง #mindphp เเล้วให้ทำการเเล้วให้ทำการเปลี่ยนการแสดงผล ในตำแหน่ง #mindphp เป็น Mindphp From jQuery
ผลที่ได้ :: ในตำแหน่งที่ #mindphp ก็จะแสดงผลเป็น Mindphp From jQuery