เริ่มใช้ jQuery กันเถอะ

เริ่มใช้ jQuery กันเถอะ

จริงๆ ไม่ได้พึ่งเริ่มใช้นะครับ ใช้มานานแล้วครับ แต่ทีนี้กลัวว่าท่านผู้อ่านจะงง ว่าจะเริ่มใช้มันอย่างไร ลองอ่านดู แล้วจะรู้ว่าใช้มันได้ง่ายนิดเดียวจริงๆ

ก่อนอื่นคงต้องขอเล่าก่อนแล้วกัน ว่า jQuery คืออะไร และจะพาท่านเข้าสู่การใช้งาน รวมทั้งตัวอย่างเล็กให้ได้รับชมด้วยครับ

jQuery คืออะไร

jQuery คือ javaScript Framework ตัวหนึ่ง ซึ่งจริงๆแล้ว ถ้าพูดให้เข้าใจได้ง่ายกว่านั้นมันคือ ชุดคำสั่งของ javaScript ที่มีคนเขียนเตรียมพร้อมให้เราเรียกใช้งานได้ง่ายและรวดเร็วนั่นเองครับ

 แต่เรายังไม่อธิบาย ว่าเขียนอย่างไรครับ เอาเป็นว่าเรามาดูวิธีเริ่มต้นใช้งานกันก่อนดีกว่า

 

  1. เปิดหน้าเว็บ http://code.jquery.com/jquery-1.4.2.min.js ถ้าเปิดด้วย Internet Explorer ก็จะ save ลงเครื่องทันที แต่ว่าหากใช้ Firefox, Chrome ก็ Save ลงเครื่องครับ
  2. ย้ายไฟล์ jquery-1.4.2.min.js ไปไว้ในแฟ้มเดียวกันกับ หน้าเว็บที่เราสร้างขึ้นมาครับ
  3. เพิ่มโค้ดในหน้าเว็บ ในส่วน head เพื่อเรียกไฟล์ javaScript jQuery ดังกล่าวเข้ามาใช้ในเว็บ

 

ข้อ 1 และ 2 ไม่น่าจะมีปัญหา เราก็จะพูดถึงข้อ 3 จากเรื่องพื้นฐานของ HTML ให้เรานำโค้ดเพื่อเรียกใช้ javascript 

<script type="text/javascript" src="jq142.min.js"> </script>

มาใส่ไว้ที่ head ก็จะได้ดังนี้

<head> <title>Title</title> <script type="text/javascript" src="jq142.min.js"> </script> </head>

เพียงเท่านี้เอง เสร็จแล้วครับ สำหรับ การเรียกใช้ jQuery ในหน้าเว็บ โดยทุกๆหน้าที่มีการเรียกใช้ jQuery ก็จะมีโค้ดนี้อยู่ทุกๆหน้าด้วย

แล้วบทความต่อไปก็จะมาเล่ากันต่อว่าเราจะใช้มันให้ทำงานให้ได้ดังใจได้อย่างไร

[PRINT VERSION] เขียน: 2010-07-19 20:40:49 แก้ไข : 2010-07-19 20:40:49 อ่าน : 328
tag : javaScript Framework,jQeury,jQuery

Comment

Comment
BeYourCyber - 19/07/2010 19:40:49 -
ร่วมพูดคุยในหัวข้อของบทความ เริ่มใช้ jQuery กันเถอะ
จริงๆ ไม่ได้พึ่งเริ่มใช้นะครับ ใช้มานานแล้งครับ แต่ทีนี้กลัวว่าท่านผู้อ่านจะงง ว่าจะเริ่มใช้มันอย่างไร ลองอ่านดู แล้วจะรู้ว่าใช้มันได้ง่ายนิดเดียวจริงๆ
tom - 02/09/2010 06:12:20 - 64.171.195.226
เราสามารถทำในคอมพิวเตอร์ เอาไว้ในโฟล์ดเดอร์เดียวกันกับ .html ได้ไหมครับ แต่ผมลองแล้วแบบด้านล่างนะครับไม่เห็นมันไปเลย เพราะผมคิดว่าชื่อไฟล์ที่โหลดมาเป็นชื่อนี้นะครับ ยังช่วยชี้แนะด้วยครับ

<!DOCTYPE html>
<html>
<head>
<style>

p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
<script src="/scripts/jquery-1.4.2.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>

<p>Goodbye</p>
<script>$("p:last").addClass("selected highlight");</script>
</body>
</html>

ขอบคุณล่วงหน้า
BeYourCyber - 02/09/2010 13:53:57 - 124.157.141.173
คุณอ้างอิงไฟล์ javascript เป็น
/script/

นั่นแปลว่าคุณต้องเอาไปใส่แฟ้มที่ชื่อ script ก่อนครับ