BCOMZ.COM
ซ่อมคอมพิวเตอร์นอกสถานที่ บางกะปิ 083 - 792 5426 เริ่มต้นที่ 500บาท/เครื่อง ให้บริการเฉพาะเขตพื้นที่ รามคำแหง บางกะปิ นวมินทร์ เสรีไทย ลาดพร้าวเฉพาะ บริเวณ จากเดอะมอลบางกะปิถึงโชคชัย 4
BCOMZ.COM
ซ่อมคอมพิวเตอร์นอกสถานที่ บางกะปิ 083 - 792 5426 เริ่มต้นที่ 500บาท/เครื่อง ให้บริการเฉพาะเขตพื้นที่ รามคำแหง บางกะปิ นวมินทร์ เสรีไทย ลาดพร้าวเฉพาะ บริเวณ จากเดอะมอลบางกะปิถึงโชคชัย 4
BCOMZ.COM
ซ่อมคอมพิวเตอร์นอกสถานที่ บางกะปิ 083 - 792 5426 เริ่มต้นที่ 500บาท/เครื่อง ให้บริการเฉพาะเขตพื้นที่ รามคำแหง บางกะปิ นวมินทร์ เสรีไทย ลาดพร้าวเฉพาะ บริเวณ จากเดอะมอลบางกะปิถึงโชคชัย 4
BCOMZ.COM
ซ่อมคอมพิวเตอร์นอกสถานที่ บางกะปิ 083 - 792 5426 เริ่มต้นที่ 500บาท/เครื่อง ให้บริการเฉพาะเขตพื้นที่ รามคำแหง บางกะปิ นวมินทร์ เสรีไทย ลาดพร้าวเฉพาะ บริเวณ จากเดอะมอลบางกะปิถึงโชคชัย 4
jQuery : What's a jQuery , jQuery คืออะไร ??

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


jQuery Logo

สัญลักษณ์ 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 โดยตรง

http://www.jquery.com
 
สำหรับบทความนี้คงจะไม่ช้าเกินไป เพราะผมเองก็เพิ่งได้หันมาจับ jQuery ได้ไม่นาน เพราะก่อนหน้านี้ ได้หันไปพัฒนา Application บน Windows ซะพักหนึ่ง ก็ถือว่าได้เป็นการเรียนรู้ไปในตัวสำหรับบทความชุดนี้ และอยากเชิญชวนให้เพื่อน ๆ พี่ ๆ น้อง ๆ ในไทยครีเอท ที่ยังไม่ได้ศึกษาให้ลองหันมาสนใจ เพราะคิดว่าในอนาคตข้างหน้า jQuery จะมีความสำคัญหลัก ๆ ต่อการพัฒนาโปรแกรมเป็นอย่างยิ่ง ซึ่งจะทยอยได้ทำเป็นแต่ล่ะหัวข้อออกมา โดยหลัก ๆ แล้วจะศึกษาจากเว็บไซต์ 
http://docs.jquery.com/Main_Page


โดยจะทำการแปลบทความและ 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 ไปรันดูครับ


และถ้ามีข้อผิดพลาดประการใด ต้องขออภัย ม ณ ที่นี้ด้วยครับ


Date

23 มกราคม 2558

Tags

jQuery