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

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

ภายในของคนอื่น ๆ วัตถุ ฯลฯ ฯลฯ , จนหน้าเว็บทั้งหมดของคุณมี รับการจัดในวัตถุขนาดใหญ่นี้ กลับหัวกลับหางอะไรที่นี่ใช่มั้ย? ดีที่เรารู้วิธีการทำงาน กับวัตถุใน JavaScript 

ดังนั้นถ้าเรามีวัตถุที่ หมายถึงหน้าเว็บของเราทั้งหมดว่า หมายความว่าโดยการเรียกที่ถูกต้อง วิธีการที่จะจัดการกับวัตถุนั้น หรือการปรับเปลี่ยนบางอย่าง คุณสมบัติของเรา สามารถเปลี่ยนองค์ประกอบของ โปรแกรมหน้าของเรา โดยใช้ JavaScript แทนที่จะต้อง รหัสสิ่งที่มีการพูด, HTML ดังนั้นนี่คือตัวอย่างของหนึ่ง หน้าเว็บที่ง่ายมากใช่มั้ย? มันมีแท็กหัว 

ภายในมีชื่อสวัสดีโลก แล้วฉันมีร่างกาย ภายในของที่ฉันมี สามสิ่งที่แตกต่างกัน ฉันมีแท็กส่วนหัว h2, ย่อหน้าและการเชื่อมโยง นี่คือหน้าเว็บที่ง่ายมาก 

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

ภายในของเอกสารเป็นอีกหนึ่ง วัตถุหมายถึง HTM​​L ของหน้าเว็บ และ HTML ของหน้าของฉันคือทั้งหมดนี้ และจากนั้นภายในของ HTM​​L วัตถุที่ผมมีวัตถุหัว ซึ่งหมายถึงทุกอย่างที่มี 

และภายในของที่นั่น ฉันมีวัตถุชื่อ และภายในของที่นั่นผมมีอีก วัตถุที่เพียงสวัสดีโลก ฉันจะได้ร่างกายของฉัน เป็นตัวแทนเช่นนี้ 

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

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

และฉันได้เปิดเครื่องมือสำหรับนักพัฒนา และในวิดีโอของฉันใน JavaScript ผม บอกว่าคอนโซลไม่ได้ บางแห่งที่มีเพียง เราพิมพ์ข้อมูล ก็ยังเป็นสถานที่ที่ เราสามารถป้อนข้อมูล ในบริบทนี้สิ่งที่ ฉันจะบอกก็คือ ฉันต้องการที่จะได้รับกลับมา วัตถุเอกสาร เพื่อให้สามารถเริ่มต้นที่จะมีลักษณะที่มัน ดังนั้นวิธีที่ผมอาจจะทำเช่นนี้? ดีถ้าผมต้องการที่จะ จัดระเบียบมันจริงๆอย่าง ฉันจะบอกว่า console.dir, D-I-R ตอนนี้ผมใช้ console.log ที่จะพิมพ์เพียง ออกจากสิ่งที่ง่ายมาก แต่ถ้าผมต้องการที่จะจัดระเบียบนี้ ลำดับชั้นเช่นวัตถุ ฉันต้องการจัดเรียงของโครงสร้าง เช่นโครงสร้างไดเรกทอรี 

ดังนั้นผมจึงต้องการที่จะ console.dir เอกสาร ฉันจะกด Enter และขวาด้านล่างได้ในขณะนี้ และฉันจะซูมในที่นี่ ฉันมีเอกสารการตอบสนองนี้ ที่มีลูกศรเล็ก ๆ ถัดไป ตอนนี้เมื่อฉันเปิดลูกศรนี้ มีจะมีจำนวนมากของสิ่งที่ 

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

ดังนั้นฉันจะเปิดขึ้นนี้ และมีเป็นจำนวนมากทั้ง ของสิ่งที่ปรากฏขึ้น แต่สิ่งที่ผมสนใจคือ ที่นี่โหนดลูก ลองเปิดขึ้นมา 

ภายในมีฉันเห็น สิ่งที่คุ้นเคย, HTML ดังนั้นภายในของเอกสารของเรา หนึ่งระดับลง HTM​​L ฉันเปิดขึ้นมา สิ่งที่เราคาดหวัง? 

ถ้าคุณจำจากแผนภาพของเรา สิ่งที่เราควรจะหาภายในของ HTM​​L ได้ไหม? สิ่งที่สองโหนดอยู่ด้านล่างในต้นไม้? ลองหา เราเปิด HTML เราลงไปโหนดลูกของตน 

ป๊อปอัพเปิดได้ มีหัวและลำตัวเป็น และเราสามารถเปิดหัว ไปที่โหนดลูกของตน ดีมีชื่อ 

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

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

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

และนั่นคือความสามารถในการที่จะเย็นสวย มีเมื่อเรากำลังทำงานกับรหัส ดังนั้นสิ่งที่บางส่วนของคุณสมบัติเหล่านี้ ที่เป็นส่วนหนึ่งของวัตถุเอกสารหรือไม่? ดีคุณอาจจะเห็น คู่ของพวกเขาได้อย่างรวดเร็วจริงๆ ขณะที่เรากำลังซิป ผ่านเอกสารยักษ์ วัตถุที่เราเห็นในเว็บเบราเซอร์ 

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

และเพื่อให้ HTML ภายใน ตัวอย่างของชื่อ แท็กถ้าเราได้เก็บไปใน ตัวอย่างเช่นช่วงเวลาที่ผ่านมา จะได้รับการทักทายโลก นั่นคือชื่อของเพจของเรา คุณสมบัติอื่น ๆ รวมถึงชื่อโหนดซึ่ง เป็นชื่อของ HTM​​L ได้ องค์ประกอบเช่นชื่อ ID ซึ่งเป็นรหัส แอตทริบิวต์ขององค์ประกอบ HTML 

จำได้ว่าเราเป็นพิเศษสามารถบ่งบอกถึง องค์ประกอบที่เฉพาะเจาะจงของ HTM​​L ของเรา ด้วยคุณลักษณะที่ ID ซึ่งมักจะ มีประโยชน์ในบริบทของ CSS ที่ เฉพาะ โหนดแม่ซึ่งเป็นการอ้างอิงถึง สิ่งที่เป็นเพียงแค่ขึ้นไปข้างบนผมในดอม และโหนดลูกซึ่งเป็น อ้างอิงถึงสิ่งที่ผมลงมาด้านล่าง และเราเห็นมากว่า เพียงแค่มองผ่าน โหนดลูกว่าเป็นวิธีที่เราได้ และลดลงในต้นไม้ 

คุณสมบัติที่เพียงอาร์เรย์ ของคุณลักษณะขององค์ประกอบของ HTM​​L ดังนั้นตัวอย่างของการกำหนดคุณสมบัติอาจ ถ้าคุณมีแท็กภาพ มันมักจะมีแหล่งที่มาของแอตทริบิวต์ที่ อาจจะเป็นความสูงและความกว้างของคุณลักษณะ และนั่นก็จะเป็นอาร์เรย์ ทั้งหมดของคุณลักษณะที่เกี่ยวข้อง ด้วยองค์ประกอบ HTML ที่ 

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

และยังมีบาง วิธีการที่เราสามารถทำได้ ใช้ในการนี​​้ยังได้รวดเร็วยิ่งขึ้นอาจจะแยก องค์ประกอบของวัตถุเอกสาร บางทีอาจจะเป็นหลากหลายที่สุด ของเหล่านี้เป็น getElementById ดังนั้นผมอาจจะบอกว่าสิ่งที่ต้องการเพราะ จำได้ว่ามันเป็นวิธีการของเอกสารที่ วัตถุ document.getElementById 

และภายในของผู้วงเล็บระบุ องค์ประกอบ HTML ที่มีรหัสเฉพาะ แอตทริบิวต์ที่ฉันได้ก่อนหน้านี้ การตั้งค่าและฉันจะทันที ไปทางขวาไปที่องค์ประกอบ ของเว็บไซต์โดยรวม ดังนั้นผมจึงไม่อาจจะต้องเจาะ ลงผ่านทุกชั้นเดียว ฉันเพียงแค่สามารถใช้วิธีนี้จะหาได้ ประเภทเช่นการแสวงหาความร้อนขีปนาวุธ, ขวา? ก็แค่ไปและพบว่า ว่าสิ่งที่กำลังมองหา 

getElementsByTagName คือ คล้ายกันมากในจิตวิญญาณ นี้อาจจะพบทั้งหมดของ แท็กหนาหรือทั้งหมดของแท็กพี และให้ฉันอาร์เรย์ของทุกสิ่ง ที่ผมก็จะทำงานร่วมกับ appendChild เพิ่มสิ่ง หนึ่งระดับลงในต้นไม้ 

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

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

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

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

เราต้องการที่จะสามารถที่จะทำสิ่งที่ได้อย่างรวดเร็ว ดังนั้นเราจึงต้องการที่มากขึ้น วิธีที่รัดกุมที่จะพูดอะไรบางอย่าง ดังนั้นการจัดเรียงของที่จะนำไปสู่​​การนี​​้ ความคิดของสิ่งที่เรียกว่า jQuery ตอนนี้ไม่ได้เป็น jQuery JavaScript มันไม่ได้เป็นส่วนหนึ่งของ JavaScript 

มันเป็นห้องสมุดที่เขียน โดยบางส่วนเขียนโปรแกรมจาวาสคริปต์ ประมาณ 10 ปีที่ผ่านมา และเป้าหมายที่จะลดความซับซ้อนนี้สิ่งที่ ที่เรียกว่าสคริปต์ฝั่งไคลเอนต์ที่ เป็นพื้นสิ่งที่เราเป็นเพียงแค่ พูดคุยเกี่ยวกับกิจวัตร DOM ดังนั้นถ้าผมต้องการที่จะปรับเปลี่ยน สีพื้นหลังของหน้าเว็บของฉันอาจจะ เฉพาะกอง 

ที่นี่ผมเห็นได้ชัดว่าได้รับ ElementById colorDiv และผมต้องการที่จะกำหนดสีพื้นหลังของมัน ถ้าฉันเพียงแค่ใช้ JavaScript บริสุทธิ์ โดยใช้รูปแบบวัตถุเอกสารให้ ที่มากของสิ่งที่ใช่มั้ย? document.getElementById colorDiv.style.backgroundColor = สีเขียว 

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

อย่างน้อยเป็นเวลานานมากขึ้นอีกนิด อธิบายเป็นสิ่งที่เรากำลังทำ เครื่องหมายดอลลาร์นี้วงเล็บ คำพูดเดียว, กัญชา colorDiv ใช่มั้ย? นั่นหมายความว่าอย่างไร? ดีที่เป็นเพียง document.getElementById colorDiv 

แต่มันก็เรียงลำดับของชวเลขนี้ วิธีการทำโดยใช้ jQuery ขอเพียงใช้เวลาดูในขณะนี้ ที่สองวิธีที่แตกต่างกัน ที่ผมอาจจะจริง ใช้วัตถุเอกสารนี้ รุ่นที่จะจัดการกับชิ้นส่วนของเว็บไซต์ของฉัน โดยเฉพาะอย่างยิ่งที่เรากำลังจะ จะทำงานในการจัดการ สีของโดยเฉพาะอย่างยิ่ง Div, colorDiv บนหน้าเว็บ ดังนั้นลองมาดูที่ว่า ทั้งหมดขวา ดังนั้นฉันบนหน้าเว็บ มันเรียกว่า test.html เมื่อคุณดาวน์โหลด นี้ถ้าคุณต้องการให้คนจรจัดกับเรื่องนี้ และฉันมีพวงของ ปุ่มบนหน้านี้ และฉันบอกว่าฟังก์ชั่นของแต่ละบุคคล สำหรับสีพื้นหลัง, สีม่วง, สีเขียว, สีส้ม, สีแดง, สีฟ้า, หนึ่งฟังก์ชั่นเดียว สำหรับสีพื้นหลังจัดการเหตุการณ์ สีพื้นหลังและใช้ jQuery สิ่งที่ฉันพูดคุยเกี่ยวกับ เมื่อฉันทำเช่นนี้? ดังนั้นเราจึงได้เห็นปุ่ม ตอนนี้ขอดูที่ บางส่วนของรหัสที่มาที่นี่ เราจะเริ่มต้นด้วย test.html ฟังก์ชั่นของแต่ละบุคคลดังนั้นสำหรับพื้นหลัง สีเป็นสิ่งที่ผมได้พิมพ์ที่นี่ ผมขอเลื่อนนิด ๆ หน่อย ๆ 

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

มันจะดีถ้าผม มีวิธีการทั่วไปมากขึ้น ดีแรกเราจะมาดู ในสิ่งที่ห้าฟังก์ชั่น document.getElementById colorDiv.style.background = สีม่วง สีเขียว, สีส้ม, สีแดง, และสีฟ้าตามลำดับ ดังนั้นไม่ได้โดยเฉพาะการออกแบบที่ดีที่สุด 

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

แต่ผมอาจจะสามารถ เลยดีกว่าว่า ถ้าเราไปลงที่จะดู ที่เหตุการณ์สถานการณ์จัดการ, ตอนนี้ทุกสายเหล่านี้มีลักษณะเดียวกัน ถ้าคุณจำสำหรับเรา อภิปรายเกี่ยวกับการจัดการเหตุการณ์ ฉันจะได้รับข้อมูลเกี่ยวกับการ ปุ่มเหล่านี้ได้รับการคลิกและการใช้งานที่ 

และใน event.JavaScript เราได้ เขียนเหตุการณ์เปลี่ยนสีซึ่ง ตัวเลขที่ออกมาซึ่งได้รับการคลิกปุ่ม นั่นเป็นเส้นวัตถุไก และแล้วที่นี่จะได้รับการพูดมากจริงๆ แต่สิ่งที่ฉันทำคือฉัน การตั้งค่าพื้นหลัง สีให้ triggerObject inner.HTML นั่นคือข้อความใน ระหว่างแท็กปุ่ม 

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

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

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

เห็นได้ชัดว่าการสร้าง ที่ไม่ระบุชื่อฟังก์ชั่น เมื่อใดก็ตามที่โหลดเอกสารของฉัน พร้อมดังนั้น document.ready, ฟังก์ชั่นบางอย่างที่จะเกิดขึ้น โดยทั่วไปเมื่อเอกสารพร้อมหรือไม่? ก็เมื่อหน้าเว็บของฉันมีการโหลด 

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

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

นี่คือความคิดของ ปุ่มที่ถูกคลิก แต่อย่างอื่นนี่คือการจัดเรียงของ มีพฤติกรรมคล้ายกับเหตุการณ์ มันเป็นเพียงวิธีการเดียวกับผม จะแสดงใน jQuery อีกครั้งก็อาจเป็น จำนวนมากน่ากลัวมากขึ้น มันไม่ได้เป็นที่ชัดเจนเป็น สิ่งที่ต้องการ event.js, ซึ่งอาจจะนิด ๆ หน่อย ๆ อย่างละเอียด แต่นิด ๆ หน่อย ๆ น้อย ที่ทำให้กลัว 

แต่ถ้าเราปรากฏกลับไปยังเบราว์เซอร์ หน้าต่างถ้าผมเริ่ม clicking-- ดี ที่เปลี่ยนเป็นสีม่วง นี้เป็นสีเขียวโดยใช้วิธีสตริง นี่คือการใช้สีส้มจัดการเหตุการณ์ 

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