jQuery เป็นไลบรารี Javascript ที่ทำให้การเขียนโปรแกรม JavaScript™ และ AJAX (Asynchronous JavaScript + XML, Asynchronous Javascript และ XML) ง่ายขึ้น แตกต่างจากไลบรารี Javascript อื่น ๆ jQuery มีปรัชญาของตัวเองที่ทำให้คุณเขียนโค้ดได้ง่าย บทความนี้จะนำคุณไปสู่ความเข้าใจปรัชญาของ jQuery อภิปรายการคุณสมบัติและฟังก์ชันต่างๆ และให้ตัวอย่าง Ajax และวิธีใช้ปลั๊กอินเพื่อขยาย jQuery
1. เจคิวรี่คืออะไร?
jQuery เป็นไลบรารี Javascript ที่ยอดเยี่ยม ก่อตั้งในปี 2549 และถูกสร้างขึ้นโดย John Resig ไม่ว่าคุณจะเป็นมือใหม่ JavaScript แต่ต้องการลองใช้ความซับซ้อนของ DOM (Document Object Model) และ Ajax หรือคุณเป็นผู้เชี่ยวชาญ JavaScript แต่เบื่อที่จะทำซ้ำสคริปต์ DOM และ Ajax ที่น่าเบื่อ jQuery จะเป็นตัวเลือกที่ดีที่สุดของคุณ ทางเลือกที่ดีที่สุดของคุณ .
jQuery จะช่วยให้คุณรักษาโค้ดของคุณให้เรียบง่ายและกระชับ คุณไม่จำเป็นต้องเขียนลูปหรือสคริปต์การโทร DOM ซ้ำๆ อีกต่อไป เมื่อใช้ jQuery คุณจะพบประเด็นสำคัญอย่างรวดเร็วและแสดงความคิดเห็นของคุณด้วยโค้ดที่น้อยที่สุด
จริงๆ แล้วปรัชญาของ jQuery นั้นง่ายมาก: เรียบง่ายและนำกลับมาใช้ใหม่ได้ เมื่อคุณเข้าใจและเห็นด้วยกับแนวคิดนี้ คุณจะเริ่มรู้ว่าการใช้ jQuery สามารถทำให้การเขียนโปรแกรมของคุณเป็นเรื่องง่ายและสนุกได้อย่างไร!
2. แนวคิดง่ายๆ
ต่อไปนี้เป็นตัวอย่างง่ายๆ เพื่อแสดงให้คุณเห็นว่า jQuery ส่งผลต่อโค้ดที่คุณเขียนอย่างไร สิ่งที่คุณทำนั้นง่ายมาก เช่น การเพิ่มเหตุการณ์ตอบสนองการคลิกไปยังลิงก์ทั้งหมดในพื้นที่ใดพื้นที่หนึ่งบนหน้า คุณสามารถใช้ Javascript และ DOM ทั่วไปในการเขียนโค้ดได้ ดูรายการที่ 1
โดยไม่ต้องใช้สคริปต์ DOM jQuery
var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) {var link = links.item(i) ;link.onclick = function() {return comparison('You are going to visit: ' + this.href);};} หากคุณใช้ jQuery การใช้งานจะเป็นดังนี้: รายการ 2. การเขียนสคริปต์ DOM ด้วย jQuery$(' #external_links a').click( function() {return Confirm('You are going to visit: ' + this.href);}); แปลกใจใช่ไหม? ด้วย jQuery คุณสามารถค้นหาประเด็นสำคัญได้อย่างรวดเร็วและแสดงเฉพาะสิ่งที่คุณต้องการแสดงโดยไม่ต้องใช้คำพูด ไม่จำเป็นต้องวนซ้ำองค์ประกอบเหล่านี้ ฟังก์ชัน click() จะจัดการทุกอย่างเอง และคุณไม่จำเป็นต้องเขียนโค้ดมากเกินไปเพื่อจัดการ DOM สิ่งที่คุณต้องมีคือใช้อักขระสองสามตัวเพื่อกำหนดองค์ประกอบที่คุณกำลังมองหา มาดูกันว่าโค้ดนี้ทำงานอย่างไรพร้อมคำแนะนำเล็กๆ น้อยๆ ขั้นแรก ให้ดูที่ฟังก์ชัน $() ซึ่งเป็นหนึ่งในฟังก์ชันที่มีประโยชน์และทรงพลังที่สุดใน jQuery โดยส่วนใหญ่ คุณจะใช้ฟังก์ชันนี้เพื่อเลือกองค์ประกอบจากเอกสาร ในตัวอย่างนี้ ใช้ฟังก์ชันนี้เพื่อส่งผ่านสำหรับสตริงใน Cascading ไวยากรณ์สไตล์ชีต (CSS) jQuery สามารถค้นหาองค์ประกอบนี้ได้อย่างง่ายดาย หากคุณรู้เพียงเล็กน้อยเกี่ยวกับตัวเลือก CSS พื้นฐาน ฉันคิดว่าไวยากรณ์นี้น่าจะดูคุ้นเคยดี ใน Listing2 นั้น # external_links ถูกใช้เพื่อค้นหาองค์ประกอบที่มี id external_links การเว้นวรรคต่อไปนี้หมายความว่า jQuery จำเป็นต้องค้นหาองค์ประกอบ <a> ทั้งหมดภายในองค์ประกอบ #external_links เป็นเรื่องยากเล็กน้อยที่จะแสดงเป็นภาษาพูด - การเขียนด้วยสคริปต์ DOM ก็ค่อนข้างลำบากเช่นกัน อย่างไรก็ตาม ใน CSS ไม่มีอะไรง่ายไปกว่านี้แล้ว ฟังก์ชัน $() จะส่งคืนวัตถุ jQuery ที่มีองค์ประกอบทั้งหมดที่ตรงกับตัวเลือก css แนวคิดของวัตถุ jQuery ก็เหมือนกับอาร์เรย์ แต่อาจมีวัตถุ jQuery จำนวนมาก ตัวอย่างเช่น คุณสามารถเรียกใช้ฟังก์ชันคลิกได้ ฟังก์ชันเพื่อผูกการตอบสนองต่อเหตุการณ์การคลิกไปยังแต่ละองค์ประกอบในวัตถุ jQuery
คุณยังสามารถส่งองค์ประกอบหรืออาร์เรย์ขององค์ประกอบไปยังฟังก์ชัน $() ซึ่งจะเพิ่มองค์ประกอบทั้งหมดลงในวัตถุ jQuery คุณอาจต้องการใช้ คุณลักษณะนี้กับวัตถุเช่น windows ตัวอย่างเช่น คุณอาจใช้ฟังก์ชันนี้เพื่อโหลดเหตุการณ์เช่นนี้
window.onload = function() {// ทำสิ่งนี้เมื่อโหลดเพจเสร็จแล้ว}; หากใช้ jQuery คุณสามารถเขียนได้ดังนี้:
$(window).load(function() {// รันสิ่งนี้เมื่อดาวน์โหลดทั้งหน้า}); ดังที่คุณทราบ การรอหน้าต่างโหลดนั้นเจ็บปวดอย่างยิ่งเพราะต้องโหลดทั้งหน้า รวมถึงทุกอย่างในนั้นด้วย รูปภาพหน้า ในบางกรณี คุณต้องโหลดรูปภาพก่อน แต่โดยส่วนใหญ่ คุณอาจต้องเห็นเพียงไฮเปอร์เท็กซ์มาร์กอัป (HTML) เท่านั้น จึงจะแก้ปัญหานี้ได้ด้วยการสร้างเหตุการณ์พิเศษที่พร้อมอยู่บนเอกสาร วิธีการใช้งานมีดังนี้: $(document).ready(function() {// do this stuff when the HTML is all ready}); รหัสนี้สร้างวัตถุ jQuery ขององค์ประกอบเอกสารแล้วเรียกมันเมื่อ html DOM เอกสารพร้อมแล้ว คุณสามารถเรียกใช้ฟังก์ชันนี้ได้ไม่จำกัดจำนวนครั้ง นอกจากนี้
ในการเขียนโค้ดสไตล์ jQuery อย่างแท้จริง ยังมีรูปแบบชวเลขของฟังก์ชันนี้อีกด้วย เพียงส่งฟังก์ชันไปยังฟังก์ชัน $()
$(function() {// รันสิ่งนี้เมื่อดาวน์โหลด HTML เสร็จแล้ว}); จนถึงตอนนี้ ฉันได้แสดงให้คุณเห็นสามวิธีในการใช้ฟังก์ชัน $() วิธีที่สี่ คุณสามารถใช้ String Creates an element ผลลัพธ์ที่ได้คือออบเจ็กต์ jQuery ที่มีองค์ประกอบนี้ รายการ 3 แสดงตัวอย่างการเพิ่มย่อหน้าลงในเพจ:
รายการ 3 การสร้างและการต่อท้ายย่อหน้าแบบง่าย
$('<p></p>') !').css('พื้นหลัง', 'สีเหลือง').appendTo("body"); ดังที่คุณเห็นจากตัวอย่างข้างต้น คุณลักษณะที่มีประสิทธิภาพอีกอย่างหนึ่งของ jQuery คือการเชื่อมโยงเมธอด (การเชื่อมโยงเมธอด) ทุกครั้งที่คุณเรียกใช้ วิธีการบนวัตถุ jQuery วิธีนี้จะส่งคืนวัตถุ jQuery ซึ่งหมายความว่าหากคุณต้องการเรียกใช้หลายวิธีบนวัตถุ jQuery คุณไม่จำเป็นต้องเขียนตัวเลือก css ซ้ำ ๆ ซึ่งอาจมีลักษณะดังนี้:
$('#message').css('พื้นหลัง', 'สีเหลือง').html('Hello!').show();3.jQuery ทำให้ Ajax ง่ายมาก การใช้ jQuery ทำให้ Ajax ไม่สามารถง่ายกว่านี้ได้ มีชุดฟังก์ชันที่สามารถทำให้สิ่งที่เรียบง่ายเป็นเรื่องง่ายและทำให้สิ่งที่ซับซ้อนเรียบง่ายที่สุดเท่าที่จะเป็นไปได้ การใช้งานทั่วไปของ Ajax คือการโหลดโค้ด html ลงในพื้นที่ใดพื้นที่หนึ่งบนหน้าเว็บ ในการดำเนินการนี้ คุณเพียงแค่เลือก องค์ประกอบและใช้ฟังก์ชัน load() นี่คือตัวอย่างของการอัปเดตสถิติบางอย่าง $('#stats').load('stats.html'); โดยทั่วไปคุณอาจต้องส่งพารามิเตอร์บางตัวไปยังเซิร์ฟเวอร์- อย่างที่คุณอาจเดาได้ การใช้ jQuery นั้นง่ายมาก คุณสามารถเลือกใช้ $.post() หรือ $.get() ได้ ขึ้นอยู่กับความต้องการเฉพาะของคุณ คุณสามารถผ่าน ออบเจ็กต์ข้อมูลเสริมและฟังก์ชันการโทรกลับ รายการ 4 เป็นตัวอย่างง่ายๆ ของการส่งข้อมูลและการใช้ฟังก์ชันการโทรกลับ:
รายการ 4 การส่งข้อมูลไปยังเพจด้วย Ajax
$.post('save.cgi', {text: 'my string' ,number: 23}, function() {alert('Your data has been Saved.');}); หากคุณต้องการโค้ด Ajax ที่ซับซ้อนจริงๆ ให้ใช้ฟังก์ชัน $.ajax() คุณสามารถระบุประเภทข้อมูลเป็น xml, html, script หรือ json, jQuery จะเตรียมผลลัพธ์ให้คุณโดยอัตโนมัติ และฟังก์ชัน callback ของคุณสามารถใช้ข้อมูลได้ทันที คุณยังสามารถตั้งค่า beforeSend, error, Success และฟังก์ชัน callback ให้สมบูรณ์เพื่อให้คำแนะนำเพิ่มเติมแก่ผู้ใช้เกี่ยวกับ ajax นอกจากนี้ยังมีพารามิเตอร์บางตัวที่ให้คุณตั้งค่าการหมดเวลาสำหรับคำขอ ajax หรือสถานะ "เปลี่ยนแปลงล่าสุด" ของเพจได้ Listing5 แสดงตัวอย่างการรับเอกสาร xml และใช้วิธีการที่ฉันกล่าวถึงข้างต้น ตัวอย่างของพารามิเตอร์บางตัว:
รายการ 5. Ajax ที่ซับซ้อนทำให้ง่ายขึ้นด้วย $.ajax()
$.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000, error: function (){alert('Error Loading XML document');},success: function(xml){// do some with xml}}); เมื่อคุณได้รับความคิดเห็นเกี่ยวกับ xml สำเร็จ คุณสามารถใช้ jQuery เพื่อสำรวจเอกสาร xml ได้ เช่นเดียวกับที่คุณทำกับ html สิ่งนี้ทำให้การจัดการไฟล์ xml เป็นเรื่องง่ายและรวมเนื้อหาเข้ากับเพจ Listing6 ขยายฟังก์ชันความสำเร็จตามแต่ละ <item> ในเอกสาร xml บนเพจที่เพิ่มรายการ
6 การทำงานกับ XML โดยใช้ jQuery
สำเร็จ: function(xml){$(xml).find('item').each(function(){var item_text = $(this). text();$('<li>< /li>').html(item_text).appendTo('ol');});}