JQuery เป็น Library
ของ Javascript เพิ่มความสะดวกสบายให้กับเราในการควบคุมหน้าเว็บ
วิธีติดตั้งเข้าไปที่
Path นี้
http://jquery.com/download/
เมื่อ Download
มาแล้วจะได้ File มาตัวหนึง
การใช้งานถ้าต้องการให้หน้าเว็บไหนสามารถใช้งานได้ให้เพิ่ม Tag
<script
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
ตรงส่วนของ src เราต้องใส่ path ของ File
ที่เรา Download มา
วิธีทดสอบการใช้งานง่ายๆ
ลองเรียกใช้งานโดยใช้คำสั่ง
ไว้ส่วนใดก็ได้ของหน้าเว็บเพจให้อยู่ใน tag <head></head> หรือ
<body></body>
$(document).ready(function(){
alert(1);
});
จากนั้นลอง Run ด้วย Server ถ้าพบว่ามี Alert เลข
1 ขึ้นมาแสดงว่าใช้ได้แล้ว
การใช้งานเบื้องต้น
JQuery จะมีส่วนที่เรียกว่า Selector ซึ่งส่วนนี้จะติดกับสัญลักษณ์
$ แล้วความหมายของมันก็ตามชื่อเลย คือตัว Select
ลองสร้าง Tag <input
type='text' size='10'/> บนหน้าเว็บของคุณดูสิ จากนั้น
ลองทดสอบ JQuery
$(document),ready(function(){
alert($("input:text").size());
});
ทดสอบ Run บน Browser ถ้าในหน้าเว็บเรามี input ที่เป็น text อยู่ตัวเดียวมันก็จะ Alert ขึ้นมา 1 ซึ่งหมายความว่ามัน Select
พบ Input ที่เป็นประเภท text พบ 1
ตัวในหน้าเว็บเรา
สิ่งที่ Select
มาเป็นข้อมูลประเภทอะไร
JQuery เมื่อถูก Selector ดึงออกมาแล้วจะถูกเรียกเป็นข้อมูล
ชนิด Wrapper (ถ้าเป็น Javascript จะเป็น
Element) Wrapper
ถ้าพูดเอาตามคำแปลก็หมายถึงถูกห่ออยู่ เป็นอย่างที่คำแปลจริงๆ Wrapper
คือ Element ของ Javascript ที่ทาง JQuery นำมาห่อบางสิ่งบางอย่าง
เพื่อให้การใช้งานที่ง่ายขึ้น เวลา Select ออกมาได้หลายตัวเราเรียกว่า
Wrapper set
Select แบบมีเงื่อนไข
ถ้าใน Webpage เรามี
<input id='text1' type='text'
size='10'/> <input type='text' id='text2' size='10'/>
ถ้าเราจะเลือกเอา input
ที่มีไอดี text1 ใน Jquery สิ่งที่แทนคำว่า id ให้ใช้ #
จริงๆใช้ id Select ได้เลือกเพราะในหน้า Web page นั้น id ห้ามมีซ้ำ แต่เพื่อเป็นการป้องกันไว้ก่อน
ให้ใช้เงื่อนไขเยอะๆไว้
$('input:text#text1') หรือ $(':text#text1')
หรือ $('#text1')
ทั้งสามแบบใช้ได้หมด แต่แนะนำแบบแรกมากกว่าเพราะปลอดภัย
Select แบบหลายเงื่อนไข
ถ้าใน Webpage เรามี
<input id='rad1' type='radio'
value='1'/> Male<br>
<input type='radio' id='rad1'
checked='checked' value='2'/> Famale<br>
สังเกตว่า ถ้าเป็น radio แล้ว id จะเหมือนกัน
แล้วเราจะแยกแยะได้ยังไง คำตอบคือเราก็เพิ่มเงื่อนไข ถ้าเราต้องการตัวที่ checked
$(":radio#rad1[checked='checked']")
ในวงเล็บสี่เหลี่ยมเป็นการเพิ่มเงื่อนไขของ properties ที่เราต้องการ
สามารถเพิ่มเงื่อนไขได้หลายเงื่อนไขได้ไม่จำกัดเช่น
$(":radio#rad1[checked='checked'][value='2']")
การ Select แบบลำดับความลึกของ Node
ถ้าใน Webpage เรามี
<div class='require'><input
type='text' size='10'/></div>
<div
class='require'><input type='text' size='10'/></div>
<div
id='2'><input type='text'></div>
เราต้องการ input type text ที่มีอยู่แต่ใน div ที่ class เป็น require เท่านั้นสามารถทำได้ดังนี้
$("div.require input:text")
เลือกสิ่งที่อยู่ใน div.require (JQuery ใช้ จุด
แทนคำว่า Class,ใช้ # แทนคำว่า id)ที่เป็น input ประเภท text การ
Select แบบนี้ ไม่ว่า input:text จะอยู่ลึกแค่ไหน
ก็จะถูกดึงออกมาควรระวังถ้าต้องให้เลือกเฉพาะ input ที่ต่อจาก tag Div โดยตรงให้ลองใช้
$("div.require>input:text")
การ Selector แบบหลาย Selector รวมกันในครั้งเดียว
ถ้าใน Webpage เราประกอบด้วยพวกนี้
<div class='require'
id='humanFate'><input type='text' id='text1' size='10'/></div>
<div class='require'><input
type='text' id='text2' size='10'/></div>
<div
id='2'><input type='text'></div>
<div id='NTDSYSTEM'></div>
ถ้าเราต้องการปิด โค้ดบรรทัดที่ 1 กับบรรทัดที่ 4 ไม่ให้ผู้ใช้มองเห็นสามารถ Select แบบรวม Selector
ได้ดังนี้
จากปกติเราอาจต้องเขียนสองแบบ $("div.require#humanFate") กับ $("div#NTDSYSTEM") แต่ทั้งนี้เสียเวลาเรารวมกันได้โดย
$("div.require#humanFate,div#NTDSYSTEM")
ต้องการปิดไม่ให้ผู้ใช้เห็นใช้ hide()
$("div.require#humanFate,div#NTDSYSTEM").hide();
การ Selector แบบกำหนดแค่บางส่วนของชื่อ id
<input type='button' id='btn1' value='ปุ่ม1'/>
<input type='button' id='btn1' value='ปุ่ม2'/>
<input type='button' id='activebtn'
value='cancel'/>
ต้องการเลือก input ที่ id ขึ้นต้นด้วย btn
(การที่กำหนดว่าขึ้นต้นใช้สัญลักษณ์ ^)
$("input:button[id^='btn']")
ต้องการเลือก input ที่ id มีบางส่วนเป็นคำว่า
btn (การที่กำหนดว่าบางส่วนใช้สัญลักษณ์ *)
$("input:button[id*='btn']")
ต้องการเลือก input ที่ id มีลงท้ายเป็นคำว่า btn
(การที่กำหนดว่าบางส่วนใช้สัญลักษณ์ $)
$("input:button[id$='btn']")
ทั้งหมดที่กล่าวมานี้เป็นแค่บางส่วนของ Selector ของ JQuery จริงๆมีเยอะมากจนอธิบายเป็นหนังสือเล่มๆได้เลย
อ่านพื้นฐานเพิ่มเติมได้ที่
www.w3school.com เป็นเว็บที่แนะนำสำหรับพื้นฐาน
ส่วน Advance ขึ้นไปแนะนำให้หาโหลด pdf
ที่เป็น textbook มาอ่านจะดีกว่า หรือสามารถติดตามใน blog ได้ตลอดเวลา
โดย Mirror of Kagami
