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

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

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

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

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



JavaScript- javascript กับ jquery - edureka

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

คุณสมบัติJavaScriptjQuery
การดำรงอยู่JavaScript เป็นภาษาอิสระและมีอยู่ในตัวเองjQuery เป็นไลบรารี JavaScript มันจะไม่ถูกประดิษฐ์ขึ้นมาหากไม่มี JavaScript jQuery ยังคงขึ้นอยู่กับ JavaScript เนื่องจากต้องแปลงเป็น JavaScript เพื่อให้เอ็นจิ้น JavaScript ในตัวของเบราว์เซอร์ตีความและเรียกใช้
ภาษาเป็นภาษาสคริปต์ฝั่งไคลเอ็นต์ที่มีการตีความระดับสูง นี่คือการรวมกันของสคริปต์ ECMA และ DOM (Document Object Model)เป็นไลบรารี JavaScript ที่มีน้ำหนักเบา มีเพียง DOM
การเข้ารหัสJavaScript ใช้บรรทัดของโค้ดมากขึ้นเนื่องจากเราต้องเขียนโค้ดของเราเองjQuery ใช้โค้ดน้อยกว่า JavaScript สำหรับฟังก์ชันเดียวกันเนื่องจากโค้ดถูกเขียนไว้แล้วในไลบรารีเราต้องนำเข้าไลบรารีและใช้ฟังก์ชัน / วิธีการที่เกี่ยวข้องของไลบรารีในโค้ดของเรา
การใช้งานโค้ด JavaScript ถูกเขียนภายในแท็กสคริปต์ในหน้า HTML
เราจำเป็นต้องนำเข้า jQuery จาก CDN หรือจากตำแหน่งที่ดาวน์โหลดไลบรารี jQuery เพื่อใช้งาน โค้ด jQuery ยังเขียนอยู่ภายในแท็กสคริปต์บนหน้า HTML
ภาพเคลื่อนไหวเราสามารถสร้างภาพเคลื่อนไหวใน JavaScript ด้วยโค้ดหลายบรรทัด ภาพเคลื่อนไหวส่วนใหญ่ทำโดยการปรับแต่งรูปแบบของหน้า Htmlใน jQuery เราสามารถเพิ่มเอฟเฟกต์ภาพเคลื่อนไหวได้อย่างง่ายดายโดยใช้โค้ดน้อยลง
เป็นมิตรกับผู้ใช้JavaScript อาจเป็นเรื่องยุ่งยากสำหรับนักพัฒนาเนื่องจากต้องใช้โค้ดหลายบรรทัดเพื่อให้สามารถใช้งานได้jQuery เป็นมิตรกับผู้ใช้มากกว่า JavaScript ที่มีโค้ดไม่กี่บรรทัด
ความเข้ากันได้ข้ามเบราว์เซอร์ใน JavaScript เราอาจต้องจัดการกับความเข้ากันได้ข้ามเบราว์เซอร์โดยการเขียนโค้ดเพิ่มเติมหรือวิธีแก้ปัญหาjQuery เข้ากันได้กับข้ามเบราว์เซอร์ เราไม่จำเป็นต้องกังวลเกี่ยวกับการเขียนวิธีแก้ปัญหาหรือโค้ดเพิ่มเติมเพื่อให้โค้ดของเราเข้ากันได้กับเบราว์เซอร์
ประสิทธิภาพJavaScript บริสุทธิ์สามารถเร็วกว่าสำหรับการเลือก / การจัดการ DOM มากกว่า jQuery เนื่องจาก JavaScript ถูกประมวลผลโดยตรงโดยเบราว์เซอร์jQuery จะต้องถูกแปลงเป็น JavaScript เพื่อให้ทำงานในเบราว์เซอร์
การจัดการเหตุการณ์การโต้ตอบและการโทร Ajaxทั้งหมดนี้สามารถทำได้ใน JavaScript แต่เราอาจต้องเขียนโค้ดหลายบรรทัดสิ่งเหล่านี้สามารถทำได้ง่ายๆด้วย jQuery ที่มีโค้ดน้อยกว่า มันง่ายกว่าใน jQuery ในการเพิ่มการโต้ตอบภาพเคลื่อนไหวและการเรียกใช้ ajax เนื่องจากฟังก์ชันต่างๆได้กำหนดไว้ล่วงหน้าแล้วในไลบรารี เราเพียงแค่ใช้ฟังก์ชันเหล่านั้นในโค้ดของเราในตำแหน่งที่ต้องการ
คำฟุ่มเฟือยJavaScript เป็นแบบละเอียดเนื่องจากต้องเขียนโค้ดหลายบรรทัดสำหรับฟังก์ชันการทำงานjQuery มีความกระชับและใช้โค้ดน้อยกว่าบางครั้งมีโค้ดเพียงบรรทัดเดียว
ขนาดและน้ำหนักเป็นภาษามันหนักกว่า jQueryเป็นห้องสมุดจึงมีน้ำหนักเบา มีรหัสรุ่นย่อขนาดซึ่งทำให้น้ำหนักเบา
การใช้ซ้ำและการบำรุงรักษาโค้ด JavaScript สามารถใช้งานได้อย่างละเอียดจึงดูแลรักษาและนำกลับมาใช้ใหม่ได้ยากด้วยโค้ดที่น้อยลง jQuery จึงสามารถบำรุงรักษาได้มากขึ้นเนื่องจากเราต้องเรียกใช้ฟังก์ชันที่กำหนดไว้ล่วงหน้าในไลบรารี jQuery ในโค้ดของเรา นอกจากนี้ยังทำให้เราสามารถนำฟังก์ชั่น 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” แล้วเราจะติดต่อกลับไป