jQuery in 30 days - ตอนที่ 1 Hello jQuery

อ่านบทอื่นๆ ในซีรีย์นี้ได้ที่ jQuery in 30 days

เกี่ยวกับคอร์สนี้

learn jQuery in 30 days

บทความซีรีย์นี้ แปลจาก jQuery 30 days โดย Jeffrey Way ซึ่งต้นฉบับนั้นเป็น VDO สอน ใช้หลักการว่าดูวันละ 10 นาที ทั้งหมด 30 วันจบ

ดังนั้นถ้าผู้เขียนเป็นว่าเนื้อหาของวันไหนมันรวบเป็นบทเดียวกันได้ ผู้เขียนจะรวบซะนะ ไม่ต้องตกใจว่าทำไมบทมันไม่ถึง 30 Chapters (ฮา)

ส่วนคอร์สนี้ดียังไง .. เราดูมาแล้ว เนื้อหาค่อนข้างครอบคลุมประเด็นสำคัญๆ มีครอบ และ ยังแนะนำการจัดระเบียบ code และพื้นฐานสำคัญๆ เกือบทั้งหมดของ javascript ซะหมดเปลือก แนะนำว่าถ้าคุณมีเวลาซะหน่อยและไม่กลัวภาษาอังกฤษจนเกินไปครบจะดูเองสักรอกหนึ่ง

และมีบางสิ่งที่ต้องบอกก่อน คือซีรีย์ชุดนี้ออกแบบมาสำหรับคนที่พอรู้เรื่อง javascript และหลักการเขียนโปรแกรมมาแล้วนิดหน่อยก็ยังดี เท่านั้น ... ผู้เขียนจะไม่อธิบายส่วนที่เป็นหลักการที่ทุกคนรู้ๆ กันอยู่แล้ว (ยกเว้นเนื้อหาบางเรื่องที่พูดซะหน่อยเพื่อปรับพื้นให้เข้าใจไปในทิศทางเดียวกัน)

jQuery คืออะไร?

แนะนำให้รู้จักกับ jQuery

มีทุกอย่างที่เราต้องการ

สำหรับบทแรกก็ต้องเป็นการ intro ตัว jQuery นี่แหละว่ามันคืออะไร อ่านๆ ไปตอนแรกอาจจะยังไม่ต้องทำความเข้าใจก็ได้ เพราะรายละเอีัยดเราจะไปลงลึกในบทต่อๆ ไป

jQuery เป็น JavaScript Library ซึ่งทำให้เราสามารถเขียน code ชุดเดิมๆ ที่ใช้บ่อยๆ น้อยลงและมีประสิทธิภาพมากขึ้น

โดยปกติ javascript ที่เราเขียนๆ กันอยู่นั้น เราเรียกกันว่า Regular Javascript หรือ Traditional Javascript หรือก็คือ Javascript แบบดั้งเดิม ต้นฉบับแต่คนที่เคยใช้ คงจะรู้ว่ามันค่อนข้างจะใช้ยากสุดๆ การเขียนเว็บทุกวันนี้ developer จึงหันไปใช้ Library และ Framework กันแทน เพราะมันใช้ง่าย เขียนน้อย เสร็จเร็ว และผิดพลาดน้อยกว่าเรามานั่งเขียนทั้งหมดเอง

jQuery เหมาะกับใคร?

เอาง่ายๆ ว่าเหมาะกับทุกคน 55

อย่างที่บอกไปว่า jQuery เป็น javascript library ที่ช่วยให้เราเขียน javascript ได้ง่ายขึ้น ดังนั้นไม่ว่าคุณจะเป็น developer programmer นักเรียนที่กำลังเริ่มฝึกเขียนเว็บ .. jQuery ก็เหมาะกับคุณทั้งนั้นแหละ

เว็บดังๆ ก็ใช้และสนับสนุน jQuery

feature ที่ jQuery สามารถทำได้หลักๆ เลยคือ (งงว่าแต่ละตัวมันคืออะไร รอบทหลังๆ นะ)

• DOM traversing: การวิ่งไปตาม DOM ของ HTML ในหน้าเพจนั้นๆ
• event handling: จัดการกับ event ต่างๆ ที่เกิดขึ้น
• animation: เป็นฟีเจอร์สำหรับจำให้วัตถุมีการ animate ไปมาได้
• ajax: จัดการกับ ajax ให้เราจากที่ต้องสั่ง XMLHttpRequest เองก็จะเหลือคำสั่งแค่บรรทัดเดียว

คอมมูนิตี้ใหญ่ หาอะไรก็เจอ ถามได้ตอบได้ บางทีไม่ต้องเขียนเองด้วยมีคนทำมาให้แล้ว

ข้อดีของ jQuery มีหลักๆ ประมาณนี้

• เป็น lightweight library คือมีขนาดเล็ก สามารถโหลดได้เร็ว
• รองรับ CSS3 ได้
• รันได้ในทุก browser ทำให้เราไม่ต้องเขียน code หลายชุดสำหรับให้โปรเจครันได้ในทุก browser (โดยเฉพาะ IE)
• plug-in หาและเขียนขึ้นง่าย อยากได้อะไรมักจะมีคนทำไว้อยู่แล้วทำให้งานเสร็จเร็วขึ้น
• คนใช้เยอะ ทั่วโลก หาข้อมูลและขอความช่วยเหลือได้ง่าย แค่ google ก็เจอแล้ว

ก่อนจะใช้งาน jQuery ต้องทำอะไรก่อน

การ import jQuery เข้ามาในโปรเจค

การจะใช้งาน jQuery ต้องไปโหลดตัว library ของ jQuery มาก่อน (ซึ่งหาโหลดได้จากเว็บของ jquery) แล้ว import ไฟล์เข้ามาในโปรเจคเช่นเดียวกันการ import ไฟล์ .js ทั่วๆ ไป

ลืมๆ วิธีเขียนแบบเก่าไปซะ ใช้แบบใหม่ง่าย (และเร็ว) กว่าเยอะ

วิธีเรียก jQuery มาใช้งาน

วิธีการเรียกใช้ jQuery มี 2 วิธีหลักๆ คือ

jQuery('selector'); 

$('selector'); 

ซึ่งทั้ง jQuery และ $ นั่นคือตัวแปรเดียวกัน เรียกใช้แบบไหนก็ได้เลย

ยกเว้น

jQuery.noConflict();

เมื่อมีการสั่ง noConflict() นั่นหมายถึงว่าเราสั่งให้ jQuery ไม่ใช้ตัวแปร $
เราจะเรียกใช้ jQueryผ่านตัวแปร jQuery ได้อย่างเดียวเท่านั้น

คำสั่ง noConflict() มักจะถูกสั่งใช้เมื่อในโปรเจคของเรามีการใช้ JavaScript Library 2ตัวขึ้นไป ซึ่งทั้งสองตัวนี้มีรูปแบบการใช้งาน โดยการเรียกผ่าน $ ทั้งคู่...เช่น library "Prototype" ซึ่งโปรแกรมเก่าๆ ในเว็บเองก็ยังมีบางที่ที่ใช้อยู่

ดังนั้นเพื่อไม่ให้ Library ทั้ง 2 ตัวตีกันเลยต้องมีการสั่งให้ Library ตัวหนึ่งไม่ใช้สัญลักษณ์ $

selector

การอ้างถึง element ใน document

parameter ของ jQuery รับค่าเป็น selector เพื่อเลือกว่าเราจะทำงานกับ element ไหนใน document นี้ โดยการ select จะใช้รูปแบบเดียวกับ CSS เช่น

$('li')             //เลือก element ทุกตัวที่เป็นแท็ก li
$('.momo')          //เลือก element ทุกตัวที่มี class momo อยู่
$('#momo')          //เลือก element ตัวที่มี id เป็น momo
$('li.momo')        //เลือก element li ทุกตัวที่เป็น class momo
$('ul > li.momo ')  //เลือก element li ทุกตัวที่เป็น class momo ซึ่งเป็น node ลูกของ ul
$('ul  li.momo ')   //เลือก element li ทุกตัวที่เป็น class momo ซึ่งอยู่ใน node ของ ul

method

สั่งให้สิ่งที่เรา select มาทำงานบางอย่าง

หลังจากที่เรา selector ได้แล้วว่าจะทำงานกับ element ไหน อันดับต่อไปก็คือการสั่งให้ selector ตัวนั้นทำงานโดยการเรียกใช้งาน method $('li').addClass('momo'); ตัวอย่างนี้สั่งให้ li ทุกตัวโดนเพิ่ม .momo เข้าไป ซึ่ง .addClass() ก็เป็น 1 ใน method ของ jQuery

$('li').addClass('momo');
$('li').html('โมโม');
$('li').show();

การเรียกใช้ mthod ของ jQuery ... เราสามารถเรียกใช้ selector ทีละคำสั่งก็ได้หรือจะเรียกใช้ในรูปแบบ Chaining คือการ เรียกต่อเป็นทอดๆ ก็ได้ $('li').addClass('momo').html('โมโม').show();

method ของ jQuery เกือบทุกตัวที่เป็นประเภท void (ไม่คืนค่ากลับมาเป็น value) จะ return ค่ากลับมาเป็น jQuery object นั่นหมายความว่า เราไม่จำเป็นจะต้องเรียกใช้ method จากตัวเริ่มต้น $('selector') ทุกครั้ง ยกเว้นถ้ามีการทำ DOM traversing ซึ่งจะทำให้การอ้างถึงไปยัง node ตัวนั้นเปลี่ยนเป็นตัวอื่นแทน (จะมีพูดถึงอีกทีในทบต่อไป)