JavaScript vs jQuery: Diferențe cheie pe care trebuie să le cunoașteți

Cunoaștem JavaScript și JQuery de câțiva ani. JavaScript a fost inventat mai devreme decât jQuery. Ambele sunt puternice și sunt utilizate în dezvoltarea web și sunt utilizate în același scop, adică pentru a face pagina web interactivă și dinamică. Cu alte cuvinte, ele dau viață paginilor web. Oamenii se pot întreba că dacă sunt folosiți în același scop, atunci de ce aceste două concepte separate? În acest articol JavaScript vs jQuery, vom afla care este mai bun decât celălalt în următoarea secvență:

• JavaScript: un limbaj puternic în dezvoltarea web
• JQuery: o bibliotecă dezvoltată din JavaScript
• De ce este creat JQuery și care sunt capabilitățile speciale ale JQuery
• Diferența dintre JavaScript și JQuery cu exemple
  • Adăugarea JavaScript și JQuery în documentul nostru HTML
  • Traversarea și manipularea DOM
  • Gestionarea evenimentelor
  • Apeluri Ajax
  • Animaţie

JavaScript: un limbaj puternic în dezvoltarea web

JavaScript este un limbaj de scriptare care este utilizat pentru a adăuga interactivitate paginilor noastre web. Este una dintre cele trei tehnologii de bază alături de HTML și CSS, care sunt utilizate pentru a crea pagini web. În timp ce HTML și CSS definesc structura paginii web și aspectul / stilul paginilor web, JavaScript este utilizat pentru a face pagina web dinamică adăugând interactivitate la aceasta, ceea ce înseamnă că cu JavaScript putem adăuga un cod pentru clicul mouse-ului, mouse-ul și altele evenimente pe pagina web și multe altele.

JavaScript este acceptat de toate browserele web, iar browserele web au un motor JavaScript încorporat pentru a identifica codul JavaScript și a lucra cu acesta. Astfel, JavaScript este în principal un limbaj de partea clientului. Este un limbaj care poate fi folosit ca limbaj procedural, precum și ca limbaj orientat pe obiecte bazat pe prototip. Când folosim JavaScript primar, lucrăm cu limbajul procedural, în timp ce JavaScript avansat utilizează concepte orientate obiect.

Să trecem mai departe cu JavaScript vs jQuery și să înțelegem biblioteca dezvoltată din JavaScript.

jQuery: o bibliotecă dezvoltată din JavaScript

De-a lungul anilor, JavaScript s-a dovedit a fi un limbaj puternic pentru dezvoltarea web. Există multe biblioteci și cadre care au apărut, care sunt construite pe baza JavaScript. Aceste biblioteci și cadre sunt dezvoltate pentru a extinde capacitatea JavaScript, pentru a face o mulțime de lucruri cu acesta și, de asemenea, pentru a facilita munca dezvoltatorului.

jQuery este o astfel de bibliotecă de JavaScript care este construită din ea. Este cea mai populară bibliotecă JavaScript inventată de John Resign și a fost lansată în ianuarie 2006 la BarCamp NYC. jQuery este gratuit, o bibliotecă open-source, licențiată sub licența MIT. Aceasta are o caracteristică puternică a compatibilității cross-browser. Poate rezolva cu ușurință problemele legate de browser-uri cu care ne putem confrunta cu JavaScript. Astfel, mulți dezvoltatori folosesc jQuery pentru a evita problemele de compatibilitate între browser-uri.

Acum să mergem mai departe cu blogul nostru JavaScript vs jQuery și să vedem de ce a fost creat jQuery.

De ce este creat jQuery și care sunt capabilitățile speciale ale jQuery?

În JavaScript, trebuie să scriem o mulțime de cod pentru operațiile de bază, în timp ce cu jQuery se pot face aceleași operații cu o singură linie de cod. Prin urmare, dezvoltatorilor le este mai ușor să lucreze cu jQuery decât cu JavaScript.

• Deși JavaScript este limbajul de bază din care a evoluat jQuery, jQuery face manipularea evenimentelor, manipularea DOM, apelurile Ajax sunt mult mai ușoare decât JavaScript. jQuery ne permite, de asemenea, să adăugăm efecte animate pe pagina noastră web, care necesită multă durere și linii de cod cu JavaScript.
• jQuery are pluginuri încorporate pentru a efectua o operație pe o pagină web. Trebuie doar să includem sau să importăm pluginul în pagina noastră web pentru al utiliza. Astfel, pluginurile ne permit să creăm abstracții de animații și interacțiuni sau efecte.
• De asemenea, putem crea pluginul nostru personalizat cu jQuery. Dacă avem nevoie ca o animație să se facă pe o pagină web într-un anumit mod, putem dezvolta un plugin în funcție de cerință și îl putem folosi pe pagina noastră web.
• jQuery are, de asemenea, o bibliotecă widget UI de nivel înalt. Această bibliotecă widget are o gamă întreagă de pluginuri pe care le putem importa pe pagina noastră web și o putem folosi pentru a crea pagini web ușor de utilizat.

Să înțelegem diferența.

JavaScript vs jQuery

Continuăm cu diferența dintre JavaScript și jQuery cu Exemplu.

o diferență majoră între un hacker și un hacker etic este:

JavaScript vs jQuery cu exemple

Să analizăm exemplele.

Adăugarea JavaScript și jQuery în documentul nostru HTML

JavaScript este adăugat direct în documentul HTML din interiorul etichetei sau un fișier JavaScript extern poate fi adăugat într-un document HTML utilizând atributul src.
Scris direct în eticheta scriptului:

alert („Această casetă de alertă a fost apelată cu evenimentul de încărcare”)

Pentru a utiliza jQuery descărcăm fișierul de pe site-ul său web și trimitem calea fișierului descărcat jQuery în atributul src al etichetei SCRIPT sau îl putem obține direct de pe CDN (rețea de livrare de conținut).

Folosind CDN :

Să înțelegem traversarea și manipularea DOM

Traversarea și manipularea DOM

În JavaScript:

Putem selecta un element DOM în JavaScript folosind metoda document.getElementById () sau folosind metoda document.querySelector ().

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

sau

document.getElementById („# div1”)

În jQuery:

Aici va trebui să folosim doar simbolul $ cu selectorul între paranteze.

$ (selector) $ („# div1”) - Selectorul este un id „div1” $ („. div1”) - Selectorul este o clasă „div1” $ („p”) - Selectorul este paragraful din Pagina HTML

În declarația de mai sus, $ este un semn care este utilizat pentru a accesa jQuery, selectorul este un element HTML.

Adăugarea stilurilor în JavaScript:

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

Adăugarea stilurilor în jQuery:

$ („# myDiv”). css („fundal-culoare”, „# FFF”)

Selectorul #myDiv se referă la identificatorul „myDiv”

Selecția și manipularea elementelor DOM sunt mult mai concise în jQuery decât în ​​JavaScript.

Continuăm cu gestionarea evenimentelor.

Gestionarea evenimentelor

În JavaScript, selectăm un element HTML:

document.getElementById ('# button1'). addEventListener ('click ', myCallback) function myCallback () {console („ inside myCallback function ”)}

Aici metoda getElementById () este utilizată pentru a selecta un element după id-ul său, apoi folosim metoda addEventListener () pentru a adăuga un ascultător de evenimente la eveniment. În acest exemplu, adăugăm funcția myCallback ca ascultător la evenimentul „clic”.

De asemenea, putem folosi o funcție anonimă în exemplul de mai sus:

document.getElementById ('# button1'). addEventListener ('click ', function () {console.log („ în interiorul funcției ”)})

EventListener poate fi eliminat utilizând metoda removeEventListener ()

document.getElementById („# button1”). removeEventListener („click”, myCallback)

În jQuery

jQuery a predefinit evenimente pentru aproape toate acțiunile DOM. Putem folosi evenimentul jQuery specific pentru o acțiune.

$ („P”). Faceți clic (funcție () {// faceți clic pe acțiune})

Alte exemple sunt:

$ („# Button1”). Dblclick (function () {// acțiune pentru evenimentul cu dublu clic pe elementul html cu ID-ul ‘button1’}

Metoda „activată” JQuery este utilizată pentru a adăuga unul sau mai multe evenimente la un element DOM.

$ („# Buton1”). On („clic”, funcție () {// acțiune aici})

Putem adăuga mai multe evenimente și mai multe gestionare de evenimente cu metoda on.

$ („Buton1”). On ({click: function () {// action here}, dblclick: function () {// action here}})

Două sau mai multe evenimente pot avea același gestionar ca mai jos:

$ („# Buton1”). On („faceți clic pe dblclick”, funcție () {// acțiune aici})

Astfel vedem că, cu un cod mai mic și concis, gestionarea evenimentelor este mai ușoară în jQuery decât în ​​JavaScript.

Continuăm cu apelurile Ajax.

Apeluri Ajax

În JavaScript

JavaScript a folosit un obiect XMLHttpRequest pentru a trimite o cerere Ajax către un server. XMLHttpRequest are mai multe metode pentru a efectua apelul Ajax. Cele două metode comune sunt deschise (metodă, URL, asincronizare, utilizator, PSW), send () și send (șir).
Să creăm mai întâi o cerere XMLHttpRequest:

var xhttp = new XMLHttpRequest () Apoi utilizați acest obiect pentru a apela metoda deschisă: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Metoda deschisă face o cerere de obținere către un server / locație, adevăratul specifică că cererea este asincronă. Dacă valoarea este falsă, înseamnă că solicitarea este sincronă.

Efectuarea unei cereri de postare:

var xhttp = new XMLHttpRequest () Apoi utilizați acest obiect pentru a apela metoda deschisă și a face o cerere de postare: xhttp.open ('POST', 'D: //postinfo.txt', adevărat) xhttp.send ()

Pentru a posta date cu cererea, folosim metoda setRequestHeader din xhttp pentru a defini tipul de date care trebuie trimise, iar metoda de trimitere trimite datele în perechi cheie / valoare:

xhttp.setRequestHeader („Content-type”, „application / x-www-form-urlencoded”) xhttp.send („nume = Ravi și prenume = Kumar”)

În jQuery

jQuery are mai multe metode încorporate pentru a efectua apeluri Ajax. Cu aceste metode, putem apela orice date de pe server și putem actualiza o parte a paginii web cu datele. Metodele jQuery fac apelul Ajax ușor.
Metoda jQuery load (): Această metodă preia date dintr-un URL și încarcă datele într-un selector HTML.
$ („P”). Încărcare (adresă URL, date, apel invers)
Adresa URL este locația care este apelată pentru date, parametrul opțional de date este datele (perechi cheie / valoare) pe care dorim să le trimitem împreună cu apelul, iar parametrul opțional „callback” este metoda pe care dorim să o executăm după încărcare este gata.

Metoda jQuery $ .get () și $ .post (): Această metodă preia date dintr-un URL și încarcă datele într-un selector HTML.
$ .get (URL, apel invers)
Adresa URL este locația care este apelată pentru date, iar apelarea inversă este metoda pe care dorim să o executăm după finalizarea încărcării.

$ .post (URL, date, apel invers)
Adresa URL este locația care este solicitată pentru date, datele sunt perechea / cheile / valoarea pe care dorim să o trimitem cu apelul și apelarea inversă este metoda pe care dorim să o executăm după finalizarea încărcării. Aici parametrii de date și de apel invers sunt opționali.

Apelurile jQuery Ajax sunt mai concise decât JavaScript. În JavaScript, folosim un obiect XMLHTTPRequest, în jQuery nu trebuie să folosim un astfel de obiect.

Continuăm cu animația.

Animaţie

În JavaScript

JavaScript nu are o funcție de animație specifică, cum ar fi funcția jQuery animate (). În JavaScript, efectul de animație se realizează în principal prin manipularea stilului elementului sau prin utilizarea proprietăților de transformare, traducere sau animare CSS. JavaScript folosește și metodele setInterval (), clearInterval (), setTimeout () și clearTimeout () pentru efectele de animație.

setInterval (myAnimation, 4) function myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20deg) '}

Animația în JavaScript vizează în principal manipularea proprietăților CSS.

În jQuery

jQuery are multe metode încorporate pentru a adăuga animații sau efecte asupra elementelor HTML. Să verificăm câteva dintre ele.
Metoda animate (): Această metodă este utilizată pentru a adăuga animație pe un element.

$ ('# button1'). faceți clic pe (funcție () {$ ('# div1') .animate ({height: '300px'})})

Metoda show (): Această metodă este utilizată pentru a face un element vizibil dintr-o stare ascunsă.

$ ('# buton1'). faceți clic pe (funcția () {$ ('# div1'). show ()})

Metoda hide (): Această metodă este utilizată pentru a ascunde un element dintr-o stare vizibilă.

$ ('# buton1'). faceți clic pe (funcția () {$ ('# div1'). ascunde ()})

jQuery are propriile sale metode pentru a produce animație și efecte într-o pagină web.

Pentru a rezuma, JavaScript este un limbaj pentru dezvoltarea web, jQuery este o bibliotecă care provine din JavaScript. JavaScript și jQuery au propria lor importanță în dezvoltarea web.

Acum, că știți despre buclele JavaScript, consultați de Edureka. Instruirea pentru certificarea dezvoltării web vă va ajuta să învățați cum să creați site-uri web impresionante folosind HTML5, CSS3, Twitter Bootstrap 3, jQuery și API-urile Google și să îl implementați în Amazon Simple Storage Service (S3)

Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii din „JavaScript vs jQuery” și vă vom răspunde.