JQuery

JQuery exemples articles

Avant de commencer à travailler avec un élément nécessaire pour apprendre à sélectionner. Sélection d'éléments jQuery également construit comme échantillon dans le CSS.

Afin de comprendre comment les éléments de l'échantillon dans jQuery, regardons le fichier CSS.

Tout ce qui va aux accolades est appelé le sélecteur.

1. nom tag
2. classe
3. l'identificateur

Tout ce qui est écrit entre accolades après le sélecteur - un élément de propriété avec le sélecteur donné.

Qu'est-ce qui se passe réellement? Lorsque le navigateur d'un utilisateur accède à notre CSS fichier, quand il vient à une partie du sélecteur, il commence à réaliser les propriétés des éléments correspondants avec le sélecteur. Par exemple, dans le fichier CSS:

 p {
  font-family: Tahoma;
  font-size: 12px;
 }

Maintenant, lorsque le navigateur atteint l'élément

Salut

Maintenant, nous allons voir comment la sélection des éléments enfants dans CSS. Par exemple, nous avons besoin d'appliquer les propriétés CSS ci-dessus ne sont pas tous les paragraphes et les paragraphes avec le logo d'identification. Ensuite CSS sera le suivant:

 p {#logo
  font-family: Tahoma;
  font-size: 12px;
 } 

et si nous voulons appliquer non seulement les données de propriété aux paragraphes avec id = "logo", et tous les éléments avec id = "logo", alors notre CSS est la suivante:

 #logo {
  font-family: Tahoma;
  font-size: 12px;
 }

Nous avons tous deux se rappelait comment les éléments de l'échantillon en CSS. Comme je l'ai dit plus haut, que les éléments de l'échantillon dans jQuery est effectuée par analogie avec CSS. Donc, si nous voulons sélectionner tous les paragraphes, puis écrire le code suivant:

  $ ( "P"); 

Ou si nous avons besoin de sélectionner tous les éléments de la page avec id = "logo", alors nous pouvons écrire comme suit:

  $ ( "# Logo"); 

De même, nous pouvons sélectionner tous les éléments de la classe, comme class = "logo":

  $ ( «Logo».); 

Si nous voulons choisir des éléments de l'enfant, par exemple, tous les paragraphes

ayant un logo identifiant, alors nous avons besoin de prescrire:

  $ ( "P #logo"); 

Le prochain type d'échantillonnage est de sélectionner l'élément suivant. Par exemple, nous avons le code html suivant:

  Test 1 
  Test 2 

Et nous avons besoin de choisir p tag, qui contient le texte "Test 2". Comme vous pouvez le voir est pas si facile, en utilisant l'échantillon présenté ci-dessus. Mais il y a un sélecteur jQuery spécial, ce qui nous permet de simplifier la tâche. Ce sélecteur sélectionner l'élément suivant. + Ie dans notre cas, nous pouvons devenir attaché à un div id = "logo" et à l'aide du sélecteur pour sélectionner l'élément suivant:

  $ ( "# Logo + p"); 

Parfois, une situation se présente où vous devez sélectionner tous les éléments enfants. Pour ce faire, jQuery a un sélecteur>. Par exemple, nous avons le code html suivant:

 <Div id = "content">
  <P> Bonjour </ p>
  <P> Nous commençons à apprendre jQuery </ p>
  <P> Et maintenant, nous sommes introduits dans les éléments de sélection de l'échantillon </ p>
 </ Div>

Et nous devons tout sélectionner p, qui sont enfermés dans le div id = "content" Notre code sera le suivant:

  $ ( "# Contenu> p"); 

Le prochain type d'échantillon dans jQuery - cet échantillon des éléments de valeurs d'attribut. Cet échantillon est très commun dans des projets tels que la mise en œuvre du menu déroulant. Par exemple, nous avons un code html:

 <Img src = "images / 1.png" width = hauteur "50" = "50">
 <Img src = "images / 2.png" width = hauteur "50" = "50">
 <Img src = "images / 3.png" width = hauteur "50" = "50">

et nous devons sélectionner toutes les images qui ont width = "50". Ensuite, l'échantillon se trouve dans jQuery est le suivant.

  $ ( "Img [width = 50]»); 

Le type d'échantillon suivant dans jQuery - cet échantillonnage des valeurs d'attribut qui commencent par une certaine condition. Par exemple, nous avons un code html:

 <Img src = "images / img1.png" width = hauteur "50" = "50">
 <Img src = "images / img2.png" width = hauteur "50" = "50">
 <Img src = "images / img3.png" width = hauteur "50" = "50">

et nous devons sélectionner toutes les images dont l'attribut src commence avec des images / img, alors cet échantillon dans jQuery est la suivante:

  $ ( "Img [src ^ = images / img]"); 

Par analogie, nous pouvons faire une sélection par des valeurs d'attribut, qui se terminent par une certaine condition. Ie du html-code précédent nous voulons sélectionner toutes les images png. Ensuite, l'échantillon se trouve dans jQuery est la suivante:

  $ ( "Img [src = $ png.]»); 

Suivant Picks dans jQuery - est quand vous devez sélectionner un attribut dont la valeur peut être nulle part. De html-code précédent, nous avons besoin de sélectionner toutes les images dans le titre, qui est le mot "img".

  $ ( "Img [src = * img]"); 

Nous avons passé en revue les principales méthodes d'éléments d'échantillonnage dans le jQuery, qui nous permet de sélectionner un élément, puis exercer sur eux une certaine action. Pour plus d'informations sur les méthodes d'échantillonnage en jQuery vous pouvez lire sur site officiel . Mais les éléments de l'échantillon dans jQuery ne se termine pas et le choix plus subtil d'éléments jQuery a un filtre d'échantillonnage.

JQuery filtre de sélection d'élément

En jquery il existe de nombreuses méthodes pour filtrer les éléments sélectionnés, que vous pouvez lire dans la documentation officielle. Et je vais discuter seulement les filtres les plus importants et fréquemment utilisés (à mon avis).

Le choix de même des éléments même

Il y a une situation où vous devez sélectionner à partir de seulement les même éléments de la table. Pour ce faire, les développeurs ont créé un filtre spécial: même. Par exemple, nous avons une table:

 <Table id = " 'table'">
 <TBODY>
 <Tr>
 <Td> 1 </ td>
 <Td> Nom 1 </ td>
 </ Tr>
 <Tr>
 <Td> 2 </ td>
 <Td> Nom 2 </ td>
 </ Tr>
 <Tr>
 <Td> 3 </ td>
 <Td> Nom 3 </ td>
 </ Tr>
 <Tr>
 <Td> 4 </ td>
 <Td> Nom 4 </ td>
 </ Tr>
 </ Tbody>
 </ Table>
 <Pre>

Et nous avons besoin de sélectionner les lignes paires. Pour ce faire, sélectionnez les éléments nécessaires et leur imposer le filtre de parité. Voici à quoi il ressemble dans jQuery:

  $ ( 'Table tr #: même'); 

Ainsi, nous avons choisi toutes les lignes paires. Mais attention ici - toutes les lignes, même avec javascript perspective. Et en javascript compte à rebours commence à 0, donc la première ligne de la table et la troisième ligne de la table sera sélectionnée ici.

Sélection d'éléments étranges impairs

Le contraire (pour ainsi dire) du filtre précédent est un filtre impair - impair éléments de choix. Supposons que la table, nous avons besoin de sélectionner les lignes impaires. Ensuite, appliquez le filtre impair et voilà comment il va ressembler:

  $ ( 'Table tr #: odd'); 

Sélection du premier élément premier

Si nous devons choisir un seul élément - le premier, à ces fins filtre approprié en premier. Par exemple, à partir de la table, il suffit de sélectionner la première ligne, puis un échantillon de cet article est la suivante:

  $ ( 'Table tr #: first'); 

Sélectionne la dernière entrée dernière

Pour sélectionner le dernier élément du filtre est appliqué en dernier. Par exemple de nos tables, vous devez sélectionner la dernière ligne. Ensuite, notre échantillon:

  $ ( 'Table tr #: dernier'); 

Sans nier Filtre

Ce filtre est nécessaire pour aller chercher tous les éléments sauf pour les éléments qui sont les conditions appropriées. Par exemple, nous avons

 </ Pre>
 <Div id = " '1'"> </ div>
 <Div> Exemple. </ Div>
 <Pre>

Nous avons besoin de sélectionner tout d'un div, sauf div-s qui sont dans un div-c id = '1'. Et si nous écrivons:

  $ ( 'Div'); 

Sélectionnez ensuite tous les div, même ceux qui sont dans div c id = '1', dans ce cas il est nécessaire de ne pas appliquer le filtre.

  $ ( 'Div: non (# 1 div)'); 

Et ainsi, nous choisissons tout le nécessaire pour nous div

Sélectionnez un élément qui contient un certain élément a

Parfois, il y a des situations qui ont besoin pour choisir l'élément qui contient en lui-même un autre élément spécifique. Et pour cela, il doit y filtre jquery. Par exemple, nous devons choisir div de l'exemple précédent dans lequel il y a div. Ensuite, notre échantillon se fera comme suit:

  $ ( 'Div: a (div)'); 

Ie tout sélectionner div, puis appliquer le filtre qui doit indiquer que la div sélectionnée en lui-même devrait contenir d'autres div

La sélection du contenu de l'élément

Par exemple, nous avons besoin de sélectionner un élément dans son contenu, alors nous aider filtre contient vient. À partir du code ci-dessus, nous devons sélectionner le div, qui contient le "exemple":

  $ ( 'Div: contient (Bonjour)'); 

Filtrer la sélection d'éléments sans héritiers vides

Il y a des situations où il est nécessaire de laisser les éléments sélectionnés à partir de seulement ceux qui ne disposent pas successeurs et ne contiennent rien. Par exemple, nous avons le code html

 </ Pre>
 <Table>
 <TBODY>
 <Tr>
 <Td> 1 </ td>
 <Td> </ td>
 </ Tr>
 <Tr>
 <Td> </ td>
 <Td> 2 </ td>
 </ Tr>
 </ Tbody>
 </ Table>
 <Pre>

Et nous devons tout sélectionner td qui ont pas d'héritiers.

  $ ( 'Td: vide'); 

En conséquence, nous allons sélectionner le second <td> de la première <tr> et le premier <td> dans la seconde <tr>.

Filtrer les objets cachés

Très souvent, en jQuery à choisir tous les objets cachés. Et pour cela, il y a un filtre spécial caché. Ie si nous devons tout sélectionner div-s, qui sont actuellement caché, alors il est nécessaire d'écrire le code suivant:

  $ ( 'Div: caché'); 

les éléments visibles du filtre

Le contraire au sens caché filtre - le filtre visible, qui filtre tous les éléments visibles. Ie si nous devons tout sélectionner div-s, qui sont actuellement visibles.

  $ ( 'Div: visible'); 

méthodes JQuery: texte, masquer, afficher, largeur , hauteur, html

Après avoir sélectionné l'élément désiré dans jQuery, nous avons besoin de faire une action sur elle. Dans cet article, nous allons nous concentrer sur les actions qui peuvent être effectuées sur les éléments en utilisant jQuery.

Comme vous le savez fonctionne avec la page modèle JavaScript DOM. Nous avons donc besoin que le code JavaScript est exécuté seulement après la construction du DOM. Pour ce faire, jQuery a une méthode prête qui est en attente pour la construction d'un document DOM.

Par conséquent, pour exécuter le script après la construction du DOM, utilisez la structure suivante:

 $ (Document) .ready (function () {<script code>}) 

méthode text ()

méthode text () est nécessaire pour obtenir ou modifier l'élément de texte. Supposons que nous ayons le code html suivant:

 <Div id = 'text'>
 Bonjour.
 </ Div>

Et nous voulons obtenir le texte, alors nous devons sélectionner l'élément div avec id = texte et l'appliquer à la méthode text ().

 $ (Document) .ready (function () {
 $ ( '# Text') texte () .;
 })

Pour modifier la valeur de texte de l'élément doit être notre méthode pour passer un texte de paramètre. Par exemple, nous voulons changer le texte dans l'exemple ci-dessus sur le "Welcome to web-programming.com site", alors notre code ressemblerait à ceci:

 $ (Document) .ready (function () {
 $ ( '# Text') texte ( «Welcome to web-programming.com ') .;
 })

méthode hide ()

Si nous avons besoin de cacher l'élément, alors il existe dans jQuery hide (, la vitesse de rappel) méthode. Cette méthode peut être passé deux paramètres vitesse - la vitesse d'extinction, indique le temps en millisecondes et rappel - fonction qui sera exécutée après la disparition de l'élément. Par exemple, nous avons besoin à un div id = texte (dans l'exemple ci-dessus) a disparu pendant 2 secondes, puis notre code sera:

 $ (Document) .ready (function () {
 $ ( '# Text') cache (2000) .;
 })

Méthode Show ()

La méthode opposée hide - ce spectacle, si nous devons montrer l'élément. De même, comme la méthode hide, show Pour accepte deux paramètres - un taux d'apparition et la fonction doit être exécutée après que l'article apparaisse.

 $ (Document) .ready (function () {
 $ ( '# Text') show (2000) .;
 })

la largeur ()

Pour définir ou obtenir la largeur d'un élément dans jQuery est une méthode spéciale de largeur. Si nous avons besoin pour obtenir la largeur de la div avec id = texte (dans l'exemple ci-dessus), alors vous devez écrire le code suivant:

 $ (Document) .ready (function () {
 $ ( '# Texte') largeur () .;
 })

Si nous avons besoin de définir la largeur, la largeur est nécessaire de passer un paramètre à la méthode. À moins que les unités spécifiés (%, em), puis px sera par défaut.

 $ (Document) .ready (function () {
 $ ( '# Texte') largeur (30) .;
 })

méthode de heigth ()

méthode heigth () est utilisée pour calculer le changement ou élément hauteur en jQuery. Cette méthode fonctionne de façon similaire à la méthode de la largeur.

Procédé html ()

Si nous voulons obtenir ou modifier le code de l'élément html, méthode html () doit être utilisé. Cette méthode fonctionne de manière analogue à la hauteur des procédés () et la largeur (). Ie si nous ne partageons pas nos paramètres de la méthode, la méthode va nous retourner tout le code html qui est d'être dans cet élément. Si nous passons le paramètre, puis nous changeons le code html dans notre élément.

Méthodes JQuery: fadeOut, fadeIn, fadeTo, slideUp , slideDown

méthode fadeOut ()

méthode fadeOut (heure, fonction) est utilisée pour la sortie en fondu l'élément (élément modifie sa transparence jusqu'à disparition complète). Étant donné que les paramètres prend:

• temps - le temps de disparition
• fonction - une fonction qui sera exécutée après la disparition de l'élément

Par exemple, nous avons un code html:

 <Div id = 'text'>
  Bonjour.
 </ Div>

Nous voulons un élément div avec id = texte bien passé. Pour ce faire, nous écrivons le code suivant:

 $ (Document) .ready (function () {
  $ ( '# Text') fadeOut (2000) .;
 })

méthode fadeIn ()

méthode fadeIn (temps, fonction) est utilisée pour lisser l'apparence de l'objet. L'élément change son opacité à une visibilité complète. Étant donné que les paramètres prend:

• temps - le temps de l'événement
• fonction - une fonction qui sera exécutée après la disparition de l'élément

 $ (Document) .ready (function () {
  $ ( '# Text') fadeIn (2000) .;
 })

méthode fadeTo ()

méthode fadeTo (temps, l'opacité, la fonction) - vous permet de modifier la transparence d'un élément à une certaine valeur. Étant donné que les paramètres prend:

• temps - izmenneniya temps
• opacité - transparence 0-1
• fonction - une fonction qui sera exécutée après la disparition de l'élément

exemple:

 $ (Document) .ready (function () {
  $ ( '# Text') fadeTo (2000, 0,5) .;
 })

méthode slideUp ()

méthode slideUp (heure, fonction) vous permet d'atténuer l'élément en laissant le haut. Étant donné que les paramètres prend:

• temps - le temps de l'événement
• fonction - une fonction qui sera exécutée après la disparition de l'élément

exemple:

 $ (Document) .ready (function () {
  $ ( '# Text') slideUp (2000) .;
 })

méthode slideDown ()

méthode slideDown (heure, fonction) vous permet d'afficher l'élément. Un élément qui se déplace vers le bas. Étant donné que les paramètres prend:

• temps - le temps de l'événement
• fonction - une fonction qui sera exécutée après la disparition de l'élément

exemple:

 $ (Document) .ready (function () {
  $ ( '# Text') slideDown (2000) .;
 })

Méthodes JQuery: attr, removeAttr, addClass, removeClass , css, animent

Je vous rappelle que jQuery - est un framework JavaScript.

Dans la pratique, bien souvent, il est nécessaire de changer divers attributs d'éléments HTML, ajouter ou supprimer des classes, afficher et modifier différents éléments css-propriété. Pour ce faire dans jQuery il existe des techniques spéciales que nous considérons.

méthode attr ()

Méthode attr (clé, valeur) est utilisé pour le retour ou modifier une valeur d'attribut d'un élément, où:

• clé - le nom de l'attribut
• valeur - la valeur d'attribut (si la valeur est spécifiée, changer, sinon il retourne simplement)

Par exemple, un div avec id = test a une largeur = 300px, et nous voulons connaître la largeur

 $ (Document) .ready (function () {
  $ ( '# Test') attr ( 'width') .;
 })

méthode removeAttr ()

méthode removeAttr (clé) - supprime l'attribut spécifié, où:

• attribut name clavier

Par exemple, nous avons un div avec id = test a une largeur = 300px, et nous voulons supprimer l'attribut:

 $ (Document) .ready (function () {
  $ ( '# Test') removeAttr ( 'width') .;
 })

méthode addClass ()

méthode addClass (nom) - ajoute la classe à l'élément sélectionné nommé nom. Par exemple, pour ajouter un div avec l'exemple id = classe de test:

 $ (Document) .ready (function () {
  $ ( '# Test') addClass ( 'exemple') .;
 })

méthode removeClass ()

méthode removeClass (nom) - supprime la classe de l'élément nommé nom.

Par exemple, nous avons un div avec id = test et nous Hoti retirons notre classe dans cette div, comme:

 $ (Document) .ready (function () {
  $ ( '# Test') removeClass ( 'exemple') .;
 })

Procédé css ()

Méthode css (name, value) - vous permet d'obtenir l'élément de propriété css avec le prénom du nom (si non spécifié par la seconde valeur de paramètre de cette propriété) ou de modifier la valeur du css appelé nom à la valeur de la valeur (si la deuxième valeur de paramètre est réglé) Par exemple, nous avons des en-têtes h1 et nous voulons changer la taille de la police à 20px, puis:

 $ (Document) .ready (function () {
  $ ( 'H1') css ( 'font-size', 20) .;
 })

méthode animer ()

Jusqu'à présent, nous avons considéré un simple changement dans les propriétés des éléments de jQuery, mais il y a une autre grande méthode qui vous permet de modifier les propriétés de l'élément en douceur, comme si l'animer. Ce (paramètres, temps fonction) Méthode animée, où:

• paramètre - propriétés qui va changer sa valeur
• temps - le temps pour lequel les données vont changer la valeur des propriétés
• fonction - une fonction qui va commencer son exécution après, comme il y a un changement.

Par exemple, nous avons un div avec id = test et width = 1000px. Nous voulons changer la largeur de la div à 500px en 4 secondes

 $ (Document) .ready (function () {
  $ ( '# Test') animé ({ 'width': '500px'}, 4000).
 })