JavaScript vs jQuery: diferències clau que heu de saber

Coneixem JavaScript i JQuery des de fa força anys. JavaScript es va inventar abans que jQuery. Tots dos són potents i s’utilitzen en el desenvolupament web i s’utilitzen amb el mateix propòsit, és a dir, per fer que la pàgina web sigui interactiva i dinàmica. En altres paraules, donen vida a les pàgines web. La gent pot preguntar-se que si s’utilitzen amb el mateix propòsit, per què aquests dos conceptes separats? En aquest article de JavaScript contra jQuery, esbrinarem quin és millor que l’altre en la següent seqüència:

• JavaScript: un llenguatge potent en el desenvolupament web
• JQuery: una biblioteca desenvolupada a partir de JavaScript
• Per què es crea JQuery i quines són les funcions especials de JQuery
• Diferència entre JavaScript i JQuery amb exemples
  • Afegir JavaScript i JQuery al nostre document HTML
  • Transversal i manipulació de DOM
  • Gestió d'esdeveniments
  • Trucades Ajax
  • Animació

JavaScript: un llenguatge potent en el desenvolupament web

JavaScript és un llenguatge de seqüència d’ordres que s’utilitza per afegir interactivitat a les nostres pàgines web. És una de les tres tecnologies bàsiques, juntament amb HTML i CSS, que s’utilitzen per crear pàgines web. Tot i que HTML i CSS defineixen l’estructura de la pàgina web i l’aspecte / estil de les pàgines web, JavaScript s’utilitza per dinamitzar la pàgina web afegint-hi interactivitat, cosa que significa que amb JavaScript podem afegir algun codi per fer clic amb el ratolí, passar el ratolí per sobre i altres esdeveniments a la pàgina web i molt més.

JavaScript és compatible amb tots els navegadors web i els navegadors web tenen un motor JavaScript integrat per identificar el codi JavaScript i treballar-hi. Per tant, JavaScript és majoritàriament un idioma del client. És un llenguatge que es pot utilitzar com a llenguatge de procediment i també com a llenguatge orientat a objectes basat en prototips. Quan fem servir JavaScript principal, treballem amb el llenguatge de procediment, mentre que JavaScript avançat utilitza conceptes orientats a objectes.

Continuem amb JavaScript i jQuery i entenem la biblioteca desenvolupada a partir de JavaScript.

jQuery: una biblioteca desenvolupada a partir de JavaScript

Al llarg dels anys, JavaScript ha resultat ser un llenguatge potent per al desenvolupament web. Hi ha moltes biblioteques i frameworks que han aparegut que es construeixen a sobre de JavaScript. Aquestes biblioteques i marcs estan desenvolupats per ampliar la capacitat de JavaScript, fer moltes coses amb ell i també per facilitar la feina del desenvolupador.

jQuery és una d'aquestes biblioteques de JavaScript que es crea a partir d'ella. És la biblioteca JavaScript més popular inventada per John Resign i es va llançar el gener del 2006 a BarCamp NYC. jQuery és gratuït, una biblioteca de codi obert, amb llicència sota la llicència MIT. Això té una potent característica de compatibilitat entre navegadors. Pot gestionar fàcilment problemes amb diversos navegadors que podem afrontar amb JavaScript. Per tant, molts desenvolupadors utilitzen jQuery per evitar problemes de compatibilitat entre navegadors.

Ara anem a continuar amb el nostre bloc JavaScript contra jQuery i comprovem per què es va crear jQuery.

Per què es crea jQuery i quines són les funcions especials de jQuery?

A JavaScript, hem d’escriure molts codis per a operacions bàsiques, mentre que amb jQuery es poden fer les mateixes operacions amb una sola línia de codi. Per tant, als desenvolupadors és més fàcil treballar amb jQuery que amb JavaScript.

• Tot i que JavaScript és el llenguatge bàsic a partir del qual ha evolucionat jQuery, jQuery facilita molt la manipulació d’esdeveniments, la manipulació de DOM, les trucades Ajax que JavaScript. jQuery també ens permet afegir efectes animats a la nostra pàgina web que requereix molt dolor i línies de codi amb JavaScript.
• jQuery té connectors integrats per realitzar una operació en una pàgina web. Només hem d’incloure o importar el connector a la nostra pàgina web per utilitzar-lo. Així, els connectors ens permeten crear abstraccions d’animacions i interaccions o efectes.
• També podem crear el nostre complement personalitzat amb jQuery. Si necessitem que es faci una animació en una pàgina web d’una manera determinada, podem desenvolupar un connector segons el requisit i utilitzar-lo a la nostra pàgina web.
• jQuery també té una biblioteca de widgets d’interfície d’usuari d’alt nivell. Aquesta biblioteca de widgets té tota una gamma de connectors que podem importar a la nostra pàgina web i utilitzar-la per crear pàgines web fàcils d'utilitzar.

Comprenguem la diferència.

JavaScript vs jQuery

Continuem amb la diferència entre JavaScript i jQuery amb Example.

com ordenar una matriu en ordre ascendent c ++

JavaScript vs jQuery amb exemples

Vegem els exemples.

Afegint JavaScript i jQuery al nostre document HTML

JavaScript s’afegeix directament al document HTML dins de l’etiqueta o es pot afegir un fitxer JavaScript extern a un document HTML mitjançant l’atribut src.
Escrit directament dins de l'etiqueta de script:

alert ('Aquest quadre d'alerta s'ha cridat amb l'esdeveniment de càrrega')

Per utilitzar jQuery, baixem el fitxer del seu lloc web i remetem el camí del fitxer jQuery descarregat a l'atribut src de l'etiqueta SCRIPT o el podem obtenir directament des de CDN (xarxa de lliurament de contingut).

Utilitzant CDN :

Comprenguem la manipulació i la transversalitat de DOM

Transversal i manipulació de DOM

A JavaScript:

Podem seleccionar un element DOM a JavaScript mitjançant el mètode document.getElementById () o mitjançant el mètode document.querySelector ().

var mydiv = document.querySelector ('# div1')

o bé

document.getElementById ('# div1')

A jQuery:

Aquí només haurem d’utilitzar el símbol $ amb el selector entre claudàtors.

$ (selector) $ ('# div1') - El selector és un identificador 'div1' $ ('. div1') - El selector és una classe 'div1' $ ('p') - El selector és el paràgraf de la Pàgina HTML

A la declaració anterior, $ és un signe que s’utilitza per accedir a jQuery; el selector és un element HTML.

Afegir estils a JavaScript:

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

Addició d'estils a jQuery:

$ ('# myDiv'). css ('color de fons', '# FFF')

El selector #myDiv fa referència a l’identificador ‘myDiv’

La selecció i manipulació d’elements DOM és molt més concisa a jQuery que a JavaScript.

Continuem amb la gestió d'esdeveniments.

Gestió d'esdeveniments

A JavaScript, seleccionem un element HTML:

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

Aquí s’utilitza el mètode getElementById () per seleccionar un element pel seu identificador i, a continuació, fem servir el mètode addEventListener () per afegir un oient d’esdeveniments a l’esdeveniment. En aquest exemple, afegim la funció myCallback com a oient a l’esdeveniment ‘clic’.

També podem utilitzar una funció anònima a l'exemple anterior:

document.getElementById ('# button1'). addEventListener ('clic ', function () {console.log (' dins de la funció ')})

Es pot eliminar EventListener mitjançant el mètode removeEventListener ()

document.getElementById ('# botó1'). removeEventListener ('clic', myCallback)

A jQuery

jQuery ha predefinit esdeveniments per a gairebé totes les accions de DOM. Podem utilitzar l'esdeveniment jQuery específic per a una acció.

$ ('P'). Clic (funció () {// acció de clic})

Altres exemples són:

$ ('# Button1'). Dblclick (function () {// action for the double click event on the html element with id 'button1'}

El mètode 'activat' de JQuery s'utilitza per afegir un o més esdeveniments a un element DOM.

$ ('# Botó1'). On ('clic', funció () {// acció aquí})

Podem afegir diversos esdeveniments i diversos gestors d’esdeveniments amb el mètode on.

$ ('Button1'). On ({clic: function () {// acció aquí}, dblclick: function () {// acció aquí}})

Dos o més esdeveniments poden tenir el mateix gestor que a continuació:

$ ('# Botó1'). On ('feu clic a dblclick', funció () {// acció aquí})

Per tant, veiem que amb un codi menor i concís, el tractament d’esdeveniments és més fàcil a jQuery que a JavaScript.

Continuant amb les trucades Ajax.

Trucades Ajax

En JavaScript

JavaScript va utilitzar un objecte XMLHttpRequest per enviar una sol·licitud Ajax a un servidor. XMLHttpRequest té diversos mètodes per fer la trucada Ajax. Els dos mètodes habituals són oberts (mètode, URL, asíncron, usuari, PSW), send () i send (cadena).
Primer creem una XMLHttpRequest:

var xhttp = new XMLHttpRequest () A continuació, utilitzeu aquest objecte per cridar al mètode obert: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

El mètode obert fa una sol·licitud d'obtenció a un servidor / ubicació, el veritable especifica que la sol·licitud és asíncrona. Si el valor és fals, significa que la sol·licitud és síncrona.

Fer una sol·licitud de publicació:

var xhttp = new XMLHttpRequest () A continuació, utilitzeu aquest objecte per cridar al mètode open i fer una sol·licitud de publicació: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Per publicar dades amb la sol·licitud, fem servir el mètode setRequestHeader de xhttp per definir el tipus de dades que s’envia i el mètode d’enviament envia les dades en parells clau / valor:

xhttp.setRequestHeader ('Tipus de contingut', 'application / x-www-form-urlencoded') xhttp.send ('nom = Ravi i cognom = Kumar')

A jQuery

jQuery té diversos mètodes incorporats per fer trucades Ajax. Amb aquests mètodes, podem trucar a qualsevol dada del servidor i actualitzar una part de la pàgina web amb les dades. Els mètodes jQuery faciliten la trucada Ajax.
El mètode jQuery load (): aquest mètode recupera dades d'un URL i carrega les dades en un selector HTML.
$ ('P'). Load (URL, dades, devolució de trucada)
L'URL és la ubicació que es demana per a les dades, el paràmetre de dades opcional són les dades (parells clau / valor) que volem enviar junt amb la trucada i el paràmetre opcional 'devolució de trucada' és el mètode que volem executar després de la càrrega s'ha completat.

El mètode jQuery $ .get () i $ .post (): aquest mètode recupera dades d’un URL i carrega les dades a un selector HTML.
$ .get (URL, devolució de trucada)
L'URL és la ubicació que es demana per a les dades i la devolució de trucada és el mètode que volem executar un cop finalitzada la càrrega.

$ .post (URL, dades, devolució de trucada)
L'URL és la ubicació que es demana per a les dades, les dades són el parell / s clau / valor que volem enviar amb la trucada i la devolució de trucada és el mètode que volem executar un cop finalitzada la càrrega. Aquí els paràmetres de dades i de devolució de trucada són opcionals.

Les trucades jQuery Ajax són més concises que JavaScript. A JavaScript, fem servir un objecte XMLHTTPRequest, a jQuery no hem d’utilitzar aquest objecte.

Seguint amb Animació.

Animació

En JavaScript

JavaScript no té una funció d’animació específica com la funció jQuery animate (). En JavaScript, l’efecte d’animació s’aconsegueix principalment mitjançant la manipulació de l’estil de l’element o mitjançant propietats de transformació, traducció o animació CSS. JavaScript també utilitza els mètodes setInterval (), clearInterval (), setTimeout () i clearTimeout () per als efectes d'animació.

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

L’animació en JavaScript tracta principalment de manipular les propietats CSS.

A jQuery

jQuery té molts mètodes incorporats per afegir animacions o efectes en elements HTML. En comprovem alguns.
El mètode animate (): aquest mètode s’utilitza per afegir animació a un element.

$ ('# button1'). click (function () {$ ('# div1') .animate ({height: '300px'})})

El mètode show (): aquest mètode s'utilitza per fer visible un element des d'un estat ocult.

$ ('# button1'). clic (funció () {$ ('# div1'). show ()})

El mètode hide (): aquest mètode s'utilitza per ocultar un element d'un estat visible.

$ ('# button1'). click (function () {$ ('# div1'). hide ()})

jQuery té els seus propis mètodes per produir animacions i efectes en una pàgina web.

En resum, JavaScript és un llenguatge per al desenvolupament web, jQuery és una biblioteca que s’ha originat a partir de JavaScript. JavaScript i jQuery tenen la seva pròpia importància en el desenvolupament web.

Ara que ja coneixeu els bucles de JavaScript, consulteu el per Edureka. La formació en certificació per al desenvolupament web us ajudarà a aprendre a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).

Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris de 'JavaScript vs jQuery' i us respondrem.