4. ทำให้ html ของคุณเคลื่อนไหว
คุณสามารถใช้ jQuery เพื่อสร้างภาพเคลื่อนไหวและเอฟเฟกต์พื้นฐานได้ แกนหลักของเอฟเฟกต์ภาพเคลื่อนไหวคือฟังก์ชัน animate() ซึ่งสามารถเปลี่ยนสไตล์ CSS ที่ระบุได้ตลอดเวลา ตัวอย่างเช่น คุณสามารถเปลี่ยนความสูง ความกว้าง ความโปร่งใส หรือตำแหน่ง คุณยังสามารถระบุความเร็วของภาพเคลื่อนไหวได้ คุณสามารถใช้มิลลิวินาทีเมื่อเปลี่ยนความเร็ว (มิลลิวินาที) หรือคุณสามารถใช้ค่าความเร็วที่กำหนดไว้ล่วงหน้าได้ ต่อ
ไปนี้คือตัวอย่างภาพเคลื่อนไหวที่เปลี่ยนความกว้างและความสูงขององค์ประกอบในเวลาเดียวกัน ไม่ใช่ค่าเริ่มต้น มีเพียงค่าเริ่มต้นเท่านั้นที่สามารถนำมาจากองค์ประกอบที่มีอยู่ได้โดยตรง ในเวลาเดียวกัน ฉันยังได้เพิ่มฟังก์ชันการโทรกลับ:
$('#grow').animate({ height: 500) , width: 500 }, "slow", function() {alert('The element is Done grow!');}); การใช้ฟังก์ชันในตัวของ jQuery ทำให้การสร้างเอฟเฟกต์ภาพเคลื่อนไหวเป็นเรื่องง่าย ฟังก์ชัน show() และฟังก์ชัน Hide() เพื่อแสดงและซ่อนองค์ประกอบสามารถตั้งค่าให้ดำเนินการได้ทันทีหรือตามความเร็วที่กำหนด คุณยังสามารถใช้ฟังก์ชัน fadeIn() และ fadeOut() หรือฟังก์ชัน slideDown() และ slideUp() ได้อีกด้วย เพื่อแสดงหรือซ่อนองค์ประกอบ ขึ้นอยู่กับว่าคุณต้องการเอฟเฟกต์อะไร ต่อไปนี้คือตัวอย่างง่ายๆ ในการแสดงเอฟเฟกต์เลื่อนลงของแถบนำทาง:
$('#nav').slideDown('slow'); การเขียนสคริปต์และการจัดการเหตุการณ์ jQuery น่าจะดีที่สุดในการจัดการ DOM และการประมวลผลเหตุการณ์นั้นทำได้ง่ายมาก จริงๆ แล้วเป็นเรื่องง่ายมากที่จะสำรวจและใช้งาน DOM การผูก การลบ และการเรียกเหตุการณ์นั้นก็เป็นธรรมชาติมากและใช้งานง่ายเช่นกัน และเมื่อเปรียบเทียบกับการดำเนินการด้วยตนเอง การเขียนโค้ดเหล่านี้ ข้อผิดพลาดสามารถลดลงได้อย่างมาก ที่จริงแล้ว jQuery ช่วยให้การดำเนินการต่างๆ ของ DOM ง่ายขึ้น คุณสามารถสร้างองค์ประกอบและลิงก์ไปยังองค์ประกอบอื่นๆ ได้โดยใช้ฟังก์ชัน append() คุณสามารถคัดลอกองค์ประกอบโดยใช้ clone() ได้ ตั้งค่าเนื้อหาโดยใช้ html() คุณสามารถลบเนื้อหาโดยใช้ฟังก์ชัน Empty() และลบโดยใช้ () ฟังก์ชันจะลบองค์ประกอบและเนื้อหา และคุณยังสามารถใช้ฟังก์ชัน wrap() เพื่อล้อมองค์ประกอบนี้ด้วยองค์ประกอบอื่นได้ ฟังก์ชั่นที่สามารถเปลี่ยนเนื้อหาของวัตถุ jQuery ได้ด้วยการสำรวจ DOM คุณยังสามารถรับพี่น้อง() ขององค์ประกอบ , parent() หรือลูกๆ() คุณยังสามารถใช้ next() และ prev() ไปยัง find พี่น้อง find() อาจเป็นฟังก์ชันที่ทรงพลังที่สุดเมื่อจับคู่กับฟังก์ชัน end() ฟังก์ชัน end() ทำหน้าที่เหมือนกับการเลิกทำ ทำให้วัตถุ jQuery ของคุณถอยกลับไปเป็นเวลาที่คุณเรียกว่า find () หรือ parent() หรือสถานะอื่นใดก่อนฟังก์ชันการสำรวจเส้นทาง หากคุณใช้ลิงก์วิธีการที่เรากล่าวถึงข้างต้น ฟังก์ชันที่ซับซ้อนมาก สามารถนำไปใช้ด้วยโค้ดง่ายๆ Listing7 แสดงตัวอย่าง คุณจะพบแบบฟอร์มการเข้าสู่ระบบและดำเนินการบางอย่างกับองค์ประกอบต่างๆ ในนั้น ป้ายกำกับภายในแบบฟอร์มด้วย 'ทางเลือก' class.find( 'label.Option').hide().end()// เพิ่มเส้นขอบสีแดงให้กับช่องรหัสผ่านใดๆ ใน form.find('input:password') .css('border', '1px solid red'). end()// เพิ่มตัวจัดการการส่งไปที่ form.submit(function(){return ยืนยัน('คุณแน่ใจหรือไม่ว่าต้องการส่ง?');}) เชื่อหรือไม่ว่าจริงๆ แล้วตัวอย่างนี้มีโค้ด A ลิงก์เดียวและมีช่องว่างตรงกลาง ขั้นแรกฉันเลือกแบบฟอร์มการเข้าสู่ระบบ จากนั้นฉันพบป้ายกำกับเพิ่มเติมอยู่ข้างใน ซ่อนไว้ แล้วจึงเรียกว่า end( ) เพื่อกลับไปยังแบบฟอร์ม ฉันพบช่องป้อนรหัสผ่านและเปลี่ยนเส้นขอบเป็นสีแดง แล้วจึงเรียก end() อีกครั้งเพื่อกลับสู่แบบฟอร์ม สุดท้ายนี้ ฉันเพิ่มฟังก์ชันการประมวลผลเวลาการส่งลงในแบบฟอร์มนี้ สิ่งที่น่าสนใจคือนอกจากโค้ดที่กระชับมากแล้ว jQuery ยังเพิ่มประสิทธิภาพการดำเนินการทั้งหมดด้วยตัวเองเพื่อให้แน่ใจว่าเมื่อทุกอย่างเชื่อมต่อกันอย่างดี คุณไม่จำเป็นต้องค้นหาองค์ประกอบซ้ำสองครั้ง เรียกใช้ฟังก์ชัน click(), send() หรือ mouseover() แล้วส่งต่อไปยัง event Listener ฟังก์ชันก็เหมือนกัน นอกจากนี้ คุณยังสามารถใช้bind('eventname', function(){}) ได้อีกด้วย ระบุฟังก์ชันการประมวลผลเหตุการณ์ คุณสามารถใช้ unbind('eventname') เพื่อยกเลิกการเชื่อมโยงเหตุการณ์ หรือใช้ unbind() เพื่อยกเลิกการเชื่อมโยงเหตุการณ์ทั้งหมด สำหรับข้อมูลเพิ่มเติมเกี่ยวกับชุดฟังก์ชันนี้และวิธีใช้งาน โปรดดูการเขียนโปรแกรมแอปพลิเคชันของ jQuery เอกสารประกอบอินเทอร์เฟซ (API) 6. การเปิดเผยพลังของตัวเลือก jQuery
โดยปกติแล้ว คุณจะใช้ ID เพื่อเลือกองค์ประกอบ เช่น #myid หรือใช้ชื่อคลาสในการเลือก เช่น div.myclass ไวยากรณ์ตัวเลือกที่ให้คุณใช้ตัวเลือกเดียวเพื่อค้นหาการรวมกันขององค์ประกอบใด ๆ
ไวยากรณ์ตัวเลือกของ jQuery นั้นขึ้นอยู่กับ CSS3 และ XPath เป็นส่วนใหญ่ รวมถึง CSS3 และ XPath โปรดดูที่ลิงก์ทรัพยากรท้ายบทความนี้
CSS3 มีไวยากรณ์บางส่วนที่ได้รับการสนับสนุน ดังนั้นคุณอาจไม่เห็นมันบ่อยนัก อย่างไรก็ตาม คุณยังสามารถใช้มันเพื่อเลือกองค์ประกอบใน jQuery เนื่องจาก jQuery มีระบบแยกวิเคราะห์ตัวเลือกที่ปรับแต่งเอง ตัวอย่างเช่น หากต้องการเพิ่มเส้นประให้กับแต่ละคอลัมน์ว่างในตาราง คุณสามารถใช้ :empty pseudo-operator:
$('td:empty').html('- '); จะค้นหาทุกองค์ประกอบที่ไม่มีชื่อคลาสเฉพาะได้อย่างไร CSS3 มีไวยากรณ์เฉพาะสำหรับสถานการณ์นี้ โดยใช้ :not pseudo-operator class name. $('input:not(.required)').hide( ); คุณยังสามารถใช้เครื่องหมายจุลภาคเพื่อเชื่อมต่อตัวเลือกต่างๆ เข้าด้วยกันได้ เช่นเดียวกับใน CSS ในเวลาเดียวกัน $('ul, ol, dl' ).hide();XPath เป็นเครื่องมือที่ทรงพลังสำหรับการค้นหาองค์ประกอบในเอกสาร มันค่อนข้างแตกต่างจาก CSS และช่วยให้คุณค้นหาสิ่งต่าง ๆ มากมายที่ไม่สามารถพบได้โดยใช้ CSS ตัวอย่างเช่น คุณต้องการเพิ่ม For a border คุณสามารถทำได้: $("input:checkbox/..").css('border', '1px solid #777'); jQuery ยังมีตัวเลือกเพิ่มเติมอีกด้วย ไม่พบใน css และ XPath ตัวอย่างเช่น เพื่อเพิ่มความสามารถในการอ่านตาราง คุณอาจต้องการตั้งค่าแถวคี่และแถวคู่เพื่อใช้ชื่อคลาสที่แตกต่างกัน การทำสิ่งนี้ด้วย jQuery เป็นเรื่องง่าย ขอบคุณตัวเลือก :odd นี่คือโค้ดสาธิตการใช้คลาสลายเพื่อเปลี่ยนสีพื้นหลังของแถวเลขคี่ในตาราง: $('table.striped > tr:odd').css('พื้นหลัง', ' #999999'); ดูสิ ตัวเลือกอันทรงพลังของ jQuery สามารถทำให้โค้ดของคุณง่ายขึ้น ไม่ว่าคุณจะต้องการให้องค์ประกอบใดมีผล ไม่ว่าจะชัดเจนหรือพร่ามัวเพียงใด คุณสามารถหาวิธีกำหนดเป้าหมายได้โดยใช้ jQuery selector ง่ายๆ การขยาย jQuery โดยใช้ Plug-ins แตกต่างจากซอฟต์แวร์อื่นๆ ตรงที่การเขียน Plug-in jQuery ไม่ได้หมายความว่าเป็นการทดสอบที่เจ็บปวดกับ API ที่ซับซ้อนมากมาย ที่จริงแล้ว การเขียน Plug-in สำหรับ jQuery นั้นง่ายมากจนคุณอาจต้องการ เขียนปลั๊กอินในภายหลังเพื่อทำให้โค้ดของคุณกระชับมากขึ้น นี่คือส่วนพื้นฐานที่สุดของปลั๊กอินที่คุณจะเขียน: $.fn.donothing = function(){return this;}; จำเป็นต้องมีคำอธิบายเล็กน้อย ขั้นแรก คุณต้องเพิ่มฟังก์ชันให้กับแต่ละวัตถุ jQuery คุณต้องกำหนดให้กับ $.fn ประการที่สอง ฟังก์ชันจะต้องส่งคืนสิ่งนี้ (วัตถุ jQuery) เพื่อให้แน่ใจว่าจะไม่ทำลายวิธีการผูกมัด กฎที่กล่าวถึงข้างต้น คุณสามารถขยายโค้ดข้างต้นได้อย่างง่ายดาย หากต้องการเปลี่ยนสีพื้นหลังของปลั๊กอินแทนการใช้ css('พื้นหลัง') คุณสามารถทำได้: $.fn.พื้นหลัง = function(bg) {return this.css('พื้นหลัง', bg);}; โปรดทราบว่าฉันสามารถส่งคืนฟังก์ชัน css () ได้โดยตรง เนื่องจากเป็นวัตถุ jQuey อยู่แล้ว ดังนั้นการผูกมัดวิธีการจึงทำงานได้ดี ฉันแนะนำให้ใช้ปลั๊กอิน jQuery เมื่อคุณ พบว่าคุณกำลังเขียนโค้ดซ้ำอยู่ตลอดเวลา ตัวอย่างเช่น เมื่อคุณใช้แต่ละฟังก์ชัน ( ) เพื่อจัดการสิ่งเดียวกันซ้ำแล้วซ้ำอีก คุณอาจพิจารณาใช้ปลั๊กอิน [Annotation: Not very clear.] เนื่องจากปลั๊กอิน jQuery ง่ายต่อการพัฒนา มีปลั๊กอินมากมายให้คุณใช้ jQuery มีปลั๊กอินสำหรับตาราง มุมโค้งมน สไลด์โชว์ คำแนะนำเครื่องมือ การเลือกวันที่ และแอปพลิเคชันต่างๆ ที่คุณนึกถึง รายการปลั๊กอินทั้งหมดในรายการทรัพยากรที่ส่วนท้ายของบทความนี้ ปลั๊กอินที่ซับซ้อนและใช้กันอย่างแพร่หลายที่สุดคืออินเทอร์เฟซ ซึ่งเป็นปลั๊กอินแอนิเมชันที่จัดการการเรียงลำดับ เอฟเฟกต์การลาก เอฟเฟกต์พิเศษที่ซับซ้อนต่างๆ และอื่นๆ เอฟเฟกต์อินเทอร์เฟซผู้ใช้ที่น่าสนใจและซับซ้อน อินเทอร์เฟซสำหรับ jQuery สิ่งที่ Scriptaculous เป็นปลั๊กอินที่ได้รับความนิยมและมีประโยชน์ไม่แพ้กันคือปลั๊กอิน Form ช่วยให้คุณสามารถส่งแบบฟอร์มในพื้นหลังโดยใช้ ajax สถานการณ์นี้: เมื่อคุณต้องการจี้เหตุการณ์การส่งแบบฟอร์ม ให้ค้นหาฟิลด์เอาต์พุตข้อความที่แตกต่างกันทั้งหมด และใช้ฟิลด์เหล่านี้เพื่อสร้างการเรียก ajax 8. jQuery หลังจากนั้น ฉันเพิ่งพูดถึงเรื่องผิวเผินบางอย่างเกี่ยวกับ jQuery น่าสนใจที่จะใช้เพราะคุณสมบัติใหม่และวิธีการใหม่ที่คุณเรียนรู้นั้นดูเป็นธรรมชาติและสมเหตุสมผลมาก เมื่อคุณใช้ jQuery คุณจะรู้ว่ามันสามารถทำให้การพัฒนา Javascript และ Ajax ของคุณง่ายขึ้น ทุกครั้งที่คุณเรียนรู้บางสิ่ง โค้ดก็จะง่ายขึ้น
หลังจากเรียนjQuery
ฉันพบว่ามีความสนุกสนานมากมายในการเขียนโปรแกรม Javascript และสิ่งที่น่าเบื่อทั้งหมดได้รับการจัดการอย่างดี ดังนั้นฉันแค่ต้องมุ่งเน้นไปที่ส่วนหลัก หลังจากใช้ jQuery ฉันแทบจะจำไม่ได้ว่าครั้งสุดท้ายที่ฉันใช้ for คืออะไร ฉันกลัวการใช้ไลบรารี Javascript อื่นด้วยซ้ำ เปลี่ยนมุมมองของฉันในการเขียนโปรแกรม Javascript โดยสิ้นเชิง