Who's Online
มี 113 ผู้มาเยือน และ ไม่มีสมาชิกออนไลน์ ออนไลน์
- 083 - 792 5426
- 083 - 792 5426
- postman.thai@gmail.com
- Mon - Sun :10:30 - 23:30
Experience
jQuery : What's a jQuery , jQuery คืออะไร ??
jQuery : What's a jQuery , jQuery คืออะไร ??
jQuery คืออะไร
jQuery เป็น JavaScript Library ที่มีการรวบรวม function ของ JavaScript ต่าง ๆ ให้อยู่ในรูปแบบ Patterns Frameworkที่สะดวกและง่ายต่อการใช้งาน มีความยึดหยุ่นรองรับต่อการใช้งาน Cross Browser คือไม่ว่าจะใช้งานบน Web Browser ใด ใน Library ของ jQuery จะมีการเลือกใช้ function ที่สามารถ เหมาะสมต่อการทำงานและแสดงผลใน Web Browser ที่กำลังรันอยู่ ซึ่งช่วยลดปัญหาการทำงานที่ผิดพลาดในฝั่งของ Client ได้ จากปัญหาก่อนนี้ นักโปรแกรมเมอร์ทั้งหลายในสมัยก่อน ๆ มักจะทดสอบโปรแกรมและพัฒนาบน IE (Internet Explorer ซึ่งเป็น Web Browser ที่คนใช้มากที่สุดเกือบ 95% เมื่อสมัย 5-6 ปี) แต่อย่างที่เรารู้คือ ตอนนี้ได้มีหลาย Web Browser ได้เกิดขึ้นมากมาย เช่น Chrome , Firefox หรือ Safari และบางคำสั่งของ JavaScript จะไม่ทำงานหรือไม่ support ใน Web Browser บางตัว ด้วยเหตุผลนี่เองการใช้ jQuery มาเป็นทางเลือกก็สามารถช่วยแก้ปัญหานี้เป็นได้อย่างดี ทั้งยังสะดวกต่อการใช้งาน เพราะเป็น syntax ที่เข้าใจง่าย และเขียนได้ในรูปแบบที่สั้น ๆ รองรับการทำงานทั้งใน HTML รูปแบบเดิม หรือ CSS , element , DOM element , effect การจัดการ Event ต่าง ๆ หรือแม้กระทั่งการพัฒนา Ajax ด้วย jQuery ก็สามารถ ทำได้อย่างง่ายดาย โดย Syntax เหล่านี้ยังคงทำงานอยู่ภายใต้คำสั่งของภาษา JavaScript แต่การเรียกใช้งาน Framework หรือ function ต่าง ๆ จะถูกกำหนดรูปแบบโดย
Patterns ที่ได้ถูกออกแบบไว้ใน Library ของ jQuery
สัญลักษณ์ Logo ของ jQuery Library
นอกจากนี้ jQuery Library ยังได้ถูกนำไปใช้กับ Open Source ดัง ๆ หลายตัว เช่น Drupal หรือ WordPress ซึ่งถือได้ว่า jQuery เป็นสุดยอดแห่ง Library แห่งยุค หรือแม้กระทั่งในทาง Microsoft ได้ประกาศมนับสนุนใช้งาน jQuery และมีการ Include เข้ามาใน Framework เพื่อใช้ในการนำมาพัฒนา ASP.NET ร่วมกับ Ajax บน Web Application
ตัวอย่างการใช้งาน jQuery
01.<html>02.<head>03.<script type="text/javascript" src="jquery-1.6.4.js"></script>04.<script type="text/javascript">05.$(document).ready(function(){06.$("p").click(function(){07.$(this).hide();08.});09.});10.</script>11.</head>12.<body>13.<p>Welcome to My site</p>14.</body>15.</html>
จากตัวอย่าง ในการใช้งาน Library ของ jQuery นั้นสามารถใช้งานได้ง่าย ๆ ไม่ต้องติดตั้งโปรแกรมเพิ่ม เพียงแต่เรียกใช้งานjQuery Library ของ jQuery โดยใช้
1.<script type="text/javascript" src="jquery-1.6.4.js"></script>
โดยไฟล์ js ของ jQuery นี้สามารถดาวน์โหลด Version ล่าสุดได้จากเว็บไซต์ของ jQuery โดยตรง
โดยจะทำการแปลบทความและ function บางตัว ที่จำเป็นต่อการใช้งาน
ก่อนจบหัวข้อแรกขอ Sample jQuery แบบง่าย ๆ ให้ดูเล่น ๆ ก่อนที่จะได้เรียนรู้บทความถัดไป
01.<html>02.<head>03.<title>ThaiCreate.Com jQuery Tutorials</title>04. 05.<style type="text/css">06..css1 {07.font-size: 11px;08.font-weight: bold;09.color: #000000;10.}11..css2 {12.font-size: 20;13.font-weight: bold;14.color: #FF0000;15.}16.</style>17. 18.<script type="text/javascript" src="jquery-1.6.4.js"></script>19.<script type="text/javascript">20. 21.$(document).ready(function(){22. 23./*** btnHide Event ***/24.$("#btnHide").click(function(){25.$("p").hide();26.});27./** btnShow Event ***/28.$("#btnShow").click(function(){29.$("p").show();30.});31. 32. 33. 34./*** btnHideCss1 Event ***/35.$("#btnHideCss1").click(function(){36.$(".css1").hide();37.});38./*** btnShowCss1 Event ***/39.$("#btnShowCss1").click(function(){40.$(".css1").show();41.});42. 43. 44. 45./*** btnCss1 Event ***/46.$("#btnCss1").click(function(){47.$("#mytext").removeClass();48.$("#mytext").addClass("css1");49.});50./*** btnCss2 Event ***/51.$("#btnCss2").click(function(){52.$("#mytext").removeClass();53.$("#mytext").addClass("css2");54.});55. 56. 57.});58.</script>59.</head>60. 61.<body>62. 63.<p>My Name is Win</p>64.<input name="btnHide" id="btnHide" type="button" value="Hide">65.<input name="btnShow" id="btnShow" type="button" value="Show">66.<hr>67. 68.<div class="css1"> My Name is Win</div><br>69.<div class="css1"> My Name is Weerachai</div>70.<input name="btnHideCss1" id="btnHideCss1" type="button" value="Hide Css1">71.<input name="btnShowCss1" id="btnShowCss1" type="button" value="Show Css1">72.<hr>73. 74.<span id="mytext"> My Name is Win</span>75.<input name="btnCss1" id="btnCss1" type="button" value="Change to Css1">76.<input name="btnCss2" id="btnCss2" type="button" value="Change to Css2">77. 78.</body>79.</html>จาก Sample แรกจะเป็นการ เรียกใช้งาน Selector เพื่ออ้างถึง element ต่าง ๆ บนหน้าเว็บเพจ ถ้าอยากรู้ว่าได้ผลลัพธ์อะไรบ้างก็ลอง Copy ไปรันดูครับ
และถ้ามีข้อผิดพลาดประการใด ต้องขออภัย ม ณ ที่นี้ด้วยครับ
About I-Comz
bcomz.com เป็นส่วนหนึ่งของงานซ่อมคอมพิวเตอร์นอกสถานที่ บางกะปิ รามคำแหง ซึ่งมีประสบการณ์การซ่อมและการค้าขาย มากกว่า 10 ปี โดยมอบประสบการณ์การช้อปปิ้งและช่องทางการขายปลีกที่สะดวกสบายสำหรับผู้บริโภคและมอบแพลตฟอร์มสำหรับผู้ค้าให้สามารถเข้าถึงฐานลูกค้าที่ใหญ่ที่สุดในเอเชียตะวันออกเฉียงใต้ได้อย่างง่ายดาย