JQuery เป็น Library
ของ Javascript เพิ่มความสะดวกสบายให้กับเราในการควบคุมหน้าเว็บ
วิธีติดตั้งเข้าไปที่
Path นี้
http://jquery.com/download/
เมื่อ Download
มาแล้วจะได้ File มาตัวหนึง
การใช้งานถ้าต้องการให้หน้าเว็บไหนสามารถใช้งานได้ให้เพิ่ม Tag
การใช้งานถ้าต้องการให้หน้าเว็บไหนสามารถใช้งานได้ให้เพิ่ม Tag
<script
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
ตรงส่วนของ src เราต้องใส่ path ของ File ที่เรา Download มา
ตรงส่วนของ src เราต้องใส่ path ของ File ที่เรา Download มา
วิธีทดสอบการใช้งานง่ายๆ
ลองเรียกใช้งานโดยใช้คำสั่ง ไว้ส่วนใดก็ได้ของหน้าเว็บเพจให้อยู่ใน tag <head></head> หรือ <body></body>
ลองเรียกใช้งานโดยใช้คำสั่ง ไว้ส่วนใดก็ได้ของหน้าเว็บเพจให้อยู่ใน tag <head></head> หรือ <body></body>
$(document).ready(function(){
alert(1);
});
alert(1);
});
จากนั้นลอง Run ด้วย Server ถ้าพบว่ามี Alert เลข
1 ขึ้นมาแสดงว่าใช้ได้แล้ว
การใช้งานเบื้องต้น
JQuery จะมีส่วนที่เรียกว่า Selector ซึ่งส่วนนี้จะติดกับสัญลักษณ์ $ แล้วความหมายของมันก็ตามชื่อเลย คือตัว Select
ลองสร้าง Tag <input type='text' size='10'/> บนหน้าเว็บของคุณดูสิ จากนั้น
JQuery จะมีส่วนที่เรียกว่า Selector ซึ่งส่วนนี้จะติดกับสัญลักษณ์ $ แล้วความหมายของมันก็ตามชื่อเลย คือตัว Select
ลองสร้าง Tag <input type='text' size='10'/> บนหน้าเว็บของคุณดูสิ จากนั้น
ลองทดสอบ JQuery
$(document),ready(function(){
alert($("input:text").size());
});
alert($("input:text").size());
});
ทดสอบ Run บน Browser ถ้าในหน้าเว็บเรามี input ที่เป็น text อยู่ตัวเดียวมันก็จะ Alert ขึ้นมา 1 ซึ่งหมายความว่ามัน Select
พบ Input ที่เป็นประเภท text พบ 1 ตัวในหน้าเว็บเรา
พบ Input ที่เป็นประเภท text พบ 1 ตัวในหน้าเว็บเรา
สิ่งที่ Select
มาเป็นข้อมูลประเภทอะไร
JQuery เมื่อถูก Selector ดึงออกมาแล้วจะถูกเรียกเป็นข้อมูล ชนิด Wrapper (ถ้าเป็น Javascript จะเป็น Element) Wrapper
ถ้าพูดเอาตามคำแปลก็หมายถึงถูกห่ออยู่ เป็นอย่างที่คำแปลจริงๆ Wrapper คือ Element ของ Javascript ที่ทาง JQuery นำมาห่อบางสิ่งบางอย่าง
เพื่อให้การใช้งานที่ง่ายขึ้น เวลา Select ออกมาได้หลายตัวเราเรียกว่า Wrapper set
JQuery เมื่อถูก Selector ดึงออกมาแล้วจะถูกเรียกเป็นข้อมูล ชนิด Wrapper (ถ้าเป็น Javascript จะเป็น Element) Wrapper
ถ้าพูดเอาตามคำแปลก็หมายถึงถูกห่ออยู่ เป็นอย่างที่คำแปลจริงๆ Wrapper คือ Element ของ Javascript ที่ทาง JQuery นำมาห่อบางสิ่งบางอย่าง
เพื่อให้การใช้งานที่ง่ายขึ้น เวลา Select ออกมาได้หลายตัวเราเรียกว่า Wrapper set
Select แบบมีเงื่อนไข
ถ้าใน Webpage เรามี
ถ้าใน Webpage เรามี
<input id='text1' type='text'
size='10'/> <input type='text' id='text2' size='10'/>
ถ้าเราจะเลือกเอา input
ที่มีไอดี text1 ใน Jquery สิ่งที่แทนคำว่า id ให้ใช้ #
จริงๆใช้ id Select ได้เลือกเพราะในหน้า Web page นั้น id ห้ามมีซ้ำ แต่เพื่อเป็นการป้องกันไว้ก่อน ให้ใช้เงื่อนไขเยอะๆไว้
จริงๆใช้ id Select ได้เลือกเพราะในหน้า Web page นั้น id ห้ามมีซ้ำ แต่เพื่อเป็นการป้องกันไว้ก่อน ให้ใช้เงื่อนไขเยอะๆไว้
$('input:text#text1') หรือ $(':text#text1')
หรือ $('#text1')
ทั้งสามแบบใช้ได้หมด แต่แนะนำแบบแรกมากกว่าเพราะปลอดภัย
Select แบบหลายเงื่อนไข
ถ้าใน Webpage เรามี
ถ้าใน 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 เราประกอบด้วยพวกนี้
ถ้าใน 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
download และ save jqueryมาไว้ที่เครื่องแล้ว แต่เปิดไม่ได้ ฟ้อง error ช่วยทีค่ะ
ตอบลบscript: .....www\appserv\jquery-1.10.2.minmjs
line: 4
char: 1
error: 'window' is umdefined
code: 800A1391
source: Microsoft JScript runtime error