jQuery: คำสั่ง jQuery Core มีอะไรบ้าง
- Filed under: Fundamentals, jQuery
- Date: Jan 25,2008
เริ่มต้นด้วย jQuery คือะไร มาจากไหนกันก่อน
jQuery นั้นได้รับการพัฒนามาจาก Javascript จึงสามารถเรียกได้ว่า เป็น Javascript ชนิดใหม่ ซึ่ง jQuery นี้เอง ได้ถูกออบแบบมาให้สามารถใช้
Javascript ได้อย่างง่ายขึ้น สะดวกขึ้น และที่สำคัญ ประมาลผลเร็วขึ้นด้วย
ดังนั้นข้อดีคือ แน่นอนประมวลผลเร็วขึ้น ใช้งานง่ายขึ้น เรียนรู้ได้เร็วขึ้นสำหรับมือใหม่
ข้อเสียเหรอ….ข้อใหญ่เลยหละ ทำให้คนที่เขียน Javascript เป็นอยู่แล้ว มีโอกาสที่จะลืม structures เดิม ของ Javascript ได้เลยทีเดียว เนื่องจากความง่ายและ
สะดวกที่มีมากจนเกินไปของ jQuery ^___^ มีใครไม่ชอบบ้างครับ….ถอนตัวได้นะครับ
มาต่อกันเลย เริ่มที่ตัวแรก
Core
$(html) : หมายถึงการสร้าง DOM ณ ปัจจุบันทันด่วน เดี๋ยวนั้น (ใน script เลย)
ตัวอย่าง
$(”<div><p>Hello</p></div>”).appendTo(”#body”)
หมายความว่า ให้ใส่ นำ HTML ตามนั้นอะครับ มาใส่ใน DOM ที่มี id=body ครับ
$(elements) : หมายถึง เลือก Element ครับ
ตัวอย่าง
$(document.body).background( “black” );
หมายความว่า Element body กำหนดสี background เป็นสีดำ
$(callback) : อันนี้เป็นตัวย่อของ $(document).ready ตัวนี้ เราจะมีทุกครั้งที่เขียน jQuery ครับ เปรียบเสมือนคำสั่งเริ่มต้น เป็นการบอกว่า เมื่อโหลด
document เสร็จแล้ว ให้ทำอะไรต่อ
ตัวอย่าง
$(document).ready(function() {
//คำสั่งต่างๆ ตรงนี้
});
$(expression, context) : ก็คือ เลือก DOM element ภายใน context ที่กำหนด context จะมีก็ได้ ไม่มีก็ได้
ตัวอย่าง
$(”div > p”)
แปลว่า ให้เลือก DOM P ทั้งหมด ที่เป็น child elements ของ div ครับ
เช่น ถ้า html เราเป็น <p>one</p> <div><p>two</p></div> <p>three</p> ดังนั้น มันก็จะเลือก <p>two</p>
$.extend(object) : ตัวนี้ไว้สำหรับให้เราสามารถใส่ Function เพิ่มเข้าไปใน namespace ของ jQuery ได้ึีัครับ เหมาะสำหรับคนที่จะเขียน plugin
เองครับ ซึ่งตรงเราไม่จำเป็น หรือไม่ได้ใช้หรอกครับ ผมข้ามเลยนะครับ ผมจะเน้นเฉพาะที่ได้ใช้งานจริงๆ
$.noConflict() : ตัวนี้ สำหรับป้องกัน การปะทะกัน ระหว่าง Library ของ jQuery กับ Prototype ครับ เนื่องจาก การใช้งานสัญลักษณ์ $ เหมือนกัน ดังนั้น
ถ้าหาก จะเขียนทั้ง Prototype แลก jQuery อยู่ในไฟล์เดียวกัน จะต้องใช้คำสั่งนี้ก่อนครับ จะได้ไม่ชนกัน ตัวนี้ก็คงไม่ค่อยได้ใช้หรอกครับ อย่างที่บอก jQuery ดีกว่าเยอะะะะะะ ^___^ สาวก Prototype
คงไม่ได้อยู่แถวนี้นะครับ…
each(callback) : ใช้สำหรับ run function ใดๆ กับ tag ที่เลือกเอาไว้ ในกรณีที่ tag มีเยอะ งงมั๊ยครับ ดูตัวอย่างดีกว่า
ตัวอย่าง
$(”img”).each(function(i){
this.src=”test” + i + “.jpg”;
});
ถ้าหากที่ html เรามี <img /><img /> ผลลัพธ์จะได้ <img src=”test1.jpg” /><img src=”test2.jpg” />
eq(position) : สำหรับเลือกครับว่า จะเลือก element ที่เท่าไหร่ โดยเริ่มที่ 0
ตัวอย่าง
$(”p”).eq(1)
ถ้าที่ HTML เรามี <p>This is just a test.</p><p>So is this</p> ผลลัพธจะได้ <p>So is this</p>
get() : ตัวนี้จะเลือกทุก element ครับ แต่จะคืนค่ากลับมาเป็น array
ตัวอย่าง
$(”img”).get();
HTML : <img src=”test1.jpg”/> <img src=”test2.jpg”/>
Result : [ <img src="test1.jpg"/> <img src="test2.jpg"/> ]
get(index) : เลือก element เดียว และคืนค่า element นั้นมาเป็น element
ตัวอย่าง
$(”img”).get(0);
HTML : <img src=”test1.jpg”/> <img src=”test2.jpg”/>
Result : [ <img src="test1.jpg"/> ]
length หรือ size() : คืนค่าจำนวน elements ที่ match
ตัวอย่าง
$(”img”).length;
$(”img”).size();
HTML : <img src=”test1.jpg”/> <img src=”test2.jpg”/>
Result : 2
ครั้งหน้าเรามาต่อ Selectors กันนะครับ
Technorati Tags: jQuery
แต่ตอนนี้แซมซังใหญ่เป็นอันดับหนึ่งของเกาหลี แซงหน้าฮอนเดะบริษัทของพี่สาวแล้วนะคะเนี่ย 
Leave a comment