D'accord.
Nous saluons le retour.
Commençons donc à écrire du code.
Et la première chose que nous allons apprendre à faire est de savoir comment sélectionner des éléments.
Donc, tout comme avec la relation dominante régulière ou la phonologie Oui, nous devons sélectionner les choses et ensuite manipuler.
Je sais que je suis un peu un disque cassé là-bas, mais c'est un processus vraiment important de sélectionner et puis de changer les choses.
Cette vidéo va être principalement axée sur la sélection d'éléments avec J Query pour deux objectifs principaux ici.
Le premier est d'apprendre à sélectionner des éléments avec la fonction de signe dollar, puis aussi en utilisant la méthode évaluée C pour les éléments de style.
Donc, nous ne sommes pas seulement obtenir des choses justes les imprimer, mais pour le rendre plus visuel Nous allons les sélectionner, puis changer la couleur de fond et requête Jay, nous pouvons sélectionner tout ce que nous voulons en utilisant une seule fonction.
Le signe du dollar.
Donc contrairement à la vanille J.S. Où nous avons le document qui obtiennent l'élément par le sélecteur de requête d'interrogation d'identification tous les éléments d'obtention d'un nom de classe obtiennent des éléments par le nom d'étiquette.
Il ya tellement de façons différentes de sélectionner le signe dollar et requête Jay va remplacer tous les.
Il fonctionne essentiellement comme sélecteur de requêtes tout en ce que nous lui donnons un sélecteur de style C Ss.
Et alors la requête de Jay retourne tous les éléments assortis qui correspondent au sélecteur que nous lui donnons.
Donc, j'ai un exemple ici si nous voulions sélectionner toutes les balises d'image sur la page, il ressemble à ceci si nous voulions sélectionner tous les éléments avec la classe d'échelle, nous faisons l'échelle de points.
N'oubliez pas qu'il s'agit de sélecteurs de style.
Donc, pour un ID, nous avons besoin de l'arc de Thorpe pour une classe qui ont besoin du point et nous pouvons également faire des choses plus avancées comme celui-ci en sélectionnant toutes les balises d'ancrage qui sont à l'intérieur des éléments de liste.
Je vais donc faire une démonstration rapide de la façon dont cela fonctionne.
Donc, nous avons notre démo Jake Querrey vieilli notre page mis en place où j'ai le Cdn inclus.
Et ce n'est pas grave si nous utilisons le mot N ou si vous voulez utiliser la copie téléchargée, il fonctionnera de la même manière.
Nous avons donc besoin de ce script ici et nous avons besoin d'un certain contenu pour jouer.
Donc je vais garder le H-1 S.J. Core demo.
Je vais changer ces alliés pour les rendre un peu plus uniques, donc je vais le remplir avec certains de mes animaux préférés.
Donc fin est pour Newt.
La partie préférée de mon animal de cinq ans de la chanson alphabet animal ajoutera dans un autre de mes albums favoris Monkey.
Et enfin le pin Martin.
Et si vous n'avez jamais vu la martre de pin, ils sont tout aussi adorable et animal terrifiant.
Donc vous pouvez voir assez adorable ici.
Mais si vous jetez un oeil à eux en action, ils sont des prédateurs fous et assez effrayant.
D'ACCORD.
Donc, certains de mes animaux préférés dans la liste va sauver et nous allons ouvrir ce maintenant.
Assurez-vous que nous sommes dans le bon répertoire.
Jay a extrait la démo que chaque Chimo et ce que je vais faire est de déplacer cela dans sa propre fenêtre et nous allons simplement aller dans la console de faire la taille de la police un peu plus grand et nous allons utiliser une requête pour sélectionner certaines de ces choses.
Rappelez-vous donc qu'un signe dollar est une fonction.
Et si je tape juste dollar signe sur son propre sans les parenthèses.
C'est comme si j'écrivais l'alerte sans parenthèses ni con. Dot log sans les parenthèses ne fait vraiment rien sauf me dire.
Oui, je connais ce code, mais il ne l'exécute pas.
Commençons par sélectionner le seul H-1 sur la page pour le faire.
Nous pouvons utiliser le signe dollar et le sélecteur s pour sélectionner h ones est juste H-1 et nous avons frappé entrer.
Vous pouvez le voir renvoie la démo J queery H-1.
Aussi remarquer que c'est à l'intérieur d'une liste.
Donc, contrairement au sélecteur de requêtes où il retourne la première instance le sélecteur de signe dollar pour.
Query renvoie une liste même s'il n'y a qu'un seul élément qui est réellement utile et nous verrons cela dans un petit peu.
Alors essayons de sélectionner tous les alliés maintenant afin que nous puissions faire quelque chose comme l'allié Dollar Sign et nous avons trois alliés juste comme ça.
Nous pouvons également sélectionner le corps en tapant le corps et pour rendre les choses un peu plus intéressantes.
Revenons à notre âge e-mail et ajoutez dans un I.D. À pin martin nous allons appeler adorable comme l'id et puis nous pouvons également sur notre singe hurleur ajoutera un singe howler étiquette A et il sera juste aller à com de point de singe et ce sera juste monkey dot com.
Et si nous nous rafraîchissons si je veux sélectionner ce lien, je voudrais utiliser le signe dollar et je pourrais simplement faire de l'étiquette d'ancrage et qui me le donnera.
Je pourrais aussi dire balise d'ancrage à l'intérieur d'un allié.
Je pourrais aussi si je voulais vraiment dire que les balises d'ancrage à l'intérieur des alliés qui sont au lieu d'une volonté.
Et dans tous les cas jusqu'à présent ceux-ci sont identiques.
Mais si j'ajoute une autre balise d'ancrage juste en bas de la page Google dot com et je rafraîchis.
Et maintenant je fais mon étiquette d'ancre de signe de dollar.
Je reçois les deux balises d'ancrage.
Si je fais un signe dollar UL avec un allié avec une balise d'ancrage à l'intérieur de cela, il ne me donne cette balise d'ancrage.
Ou ils pourraient simplement raccourci à ce ici et là nous allons sélectionner l'élément avec l'idée adorable, il fonctionne comme queery select ou tout ou sélecteur de requête ou C Ss pour cette question où j'ai besoin de l'Arctique ou le symbole de hachage Plus le ID nom adorable et qui me donne l'allié de martre de pin.
Nous avons donc vu comment nous choisissons et il n'est pas très excitant juste d'imprimer des choses sur la console ou simplement de les voir retournés ici.
Mais en fait, je veux faire est d'introduire une méthode, nous allons voir beaucoup plus de méthodes dans les prochaines vidéos, mais je vais en montrer un maintenant qui nous aidera à rendre les choses visuelles et nous aider à modifier le style de sorte que Méthode s'appelle Dotsie SS et la façon dont il fonctionne est que nous tapons un signe dollar sélecteur et un sélecteur et puis nous pouvons ajouter Dotsie SS sur la fin de celui-ci et le passer dans certaines propriétés et valeurs à changer.
Alors voici un exemple que je suis en train de sélectionner quelque chose avec l'idée de spéciale et puis je suis en cours d'exécution CSSA sur elle et le changement de la frontière à deux pixels rouges solides.
Permettez-moi de le démontrer.
Faisons-le à la H-1.
Alors je choisis le signe dollar H-1 Dotsie SS Comme ça.
Et puis au lieu d'ici, nous allons changer la couleur pour être jaune juste comme ça.
Et j'ai touché l'entrée.
Et vous pouvez voir qu'il change de jaune qui est génial.
Donc, il est toujours bon de garder à l'esprit comment vous le feriez sans j Querrey.
Donc, nous allons faire quelque chose comme le document qui obtiennent et nous allons faire le sélecteur de requête de document H-1 point et B n'ont pas que C Ss Donc, nous avons besoin de faire point couleur de style point de couleur.
Et changeons-le en orange.
Et voilà.
Nous l'avons changé en orange, mais cette ligne ici est en fait beaucoup plus puissante et peut faire beaucoup plus que nous ne pouvons faire avec cette seule ligne ici.
Supposons donc que je voulais changer de styles multiples sur ce H-1 que je voulais changer la couleur et la couleur d'arrière-plan et la bordure.
Ce que je peux faire est de définir mes styles dans un objet et de passer un objet dans.
Donc, je n'ai pas à faire juste une chaîne de Porter virgule la valeur de Porter.
Je peux définir un objet avec de multiples propriétés plusieurs paires de valeurs de clé et passer que dans et ils seront tous appliqués.
Alors, faisons-le maintenant.
Définissons nos styles et nous n'avons pas à faire un objet distinct.
Je vais vous montrer ça.
Et au lieu d'ici dira que la couleur devrait être le fond rouge devrait être rose et nous ferons la frontière devrait être deux pixels violet solide juste comme cela.
Et si nous frappons Enter, nous avons maintenant notre objet styles et encore une fois qui peut être appelé quelque chose.
Et puis ce que nous allons faire est de sélectionner le H-1.
Donc dollar signe H-1 encore gutsiest nous et nous passons juste dans notre objet styles et tous ces styles sont appliqués.
Donc, pour ce faire, sans requête j nous obligerait à faire trois lignes distinctes.
Vous devriez faire le document que le querist laisse votre H-1 couleur foncée du modèle est égal au rouge et puis dot le point de fond de modèle est égal au rose et puis que le style que la frontière est égal à deux pixels pourpre plein.
J'espère que vous pouvez le voir déjà avec juste quelques lignes.
J Query est déjà prouvé être assez puissant.
Et bien que nous puissions faire tout sans elle, c'est certainement nous faire gagner du temps et rendre notre code plus propre.
Il ya une autre caractéristique de la méthode CSSA point qui rend encore plus utile que je vais montrer maintenant ce que nous pouvons faire est en fait le style de plusieurs éléments à la fois plutôt que de simplement sélectionner le premier et le rendre jaune.
Nous pourrions sélectionner tous les alliés ou tous les alliés et nous avons juste besoin d'une ligne pour le faire.
Donc, je vais vous montrer cela.
Maintenant, faisons tous les mensonges.
Donc, pour ce faire, j'ai besoin de sélectionner des alliés.
Alors, juste comme ça.
Et si je touche entrer.
Vous verrez que cela me donne les trois alliés et puis je dois chaîner sur C Ss et je vais juste lui donner une couleur de propriété unique et le changer pour être bleu juste comme ça et je vais frapper entrer et remarquer celui-ci La ligne change les trois alliés.
Donc certainement très puissant.
Tout ce que nous faisons est de sélectionner avec notre sélecteur signe dollar allié et qui nous donne trois alliés et en faisant Dotsie SS sur un tableau ici de ALWIS cette liste d'alliés.
Il va en fait les rendre tous bleus et nous n'avons même pas à boucler manuellement comme nous le ferions sans une requête.
Donc, juste pour vous rappeler si je veux changer tous d'eux pour être vert sans requête, j'ai d'abord besoin de sélectionner tous.
Ainsi, var allies est égal au document que le sélecteur de requête passe dans l'allié de chaîne.
Et puis je dois boucler.
Donc, pour var I est égal à zéro est inférieur à Elvises à la longueur I plus plus.
Et puis à l'intérieur de la boucle, nous devons faire des alliés, je que le style que la couleur égale et nous ferons vert comme ça et nous allons frapper entrer.
Et vous pouvez voir qu'ils changent tous en vert.
Donc, encore une fois, il est faisable sans une requête, mais c'est beaucoup plus de code.
Nous devons les sélectionner tous d'abord et même juste le choix est douloureux.
C'est beaucoup plus long qu'un simple signe de dollar.
Et puis nous avons aussi besoin de boucle manuellement avec une boucle for ou une boucle while et ensuite changer chacun d'eux individuellement et puis nous avons terminé avec une requête bien.
Tout ce que nous avons eu à faire pour revenir au bleu est de sélectionner tous les alliés Dotsie SS et puis passer dans notre propriété qui est de couleur bleu bleu.
Je vais vous montrer quelques exemples.
Sélectionnons toutes les balises d'ancrage juste comme ceci une étiquette que C Ss et fera leur taille de police plus grande ainsi la taille de police et elle sera 40 pixels et là nous allons.
Nous obtenons de gros liens. Je vais également montrer que nous pouvons définir un objet plein de styles comme nous l'avons fait plus tôt et nous pouvons l'utiliser pour mettre en forme plusieurs éléments, pas seulement un.
Donc nous allons sélectionner tous les mensonges et les styler ensemble et plutôt que de simplement faire le SS et en passant dans une corde comme la couleur, nous allons lui donner un objet et de le définir en place ici.
Et nous allons ajouter dans un certain espace ici pour taper.
Et la première chose que nous allons faire est de changer la taille de la police de tous.
Donc NCSA que la taille de la police est la taille de la police Dasch ou la taille et la taille en javascript et dans la requête J, nous devons utiliser le cas de chameau.
Donc, la taille de police pas d'espace ou pas de tiret, mais nous majuscule s membre qui est affaire Kimbal et nous allons les faire 10 let's faire encore 10 pixels et puis nous allons ajouter dans une bordure et celui-ci sera de trois pixels daht violet.
Ces frontières pointillées sont toujours étonnantes.
Et puis enfin ajouter dans l'arrière-plan de couleur de fond.
Et composons notre propre R.G. Couleur.
Donc R.G. B.
Et nous allons faire notre G.P.A. réellement.
Et le premier lire aussi.
89 rouge 45 vert 20 bleu.
Et puis 0.5 Alpha qui est le canal d'opacité ou de transparence.
Et si nous frappons entrer vous pouvez voir que tous ceux sont appliqués à la fois.
Donc, notre taille de police diminuer Nous avons 10 pixels.
Nous avons ces frontières étonnantes autour des alliés qui sont trois pixels daht violet et puis nous avons la couleur de fond qui est quelle que soit cette couleur s'est avéré être il ressemble à une sorte de couleur brunâtre clair.
D'accord.
J'espère que vous pouvez voir à partir de cette démonstration rapide que deux choses différentes que nous faisons la sélection avec le signe dollar et que sur ses propres est incroyablement puissant.
Il fonctionne fondamentalement comme Slickter queery et queery sélecteur tous combinés.
Et c'est une syntaxe beaucoup plus courte et plus facile à écrire.
Et puis il ya la méthode CSSA qui est également extrêmement puissant parce que nous pouvons changer les propriétés individuelles comme nous l'avons fait ici, mais nous pouvons aussi massas signer les propriétés CSSA comme nous l'avons fait ici où nous passons dans un objet plein de paires valeur clé.
Probablement la partie la plus importante de tout cela est que lorsque je sélectionne une collection comme tous les alliés comme je l'ai fait ici, je n'ai pas à faire une boucle manuellement et à appliquer quelque chose individuellement comme je l'ai fait ici où nous avons dû boucler tous les Alliés et changer la couleur une à la fois avec la requête J.
Si j'ai une collection d'éléments, il passe automatiquement au-dessus de cela et applique Dotsie évaluer à chacun.
C'est donc extrêmement puissant.
Et c'est pourquoi, comme une note de côté, c'est pourquoi il retourne toujours un tableau ici.
Même si j'ai juste un élément avec l'ID adorable, il retourne toujours dans la liste parce que toute la logique derrière les scènes implique en boucle sur cette liste.
Donc, il va boucler sur ce et il se trouve qu'il ya un élément ici.
Donc, il ne boucle pas vraiment.
Cela ne fait qu'une fois.