fonctions jquery en russe. Exemples jQuery pour les débutants. Exemple d'utilisation de bind()

jQuery est une bibliothèque JavaScript contenant des fonctions prêtes à l'emploi Langage JavaScript, toutes les opérations jQuery sont effectuées à partir de Code JavaScript.

La bibliothèque jQuery manipule les éléments HTML, contrôle leur comportement et utilise le DOM pour modifier la structure d'une page Web. En même temps fichiers sources HTML et CSS ne changent pas, les modifications sont uniquement apportées à l'affichage de la page pour l'utilisateur.

Pour sélectionner des éléments, utilisez Sélecteurs CSS. La sélection se fait à l'aide de la fonction $(). Lorsqu'elle est appelée, la fonction $() renvoie une nouvelle instance Objet JQuery, qui encapsule zéro ou plusieurs éléments DOM et vous permet d'interagir avec eux de différentes manières.

L'exécution de divers scripts n'est possible qu'une fois le chargement de la structure terminé documenter lorsque le navigateur convertit le code html de la page en une arborescence DOM. Le processus de chargement est contrôlé par la conception

JQuery(document).ready(function() ( ... ));

Tout d'abord, l'instance du document est enveloppée dans fonction jQuery(), après avoir appliqué méthode prête() , à laquelle est transmise la fonction() (...) , qui est exécutée après le chargement du document.

En pratique, la forme abrégée de cette notation est généralement jQuery(function() (...)); , ou $(function() (...)); .

Pour stocker des informations lorsque nous travaillons avec la bibliothèque jQuery, nous utilisons Variables JavaScript. Les variables peuvent stocker des éléments. Les noms des variables destinées à stocker les éléments renvoyés commencent par le signe $, par exemple :

$h = $(".list").parent().parent().detach();

Utilisé pour stocker plusieurs éléments Tableaux JavaScript:

$k = 15 ;

Règles pour travailler avec la bibliothèque jQuery 1. Comment ajouter jQuery à une page Web

Il existe deux manières d'ajouter la bibliothèque jQuery à votre page Web :

Utilisez la version du fichier jQuery hébergée sur Ressources Google, Microsoft ou jQuery.com.
Cette méthode utilise le « Content Distribution Network » (CDN, content distribution network), c'est-à-dire le fichier jQuery se trouve sur un autre site Web qui, à la demande de l'utilisateur, envoie ce fichierà son ordinateur. Des avantages évidents cette méthode— réduisant la charge sur votre propre serveur Web et accélérant les téléchargements de fichiers grâce au réseau étendu des serveurs du distributeur.

Pour utiliser cette méthode, vous devez suivre l'un des liens :



Après être allé sur le site de ressources, il vous suffit de copier le lien vers le fichier jQuery et de l'ajouter à votre page Web entre les balises.... En conséquence, vous devriez obtenir, par exemple,

Téléchargez la dernière version de la bibliothèque jQuery sur le site officiel. Pour ce faire, vous devez vous rendre sur jQuery.com et sélectionner la version de la bibliothèque qui vous intéresse. Il existe deux versions du fichier jQuery disponibles au téléchargement : minifiée et non compressée. La taille du fichier non compressé est d'environ 300 Ko, il contient des commentaires, il est donc préférable de l'utiliser dans le but de développer et de déboguer du code.
La version réduite du fichier pèse environ 100 Ko, tous les commentaires et espaces inutiles ont été supprimés, ce qui accélère le téléchargement du fichier par le navigateur.

Pour télécharger, vous devez suivre le lien, et dans la fenêtre qui s'ouvre, cliquez sur clic droit souris et sélectionnez "Enregistrer sous...". Placez ensuite le fichier dans le dossier souhaité(généralement le dossier "scripts" est utilisé pour cela) et ajoutez-le à votre page :

2. Règles pour ajouter jQuery à la page

Placez des liens vers le fichier jQuery dans le fichier .
Placez les liens vers le fichier jQuery après les liens vers Styles CSS, puisque la bibliothèque jQuery manipule souvent les styles des éléments de la page Web.
Placez d'autres balises... seulement après le lien du fichier jQuery si ce scénario utilise la bibliothèque jQuery.

3. Comment créer un nouvel élément HTML

Vous pouvez créer un élément HTML vide, par exemple un bloc, de plusieurs manières :

1) en utilisant la forme courte $("")
2) en utilisant l'instruction $("")
3) en utilisant l'instruction $("")

Les trois méthodes fonctionnent, mais il est toujours recommandé d'inclure des balises d'ouverture et de fermeture pour montrer que cet élément peut contenir d'autres éléments.

Lors de la création d'un nouvel élément, vous pouvez passer un deuxième paramètre à la méthode $() sous la forme Objet JavaScript, définissant attributs supplémentairesélément:

$("", (src : "images/flower.jpg", titre : "Rose_in_garden", clic : function() (...) )).appendTo("body");

Cela crée un élément avec les attributs donnés et est inclus dans l'arborescence DOM.

JQuery HTML est une bibliothèque conçue pour « écrire moins et faire plus ». Ce n'est pas un langage de programmation, mais un outil utilisé pour simplifier la mise en œuvre tâches courantes JavaScript.

jQuery a avantage supplémentaire— compatibilité entre navigateurs. Vous pouvez être sûr que votre code sera interprété dans n'importe quel navigateur moderne.

Comparaison de l'écriture d'un programme simple « Hello, World ! " Avec en utilisant Javascript

et jQuery, vous pouvez voir la différence entre eux.

Javascript

document.getElementById("demo").innerHTML = "Bonjour tout le monde !";

JQuery

$("#demo").html("Bonjour le monde !");

Ce court exemple illustre comment, en utilisant jQuery, vous pouvez obtenir le même résultat que du JavaScript standard, mais de manière plus concise.

Objectifs

• Ce tutoriel ne suppose aucune connaissance de base de jQuery, mais couvre les sujets suivants :
• Comment installer jQuery dans un projet Web ;
• Définir les concepts importants de développement Web tels que l'API, le DOM et le CDN ;
• Sélecteurs, événements et effets jQuery courants ;

Exemples pour tester les concepts appris dans cet article.

configuration jQuery jQuery est Fichier Javascript

• , auquel vous ferez référence dans le document. Comment connecter JQuery au HTML : Télécharger;
• copie locale

Ajoutez un lien vers un fichier via un réseau de diffusion de contenu (CDN).

Note. Un réseau de diffusion de contenu (CDN) est un système de plusieurs serveurs qui diffusent du contenu Web à un utilisateur en fonction de sa situation géographique. Lorsque vous créez un lien vers un fichier jQuery via un CDN, il sera servi à l'utilisateur plus rapidement et plus efficacement que s'il était hébergé sur votre propre serveur. Dans nos exemples, nous établirons un lien vers jQuery via un CDN. Dernière version

jQuery peut être trouvé sur Google. Si vous souhaitez plutôt télécharger la bibliothèque, vous pouvez obtenir une copie de jQuery sur le site officiel.

Créons un petit projet Web. Il sera composé d'un fichier style.css, de scripts.js et d'un fichier principal index.html.

Définissez le balisage HTML de base et enregistrez-le dans index.html .

Index.html

Définissez le balisage HTML de base et enregistrez-le dans index.html .

Démo jQuery

Démo jQuery

Le script JavaScript (scripts.js) doit être inclus dans le document sous la bibliothèque jQuery sinon il ne fonctionnera pas.

Note. Si vous avez téléchargé une copie locale de jQuery, enregistrez-la dans le dossier js/ et connectez-la via le lien js/jquery.min.js. Bibliothèque jQuery ajoutée au HTML et nous avons accès complet

à l'API jQuery.

Utiliser jQuery

jQuery est utilisé pour se connecter aux éléments HTML du navigateur via le DOM. document (DOM) est la méthode par laquelle JavaScript (et jQuery) interagit avec HTML dans le navigateur. Pour voir ce qu'est le DOM, dans votre navigateur, faites un clic droit sur la page Web actuelle et sélectionnez « Afficher le code ». Cela ouvrira le panneau « Outils de développement ». Le code HTML que vous voyez est le DOM.

Chaque élément HTML est considéré comme un nœud DOM, un objet accessible par JavaScript. Ces objets ont une structure arborescente, avec l'élément le plus proche de la racine et chaque élément une branche de l'arbre. JavaScript peut ajouter, supprimer et modifier n'importe lequel de ces éléments.

Si vous cliquez à nouveau avec le bouton droit et sélectionnez Afficher code source", vous verrez du HTML brut. Au début, vous pourriez être confus au sujet du code source DOM et HTML, mais ce sont des choses différentes. Le code source de la page correspond exactement à ce qui est écrit dans le fichier HTML. Il est statique et immuable et n'est pas affecté par JavaScript. À son tour, le DOM est dynamique et peut changer.

La couche DOM externe, qui enveloppe l'intégralité du nœud, est l'objet document. A utiliser sur Page jQuery, vous devez vous assurer que le document est « prêt ».

Créez un fichier scripts.js dans le dossier js/ et ajoutez-y le code suivant :

js/scripts.js

Tout le code jQuery inséré dans HTML sera enveloppé dans le code ci-dessus. Cela ne fonctionnera que lorsque le DOM sera prêt à exécuter le code JavaScript. Même si dans certains cas, JavaScript ne se chargera pas tant que les éléments ne seront pas rendus, l'inclusion de ce bloc est considérée comme une bonne pratique.

Pour exécuter le script « Hello, World ! » et affichons le texte dans le navigateur à l'aide de jQuery, nous créons d'abord un élément de paragraphe vide avec l'identifiant demo qui lui est appliqué.

Définissez le balisage HTML de base et enregistrez-le dans index.html .

... ...

JQuery est appelé et est indiqué par un signe dollar ($) . Nous accédons au DOM avec jQuery en utilisant Syntaxe CSS, et appliquez l'action en utilisant la méthode :

$("sélecteur").method();

Puisqu'un identifiant en CSS est représenté par le symbole (#), on accède à l'identifiant de la démo à l'aide du sélecteur #demo. html() est une méthode qui modifie le balisage HTML à l'intérieur d'un élément.

Nous allons maintenant placer le programme « Hello, World !

js/scripts.js

" à l'intérieur du wrapper jQuery ready(). Ajoutez cette ligne à votre fonction existante dans votre fichier scripts.js :

Après avoir enregistré vos modifications, vous pouvez ouvrir le fichier index.html dans votre navigateur. Si tout fonctionne correctement, vous verrez l'inscription « Hello, World !

»

Faites un clic droit sur « Hello, World ! »

" et sélectionnez " Afficher le code ". Maintenant, le DOM affiche

Bonjour le monde!

. Si vous affichez le code source de la page, vous ne verrez que le code HTML original que nous avons écrit. Sélecteurs Les sélecteurs nous permettent d'indiquer à jQuery HTML les éléments avec lesquels nous voulons travailler. Vous pouvez visualiser

liste complète

Sélecteurs jQuery dans la documentation officielle.

Pour accéder à un sélecteur, utilisez le symbole $ suivi de parenthèses (). $("sélecteur") Lignes avec guillemets doubles sont préférés (selon

Guide jQuery ). Bien que les chaînes avec guillemets simples soient souvent utilisées. Ci-dessous se trouve

• bref aperçu
• sélecteurs fréquemment utilisés. $("*") - caractère générique : sélectionne chaque élément de la page ;$(this) - current : sélectionne l'élément actuel manipulé dans
• à l'heure actuelle

  ;

• à l'intérieur d'une fonction ;
• $("p") - tag : sélectionne toutes les instances du tag $(".example") - classe : sélectionne tous les éléments auxquels la classe exemple est appliquée ;$("#example") - identifiant : sélectionne une instance avec
• identifiant unique
• exemple ;

  .

$("") - attribut : sélectionne tous les éléments dont l'attribut type est défini sur texte ; $("p:first-of-type") - pseudo-élément : sélectionne le premier élémentÀ

connexion de JQuery

en HTML, vous aurez affaire à des classes et des identifiants. Les classes sont utilisées lorsque vous devez sélectionner plusieurs éléments et les identifiants lorsque vous devez en sélectionner un seul.

Événements jQuery

Dans l'exemple « Bonjour le monde !

"Le code s'exécutait lorsque la page était chargée et que le document était prêt, il ne nécessitait donc aucune intervention de l'utilisateur. Dans ce cas, on pourrait écrire le texte directement en HTML, sans jQuery. Mais nous devrons utiliser jQuery si nous voulons que le texte apparaisse sur la page après un clic de souris.

Revenez à votre fichier index.html et ajoutez-y un élément. Nous utiliserons ce bouton pour suivre l’événement de clic.

js/scripts.js

index.html

...Cliquez-moi

Nous utilisons la méthode click() pour appeler une fonction contenant le code « Hello, World ! "

$(document).ready(function() ( $("#trigger").click(); )); code complet JQueryHTMLélément.

js/scripts.js

$(document).ready(function() ( $("#trigger").click(function() ( $("#demo").html("Hello, World!"); )); ));

Enregistrez le fichier scripts.js et mettez à jour index.html dans votre navigateur. Désormais, lorsque vous cliquez sur le bouton, le texte « Hello, World ! » apparaît.

". Un événement est toute interaction de l'utilisateur avec le navigateur à l'aide de la souris ou du clavier. L'exemple que nous venons de créer utilise un événement click. Vous pouvez trouver une liste complète des méthodes dans la documentation officielle de jQueryévénements jQuery

• . Vous trouverez ci-dessous une liste d'événements couramment utilisés.
• click() - clic : se produit avec un simple clic de souris ;
• hover() - survol : se produit lorsque le pointeur de la souris survole un élément ;
• submit() - submit : se produit lorsque les données du formulaire sont soumises ;
• scroll() - défilement : se produit lors du défilement d'une page ou d'un élément ;

keydown() - keypress : se produit lorsque vous appuyez sur une touche du clavier.

Pour animer ou masquer des éléments lorsque l'utilisateur fait défiler la page, utilisez la méthode scroll(). Pour quitter le menu en utilisant Touches ÉCHAP

, la méthode keydown() est utilisée. Pour créer un menu déroulant ou ajouter du HTML à un div à l'aide de JQuery, la méthode click() est utilisée.

effets jQuery

Les effets jQuery vous permettent d'ajouter une animation et de manipuler des éléments sur une page.

Dans l'exemple suivant, nous allons créer une fenêtre contextuelle et masquer. Nous pourrions utiliser deux identifiants, un pour ouvrir la fenêtre et un pour la fermer, mais nous utiliserons une classe pour ouvrir et fermer la fenêtre en utilisant la même fonction. Retirer balises existantes

Et

Dans l'exemple « Bonjour le monde !

Depuis le fichier index.html et ajoutez le code suivant :

Ouvrir Fermer Dans le fichier style.css nous utiliserons quantité minimale

Code CSS pour masquer la superposition à l'aide de display: none et la centrer sur l'écran.

css/style.css

Superposition ( affichage : aucun ; position : fixe ; haut : 50 % ; gauche : 50 % ; transformation : traduire (-50 %, -50 %) ; hauteur : 200 px ; largeur : 200 px ; arrière-plan : gris ; ) Dans le fichier scripts.js nous utilisons la méthode toggle() qui fera basculer les valeurs Propriétés CSS

→ afficher de aucun à bloquer et vice versa, en masquant et en affichant la fenêtre lorsque vous cliquez sur la souris. Exemples jQuery

pour les débutants jQuery - bibliothèque javascript , composé de fonctions multi-navigateurs - tresses pour la manipulation (Éléments DOM Objet de document Modèle - Modèle objet du document). Son grand principe est application automatique le mécanisme souhaité, en fonction du navigateur. Par exemple, recevoir document par pièce d'identité, dans différents navigateurs se passe différemment. Avant jquery, j'utilisais cette fonction :

Fonction getObj(objID)( if (document.getElementById) (retourne document.getElementById(objID);) else if (document.all) (retourne document.all;) else if (document.layers) (retourne document.layers;) )

Pour effectuer la même action dans jquery, faites simplement ceci :

$("#objID") ou jQuery("#objID")

Appeler la fonction $() équivaut à jQuery() , puisque la première est un alias pour la seconde. Si vous n'utilisez pas d'autres bibliothèques comme jquery, vous pouvez accéder en toute sécurité à l'espace de noms via $(). Sinon, il est préférable d'utiliser le nom direct de l'objet - jQuery. De plus, nous supposons qu’il n’existe pas d’autres bibliothèques.

Premiers pas avec jQuery

Alors commençons. La première chose que vous devez faire est d'obtenir dernière version bibliothèques jquery sur le site officiel du projet http://jquery.com/ ou téléchargez jquery ici. Il existe deux versions dans les archives et sur le site officiel : compressée et développée. Sur le site, il est préférable d'utiliser le compressé, et si vous souhaitez expérimenter, utilisez le second. Tout d'abord, nous connectons bibliothèque jquery dans le corps de la page :

Après cela, l'espace de noms javascript est défini de telle manière que l'appel de la fonction $() est occupé par jquery et obtient n'importe quel élément. document HTML en tant qu'objet, vous pouvez utiliser l'expression $("#objID") . Où objID est l'ID de l'objet.

jQuery et CSS

Comme premier exemple, considérons travail jquery et CSS. Il existe deux manières principales de manipuler CSS à l'aide de jquery : modifier un ou plusieurs attributs à la fois. Ils sont exécutés à travers fonction CSS(). En théorie, cela ressemble à ceci :

$("#objID").css("display","block") $("#objID").css(( display:"block, margin:"10px", color:"#ffffff" ))

Exemple de modification d'un attribut CSS

L’exemple de modification d’un attribut a été une réussite !

Code source :

L’exemple de modification d’un attribut a été une réussite !

Exemple de modification de plusieurs attributs CSS

Exemple de modification de plusieurs attributs !

Code source :

function demo_css())( $("#span2").css(( color:"#ffffff", padding:"5px", background:"#980000" )); ) Exemple de modification de plusieurs attributs !

Changer le texte et le HTML

Pour modifier le texte ou code HTML et il existe des fonctions text() et html() .

$("#objID").text("Vrai la la") $("#objID").html("

C'est vrai la la

De plus, si vous essayez d'insérer du code HTML à l'aide de la fonction text(), vous le recevrez sous sa forme originale. La fonction text() échappe à tout.

Exemple de texte()

Code source :

function set_text())( $("#span3").text("Merci!"); )

Exemple d'utilisation de html()

Code source :

function set_html())( $("#span4").html("Merci ! C'est bien mieux."); )

Gestion des attributs avec jQuery

La fonction attr() manipule les attributs de n'importe quel élément. Avec son aide, vous pouvez ajouter ou modifier le titre, le href, la valeur, le src, etc.

Exemple Attr()

Code source :

function plus_ten())( var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); )

Gestionnaires d'événements dans jQuery

La liste complète est disponible sur http://api.jquery.com/category/events/. Je vais donner juste quelques exemples. Le gestionnaire le plus courant événements onclick. Dans jQuery, vous pouvez l'intercepter via la fonction click().

Exemple de clic()

Code source :

$("#butt").click(function())( alert("Avez-vous décidé de le vérifier ?"); ));

Exemple de cléup()

Entrez quelque chose :

Vous avez saisi :

Code source :

Entrez quelque chose :
Vous avez entré : $("#text2").keyup(function())( if ($("#text2").val())( $("#text2_target").css((background:"#980000" ) ); ) else ( $("#text2_target").css((background:"#ffffff")); ) $("#text2_target").text($("#text2").val()); );

Exemple d'utilisation de bind()

Cliquez sur moi !

Code source :

div#log( background:#1C93A5; width:300px; height:100px; padding:10px; color:#fff; ) Cliquez sur moi !
$(document).ready(function() ( $("#log").bind("click", function(e) ( $("#coord").html("Coordonnée X : "+ e.pageX + " Coordonnée Y : " + e.pageY + "");