Code source du didacticiel pratique JQuery

Il y a 6 chapitres au total, le code source pratique de JQuery.

Conférence 1 :

JQuery et autres connaissances en développement apprises dans cette section :
1.HTML est responsable du contenu de la page, CSS est responsable du style de la page et Javascript est responsable du comportement de la page
2. Il devrait y avoir DOCTYPE en HTML pour informer le navigateur de la méthode de rendu et d'affichage
3. Vous pouvez d'abord définir un nœud div ou span pour afficher ultérieurement les données renvoyées par le serveur.
4. L'attribut border peut contrôler la bordure des éléments de la page
5.background-*** peut contrôler l'image d'arrière-plan, sa position et la façon dont elle est affichée à plusieurs reprises
6. Vous pouvez utiliser #idname ou .classname pour définir un style de nœud HTML personnalisé
7. Vous pouvez utiliser $(document).ready(function(){}) pour définir la méthode qui doit être exécutée lors du chargement de la page.
8. Vous pouvez obtenir le nœud spécifié de la page via la méthode $(), et le paramètre est un certain sélecteur CSS
9. Vous pouvez exécuter diverses méthodes Jquery sur l'objet jquery renvoyé par la méthode $() pour obtenir des données, définir des événements et effectuer des opérations.
10. La méthode val() peut obtenir la valeur de l'attribut value du nœud
La méthode 11.html() peut définir le contenu html dans un nœud
12. La méthode click() peut répondre aux événements de clic de souris
13. La méthode keyup() peut répondre à l'événement contextuel du clavier.
14. La méthode $.get() peut interagir avec le serveur en mode get. La méthode de rappel enregistrée sera appelée lorsque les données reviendront. Cette méthode recevra un paramètre en texte brut représentant les données renvoyées par le serveur
. 15. La méthode addClass() removeClass() peut ajouter ou supprimer une classe à un nœud
16. Les données envoyées au serveur sont codées deux fois en JavaScript, puis URLDecoded une fois en UTF-8 dans le code du serveur, ce qui peut résoudre le problème des caractères chinois tronqués.



Conférence 2

JQuery et autres connaissances en développement apprises dans cette section :
1.table peut contenir la tête et le corps
2. Le contenu de l'en-tête peut être placé dans le
3.table{} est appelé sélecteur de balises et peut affecter tous les tableaux de la page entière.
4.table td{} représente tous les td contenus dans la table.
5. Vous pouvez utiliser border-collapse: collapse pour fusionner les bordures des cellules du tableau.
6. Lorsque th a une couleur de fond, la couleur de fond définie sur tr à laquelle th appartient sera invalide.
7.$(function(){}) est une manière simplifiée d'écrire $(document).ready(function(){})
8.$("tbody tr") peut renvoyer tous les nœuds tr dans tbody
9.$("tbody tr:even") peut renvoyer tous les nœuds tr avec des valeurs d'index paires dans tbody
10. La méthode CSS peut être utilisée pour définir ou obtenir l'attribut CSS du nœud. Le nom du paramètre est le nom de l'attribut CSS.
11.Le contenu de l'objet JQuery contient le nœud DOM correspondant au sélecteur, qui est enregistré sous la forme d'un tableau
12. La méthode get peut obtenir un certain nœud DOM contenu dans l'objet JQuery
13.Cette fonction représente l'objet qui exécute cette fonction
14. Lorsque le paramètre de la méthode $() est un objet DOM, cette méthode équivaut à convertir l'objet DOM en objet JQuery.
15. La méthode children peut obtenir les nœuds enfants d'un certain nœud et des paramètres peuvent être spécifiés pour limiter le contenu des nœuds enfants.
16. Si l'objet JQuery renvoyé par le sélecteur contient plusieurs nœuds DOM, lorsqu'un événement comme un clic est enregistré sur cet objet, tous les nœuds DOM seront utilisés pour l'événement
La méthode 17.html peut définir ou obtenir le contenu HTML du nœud
18. La méthode val peut obtenir ou définir la valeur du nœud
19. Si le paramètre de la méthode $() est un morceau de texte HTML correct, vous pouvez créer un nœud DOM et le conditionner dans un objet JQuery
20. La plupart des méthodes JQuery renverront l'objet JQuery qui exécute cette méthode, vous pouvez donc utiliser des méthodes en chaîne pour écrire du code pour JQuery.
21.La méthode width peut définir ou obtenir la largeur d'un nœud
22. La méthode appendTo peut ajouter un nœud à tous les nœuds enfants d'un autre nœud
23. Empêcher la livraison de l'événement peut rendre l'événement du nœud actuel faux
24. La méthode trigger peut déclencher un certain événement javascript.
25. La fonction de paramètre d'une méthode d'événement dans JQuery peut définir un paramètre d'événement. JQuery bloquera les différences d'événements du navigateur et nous transmettra un objet d'événement utilisable
. 26. Il existe un attribut which sur l'objet événement JQuery pour obtenir la valeur clé de la touche du clavier
27.13 signifie la touche Entrée, 27 signifie la touche ESC


Conférence 3

JQuery et autres connaissances en développement apprises dans cette section :
1. Les éléments de menu sur la page peuvent être représentés par ul et li
imbriqués 2. La couche la plus externe du menu est ul. Chaque menu principal d'une couche est placé dans un li. S'il existe un sous-menu, créez un nouveau ul dans le li du menu principal, puis imbriquez-le afin de créer un. menu multicouche.
3. Dans le navigateur, les éléments ul et li ont par défaut des identifiants de points devant le texte, et l'élément li sera en retrait. Le navigateur Opera est spécial et l'identifiant de li est différent des autres navigateurs.
4. Lorsque la valeur de l'attribut de style liste est nulle, vous pouvez effacer les petits points devant ul et li
5. Pour effacer la valeur de retrait du sous-menu, le remplissage et la marge doivent être égaux à 0. IE6 et IE7 ne peuvent effacer la valeur de retrait que lorsque la marge est également 0
6. Vous pouvez utiliser background-image pour spécifier l'image d'arrière-plan d'un élément. Si l'image d'arrière-plan est plus petite que la taille réelle de l'élément, l'image d'arrière-plan sera automatiquement répétée horizontalement et verticalement jusqu'à ce qu'elle remplisse toute la zone
. 7. Vous pouvez utiliser bakcground-repeat pour contrôler la méthode de remplissage répété de l'image d'arrière-plan.
8. Si une image d'arrière-plan et une couleur d'arrière-plan sont définies sur un élément, la couleur d'arrière-plan ne sera pas affichée là où il y a une image d'arrière-plan
9.Lorsque la valeur de l'attribut text-decoration est nulle, vous pouvez annuler le soulignement sur le texte
10.Background-position peut contrôler la position de l'image d'arrière-plan. La valeur de l'attribut peut être soit une valeur numérique, soit des valeurs centrales, gauche et supérieure pour contrôler les positions horizontales et verticales. Il y a deux valeurs pour cet attribut, la première correspond à la direction horizontale, et la seconde correspond à la direction verticale
11.La valeur de background-image est none, ce qui signifie qu'il n'y a pas d'image d'arrière-plan
12.Lorsque la valeur de background-repeat est no-repeat, l'image d'arrière-plan ne sera pas affichée de manière répétée dans la zone où elle se trouve.
13. Les navigateurs autres que IE6 peuvent faire en sorte que l'élément a remplisse la zone en définissant la valeur d'affichage sur bloquer. Pour IE6, vous devez définir l'affichage sur inline-block et définir la largeur de a.
14. La valeur de display est aucune et peut être utilisée pour masquer des éléments.
15. La différence entre .main a et .main > a est que le premier sélectionne tous les nœuds a à l'intérieur des éléments de cette classe de .main, tandis que le second sélectionne uniquement les nœuds a parmi les nœuds enfants de .main
16. Les méthodes show et hide peuvent être utilisées pour afficher ou masquer des éléments. L'effet sans paramètres est le même que la modification de l'attribut display de CSS. Le paramètre peut être un nombre en millisecondes, ou les trois caractères « lent », « normal » et « rapide »,
Vous pouvez contrôler le temps requis pour afficher ou masquer. Notez que l'effet d'animation est obtenu en modifiant continuellement la largeur et la hauteur de l'élément.
17. La méthode toggle est plus puissante. Elle peut nous éviter de juger si l'élément est affiché ou masqué, et masquer directement les éléments affichés et afficher les éléments masqués. La méthode d'utilisation des paramètres est la même que pour afficher et masquer.
18. slideDown et slideUp peuvent obtenir l'effet de défilement vers le bas ou vers le haut. En fait, l'effet d'animation est obtenu en modifiant la hauteur de l'élément dans un délai spécifié. Il est à noter que le cas où les paramètres de ces deux méthodes sont vides est différent de show et hide.
19.slideToggle et toggle obtiennent des effets similaires
20.DOCTYPE a un impact sur l'animation dans JQuery. Lorsqu'il n'y a pas de définition DOCTYPE, l'animation de JQuery aura un mauvais effet de scintillement dans IE.
21. La valeur de float est left, ce qui permet à tous les éléments initialement situés sur une ligne de flotter vers la gauche dans une ligne.
22. Vous pouvez définir le même style pour plusieurs sélecteurs et l'utiliser pour séparer les sélecteurs. De même pour la méthode $ de JQuery, vous pouvez également transmettre un sélecteur.



Conférence 4

JQuery et autres connaissances en développement apprises dans cette section :
1. Un groupe de balises est géré par un ul, et chaque balise est un li dans l'ul ; le contenu sous la balise est géré par un div
. 2. Les éléments suivant l'élément flottant (float) entoureront l'élément flottant. Si vous ne souhaitez pas cet environnement, vous pouvez définir l'attribut clear sur l'élément après l'élément flottant,
. 3. Pour réaliser l'intégration de l'étiquette actuelle et de la zone de contenu, cela peut être réalisé en utilisant la même couleur d'arrière-plan et en utilisant la même bordure de couleur pour l'étiquette actuelle.
4. Les méthodes mouseover et mouseout dans JQuery correspondent aux événements onmouseover et onmouseout du javascript standard et peuvent gérer les événements d'entrée et de sortie de la souris.
5. Exécutez la méthode each sur un objet JQuery contenant plusieurs éléments. Le contenu de la fonction qui peut être enregistré dans la méthode each est exécuté par chaque élément. En même temps ça
La fonction peut également recevoir un paramètre indiquant la valeur d'index de cet élément. De nombreuses méthodes dans JQuery utilisent également chacune
6. La méthode eq ne peut obtenir qu'un seul des multiples éléments contenus dans l'objet JQuery en fonction de la valeur d'index, tout en renvoyant le nouvel objet JQuery correspondant à l'élément.
7. Utilisez eq dans le sélecteur, tel que $("div:eq(1)")
8. Les méthodes addClass et removeClass sont utilisées pour ajouter et supprimer la définition de classe des éléments.
9. La méthode setTimeout en Javascript peut retarder l'exécution de certains codes, et le clearTimeout correspondant peut effacer l'opération de retard défini.
10. Lorsque vous créez une application AJAX, vous pouvez envisager de la déboguer sur FireFox maintenant, puis de la vérifier dans d'autres navigateurs et de corriger d'éventuels problèmes de compatibilité.
11. L'attribut du curseur peut contrôler le style de la souris sur l'élément. La valeur de l'attribut du pointeur représente le style de la main, qui est notre style de souris de lien commun
. 12. L'attribut position peut contrôler la façon dont l'élément est positionné. Lorsque la valeur est relative, cela signifie un positionnement par rapport à la position d'origine. Vous pouvez contrôler le mouvement des éléments par rapport à leurs positions d'origine en définissant les valeurs haut, gauche, bas et droite
13. Z-index peut contrôler la hauteur de couche des éléments sur la page. Plus la valeur est grande, plus elle sera élevée dans la couche de la page, et elle couvrira également certains éléments avec des valeurs d'index z inférieures. Uniquement pour les éléments dont la valeur de position est relative ou absolue, le z-index prendra effet.
14. La méthode de chargement dans JQuery est très puissante. Elle peut charger les données de sortie d'une page statique ou dynamique spécifiée ou d'un programme côté serveur dans un élément enveloppé par l'objet JQuery qui exécute la méthode de chargement.
15. La méthode de chargement prend également en charge le chargement partiel. Ajoutez un espace après l'adresse de la page chargée, puis utilisez le sélecteur pour charger la partie de la page qui correspond au sélecteur.
16. La page chargée doit être codée en UTF-8, sinon les caractères chinois seront tronqués après le chargement.
17.bind peut être utilisé pour lier des événements Javascript ou définis dans JQuery au nœud spécifié. Pour les événements qui ne fournissent pas directement de méthodes d'inscription dans JQuery, vous pouvez les enregistrer de cette manière. Le deuxième paramètre de la méthode peut être la définition de la méthode d'exécution de l'événement.
18.ajaxStart et ajaxStop correspondent aux événements avant et après le début et la fin de l'interaction ajax. Après avoir enregistré ces deux événements pour un nœud, la méthode spécifiée sera exécutée avant et après le début et la fin de l'interaction ajax sur la page actuelle.



Conférence 5

1. L'attribut alt de la balise img doit être écrit Lorsque l'image n'a pas été chargée ou que l'image n'existe pas, les informations textuelles de cet attribut seront affichées
. 2.select représente une liste déroulante. Chaque élément de la liste déroulante est une option. Le contenu des balises de début et de fin de l'option sera affiché sur la page. La valeur de l'attribut value est utilisée pour obtenir et envoyer. au serveur en utilisant la méthode val dans JQuery de.
Lorsque la valeur de l'attribut sélectionné est définie comme sélectionnée, cela signifie que l'option actuelle est sélectionnée
3. Comment afficher l'élément div au centre : définissez la largeur du div, puis les valeurs de margin-left et margin-right sont toutes deux automatiques. L'abréviation est margin : 0 auto ;
4. La balise p du html représente le contenu d'un paragraphe. Le contenu occupera une ou plusieurs lignes, et le contenu suivant sera affiché sur une autre ligne
. 5. Afin de centrer le texte et les images dans p, vous pouvez utiliser l'attribut text-align et la valeur de l'attribut est center. La balise p a des valeurs de marge supérieure et inférieure par défaut, qui peuvent être effacées via CSS si nécessaire
6. Lorsque la valeur de l'attribut de visibilité est masquée, l'élément est masqué. Cependant, contrairement à display, qui en est aucun, il occupe toujours un certain espace sur la page, mais n'est pas affiché. 7. Si plusieurs sélecteurs ont la même valeur d'attribut, ils peuvent être définis ensemble et séparés par des virgules
8. La méthode change correspond à l'événement onchange en Javascript standard et peut gérer des événements lorsque le contenu de la liste déroulante change
9.La méthode parent peut obtenir le nœud parent d'un nœud
10. La méthode suivante peut obtenir le nœud frère suivant d'un nœud, et la méthode précédente correspondante peut obtenir le nœud frère précédent d'un nœud
11. La méthode $.post peut lancer une demande de publication asynchrone avec le serveur. Le premier paramètre est l'adresse côté serveur de la requête, le deuxième paramètre est les données envoyées côté serveur et le paramètre est l'objet Javascript, pris
Exprimé sous forme de paires nom-valeur, le troisième paramètre est la méthode de rappel et le quatrième paramètre indique le type de données renvoyé par le serveur qui nous aidera à convertir en fonction de ce paramètre. La méthode get ne diffère que par le deuxième paramètre, et les autres paramètres ont le même usage
12.La méthode simple de définition d'objet en Javascript est {key1 : value1, key2 : value2}
13. Le format de données JSON est en fait le contenu au format texte défini par un objet ou des données en Javascript, tel que {key1 : value1, key2 : [1,2,3]} ou [1,2,{key2 : value2} ]
14. Vous pouvez utiliser directement la méthode $("<option></option>") pour créer les options dans la liste déroulante, puis utiliser la méthode appendTo pour les ajouter à la liste déroulante
15. La méthode attr peut définir ou obtenir la valeur d'attribut d'un nœud
16.ajaxStart est exécuté avant le démarrage de chaque requête ajax émise par JQuery, ajaxStop est exécuté après la fin de toutes les requêtes ajax dans la file d'attente JQuery et ajaxComplete est exécuté après la fin de chaque requête ajax émise par JQuery
17. fadeOut et fadeIn peuvent obtenir l'effet de fondu sortant et de fondu entrant. Le contenu des paramètres est similaire aux méthodes slideUp et slideDown.
18. La méthode d'animation peut obtenir n'importe quel effet d'animation et peut contrôler qu'un certain attribut CSS soit modifié dans un certain laps de temps pour obtenir l'effet d'animation
19.L'opacité peut modifier la transparence des éléments. Dans IE, un filtre est utilisé pour l'implémenter. 100 signifie entièrement affiché et 0 signifie complètement transparent. Les navigateurs non IE utilisent l'attribut d'opacité et 0 signifie transparent. JQuery en méthode animée
Les différences entre les navigateurs sont masquées dans , et l'effet de fondu entrant et sortant peut être obtenu en utilisant directement l'opacité.
20. La méthode des données peut être utilisée pour mettre les données en cache. La mise en cache peut améliorer l'efficacité opérationnelle du système et réduire la charge côté serveur
21. Vous pouvez utiliser l'objet Image en Javascript pour précharger des images, afin de savoir quand l'image est chargée, afin de pouvoir donner des informations rapides pour le chargement de l'image.
22. La méthode load peut correspondre à l'événement onload en Javascript. Dans cet exemple, elle est utilisée pour capturer l'événement lorsque l'image est chargée
.

Conférence 6

JQuery et autres connaissances en développement apprises dans cette section :
1. La fenêtre simulée dans la page peut être réalisée via la balise div du HTML. La barre de titre et la zone de contenu de la fenêtre peuvent être représentées respectivement par un div
. 2. Il existe de nombreuses façons de faire ressembler un groupe de div à une fenêtre. Par exemple, vous pouvez définir la fenêtre entière pour utiliser une couleur d'arrière-plan, puis utiliser la zone de contenu pour utiliser une autre couleur d'arrière-plan, et
. Définissez une certaine valeur de remplissage pour la fenêtre (ou définissez une bordure pour la zone de contenu) pour obtenir le contraste entre la zone de contenu et l'extérieur de la fenêtre après la barre de titre, afin qu'elle ressemble à une fenêtre.
3. Comprenez correctement l'effet de float, qui affectera réellement l'effet d'affichage entre l'élément suivant et l'élément float. Par conséquent, dans cet exemple, si l'img dans le code html est situé à la fin de la barre de titre, float : à droite, l'image s'enfuira. Zone de contenu
Le côté le plus à droite du domaine. Seulement lorsque vous placez l'image devant le texte de la barre de titre en HTML, alors float: right placera l'image juste à l'extrême droite de la barre de titre
4. Lorsque la valeur de l'attribut de débordement est automatique, lorsque la zone de contenu dépasse la hauteur ou la largeur définie, la barre de défilement s'affiche.
JQuery et autres connaissances en développement apprises dans cette section :
5. Lorsque la valeur de l'attribut position est absolue, l'élément sera positionné de manière absolue sur la page. Par défaut, il est positionné par rapport au coin supérieur gauche de la page. Si le nœud ancêtre a la définition de position : relative, il sera positionné par rapport au coin supérieur gauche du nœud ancêtre
6. La largeur et la hauteur de la zone visible du navigateur peuvent être obtenues via $(window).width() et $(window).height()
7. Les bordures gauche et supérieure de la barre de défilement du navigateur peuvent être obtenues via $(window).scrollLeft() et $(window).scrollTop()
8. Positionnez la fenêtre au milieu de la zone visible de l'écran. Vous devez utiliser la fenêtre pour positionner la fenêtre au milieu de la zone visible de l'écran. Vous devez soustraire la largeur de la fenêtre. à partir de la largeur de la zone visible de l'écran, puis divisez par 2, et ajoutez la largeur de la barre de défilement. La valeur limite gauche est requise pour obtenir la fenêtre
. La valeur limite gauche souhaitée ; la valeur limite supérieure est également obtenue de la même manière.
9. Comment écrire le plug-in : $.fn.myplugin = function(){//mycode}, ceci dans la méthode représente l'objet jquery qui exécute cette méthode. Notez que la méthode doit renvoyer ceci à la fin pour garantir. que d'autres méthodes jquery peuvent fonctionner en cascade.
10. instanceof peut être utilisé pour déterminer si une variable est une instance d'une certaine classe js, par exemple pour déterminer s'il s'agit d'un objet. L'utilisation est obj instanceof Object
. 11. typeof peut être utilisé pour déterminer le type de données d'une variable, tel que typeof str == "string"
12.Les méthodes height() et width() obtiennent la hauteur et la largeur de l'élément lui-même, innerHeight() et innerWidth() obtiennent la hauteur et la largeur incluant le remplissage, et externalHeight() et externalWidth() obtiennent la hauteur et la largeur incluant rembourrage. de
Height et width, externalHeight(true) et externalWidth(true) obtiennent la hauteur et la largeur, y compris la marge, la bordure et le remplissage
13.Scroll peut être utilisé pour enregistrer les opérations nécessaires pour faire défiler la barre de défilement du navigateur ou d'un certain nœud.
14.resize peut être utilisé pour enregistrer les opérations qui doivent être effectuées lorsque la taille du navigateur change.
15. Les opérations événementielles fournies par jquery sont incrémentielles lors de l'enregistrement. Par exemple, j'ai deux morceaux de code $(window).scroll(function(){}). . Un paragraphe, mais lors du défilement, les deux morceaux de code sont exécutés
16. La méthode d'animation peut modifier les valeurs gauche et supérieure dans un certain laps de temps pour obtenir l'effet d'animation.
17. La méthode dequeue peut supprimer un effet d'animation du début de la file d'attente d'animation et l'exécuter immédiatement. Cela garantit que les animations en fin de file d'attente peuvent être exécutées sans attendre l'animation du début.
18. La méthode is peut être utilisée pour déterminer si un objet satisfait au sélecteur jquery dans le paramètre de la méthode is
19. :le sélecteur visible peut être utilisé pour obtenir des éléments visibles dans la page
20. Les différences entre les navigateurs font que le code dans document.ready obtient la largeur et la hauteur de la zone visible du navigateur ainsi que les valeurs gauche et supérieure de la barre de défilement. Par conséquent, nous devons nous assurer que les valeurs ​. ​sont obtenus une fois cette méthode terminée.
21.$.browser peut être utilisé pour déterminer le type de navigateur. La méthode de détermination peut être $.browser.msie == true Les valeurs qui peuvent également être utilisées incluent $.browser.opera$.browser.safari $. .browser.mozilla
22.$.browser.crackée peut déterminer le numéro de crackée du navigateur, tel que $.browser.crackée.indexOf(“8”)