Téléchargement gratuit du code source du didacticiel pratique JQuery

Adresse de téléchargement : http://www.php.cn/xiazai/code/1765

Leçon 1 :

Ce que nous avons appris dans cette section est JQuery et Autres connaissances en développement :

1 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 p ou span node pour afficher les données renvoyées par le serveur ultérieurement.

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, la position de l'image d'arrière-plan et le mode d'affichage répété

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 quand la page est chargée, la méthode qui doit être exécutée.

8. Vous pouvez utiliser la méthode $() pour obtenir le nœud spécifié de la page. Le paramètre est un certain sélecteur CSS

9. Vous pouvez exécuter diverses opérations sur l'objet jquery renvoyé. par la méthode $() pour obtenir des données, définir des événements et effectuer des opérations.

La méthode 10.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.click La méthode () peut répondre à l'événement 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 une valeur pure représentant les données renvoyées par. le serveur. Paramètres de texte

15. La méthode addClass() removeClass() peut ajouter ou supprimer une classe à un nœud

16 Les données envoyées au serveur sont encodeURI deux fois en javascript, puis faire URLDecode en UTF-8 dans le code côté serveur peut résoudre le problème des caractères chinois tronqués.

Recommandations de sujets connexes : "Vidéo pratique jquery"

Cours 2

JQuery et autres connaissances en développement apprises dans cette section :

1.table peut contenir le head et le tbody

2 Le contenu de l'en-tête du tableau peut être placé dans le

3.table{} Cette façon d'écrire est appelée un sélecteur de balises. tous les tableaux sur toute la page.

4.table td{} représente tous les tds contenus dans le tableau.

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 être renvoyé 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 le Objet JQuery

13. Cette fonction in 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 à une conversion du DOM. objet dans un objet JQuery.

15. La méthode children peut obtenir les nœuds enfants d'un 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

17.html La méthode 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. un morceau de texte HTML correct, vous pouvez alors créer un nœud DOM et le conditionner dans un objet JQuery

20. La plupart des méthodes de JQuery renverront l'objet JQuery qui exécute cette méthode, vous pouvez donc utiliser la méthode de chaîne pour écrire le code donné à 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 à l'arrière de 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 de déclenchement 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. sur l'objet événement JQuery pour obtenir la valeur clé de la touche du clavier

27.13 représente la touche Entrée, 27 représente la touche ESC

Leçon 3

Cette section JQuery et autres connaissances de développement apprises :

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, et chaque couche Un menu principal est placé. dans un li S'il y a des sous-menus, créez un nouveau ul dans le li du menu principal, puis imbriquez-les afin de créer un menu multicouche.

3. Dans le navigateur, les éléments ul et li ont des identifiants de points devant le texte par défaut, 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 de liste est nulle, vous pouvez effacer les petits points devant ul et li

5 Effacer la valeur d'indentation du sous-menu, à la fois le remplissage et la marge. doit être 0, parmi lesquels 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 de fond et une couleur de fond sont définies sur un élément en même temps, la couleur de fond ne sera pas affichée là où il y a une image de fond

Lorsque le texte- La valeur de l'attribut de décoration est aucune, 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 au centre, à gauche et en haut. valeurs 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. La valeur de background-repeat Lorsqu'elle est sans répétition, l'image d'arrière-plan ne sera pas affichée à plusieurs reprises dans la zone.

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 nulle 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 enfants de .main a. node

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 du CSS. Le paramètre peut être un nombre en millisecondes, ou les trois mots « lent », « normal » et « rapide »

peuvent tous être utilisés pour contrôler le temps requis pour terminer l'affichage ou le masquage. 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 peut faire flotter tous les éléments situés à l'origine sur une ligne 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.

Cours 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 dans l'ul A. li ; le contenu sous la balise est géré avec p

2. Les éléments suivant l'élément flottant (float) entoureront l'élément flottant. Si vous ne souhaitez pas cet entourage, vous pouvez le placer après l'élément flottant. . Définissez l'attribut clear sur cet élément,

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 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ée pour la méthode each est exécuté par chaque élément. Parallèlement, cette fonction

peut également recevoir un paramètre indiquant la valeur d'index de cet élément. De nombreuses méthodes dans JQuery utilisent également each

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, et renvoie toujours le nouvel objet JQuery correspondant à l'élément.

7. Utilisez eq dans le sélecteur, tel que $("p:eq(1)")

8 Les méthodes addClass et removeClass sont utilisées pour ajouter et supprimer la définition de classe de. é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 curseur peut contrôler le style de la souris sur l'élément. La valeur de l'attribut pointeur représente le style de la main, qui est notre style de souris de lien commun

12. le positionnement de l'élément, lorsque la valeur est relative, cela signifie un positionnement par rapport à la position d'origine. Vous pouvez contrôler le mouvement de l'élément par rapport à sa position d'origine en définissant les valeurs haut, gauche, bas et droite

13. page. Plus la valeur est grande, plus la hauteur de l'élément sur la page est élevée. Plus le calque est avancé, plus les éléments avec des valeurs d'index z inférieures seront couverts. 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 l'é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 encodé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 fonction spécifiée sera exécutée avant et après le début de l'interaction ajax sur la page actuelle. et se termine la méthode.

Leçon 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. est utilisé pour l'obtenir et l'envoyer à JQuery en utilisant la méthode val Server.

définit que lorsque la valeur d'attribut sélectionné est sélectionnée, cela signifie que l'option actuelle est sélectionnée

3 Comment afficher l'élément p au centre : définir la largeur de p, et. puis margin-left et margin-right Les valeurs sont toutes automatiques. La méthode d'abréviation est margin : 0 auto;

La balise p de 4.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 margin-top et margin-bottom par défaut. Si nécessaire, elle peut être effacée via CSS

6. Lorsque la valeur de l'attribut de visibilité est masquée, l'élément est masqué, mais quand. c'est différent de l'affichage, il est affiché sur la page. Il occupe toujours un certain espace, mais il n'est pas affiché

7 Si plusieurs sélecteurs ont la même valeur d'attribut, ils peuvent être définis ensemble, et le les sélecteurs sont séparés par des virgules

8. La méthode change correspond à l'événement onchange en Javascript standard, et peut gérer les é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 parent d'un nœud Le nœud frère suivant, 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 requête 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 au serveur, le paramètre est l'objet Javascript, représenté par

sous forme de paires nom-valeur, et le le troisième paramètre est la méthode de rappel, le quatrième paramètre indique le type de données renvoyé par le serveur et JQuery nous aidera à le 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 sont utilisés de la même manière

12. La méthode de définition d'objet simple en Javascript est {key1 : value1, key2 : value2}

. 13.JSON Le format de données est en fait le contenu du 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 $("") pour créer les options dans la liste déroulante, puis utiliser la méthode appendTo pour les ajouter au liste déroulante

15.méthode attr Vous pouvez définir ou obtenir la valeur d'attribut d'un nœud

16. ajaxStart est exécuté avant chaque requête ajax émise par JQuery, ajaxStop est exécuté après tout ajax Les requêtes dans la file d'attente JQuery se terminent et ajaxComplete est exécuté après chaque requête ajax émise par JQuery. Une fois la requête ajax terminée, exécutez

17. fadeOut et fadeIn peuvent obtenir l'effet de fondu de sortie et de fondu d'entrée. Le contenu du paramètre 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.opacity peut modifier la transparence. de l'élément , implémenté à l'aide de filtres dans IE, 100 signifie entièrement affiché, 0 signifie complètement transparent, les navigateurs non IE utilisent l'attribut opacity, 1 signifie entièrement affiché, 0 signifie transparent. JQuery bloque les différences du navigateur dans la méthode d'animation

, et vous pouvez utiliser l'opacité directement pour obtenir l'effet de fondu entrant et sortant.

La méthode 20.data 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 sur le serveur

21. Vous pouvez utiliser l'objet Image en Javascript pour précharger les images, afin de savoir quand l'image est chargée, afin de donner quelques informations sur le chargement des images.

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 de chargement de l'image

Leçon 6

. JQuery appris dans cette section Et d'autres connaissances en développement :

1. La fenêtre simulée dans la page peut être réalisée via la balise p du HTML, et la barre de titre et la zone de contenu de la fenêtre peuvent être représentées respectivement par un p.

2 . Il existe de nombreuses façons de faire ressembler un groupe de p au style d'une fenêtre. Par exemple, vous pouvez définir la fenêtre entière pour qu'elle utilise une couleur d'arrière-plan, puis utiliser une autre couleur d'arrière-plan pour le contenu. zone, et

définit une certaine valeur pour la fenêtre. La valeur de remplissage (ou la bordure de réglage de la zone de contenu) a atteint le contraste entre la zone de contenu et l'extérieur de la fenêtre après la barre de titre, de sorte qu'elle on dirait 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: right provoquera L'image s'est déplacée à l'extrême droite du champ

dans la zone de contenu. Uniquement lorsque l'img est placé devant le texte de la barre de titre en HTML, float: right placera l'image juste à l'extrême droite de la barre de titre

Lorsque la valeur de l'attribut de débordement est auto, lorsque le. la zone de contenu est trop grande. Lorsque la hauteur ou la largeur définie est dépassée, des barres de défilement s'affichent.

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 dans la page. Par défaut, il est positionné par rapport à. le coin supérieur gauche de la page. S'il existe une définition de position: relative dans le nœud ancêtre, elle sera positionnée 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 transmises $(. window).width() et $ (window).height() pour obtenir

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 la positionner au milieu de la zone visible de l'écran. l'écran. Vous devez soustraire la largeur de la fenêtre de la largeur de la zone visible de l'écran, puis diviser par 2. En plus de la valeur limite gauche de la barre de défilement, la valeur limite gauche requise de l'écran. fenêtre peut être obtenue ; la valeur limite supérieure est 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. ceci à la fin. Pour garantir que les 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, utilisez obj instanceof Object

11. peut être utilisé pour déterminer si une variable est une instance d'une classe js. Le type de données de la 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, et innerHeight() et innerWidth() obtiennent le remplissage inclus. La hauteur et la largeur, externalHeight() et externalWidth() obtiennent la hauteur et la largeur

, y compris la bordure et le remplissage, externalHeight. (true) et externalWidth(true) obtiennent la hauteur et la largeur, y compris le maring, la bordure et le remplissage. width

13.scroll peut être utilisé pour enregistrer les opérations requises 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 à la fois $(window).scroll(function(){}) et la fonction du deuxième morceau. is Le contenu ne couvrira pas le premier paragraphe, mais lors du défilement, les deux morceaux de code seront exécutés

16 La méthode d'animation peut modifier les valeurs de gauche et du haut dans un certain laps de temps pour atteindre le résultat. 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. Nous devons donc nous en assurer. que les valeurs sont complétées dans cette méthode. Obtenez ces valeurs plus tard.

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.version peut déterminer le numéro de version du navigateur, tel que $.browser.version.indexOf(“8”)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!