JQuery เป็นห้องสมุดที่ยอดเยี่ยม ช่วยหลีกเลี่ยงข้อผิดพลาดทั้งหมดของ IE6 ได้อย่างสมบูรณ์แบบ ในอดีต ความเข้ากันได้ข้ามเบราว์เซอร์เป็นปัญหาใหญ่ที่นักพัฒนาต้องเผชิญ Jquery จัดการได้ดีกับความคลาดเคลื่อนในการแสดงเลย์เอาต์ในเบราว์เซอร์ต่างๆ

ปัจจุบัน เบราว์เซอร์มีโซลูชันแบบครบวงจรที่ยอดเยี่ยม เราสามารถใช้สิทธิพิเศษทั้งหมดของ ES5 ได้อย่างสะดวกสบาย และเรายังมี HTML5 API ให้เลือกใช้ ซึ่งทำให้การประมวลผลองค์ประกอบ DOM ง่ายขึ้นมาก นักพัฒนาใกล้จะลืมเลือนและเลิกใช้ jQuery ในบางโครงการ โดยเฉพาะในกรณีของไมโครเซอร์วิสและโปรแกรมที่ไม่ซับซ้อน

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

ต่อไปนี้เป็นโค้ดการทำงาน 10 ตัวอย่างที่คุณสามารถทำได้โดยไม่ต้องใช้ jquery

ติดตามเหตุการณ์การโหลดหน้าเว็บเสร็จสมบูรณ์

สิ่งแรกที่คุณทำเมื่อใช้ jQuery คือการล้อมโค้ดด้วยเมธอด $(document).ready() เพื่อทราบว่า DOM พร้อมสำหรับการจัดการเมื่อใด หากไม่มี Jquery เราสามารถใช้เหตุการณ์ DOMContentLoaded ได้ นี่คือตัวอย่างโค้ด:

// ฟังเหตุการณ์ DOMContentLoaded สำหรับทั้งเอกสารด้วยฟังก์ชันที่ไม่ระบุชื่อ // คุณสามารถล้อมโค้ดของคุณไว้ในอ้อมแขนของฟังก์ชันนี้ // และจะดำเนินการเมื่อมีการโหลดเพจ document.addEventListener("DOMContentLoaded", function () ( // คำทักทายภาษาฮาวายของเราจะแสดงในคอนโซล console.log("Aloha"); ));

ตัวเลือกองค์ประกอบที่ไม่มี Jquery

วันหนึ่ง เราจะต้องเลือกองค์ประกอบโดยใช้ id คลาส หรือแท็ก และ jQuery ก็เป็นหนึ่งในองค์ประกอบที่ดีที่สุด ตัวเลือกที่เหมือนกันโดยสิ้นเชิง ไวยากรณ์ซีเอสเอส- ปัจจุบัน เบราว์เซอร์ได้แนะนำ API ที่สำคัญสองรายการ ได้แก่ querySelector และ querySelectorAll

// คุณสามารถใช้ document.querySelector เพื่อรับองค์ประกอบแรกที่ตรงกับเกณฑ์ // รับเพียงหนึ่งอาร์กิวเมนต์ - ตัวเลือก CSS var LochNess = document.querySelector(".monsters"); console.log("It"s from Scotland - " + LochNess.textContent); // เรายังสามารถรับคอลเลกชันโดยใช้ document.querySelectorAll ได้ // ส่งคืนรายการองค์ประกอบ dom ที่ตรงกับเกณฑ์ var Scary = document.querySelectorAll( ".monsters") ; console.log("ซ่อนและค้นหาแชมเปี้ยน: "); สำหรับ (var i = 0; i< scary.length; i++) { console.log(scary[i].innerHTML); }

• เนสซี่
• ขาใหญ่
• ลาชูปาคาบรา

การสร้างและการลบตัวจัดการเหตุการณ์ (วิธีการ)

การฟังเหตุการณ์เป็นส่วนพื้นฐานของการสร้างเว็บแอปพลิเคชัน ในอดีตมีสองค่ายใหญ่ - IE และที่เหลือ แต่วันนี้เราแค่ใช้ addEventListener

Var btn = document.querySelectorAll("ปุ่ม"), list = document.querySelector("ul"); // เรียก addEventListener ในเหตุการณ์ที่ต้องการ // เริ่มติดตามเหตุการณ์การคลิกบนองค์ประกอบ btn.addEventListener("click", function () ( // เมื่อคลิกปุ่ม เราต้องการทริกเกอร์ขนาดเหตุการณ์ให้กับรายการของเรา // เพื่อทำสิ่งนี้ เราจำเป็นต้องเพิ่มเหตุการณ์ลงในรายการของเรา // เพื่อให้ เมื่อวางเมาส์เหนือองค์ประกอบ ฟังก์ชันจะเริ่มทำงาน รายการ .addEventListener("mouseover", ขยาย )); // หากต้องการยกเลิกเหตุการณ์การซูม ให้ใช้ RemoveEventListener btn.addEventListener("click", function () ( // การลบเหตุการณ์จะไม่ทำงานกับฟังก์ชันที่ไม่มีชื่อ ให้ใช้เฉพาะรายการที่มีชื่อ list.removeEventListener("mouseover", ขยาย); )); // มาสร้างฟังก์ชั่นที่จะปรับขนาดกัน var ขยาย = ฟังก์ชั่น () ( // เพิ่มคลาสสำหรับองค์ประกอบ list.classList.add("zoomed"); // เมื่อเคอร์เซอร์ออกจากรายการ ให้ลบคลาสออกเพื่อกลับสู่รายการมาตราส่วนปกติ addEventListener("mouseout ", ฟังก์ชั่น ( ) ( list.classList.remove("zoomed") )); // ตอนนี้เราต้องการเน้นชื่อเมื่อคลิก // เมื่อคลิกองค์ประกอบ มันควรจะเปลี่ยนเป็นสีเขียว // ต้องขอบคุณการมอบหมายกิจกรรม เราจึงสามารถเพิ่มตัวจัดการลงไปได้ องค์ประกอบหลัก// ในวิธีนี้ เราจะไม่สร้าง event Listener สำหรับแต่ละเหตุการณ์

- list.addEventListener("click", function (e) ( // ไฮไลท์องค์ประกอบเป้าหมายเป็นสีเขียว e.target.classList.add("green"); ));

เปิดใช้งานการซูม ปิดใช้งานการซูม

คลิกที่ชื่อเพื่อไฮไลต์

• ชิวแบ็กก้า
• ฮาน โซโล
• ลุค
• โบบา เฟทท์

สีเขียว ( สี: สีเขียว; ) .zoomed ( เคอร์เซอร์: ตัวชี้; ขนาดตัวอักษร: 23px; )

addEventListener ใช้อาร์กิวเมนต์ที่สาม แต่เป็นทางเลือก อย่างที่คุณเห็น โค้ดนี้ดูค่อนข้างคล้ายกับ jQuery

การเพิ่มและการลบคลาสที่ไม่มี jQuery ใน JS ล้วนๆ

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

Var btn = document.querySelectorAll("ปุ่ม"), div = document.querySelector("#myDiv"); btn.addEventListener("คลิก", ​​ฟังก์ชั่น () ( // วิธีง่ายๆรับแอตทริบิวต์องค์ประกอบ console.log(div.id); - // Element.classList จัดเก็บคลาสองค์ประกอบทั้งหมดจาก DOMTokenList คลาส var = div.classList; btn.addEventListener("คลิก", ​​ฟังก์ชั่น () ( console.log(คลาส); )); btn.addEventListener("คลิก", ​​function () ( // การเพิ่มและลบคลาส classs.add("red"); )); btn.addEventListener("คลิก", ​​function () ( // Toggle class classs.toggle("hidden"); ));

รหัสที่แสดง แสดงคลาส สีแดง สลับการมองเห็น

สี่เหลี่ยมจัตุรัส ( กว้าง: 100px; ความสูง: 100px; ขอบล่าง: 20px; เส้นขอบ: 1px สีเทาทึบ; รัศมีเส้นขอบ: 5px; ) .hidden ( การมองเห็น: ซ่อนไว้; ) .red ( สีพื้นหลัง: สีแดง; )

การรับและการเปลี่ยนแปลงเนื้อหา HTML ขององค์ประกอบ

jQuery มีวิธีอำนวยความสะดวก text() และ html() แต่คุณสามารถใช้คุณสมบัติ textContent และ innerHTML ซึ่งมีมานานก่อน jQuery แทน

Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("button"); // วิธีนี้ทำให้คุณสามารถค้นหาข้อความทั้งหมดของแผนผังองค์ประกอบ var myContent = myText.textContent; console.log("textContent: " + myContent); // ใช้ textContent เพื่อแทนที่ข้อความขององค์ประกอบ // ลบอันเก่าออก และแทนที่ด้วยข้อความใหม่ btn.addEventListener("click", function () ( myText.textContent = " Koalas are the best Animals "; )); // หากเราต้องการ HTML ขององค์ประกอบ ให้ใช้ innerHTML var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // หากต้องการแทนที่ html เพียงแค่ระบุ btn.addEventListener("click", function () ( myText.innerHTML = " Penguins are the best Animals "; ));

สัตว์ชนิดไหนดีที่สุด?

โคอาล่า
นกเพนกวิน

การแทรกใหม่และการลบองค์ประกอบที่มีอยู่

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

อาหารกลางวัน Var = document.querySelector("#lunch"); // สมมติว่าเรามีเมนูสำหรับมื้อกลางวัน // มาเพิ่มบางอย่างลงไป var addFries = function () ( // ก่อนอื่นเราสร้างองค์ประกอบและเติมเนื้อหาด้วยเนื้อหา var fries = document.createElement("div"); fries .innerHTML = "

มันฝรั่งทอด

"; // เมื่อเสร็จแล้ว เราจะใช้ appendChild เพื่อแทรกลงในหน้า // องค์ประกอบของเราจะปรากฏบนหน้าในเมนู Lunch.appendChild(fries); ); // เพิ่มชีสลงในเบอร์เกอร์ของเรา) . var addCheese = function () ( var beef = document.querySelector("#Beef"), topSlice = document.createElement("li"), BottomSlice = document.createElement("li"); BottomSlice.innerHTML = topSlice.innerHTML = "Cheese"; top slice: // ใช้องค์ประกอบหลัก beef และใช้ insertBefore // อาร์กิวเมนต์แรกในเมธอด insertBefore คือองค์ประกอบที่เพิ่มเข้ามาของเรา // อาร์กิวเมนต์ที่สองคือองค์ประกอบก่อนหน้าซึ่งเราจะเพิ่ม beef.parentNode ที่สร้างขึ้น .insertBefore(topSlice, beef); : // เราต้องทำเคล็ดลับเล็กน้อย! // ระบุองค์ประกอบที่ใกล้เคียงที่สุดถัดไปเป็นพารามิเตอร์ที่สองใน insertBefore, // วิธีนี้เราจะแทรกเนื้อหา "หลัง" องค์ประกอบที่ต้องการ beef.parentNode .insertBefore(bottomSlice, beef.nextSibling); RemovePickles = function () ( // ลบองค์ประกอบ var Pickles = document.querySelector("#pickles");

ถ้า (ผักดอง) (pickles.parentNode.removeChild(ผักดอง); ) ); // อร่อย! var btn = document.querySelectorAll("ปุ่ม"); btn.addEventListener("คลิก", ​​addFries); btn.addEventListener("คลิก", ​​addCheese); btn.addEventListener("คลิก", ​​ลบ Pickles);

• เพิ่มมันฝรั่งทอดในมื้อกลางวัน เพิ่มชีสในแซนวิช ลบผักดอง อาหารกลางวันของฉัน
• แซนด์วิชของฉัน
• ขนมปัง
• ผักดอง
• เนื้อวัว
• แซนด์วิชของฉัน

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

เบราว์เซอร์และจินตนาการของคุณ

เอฟเฟกต์แว่นขยาย

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

เอเวียสไลเดอร์

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

ไม่บ่อยนักที่คุณจะเจอไซต์ที่มีองค์ประกอบมากมาย ปลั๊กอิน Bubble Navigation ช่วยให้คุณสร้างการนำทางแบบไดนามิกโดยอิงจากแวดวงเพียงอย่างเดียว

แผงเข้าสู่ระบบแบบเลื่อนลง
หมุนเวียน

ช่วยให้คุณเปิดองค์ประกอบของหน้าเป็นวงกลมและในระนาบต่างๆ

กล่องพลิก

ปลั๊กอิน Flip ช่วยให้คุณสามารถพลิกองค์ประกอบต่างๆ ได้เหมือนกับว่าเป็นการ์ด

แกลเลอรี่โฉบ

แกลเลอรี่ภาพที่ไม่เป็นทางการ การแสดงตัวอย่างเนื้อหาคือกลุ่มภาพถ่ายที่กระจัดกระจายซึ่งถ่ายด้วยกล้องโพลารอยด์

อิคารูเซล

แถบเลื่อนรูปภาพที่เรียบง่ายแต่สวยงามมาก

อิมเมจโฟลว์

สไลด์โชว์พร้อมภาพที่เคลื่อนไหวในอวกาศ

รูปภาพแบบโต้ตอบ

วิธีที่น่าสนใจมากในการสร้างแคตตาล็อกผลิตภัณฑ์เชิงโต้ตอบ

การเปลี่ยนแปลงของ Jqfancy
ถ่ายภาพ

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

ทรายด่วน

ปลั๊กอิน Quicksand จะช่วยให้คุณสามารถจัดเรียงและกรองชุดองค์ประกอบโดยใช้เอฟเฟกต์คุณภาพสูงมาก

เคล็ดลับบริบทของสไลด์เอาท์

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

กล่องเลื่อน

ปลั๊กอินกล่องเลื่อนจะช่วยคุณสร้างแกลเลอรีรูปภาพไดนามิกที่ไม่ธรรมดาพร้อมคำบรรยายสำหรับรูปภาพเหล่านั้น

แกลเลอรี่ซูมเมอร์

แกลเลอรีรูปภาพที่มีองค์ประกอบต่างๆ จะปรากฏขึ้นอย่างร่าเริงเมื่อคุณเลื่อนเมาส์ไปเหนือองค์ประกอบเหล่านั้น

03/10/60 14K

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

jQuery .each() ไวยากรณ์ของฟังก์ชัน

ในตัวอย่างต่อไปนี้ เราเลือกองค์ประกอบ div ทั้งหมดบนหน้าเว็บ และแสดงดัชนีและ ID ของแต่ละรายการ ผลลัพธ์ที่เป็นไปได้: “div0:header”, “div1:body”, “div2:footer” ตัวอย่างใช้ฟังก์ชัน jQuery แต่ละ () แทนที่จะเป็นฟังก์ชันตัวช่วย:

// องค์ประกอบ DOM $("div").each(function (index, value) ( ​​​​console.log("div" + index + /// + $(this).attr("id")); ) );

ตัวอย่างต่อไปนี้สาธิตการใช้ฟังก์ชันตัวช่วย ในกรณีนี้ อ็อบเจ็กต์ที่ดำเนินการวนซ้ำจะถูกกำหนดให้เป็นอาร์กิวเมนต์แรก ในตัวอย่างนี้ ฉันจะแสดงวิธีการวนซ้ำอาร์เรย์ด้วย โดยใช้ jQueryแต่ละฟังก์ชัน:

// อาร์เรย์ var arr = [ "หนึ่ง", "สอง", "สาม", "สี่", "ห้า" ]; $.each(arr, function (index, value) ( ​​​​console.log(value); // การดำเนินการหยุดหลังจากส่งคืน "three" (value !== "three"); )); // ผลลัพธ์: หนึ่ง สอง สาม

ใน jQuery สุดท้ายแต่ละตัวอย่าง ฉันต้องการแสดงการวนซ้ำผ่านคุณสมบัติของวัตถุ:

// วัตถุ var obj = ( หนึ่ง: 1, สอง: 2, สาม: 3, สี่: 4, ห้า: 5 ); $.each(obj, function (index, value) ( ​​​​console.log(value); )); // ผลลัพธ์: 1 2 3 4 5

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

ตัวอย่างพื้นฐานของการใช้ฟังก์ชัน jQuery .each()

เรามาดูกันว่าแต่ละฟังก์ชัน () ใช้ร่วมกับวัตถุ jQuery ได้อย่างไร ตัวอย่างแรกเลือกองค์ประกอบทั้งหมดบนหน้าและแสดงแอตทริบิวต์ href:

$("a").each(function (index, value)( console.log($(this).attr("href")); ));

ตัวอย่างที่สองของการใช้ jQuery แต่ละวัตถุจะแสดง hrefs ภายนอกทั้งหมดบนหน้าเว็บ (สมมติว่าใช้โปรโตคอล HTTP):

$("a").each(function (index, value)( var link = $(this).attr("href"); if (link.indexOf("http://") === 0) ( console.log(ลิงค์);

สมมติว่าหน้าเว็บมีลิงก์ต่อไปนี้:

JQUERY4U PHP4U บล็อกกูล่า

รหัสที่สองจะแสดงผล:

http://jquery4u.com http://www.phpscripts4u.com http://www.blogoola.com

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

ตัวอย่างอาร์เรย์ jQuery.each()

มาดูอีกครั้งว่าอาร์เรย์ปกติสามารถประมวลผลได้อย่างไร:

ตัวเลข var = ; $.each(numbers , function (index, value)( console.log(index + /// + value); ));

ผลลัพธ์ของการรันโค้ดคือ: 0:1, 1:2, 2:3, 3:4, 4:5 และ 5:6

อาร์เรย์ประกอบด้วย ดัชนีตัวเลขดังนั้นเราจึงได้ตัวเลขตั้งแต่ 0 ไปจนถึง N - 1 โดยที่ N คือจำนวนองค์ประกอบในอาร์เรย์

ตัวอย่าง JSON JQuery.each()

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

var json = [ ( "สีแดง": "#f00" ), ( "สีเขียว": "#0f0" ), ( "สีน้ำเงิน": "#00f" ) ]; $.each(json, function () ( $.each(this, function (ชื่อ, ค่า) ( ​​console.log(name + "=" + value); )); ));

ผลลัพธ์ของการรันโค้ด: red=#f00, green=#0f0, blue=#00f

เราประมวลผลโครงสร้างโดยใช้การเรียกแต่ละ () แบบซ้อนกัน การเรียกภายนอกจะประมวลผลอาร์เรย์ตัวแปร JSON การเรียกภายในจะประมวลผลออบเจ็กต์ ในตัวอย่างนี้ แต่ละ jQuery แต่ละองค์ประกอบมีเพียงคีย์เดียวเท่านั้น แต่การใช้รหัสที่นำเสนอสามารถกำหนดคีย์จำนวนเท่าใดก็ได้

jQuery.each() ตัวอย่างคลาส

ตัวอย่างนี้แสดงวิธีการวนซ้ำแต่ละองค์ประกอบด้วยคลาส productDescription:

แดง ชมพู ส้ม เขียว ฟ้า เขียว

นอกจากตัวเลือกแล้ว เรายังใช้ฟังก์ชันตัวช่วย Each() แทนเมธอด Each() ดังนี้

$.each($(".productDescription"), function (index, value) ( ​​​​console.log(index + marino + $(value).text()); ));

ผลลัพธ์ของการใช้ jQuery แต่ละฟังก์ชันจะเป็น: 0:สีแดง, 1:สีส้ม, 2:สีเขียว

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

$(".productDescription").each(function () ( console.log($(this).text()); ));

ผลลัพธ์ .

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

หากต้องการใช้เทคโนโลยีให้ใช้วิธี $.ajax หรือ jQuery.ajax:

$.ajax(คุณสมบัติ) หรือ $.ajax(url [, คุณสมบัติ])

เพิ่มพารามิเตอร์ตัวที่สองใน jQuery เวอร์ชัน 1.5

url - ที่อยู่ของหน้าที่ร้องขอ;

คุณสมบัติ - ขอคุณสมบัติ

สำหรับรายการตัวเลือกทั้งหมด โปรดดูเอกสารประกอบ jQuery

ในบทช่วยสอนนี้ เราใช้พารามิเตอร์ที่ใช้บ่อยที่สุดหลายตัว

ความสำเร็จ (ฟังก์ชัน) - ฟังก์ชันนี้ถูกเรียกหลังจากการร้องขอเสร็จสมบูรณ์แล้ว ฟังก์ชั่นได้รับพารามิเตอร์ตั้งแต่ 1 ถึง 3 ตัว (ขึ้นอยู่กับเวอร์ชันของไลบรารีที่ใช้) แต่พารามิเตอร์แรกจะมีข้อมูลที่ส่งคืนจากเซิร์ฟเวอร์เสมอ

ข้อมูล (วัตถุ/สตริง) - ข้อมูลผู้ใช้ที่ส่งไปยังหน้าที่ร้องขอ

dataType (สตริง) - ค่าที่เป็นไปได้: xml, json, script หรือ html คำอธิบายประเภทของข้อมูลที่คาดหวังในการตอบกลับของเซิร์ฟเวอร์

ประเภท (สตริง) - ประเภทคำขอ ค่าที่เป็นไปได้: GET หรือ POST ค่าเริ่มต้น: GET

URL (สตริง) - ที่อยู่ URLสำหรับการร้องขอ

ตัวอย่างที่ 1

ถ่ายโอนข้อความได้ง่าย

$.ajax(( url: "response.php?action=sample1", สำเร็จ: function(data) ( $(".results").html(data); ) ));

มีองค์ประกอบ .result div สำหรับการตอบกลับ

เรากำลังรอคำตอบ

เซิร์ฟเวอร์เพียงส่งคืนสตริง:

Echo "ตัวอย่างที่ 1 - การถ่ายโอนเสร็จสมบูรณ์";

ตัวอย่างที่ 2

เราส่งเอง ข้อมูลพีเอชพีสคริปต์

$.ajax(( ประเภท: "POST", url: "response.php?action=sample2", ข้อมูล: "name=Andrew&nickname=Aramis", ความสำเร็จ: function(data)( $(".results").html( ข้อมูล);

เซิร์ฟเวอร์ส่งคืนสตริงที่มีข้อมูลที่ส่งแทรกเข้าไป:

Echo "ตัวอย่างที่ 2 - การถ่ายโอนเสร็จสมบูรณ์ พารามิเตอร์: name = " $_POST["ชื่อ"] . ", ชื่อเล่น= " . $_POST["ชื่อเล่น"];

ตัวอย่างที่ 3

การส่งผ่านและการรันโค้ด JavaScript

$.ajax(( dataType: "script", url: "response.php?action=sample3", ))

เซิร์ฟเวอร์รันโค้ด:

Echo "$(".results").html("ตัวอย่างที่ 3 - การดำเนินการ JavaScript");";

ตัวอย่างที่ 4

เราใช้ XML ตัวอย่างนี้สามารถใช้เพื่อทำงานกับ XML ภายนอก เช่น ฟีด RSS

$.ajax(( dataType: "xml", url: "response.php?action=sample4", สำเร็จ: function(xmldata)( $(".results").html(""); $(xmldata).find ("รายการ").each(function())( $(" ").html($(this).text()).appendTo(".results"); ) ));

เซิร์ฟเวอร์ควรส่งคืนรหัส XML:

ส่วนหัว("ประเภทเนื้อหา: application/xml; charset=UTF-8");