JavaScript กับ jQuery: ความแตกต่างที่สำคัญที่คุณต้องรู้

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

• JavaScript: ภาษาที่มีประสิทธิภาพในการพัฒนาเว็บ
• JQuery: ไลบรารีที่พัฒนาจาก JavaScript
• ทำไม JQuery จึงถูกสร้างขึ้นและอะไรคือความสามารถพิเศษของ JQuery
• ความแตกต่างระหว่าง JavaScript และ JQuery พร้อมตัวอย่าง
  • การเพิ่ม JavaScript และ JQuery ในเอกสาร HTML ของเรา
  • DOM Traversal และ Manipulation
  • การจัดการเหตุการณ์
  • Ajax โทร
  • ภาพเคลื่อนไหว

JavaScript: ภาษาที่มีประสิทธิภาพในการพัฒนาเว็บ

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

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

เรามาดู JavaScript กับ jQuery ของเราและทำความเข้าใจกับไลบรารีที่พัฒนาจาก JavaScript

jQuery: ไลบรารีที่พัฒนาจาก JavaScript

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

jQuery เป็นหนึ่งในไลบรารีของ JavaScript ที่สร้างขึ้นจากมัน เป็นไลบรารี JavaScript ที่ได้รับความนิยมมากที่สุดซึ่งคิดค้นโดย John Resign และเผยแพร่เมื่อเดือนมกราคม 2549 ที่ BarCamp NYC jQuery เป็นไลบรารีโอเพ่นซอร์สฟรีที่ได้รับอนุญาตภายใต้ MIT License สิ่งนี้มีคุณสมบัติอันทรงพลังของความเข้ากันได้ข้ามเบราว์เซอร์ สามารถจัดการปัญหาข้ามเบราว์เซอร์ที่เราเผชิญด้วย JavaScript ได้อย่างง่ายดาย ดังนั้นนักพัฒนาจำนวนมากจึงใช้ jQuery เพื่อหลีกเลี่ยงปัญหาความเข้ากันได้ข้ามเบราว์เซอร์

ตอนนี้เรามาดูบล็อก JavaScript กับ jQuery ของเราและดูว่าทำไมจึงสร้าง jQuery

เหตุใด jQuery จึงถูกสร้างขึ้นและความสามารถพิเศษของ jQuery คืออะไร?

ใน JavaScript เราต้องเขียนโค้ดจำนวนมากสำหรับการทำงานพื้นฐานในขณะที่ใช้ jQuery การดำเนินการเดียวกันสามารถทำได้ด้วยโค้ดบรรทัดเดียว ดังนั้นนักพัฒนาจึงพบว่าการทำงานกับ jQuery ง่ายกว่า JavaScript

• แม้ว่า JavaScript จะเป็นภาษาพื้นฐานที่ jQuery พัฒนาขึ้น แต่ jQuery ก็ทำให้การจัดการเหตุการณ์การจัดการ DOM Ajax เรียกใช้ง่ายกว่า JavaScript มาก jQuery ยังช่วยให้เราสามารถเพิ่มเอฟเฟกต์ภาพเคลื่อนไหวบนหน้าเว็บของเราซึ่งต้องใช้ความเจ็บปวดและบรรทัดของโค้ดด้วย JavaScript
• jQuery มีปลั๊กอินในตัวเพื่อดำเนินการบนหน้าเว็บ เราต้องรวมหรือนำเข้าปลั๊กอินในหน้าเว็บของเราเพื่อใช้งาน ดังนั้นปลั๊กอินจึงช่วยให้เราสร้างภาพเคลื่อนไหวและการโต้ตอบหรือเอฟเฟกต์ต่าง ๆ
• เรายังสามารถสร้างปลั๊กอินที่กำหนดเองด้วย jQuery หากเราต้องการให้แอนิเมชั่นทำบนหน้าเว็บด้วยวิธีใดวิธีหนึ่งเราสามารถพัฒนาปลั๊กอินตามความต้องการและใช้งานบนหน้าเว็บของเราได้
• jQuery ยังมีไลบรารีวิดเจ็ต UI ระดับสูง ไลบรารีวิดเจ็ตนี้มีปลั๊กอินมากมายที่เราสามารถนำเข้าบนหน้าเว็บของเราและใช้สำหรับสร้างหน้าเว็บที่ใช้งานง่าย

มาทำความเข้าใจความแตกต่างกัน

JavaScript เทียบกับ jQuery

ดำเนินการต่อด้วยความแตกต่างระหว่าง JavaScript และ jQuery ด้วยตัวอย่าง

JavaScript เทียบกับ jQuery พร้อมตัวอย่าง

มาดูตัวอย่างกัน

การเพิ่ม JavaScript และ jQuery ในเอกสาร HTML ของเรา

JavaScript ถูกเพิ่มโดยตรงในเอกสาร HTML ภายในแท็กหรือสามารถเพิ่มไฟล์ JavaScript ภายนอกในเอกสาร HTML โดยใช้แอตทริบิวต์ src
เขียนโดยตรงภายในแท็กสคริปต์:

ผสานอัลกอริทึมการจัดเรียง c ++

alert ('กล่องแจ้งเตือนนี้ถูกเรียกด้วยเหตุการณ์ onload')

ในการใช้ jQuery เราจะดาวน์โหลดไฟล์จากเว็บไซต์และอ้างอิงเส้นทางของไฟล์ jQuery ที่ดาวน์โหลดมาในแอตทริบิวต์ src ของแท็ก SCRIPT หรือรับโดยตรงจาก CDN (เครือข่ายการจัดส่งเนื้อหา)

ใช้ CDN :

มาทำความเข้าใจกับ DOM Traversal และ Manipulation

DOM Traversal และ Manipulation

ใน JavaScript:

เราสามารถเลือกองค์ประกอบ DOM ใน JavaScript โดยใช้เมธอด document.getElementById () หรือโดยใช้เมธอด document.querySelector ()

var mydiv = document.querySelector (“ # div1”)

หรือ

document.getElementById (“ # div1”)

ใน jQuery:

ในที่นี้เราจะต้องใช้สัญลักษณ์ $ กับตัวเลือกในวงเล็บเท่านั้น

$ (ตัวเลือก) $ (“ # div1”) - ตัวเลือกคือ id 'div1' $ (“. div1”) - ตัวเลือกคือคลาส 'div1' $ (“ p”) - ตัวเลือกคือย่อหน้าใน หน้า html

ในข้อความข้างต้น $ คือเครื่องหมายที่ใช้ในการเข้าถึง jQuery ตัวเลือกคือองค์ประกอบ HTML

การเพิ่มสไตล์ใน JavaScript:

document.getElementById ('myDiv'). style.backgroundColor = '# FFF'

การเพิ่มสไตล์ใน jQuery:

$ ('# myDiv'). css ('background-color', '# FFF')

ตัวเลือก #myDiv หมายถึงตัวระบุ 'myDiv'

การเลือกและการจัดการองค์ประกอบ DOM นั้นกระชับกว่าใน jQuery มากกว่าใน JavaScript

ดำเนินการต่อด้วยการจัดการเหตุการณ์

การจัดการเหตุการณ์

ใน JavaScript เราเลือกองค์ประกอบ HTML:

document.getElementById ('# button1'). addEventListener ('click”, myCallback) ฟังก์ชัน myCallback () {console (“ inside myCallback function”)}

วิธี getElementById () ที่นี่ใช้เพื่อเลือกองค์ประกอบโดยใช้ id จากนั้นเราใช้เมธอด addEventListener () เพื่อเพิ่มตัวฟังเหตุการณ์ให้กับเหตุการณ์ ในตัวอย่างนี้เราเพิ่มฟังก์ชัน myCallback เป็นฟังก์ชั่น 'คลิก'

นอกจากนี้เรายังสามารถใช้ฟังก์ชันที่ไม่ระบุตัวตนในตัวอย่างด้านบน:

document.getElementById ('# button1'). addEventListener ('คลิก”, ฟังก์ชัน () {console.log (“ ภายในฟังก์ชัน”)})

EventListener สามารถลบออกได้โดยใช้เมธอด removeEventListener ()

document.getElementById (“ # button1”). removeEventListener (“ คลิก”, myCallback)

ใน jQuery

jQuery มีเหตุการณ์ที่กำหนดไว้ล่วงหน้าสำหรับการดำเนินการ DOM เกือบทั้งหมด เราสามารถใช้เหตุการณ์ jQuery เฉพาะสำหรับการดำเนินการ

$ (“ p”) คลิก (function () {// click action})

ตัวอย่างอื่น ๆ ได้แก่ :

$ (“ # button1”). dblclick (ฟังก์ชัน () {// การดำเนินการสำหรับเหตุการณ์ดับเบิลคลิกบนองค์ประกอบ html ที่มี id 'button1'}

เมธอด JQuery 'on' ใช้เพื่อเพิ่มเหตุการณ์อย่างน้อยหนึ่งเหตุการณ์ให้กับองค์ประกอบ DOM

$ (“ # button1”) บน (“ click”, function () {// action here})

เราสามารถเพิ่มหลายเหตุการณ์และตัวจัดการเหตุการณ์หลายตัวด้วยวิธีการ

การแปลงแบบแอคทีฟและพาสซีฟใน Informatica

$ (“ button1”) บน ({click: function () {// action here}, dblclick: function () {// action here}})

เหตุการณ์ตั้งแต่สองเหตุการณ์ขึ้นไปสามารถมีตัวจัดการเดียวกันดังต่อไปนี้:

$ (“ # button1”) บน (“ คลิก dblclick” ฟังก์ชัน () {// action here})

ดังนั้นเราจึงเห็นว่าด้วยโค้ดที่น้อยกว่าและรัดกุมการจัดการเหตุการณ์ใน jQuery จะง่ายกว่าใน JavaScript

ก้าวต่อไปด้วย Ajax Calls

Ajax โทร

ใน JavaScript

JavaScript ใช้อ็อบเจ็กต์ XMLHttpRequest เพื่อส่งคำร้องขอ Ajax ไปยังเซิร์ฟเวอร์ XMLHttpRequest มีหลายวิธีในการเรียกใช้ Ajax วิธีการทั่วไปสองวิธีคือเปิด (method, URL, async, user, PSW), send () และ send (string)
มาสร้าง XMLHttpRequest ก่อน:

var xhttp = new XMLHttpRequest () จากนั้นใช้วัตถุนี้เพื่อเรียกวิธีการเปิด: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

เมธอดเปิดทำให้คำขอรับไปยังเซิร์ฟเวอร์ / ตำแหน่งที่ตั้งจริงระบุว่าคำขอเป็นแบบอะซิงโครนัส หากค่าเป็นเท็จแสดงว่าคำร้องขอเป็นแบบซิงโครนัส

การขอโพสต์:

var xhttp = new XMLHttpRequest () จากนั้นใช้ออบเจ็กต์นี้เพื่อเรียกใช้วิธีการเปิดและสร้างคำขอโพสต์: xhttp.open ('POST', 'D: //postinfo.txt', จริง) xhttp.send ()

ในการโพสต์ข้อมูลด้วยคำขอเราใช้เมธอด setRequestHeader ของ xhttp เพื่อกำหนดประเภทของข้อมูลที่จะส่งและวิธีการส่งจะส่งข้อมูลในคู่คีย์ / ค่า:

xhttp.setRequestHeader ('Content-type', 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & นามสกุล = Kumar')

ใน jQuery

jQuery มีวิธีการในตัวหลายวิธีในการโทร Ajax ด้วยวิธีการเหล่านี้เราสามารถเรียกข้อมูลใด ๆ จากเซิร์ฟเวอร์และอัปเดตส่วนหนึ่งของหน้าเว็บด้วยข้อมูล วิธีการ jQuery ทำให้ Ajax โทรง่าย
jQuery load () วิธีการ: วิธีนี้ดึงข้อมูลจาก URL และโหลดข้อมูลไปยังตัวเลือก HTML
$ (“ p”). load (URL, data, callback)
URL คือตำแหน่งที่เรียกสำหรับข้อมูลพารามิเตอร์ข้อมูลที่เป็นทางเลือกคือข้อมูล (คู่คีย์ / ค่า) ที่เราต้องการส่งไปพร้อมกับการโทรและพารามิเตอร์ทางเลือก 'การเรียกกลับ' คือวิธีการที่เราต้องการดำเนินการหลังจากการโหลด เสร็จสมบูรณ์

วิธี jQuery $ .get () และ $ .post (): วิธีนี้ดึงข้อมูลจาก URL และโหลดข้อมูลไปยังตัวเลือก HTML
$ .get (URL โทรกลับ)
URL คือตำแหน่งที่เรียกใช้สำหรับข้อมูลและการเรียกกลับเป็นวิธีการที่เราต้องการดำเนินการหลังจากโหลดเสร็จสิ้น

$ .post (URL, ข้อมูล, โทรกลับ)
URL คือตำแหน่งที่เรียกสำหรับข้อมูลข้อมูลคือคู่คีย์ / ค่าที่เราต้องการส่งไปพร้อมกับการโทรและการเรียกกลับเป็นวิธีการที่เราต้องการดำเนินการหลังจากการโหลดเสร็จสิ้น ที่นี่ข้อมูลและพารามิเตอร์การโทรกลับเป็นทางเลือก

การเรียก jQuery Ajax นั้นรัดกุมกว่า JavaScript ใน JavaScript เราใช้ออบเจ็กต์ XMLHTTPRequest ใน jQuery เราไม่จำเป็นต้องใช้ออบเจ็กต์ดังกล่าว

ก้าวต่อไปด้วยภาพเคลื่อนไหว

ภาพเคลื่อนไหว

ใน JavaScript

JavaScript ไม่มีฟังก์ชันการเคลื่อนไหวเฉพาะเช่นฟังก์ชัน jQuery animate () ในเอฟเฟกต์ภาพเคลื่อนไหว JavaScript ส่วนใหญ่ทำได้โดยการปรับเปลี่ยนรูปแบบขององค์ประกอบหรือโดยใช้คุณสมบัติการแปลง CSS แปลหรือเคลื่อนไหว JavaScript ยังใช้เมธอด setInterval (), clearInterval (), setTimeout () และ clearTimeout () สำหรับเอฟเฟกต์ภาพเคลื่อนไหว

setInterval (myAnimation, 4) ฟังก์ชัน myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1') style.transform = 'หมุน ( 20deg) '}

ภาพเคลื่อนไหวใน JavaScript ส่วนใหญ่เกี่ยวกับการจัดการคุณสมบัติ CSS

ใน jQuery

jQuery มีวิธีการ inbuilt มากมายในการเพิ่มภาพเคลื่อนไหวหรือเอฟเฟกต์บนองค์ประกอบ HTML ลองตรวจสอบบางส่วน
วิธีการ animate (): วิธีนี้ใช้เพื่อเพิ่มภาพเคลื่อนไหวในองค์ประกอบ

$ ('# button1') คลิก (function () {$ ('# div1') .animate ({height: '300px'})})

วิธีการแสดง (): วิธีนี้ใช้เพื่อทำให้องค์ประกอบมองเห็นได้จากสถานะที่ซ่อนอยู่

$ ('# button1') คลิก (function () {$ ('# div1'). show ()})

วิธีซ่อน (): วิธีนี้ใช้เพื่อซ่อนองค์ประกอบจากสถานะที่มองเห็นได้

$ ('# button1') คลิก (function () {$ ('# div1') ซ่อน ()})

jQuery มีวิธีการของตัวเองในการสร้างแอนิเมชั่นและเอฟเฟกต์ในหน้าเว็บ

วิธีใช้ swing java

สรุปได้ว่า JavaScript เป็นภาษาสำหรับการพัฒนาเว็บ jQuery เป็นไลบรารีที่มาจาก JavaScript JavaScript และ jQuery มีความสำคัญในการพัฒนาเว็บ

ตอนนี้คุณรู้เกี่ยวกับ JavaScript Loops แล้วลองดูไฟล์ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของ“ JavaScript vs jQuery” แล้วเราจะติดต่อกลับไป