JavaScript vs jQuery: les principales différences à connaître

Nous connaissons JavaScript et JQuery depuis plusieurs années. JavaScript a été inventé avant jQuery. Les deux sont puissants et sont utilisés dans le développement Web et sont utilisés dans le même but, c'est-à-dire pour rendre la page Web interactive et dynamique. En d'autres termes, ils donnent vie aux pages Web. Les gens peuvent se demander que s'ils sont utilisés dans le même but, pourquoi ces deux concepts distincts? Dans cet article JavaScript vs jQuery, nous découvrirons ce qui est meilleur que l'autre dans la séquence suivante:

• JavaScript: un langage puissant dans le développement Web
• JQuery: une bibliothèque développée à partir de JavaScript
• Pourquoi JQuery est créé et quelles sont les capacités spéciales de JQuery
• Différence entre JavaScript et JQuery avec des exemples
  • Ajout de JavaScript et JQuery dans notre document HTML
  • Traversée et manipulation DOM
  • Gestion des événements
  • Appels Ajax
  • Animation

JavaScript: un langage puissant dans le développement Web

JavaScript est un langage de script utilisé pour ajouter de l'interactivité à nos pages Web. C'est l'une des trois technologies de base avec HTML et CSS qui sont utilisées pour créer des pages Web. Alors que HTML et CSS définissent la structure de la page Web et l'apparence / le style des pages Web, JavaScript est utilisé pour rendre la page Web dynamique en y ajoutant de l'interactivité, ce qui signifie qu'avec JavaScript, nous pouvons ajouter du code pour le clic de la souris, le survol de la souris et autres événements sur la page Web et bien plus encore.

JavaScript est pris en charge par tous les navigateurs Web et les navigateurs Web ont un moteur JavaScript intégré pour identifier le code JavaScript et l'utiliser. Ainsi, JavaScript est principalement un langage côté client. C'est un langage qui peut être utilisé comme langage procédural ainsi que comme langage orienté objet basé sur un prototype. Lorsque nous utilisons JavaScript primaire, nous travaillons avec le langage procédural tandis que JavaScript avancé utilise des concepts orientés objet.

Passons à notre JavaScript vs jQuery et comprenons la bibliothèque développée à partir de JavaScript.

jQuery: une bibliothèque développée à partir de JavaScript

Au fil des années, JavaScript s'est avéré être un langage puissant pour le développement Web. Il existe de nombreuses bibliothèques et frameworks qui ont été créés et reposent sur JavaScript. Ces bibliothèques et frameworks sont développés pour étendre la capacité de JavaScript, faire beaucoup de choses avec lui et aussi pour faciliter le travail du développeur.

jQuery est l'une de ces bibliothèques de JavaScript qui en est issue. Il s'agit de la bibliothèque JavaScript la plus populaire inventée par John Resign et publiée en janvier 2006 à BarCamp NYC. jQuery est gratuit, une bibliothèque open-source, sous licence MIT. Cela a une fonctionnalité puissante de compatibilité entre navigateurs. Il peut facilement gérer les problèmes multi-navigateurs auxquels nous pouvons faire face avec JavaScript. Ainsi, de nombreux développeurs utilisent jQuery pour éviter les problèmes de compatibilité entre navigateurs.

Passons maintenant à notre blog JavaScript vs jQuery et voyons pourquoi jQuery a été créé.

Pourquoi jQuery est créé et quelles sont les capacités spéciales de jQuery?

En JavaScript, nous devons écrire beaucoup de code pour les opérations de base tandis qu'avec jQuery, les mêmes opérations peuvent être effectuées avec une seule ligne de code. Par conséquent, les développeurs trouvent plus facile de travailler avec jQuery qu'avec JavaScript.

• Bien que JavaScript soit le langage de base à partir duquel jQuery a évolué, jQuery rend la gestion des événements, la manipulation DOM, les appels Ajax beaucoup plus faciles que JavaScript. jQuery nous permet également d'ajouter des effets animés sur notre page Web, ce qui prend beaucoup de peine et des lignes de code avec JavaScript.
• jQuery a des plugins intégrés pour effectuer une opération sur une page Web. Nous devons simplement inclure ou importer le plugin dans notre page Web pour l'utiliser. Ainsi les plugins nous permettent de créer des abstractions d'animations et d'interactions ou d'effets.
• Nous pouvons également créer notre plugin personnalisé avec jQuery. Si nous avons besoin d'une animation sur une page Web d'une certaine manière, nous pouvons développer un plugin en fonction de l'exigence et l'utiliser sur notre page Web.
• jQuery dispose également d'une bibliothèque de widgets d'interface utilisateur de haut niveau. Cette bibliothèque de widgets contient toute une gamme de plugins que nous pouvons importer sur notre page Web et l'utiliser pour créer des pages Web conviviales.

Comprenons la différence.

JavaScript vs jQuery

Passer à la différence entre JavaScript et jQuery avec Example.

JavaScript vs jQuery avec des exemples

Regardons les exemples.

Ajout de JavaScript et jQuery dans notre document HTML

JavaScript est ajouté directement dans le document HTML à l'intérieur de la balise ou un fichier JavaScript externe peut être ajouté dans un document HTML à l'aide de l'attribut src.
Écrit directement dans la balise script:

comment trouver palindrome en java

alert ('Cette boîte d'alerte a été appelée avec l'événement onload')

Pour utiliser jQuery, nous téléchargeons le fichier à partir de son site Web et nous référons le chemin du fichier jQuery téléchargé dans l'attribut src de la balise SCRIPT ou nous pouvons l'obtenir directement à partir du CDN (Content delivery network).

Utilisation de CDN :

Comprenons la traversée et la manipulation DOM

Traversée et manipulation DOM

En JavaScript:

Nous pouvons sélectionner un élément DOM en JavaScript en utilisant la méthode document.getElementById () ou en utilisant la méthode document.querySelector ().

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

ou

document.getElementById ('# div1')

Dans jQuery:

Ici, nous devrons utiliser uniquement le symbole $ avec le sélecteur entre parenthèses.

$ (selector) $ ('# div1') - Le sélecteur est un id 'div1' $ ('. div1') - Le sélecteur est une classe 'div1' $ ('p') - Le sélecteur est le paragraphe dans le Page HTML

Dans l'instruction ci-dessus, $ est un signe utilisé pour accéder à jQuery, le sélecteur est un élément HTML.

Ajout de styles en JavaScript:

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

Ajout de styles dans jQuery:

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

Le sélecteur #myDiv fait référence à l'identifiant «myDiv»

La sélection et la manipulation des éléments DOM sont beaucoup plus concises dans jQuery que dans JavaScript.

Passons à la gestion des événements.

Gestion des événements

En JavaScript, nous sélectionnons un élément HTML:

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

Ici, la méthode getElementById () est utilisée pour sélectionner un élément par son id, puis nous utilisons la méthode addEventListener () pour ajouter un écouteur d'événement à l'événement. Dans cet exemple, nous ajoutons la fonction myCallback en tant qu’écouteur à l’événement ‘click’.

Nous pouvons également utiliser une fonction anonyme dans l'exemple ci-dessus:

convertir décimal en binaire en python

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

Le eventListener peut être supprimé à l'aide de la méthode removeEventListener ()

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

Dans jQuery

jQuery a des événements prédéfinis pour presque toutes les actions DOM. Nous pouvons utiliser l'événement jQuery spécifique pour une action.

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

D'autres exemples sont:

$ ('# Button1'). Dblclick (function () {// action pour l'événement de double-clic sur l'élément html avec l'ID 'button1'}

La méthode JQuery «on» est utilisée pour ajouter un ou plusieurs événements à un élément DOM.

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

Nous pouvons ajouter plusieurs événements et plusieurs gestionnaires d'événements avec la méthode on.

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

Deux événements ou plus peuvent avoir le même gestionnaire que ci-dessous:

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

Ainsi, nous voyons qu'avec du code moins concis, la gestion des événements est plus facile dans jQuery que dans JavaScript.

Passons aux appels Ajax.

Appels Ajax

En JavaScript

JavaScript a utilisé un objet XMLHttpRequest pour envoyer une requête Ajax à un serveur. Le XMLHttpRequest a plusieurs méthodes pour effectuer l'appel Ajax. Les deux méthodes courantes sont open (méthode, URL, async, utilisateur, PSW), send () et send (string).
Créons d'abord une XMLHttpRequest:

var xhttp = new XMLHttpRequest () Ensuite, utilisez cet objet pour appeler la méthode ouverte: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

La méthode open fait une demande d'obtention à un serveur / emplacement, le vrai spécifie que la demande est asynchrone. Si la valeur est false, cela signifie que la demande est synchrone.

Faire une demande de publication:

var xhttp = new XMLHttpRequest () Ensuite, utilisez cet objet pour appeler la méthode open et faire une demande de publication: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Pour publier des données avec la requête, nous utilisons la méthode setRequestHeader de xhttp pour définir le type de données à envoyer et la méthode d'envoi envoie les données par paires clé / valeur:

différence entre le remplacement et la surcharge en java

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

Dans jQuery

jQuery a plusieurs méthodes intégrées pour effectuer des appels Ajax. Avec ces méthodes, nous pouvons appeler toutes les données du serveur et mettre à jour une partie de la page Web avec les données. Les méthodes jQuery facilitent les appels Ajax.
La méthode jQuery load (): Cette méthode récupère les données d'une URL et charge les données dans un sélecteur HTML.
$ ('P'). Load (URL, données, rappel)
L'URL est l'emplacement qui est appelé pour les données, le paramètre de données facultatif est les données (paires clé / valeur) que nous voulons envoyer avec l'appel et le paramètre facultatif 'callback' est la méthode que nous voulons exécuter après le chargement est terminé.

La méthode jQuery $ .get () et $ .post (): Cette méthode récupère les données d'une URL et charge les données dans un sélecteur HTML.
$ .get (URL, rappel)
L'URL est l'emplacement qui est appelé pour les données et le rappel est la méthode que nous voulons exécuter une fois le chargement terminé.

$ .post (URL, données, rappel)
L'URL est l'emplacement qui est appelé pour les données, les données sont la paire clé / valeur que nous voulons envoyer avec l'appel et le rappel est la méthode que nous voulons exécuter une fois le chargement terminé. Ici, les données et les paramètres de rappel sont facultatifs.

Les appels jQuery Ajax sont plus concis que JavaScript. En JavaScript, nous utilisons un objet XMLHTTPRequest, dans jQuery, nous n'avons pas à utiliser un tel objet.

Passons à l'animation.

Animation

En JavaScript

JavaScript n'a pas de fonction d'animation spécifique comme la fonction jQuery animate (). En JavaScript, l'effet d'animation est principalement obtenu en manipulant le style de l'élément ou en utilisant des propriétés de transformation, de traduction ou d'animation CSS. JavaScript utilise également les méthodes setInterval (), clearInterval (), setTimeout () et clearTimeout () pour les effets d'animation.

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

L'animation en JavaScript consiste principalement à manipuler les propriétés CSS.

Dans jQuery

jQuery a de nombreuses méthodes intégrées pour ajouter des animations ou des effets sur des éléments HTML. Vérifions quelques-uns d’entre eux.
La méthode animate (): Cette méthode est utilisée pour ajouter une animation sur un élément.

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

La méthode show (): Cette méthode est utilisée pour rendre un élément visible à partir d'un état masqué.

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

La méthode hide (): Cette méthode est utilisée pour masquer un élément d'un état visible.

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

jQuery a ses propres méthodes pour produire des animations et des effets dans une page Web.

Pour résumer, JavaScript est un langage de développement Web, jQuery est une bibliothèque issue de JavaScript. JavaScript et jQuery ont leur propre importance dans le développement Web.

Maintenant que vous connaissez les boucles JavaScript, consultez la par Edureka. La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3).

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de «JavaScript vs jQuery» et nous vous répondrons.