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

ฉันจะพูดตอนนี้ - คุณไม่จำเป็นต้องเรียนรู้ Javascript เพื่อใช้ jQuery คงจะดีที่สุดถ้าคุณคิดว่า jQuery เป็นวิวัฒนาการของ Javascript - เป็นวิธีที่ดีกว่าที่จะทำ - ไม่ใช่แค่ไลบรารีที่เพิ่มฟังก์ชันการทำงาน Javascript ใด ๆ ที่คุณต้องการจะถูกหยิบขึ้นมาระหว่างทาง อย่างไรก็ตาม ถือว่าในฐานะนักพัฒนาเว็บ คุณมีความรู้เกี่ยวกับ HTML และ CSS เป็นอย่างดี (และนี่คือคำแนะนำ xHTML ฟรีที่เป็นประโยชน์หากไม่ใช่! )

โมเดลวัตถุเอกสาร

jQuery เป็นข้อมูลเกี่ยวกับการข้ามผ่านและการจัดการของ คำพิพากษา - NS NS ocument หรือ bject NS โอเดล DOM คือการแสดงแผนผังลำดับชั้นของหน้าเว็บ ซึ่งสร้างโดยเบราว์เซอร์หลังจากอ่านโค้ด HTML ทั้งหมดแล้ว ใน jQuery เราจะใช้คำศัพท์เช่น พ่อแม่ , เด็ก , และ พี่น้อง ค่อนข้างบ่อย ดังนั้นคุณควรมีความคิดว่าสิ่งนี้หมายความว่าอย่างไรในความสัมพันธ์กับ DOM

แผนภาพง่ายๆนี้จากw3schoolsอธิบายแนวคิดได้ค่อนข้างดี คุณควรจะเห็นได้ว่า parent ของ element คือ ในขณะที่ the องค์ประกอบมีผลทันที

jQuery code codes here`

$ ('ตัวเลือก').กระบวนการ();

แค่นั้นแหละ ในชื่อเรื่องข้างบนนั้น นั่นคือโครงสร้างพื้นฐานของโค้ด jQuery ชิ้นเดียวเพื่อจัดการกับ DOM ง่ายใช่มั้ย?

NSตัวเลือกบอกให้ jQuery ค้นหาสิ่งที่ตรงกับกฎนี้ และเหมือนกับตัวเลือก CSS (และบางส่วนอยู่ด้านบน) เช่นเดียวกับใน CSS คุณจะจัดรูปแบบลิงก์ทั้งหมดด้วย

a { }

จะทำเช่นเดียวกันใน jQuery as

$('a')

สิ่งนี้สามารถทำได้สำหรับองค์ประกอบ HTML ใดๆ - div, h1, span - อะไรก็ตาม คุณยังสามารถใช้คลาส CSS และ ID เพื่อให้เจาะจงมากขึ้นได้อีกด้วย

ตัวอย่างเช่น หากต้องการค้นหาลิงก์ทั้งหมดที่มีคลาส 'findme' คุณจะใช้:

$('a.findme')

คุณไม่จำเป็นต้องระบุประเภทขององค์ประกอบในแต่ละครั้ง แต่หากคุณระบุ จะทำให้กฎมีความเฉพาะเจาะจงมากขึ้น พูดได้เลยว่า

$('.findme')

ซึ่งจะจับคู่ทุกอย่างกับคลาส หาฉัน ไม่ว่าจะเป็นลิงค์หรือไม่ก็ตาม

ในการใช้องค์ประกอบ ID ที่มีชื่อ ให้ใช้ the # ลงชื่อแทน ข้อแตกต่างที่สำคัญที่นี่คือตัวเลือก ID จะเลือกเพียงหนึ่งวัตถุเท่านั้น ในขณะที่ตัวเลือกคลาสอาจพบมากกว่าหนึ่งรายการ

วิธีรับ plex pass ฟรี

$('#something')

โดยทั่วไปถ้าคุณสามารถทำได้ใน CSS แล้ว jQuery จะทำเช่นกัน ที่จริงแล้ว คุณยังสามารถใช้ตัวเลือกหลอกสไตล์ CSS3 ที่ค่อนข้างซับซ้อนได้ เช่น :first

$('body p:first')

ซึ่งจะจับย่อหน้าของหน้า คุณพบองค์ประกอบที่มีคุณสมบัติบางอย่างเช่นกัน พิจารณาตัวอย่างนี้ เราต้องการหาลิงค์ทั้งหมดในหน้าที่ชี้ภายในไปยัง การแต่งหน้าของ และเน้นพวกเขาในทางใดทางหนึ่ง นี่คือวิธีที่เราสามารถหาได้:

$('a[href*='makeuseof']')

ไม่เจ๋งเหรอ? ฉันคิดว่ามันเป็น

พอร์ตการโทรครั้งต่อไปของคุณควรเป็น เอกสาร jQuery API สำหรับตัวเลือก . เป็นรายการขนาดใหญ่ของตัวเลือกประเภทต่างๆ ทั้งหมดที่มีให้ใช้งาน และไม่มีใครคาดคิดว่าคุณจะเรียนรู้ทั้งหมด

ส่วนต่อไปของสมการคือกระบวนการ- จะทำอย่างไรกับสิ่งเหล่านั้นเมื่อคุณพบทั้งหมดแล้ว - แต่เราจะทิ้งมันไว้สำหรับบทเรียนต่อไป หากคุณต้องการเริ่มต้นลองใช้ตัวเลือกต่างๆ ในตอนนี้ เราขอแนะนำให้คุณใช้วิธี css ต่อไปนี้ ต้องใช้สองพารามิเตอร์ - CSS ชื่อทรัพย์สิน และใหม่ ค่า เพื่อมอบให้กับทรัพย์สินนั้น ดังนั้น เพื่อให้ลิงก์ทั้งหมดเป็นสีพื้นหลังสีแดง คุณจะต้องทำดังนี้

$('a').css('background-color','red');

ง่ายพอ! แม้ว่าสิ่งนี้อาจไม่มีประโยชน์ใดๆ แต่จะช่วยให้คุณเห็นองค์ประกอบต่างๆ ที่อยู่ในตัวเลือกของคุณได้อย่างง่ายดาย ตอนนี้ออกไปและเลือก - DOM รอคุณอยู่

ฉันหวังว่าบทช่วยสอนนี้จะเป็นประโยชน์กับคุณ ฉันพยายามทำให้เข้าใจง่ายที่สุด อย่าลังเลที่จะถามคำถามใด ๆ ที่คุณมีหรือแสดงความคิดเห็น แต่โปรดทราบว่าฉันไม่ใช่นินจา jQuery ที่ยอดเยี่ยมอย่างแน่นอน

แบ่งปัน แบ่งปัน ทวีต อีเมล 5 เคล็ดลับในการเพิ่มพลังให้เครื่อง VirtualBox Linux ของคุณ

เบื่อกับประสิทธิภาพที่ย่ำแย่ของเวอร์ชวลแมชชีนหรือไม่? นี่คือสิ่งที่คุณควรทำเพื่อเพิ่มประสิทธิภาพ VirtualBox ของคุณ

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

วัฒนธรรมเว็บ
การพัฒนาเว็บ
JavaScript
การเขียนโปรแกรม
jQuery

เกี่ยวกับผู้เขียน เจมส์ บรูซ(เผยแพร่บทความ 707 ฉบับ)

James มี BSc ด้านปัญญาประดิษฐ์และได้รับการรับรองจาก CompTIA A+ และ Network+ เมื่อเขาไม่ได้ยุ่งในฐานะ Hardware Review Editor เขาสนุกกับ LEGO, VR และเกมกระดาน ก่อนร่วมงานกับ MakeUseOf เขาเป็นช่างเทคนิคแสงสว่าง ครูสอนภาษาอังกฤษ และวิศวกรศูนย์ข้อมูล

เพิ่มเติมจาก James Bruce

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก