JavaScript vs jQuery: differenze chiave che devi sapere

Conosciamo JavaScript e JQuery da diversi anni. JavaScript è stato inventato prima di jQuery. Entrambi sono potenti e vengono utilizzati nello sviluppo web e vengono utilizzati per lo stesso scopo, ovvero per rendere la pagina web interattiva e dinamica. In altre parole, danno vita alle pagine web. Le persone potrebbero chiedersi che se vengono utilizzati per lo stesso scopo, allora perché questi due concetti separati? In questo articolo JavaScript vs jQuery, scopriremo quale è meglio dell'altro nella seguente sequenza:

• JavaScript: un potente linguaggio nello sviluppo web
• JQuery: una libreria sviluppata da JavaScript
• Perché viene creato JQuery e quali sono le capacità speciali di JQuery
• Differenza tra JavaScript e JQuery con esempi
  • Aggiunta di JavaScript e JQuery nel nostro documento HTML
  • Attraversamento e manipolazione DOM
  • Gestione degli eventi
  • Ajax Calls
  • Animazione

JavaScript: un potente linguaggio nello sviluppo web

JavaScript è un linguaggio di scripting utilizzato per aggiungere interattività alle nostre pagine web. È una delle tre tecnologie principali insieme a HTML e CSS che vengono utilizzate per creare pagine web. Mentre HTML e CSS definiscono la struttura della pagina web e l'aspetto / stile delle pagine web, JavaScript viene utilizzato per rendere dinamica la pagina web aggiungendovi interattività, il che significa che con JavaScript possiamo aggiungere del codice per il clic del mouse, il passaggio del mouse e altro eventi sulla pagina web e molto altro ancora.

JavaScript è supportato da tutti i browser Web e i browser Web hanno un motore JavaScript integrato per identificare il codice JavaScript e lavorare con esso. Pertanto, JavaScript è principalmente un linguaggio lato client. È un linguaggio che può essere utilizzato sia come linguaggio procedurale che come linguaggio orientato agli oggetti basato su prototipi. Quando usiamo JavaScript primario lavoriamo con il linguaggio procedurale mentre JavaScript avanzato utilizza concetti orientati agli oggetti.

Andiamo avanti con il nostro JavaScript vs jQuery e comprendiamo la libreria sviluppata da JavaScript.

jQuery: una libreria sviluppata da JavaScript

Nel corso degli anni JavaScript si è rivelato un potente linguaggio per lo sviluppo web. Sono state create molte librerie e framework che si basano su JavaScript. Queste librerie e framework sono sviluppati per espandere la capacità di JavaScript, fare molte cose con esso e anche per rendere più facile il lavoro dello sviluppatore.

jQuery è una di queste librerie di JavaScript che è costruita da essa. È la libreria JavaScript più popolare inventata da John Resign ed è stata rilasciata nel gennaio 2006 al BarCamp NYC. jQuery è gratuita, una libreria open source, con licenza MIT License. Questo ha una potente funzionalità di compatibilità cross-browser. Può gestire facilmente i problemi cross-browser che possiamo affrontare con JavaScript. Pertanto, molti sviluppatori utilizzano jQuery per evitare problemi di compatibilità tra browser.

Ora andiamo avanti con il nostro blog JavaScript vs jQuery e vediamo perché è stato creato jQuery.

Perché viene creato jQuery e quali sono le capacità speciali di jQuery?

In JavaScript, dobbiamo scrivere molto codice per le operazioni di base mentre con jQuery le stesse operazioni possono essere eseguite con una singola riga di codice. Pertanto gli sviluppatori trovano più facile lavorare con jQuery che con JavaScript.

• Sebbene JavaScript sia il linguaggio di base da cui si è evoluto jQuery, jQuery rende la gestione degli eventi, la manipolazione DOM e le chiamate Ajax molto più semplici di JavaScript. jQuery ci consente anche di aggiungere effetti animati sulla nostra pagina web che richiede molto dolore e righe di codice con JavaScript.
• jQuery dispone di plugin integrati per eseguire un'operazione su una pagina web. Dobbiamo solo includere o importare il plugin nella nostra pagina web per usarlo. Pertanto i plugin ci consentono di creare astrazioni di animazioni e interazioni o effetti.
• Possiamo anche creare il nostro plugin personalizzato con jQuery. Se richiediamo che un'animazione venga eseguita su una pagina web in un certo modo, possiamo sviluppare un plugin secondo il requisito e usarlo sulla nostra pagina web.
• jQuery ha anche una libreria di widget UI di alto livello. Questa libreria di widget ha un'intera gamma di plugin che possiamo importare sulla nostra pagina web e usarla per creare pagine web di facile utilizzo.

Capiamo la differenza.

JavaScript vs jQuery

Andando avanti con la differenza tra JavaScript e jQuery con Example.

JavaScript vs jQuery con esempi

Esaminiamo gli esempi.

Aggiunta di JavaScript e jQuery nel nostro documento HTML

JavaScript viene aggiunto direttamente nel documento HTML all'interno del tag oppure un file JavaScript esterno può essere aggiunto in un documento HTML utilizzando l'attributo src.
Scritto direttamente all'interno del tag dello script:

php come stampare array

alert ('Questa casella di avviso è stata chiamata con l'evento onload')

Per poter utilizzare jQuery scarichiamo il file dal suo sito web e facciamo riferimento al percorso del file jQuery scaricato nell'attributo src del tag SCRIPT oppure possiamo ottenerlo direttamente da CDN (Content delivery network).

Utilizzando CDN :

Comprendiamo l'attraversamento DOM e la manipolazione

Attraversamento e manipolazione DOM

In JavaScript:

Possiamo selezionare un elemento DOM in JavaScript utilizzando il metodo document.getElementById () o utilizzando il metodo document.querySelector ().

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

o

document.getElementById ('# div1')

In jQuery:

Qui dovremo usare solo il simbolo $ con il selettore tra parentesi.

$ (selettore) $ ('# div1') - Il selettore è un id 'div1' $ ('. div1') - Il selettore è una classe 'div1' $ ('p') - Il selettore è il paragrafo nel Pagina HTML

Nella dichiarazione precedente, $ è un segno che viene utilizzato per accedere a jQuery, il selettore è un elemento HTML.

Aggiunta di stili in JavaScript:

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

Aggiunta di stili in jQuery:

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

Il selettore #myDiv fa riferimento all'identificatore 'myDiv'

La selezione e la manipolazione degli elementi DOM è molto più concisa in jQuery che in JavaScript.

Andando avanti con la gestione degli eventi.

Gestione degli eventi

In JavaScript, selezioniamo un elemento HTML:

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

Qui il metodo getElementById () viene utilizzato per selezionare un elemento dal suo id, quindi utilizziamo il metodo addEventListener () per aggiungere un listener di eventi all'evento. In questo esempio, aggiungiamo la funzione myCallback come listener all'evento 'click'.

Possiamo anche usare una funzione anonima nell'esempio sopra:

differenza tra copia superficiale e copia profonda in java

document.getElementById ('# button1'). addEventListener ('click ', function () {console.log (' inside the function ')})

EventListener può essere rimosso utilizzando il metodo removeEventListener ()

document.getElementById ('# button1'). removeEventListener ('click', myCallback)

In jQuery

jQuery ha eventi predefiniti per quasi tutte le azioni DOM. Possiamo usare l'evento jQuery specifico per un'azione.

$ ('P'). Click (function () {// click action})

Altri esempi sono:

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

Il metodo 'on' di JQuery viene utilizzato per aggiungere uno o più eventi a un elemento DOM.

$ ('# Button1'). On ('click', function () {// action here})

Possiamo aggiungere più eventi e più gestori di eventi con il metodo.

$ ('Pulsante1'). On ({click: function () {// action here}, dblclick: function () {// action here}})

Due o più eventi possono avere lo stesso gestore come di seguito:

$ ('# Button1'). On ('click dblclick', function () {// action here})

Quindi vediamo che con un codice minore e conciso, la gestione degli eventi è più facile in jQuery che in JavaScript.

Andando avanti con Ajax Calls.

Ajax Calls

In JavaScript

JavaScript ha utilizzato un oggetto XMLHttpRequest per inviare una richiesta Ajax a un server. XMLHttpRequest ha diversi metodi per effettuare la chiamata Ajax. I due metodi comuni sono open (method, URL, async, user, PSW), send () e send (string).
Creiamo prima un XMLHttpRequest:

var xhttp = new XMLHttpRequest () Quindi usa questo oggetto per chiamare il metodo open: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Il metodo open effettua una richiesta get a un server / posizione, il true specifica che la richiesta è asincrona. Se il valore è falso, significa che la richiesta è sincrona.

Fare una richiesta di post:

var xhttp = new XMLHttpRequest () Quindi usa questo oggetto per chiamare il metodo open e fare una richiesta di post: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Per inviare i dati con la richiesta, utilizziamo il metodo setRequestHeader di xhttp per definire il tipo di dati da inviare e il metodo di invio invia i dati in coppie chiave / valore:

diploma post laurea vs laurea magistrale

xhttp.setRequestHeader ('Content-type', 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & surname = Kumar')

In jQuery

jQuery ha diversi metodi integrati per effettuare chiamate Ajax. Con questi metodi, possiamo chiamare qualsiasi dato dal server e aggiornare una parte della pagina web con i dati. I metodi jQuery semplificano la chiamata Ajax.
Il metodo jQuery load (): questo metodo recupera i dati da un URL e carica i dati su un selettore HTML.
$ ('P'). Load (URL, dati, callback)
L'URL è la posizione chiamata per i dati, il parametro dati opzionale è il dato (coppie chiave / valore) che vogliamo inviare insieme alla chiamata e il parametro opzionale 'callback' è il metodo che vogliamo eseguire dopo il caricamento è completato.

Il metodo jQuery $ .get () e $ .post (): questo metodo recupera i dati da un URL e carica i dati in un selettore HTML.
$ .get (URL, richiamata)
L'URL è la posizione chiamata per i dati e il callback è il metodo che vogliamo eseguire dopo il completamento del caricamento.

$ .post (URL, dati, richiamata)
L'URL è la posizione chiamata per i dati, i dati sono la coppia chiave / valore che vogliamo inviare con la chiamata e il callback è il metodo che vogliamo eseguire dopo il completamento del caricamento. Qui i dati e i parametri di callback sono facoltativi.

Le chiamate jQuery Ajax sono più concise di JavaScript. In JavaScript, stiamo utilizzando un oggetto XMLHTTPRequest, in jQuery non è necessario utilizzare un tale oggetto.

Andando avanti con l'animazione.

Animazione

In JavaScript

JavaScript non ha una funzione di animazione specifica come la funzione jQuery animate (). In JavaScript l'effetto di animazione si ottiene principalmente manipolando lo stile dell'elemento o utilizzando proprietà CSS di trasformazione, traduzione o animazione. JavaScript utilizza anche i metodi setInterval (), clearInterval (), setTimeout () e clearTimeout () per gli effetti di animazione.

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

L'animazione in JavaScript riguarda principalmente la manipolazione delle proprietà CSS.

In jQuery

jQuery ha molti metodi integrati per aggiungere animazioni o effetti sugli elementi HTML. Controlliamo alcuni di loro.
Il metodo animate (): questo metodo viene utilizzato per aggiungere un'animazione su un elemento.

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

Il metodo show (): questo metodo viene utilizzato per rendere un elemento visibile da uno stato nascosto.

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

Il metodo hide (): questo metodo viene utilizzato per nascondere un elemento da uno stato visibile.

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

jQuery ha i propri metodi per produrre animazioni ed effetti in una pagina web.

Per riassumere, JavaScript è un linguaggio per lo sviluppo web, jQuery è una libreria che ha avuto origine da JavaScript. JavaScript e jQuery hanno la loro importanza nello sviluppo web.

Ora che conosci i loop JavaScript, controlla il file di Edureka. Il corso di formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).

Hai domande per noi? Per favore menzionalo nella sezione commenti di 'JavaScript vs jQuery' e ti risponderemo.