Initialiser un script jQuery

La syntaxe

Une fois que vous avez lié vos pages web avec la bibliothèque jQuery, il faut maintenant indiquer à votre script qu’il peut être utilisé. Pour ce faire, il faut initialiser le script.

Le caractère $ est l’alias qui permet de cibler jQuery à partir du document (document) qu’est la page web. Cela permet de créer un objet jQuery.

Quand la page et tous ses éléments constitutifs sont chargés (ready()) nous pouvons utiliser le script : function(){...};.

Initialiser un script jQuery

La première syntaxe est la plus complète et la plus simple à comprendre. Mais, pour aller plus vite, vous pouvez aussi utiliser la syntaxe courte :

Ces deux syntaxes sont strictement identiques et elles produiront les mêmes résultats.

Télécharger et intégrer la bibliothèque jQuery

Les différentes versions de jQuery

La première solution consiste à télécharger la bibliothèque jQuery et à l’implémenter dans votre site. Pour ce faire, allez sur le site de jQuery : http://jquery.com

page de téléchargement jquery

Page de téléchargement jQuery

Sur cette page d’accueil, cliquez sur le bouton Download jQuery v3.3.1. Vous êtes alors dirigé vers la page http://jquery.com/download/. Vous y trouverez toutes les versions de la bibliothèque jQuery.

Il existe deux versions principales de jQuery : la version standard et la version slim.

  • La version standard est la version complète de jQuery, avec toutes les fonctionnalités.
  • La version slim ne possède pas toutes les fonctionnalités, elle n’inclut pas l’AJAX, les effets et les fonctions dépréciés.

Pour chaque version, standard et slim, vous pouvez utiliser la version compressed production ou la version uncompressed, development.

Télécharger les fichiers

Vous pouvez donc télécharger la version de développement pour concevoir vos sites web en local, sur vos machines, et la version de production pour la publication de ceux-ci chez un hébergeur. Dans les deux cas, nous allons télécharger la version standard, complète de jQuery.

Pour télécharger la version de production, sur la page de téléchargement :

Télécharger la version de production de jQuery

Télécharger la version de production de jQuery

Lier la bibliothèque jQuery

Maintenant, vous devez lier chacune de vos pages web où doit intervenir un script jQuery au fichier jQuery.

Pour bien organiser les fichiers de vos sites, je vous conseille de créer un dossier nommé js pour y placer toutes vos bibliothèques JavaScript.

Exemple d'une page web utilisant la librairie jQuery

Exemple d’une page web utilisant la librairie jQuery


Lier jQuery via un CDN

La deuxième solution qui s’offre à vous pour utiliser la bibliothèque jQuery est de la lier avec chacune de vos pages web par l’intermédiaire d’un serveur dédié sur le Web. Ces serveurs qui hébergent des bibliothèques et d’autres services web s’appellent des CDN : Content Delivery Network. Ils délivrent tous ces services et ces contenus de manière très rapide. Il existe de nombreux CDN qui hébergent la bibliothèque jQuery.

Pour lier vos pages web à jQuery avec un CDN, il suffit de créer une liaison <script> dans la section <head> de vos pages web :

  • Google CDN

Voir aussi :


Dans l’article suivant, nous verrons comment initialiser un script jQuery.

jQuery : Scroll to element – Smooth Scroll

jQuery : Scroll to element – Smooth Scroll

Pour comprendre les détails de cet exemple, il faut obligatoirement voir la vidéo ci-dessous. Il faut au préalable télécharger jQuery 1 et Font Awesome 4 puis les intégrer dans la page index.html. Cette vidéo : https://www.youtube.com/watch?v=8j4q8v9G07k vous aide à préparer votre projet.

index.html

style.css

main.js

 

Installation de jQuery UI

Pour installer jQuery UI, il faut donc disposer de la librairie jQuery ou y faire appel. Un document HTML qui inclura des widgets de jQuery UI doit impérativement comporter un appel au framework jQuery.

Plusieurs méthodes possible pour mettre en place jQuery UI:

  • Par CDN
  • En local
  • En version dédiée

Mise en place de jQuery UI par CDN

Plusieurs CDN proposent un accès à la librairie jQuery UI. Parmi eux :

JQuery :

Google :

L’exemple ci-dessous vous permettra d’utiliser jQuery UI correctement.

Mise en place de jQuery UI en local

 

Introduction à jQuery

Qu’est ce que jQuery?

jQuery est un framework JavaScript complet. Il comporte ainsi une série de fonctions dites utilitaires. Il n’est pas possible, dans le cadre de ce cours, de les passer toutes en revue. Celles-ci peuvent être consultées dans la documentation de jQuery à l’adresse :http://api.jquery.com/category/utilities/.

Éviter les conflits

pour le développement des applications récentes. Leur cohabitation pose souvent des problèmes car le signe dollar $ est utilisé par chacun d’eux. Pour rappel, jQuery utilise le $ comme alias de “jQuery”.

La méthode jQuery.noConflict() permet d’éviter les conflits possibles avec les autres frameworks. Ainsi l’appel à $ dans le code du script ne sera plus considéré comme du jQuery et sera réservé aux autres librairies. Le nommage initial jQuery sera repris pour le code jQuery.

Pour plus de détails, voir : http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Exemple Soit deux divisions. Le contenu de l’une est géré par jQuery et l’autre par Prototype.

Explications du script.

// Partie jQuery jQuery.noConflict();

La méthode jQuery.noConflict() indique à jQuery de ne plus prendre en compte les variables $.

jQuery(’#jquery’).addClass(’jquery’);

Le signe $ est remplacé par jQuery.

// Partie Prototype $(’prototype’).addClassName(’prototype’);

Instruction gérée par Prototype. Le signe $ n’est plus considéré comme du jQuery grâce à l’instructionjQuery.noConflict().