Comment utiliser Ajax pour créer une fonction d'initialisation pour HTML5 et CSS3 programmation

category Ordinateurs et logiciels / Programmation / Ajax

Beaucoup de pages HTML5 et CSS3 exigent une fonction d'initialisation. La onload du corps

Sommaire

  • Utilisation du mécanisme document.ready
    • mécanisme est fréquemment utilisé dans les DOM / javascript pour rendre les pages se chargent dès que le document a commencé le chargement. Ceci est une fonction qui est géré tôt pour mettre en place le reste de la page. pendant que onload du corps fait ce travail et, quelques problèmes existent avec la technique traditionnelle:

    • Il nécessite de faire un changement au code HTML. Le code javascript doit être complètement séparé de HTML. Vous ne devriez pas avoir à changer votre code HTML pour le faire fonctionner avec javascript.

    • Le timing est pas encore tout à fait raison. Le code spécifié dans onload du corps ne pas exécuter qu'après la page entière est affichée. Il serait mieux si le code a été enregistré après le DOM est chargé mais avant la page affiche.

    Comment utiliser $ (document) .ready ()

    jQuery a une excellente alternative à onload du corps qui surmonte ces lacunes. Jetez un oeil sur le code pour voir comment cela fonctionne:

    ready.html
    Utilisation du mécanisme document.ready
    Avez ce changement?

    Ce code utilise la technique jQuery pour l'exécution de code d'initialisation:




    • La balise body n'a plus en charge attribuer. Ceci est une caractéristique commune de la programmation jQuery. Le code HTML n'a plus des liens directs vers le code javascript jQuery parce permet le code javascript se joindre à la page Web.

    • La fonction d'initialisation est créée avec le $ (document) .ready () fonction. Cette technique indique au navigateur d'exécuter une fonction quand le DOM a terminé le chargement (de sorte qu'il a accès à tous les éléments de la forme), mais avant que la page est affiché (de sorte que les effets de la forme apparaissent instantanée à l'utilisateur).

    • $ document rend un objet jQuery à partir de l'ensemble du document. Le document complet peut être transformé en un objet jQuery en spécifiant document à l'intérieur de $ () fonction. Notez que vous ne l'utilisez des guillemets dans ce cas.

    • La fonction spécifiée est automatiquement exécuté. Dans ce cas particulier, vous souhaitez exécuter le change moi() fonction, de sorte que vous placer dans le paramètre de la prêt () Procédé. A noter que ceci se rapporte à change moi comme une variable, de sorte qu'il n'a pas de guillemets ou parenthèses.

    Vous voyez plusieurs autres endroits (en particulier dans la gestion des événements) où jQuery attend une fonction en tant que paramètre. Une telle fonction est fréquemment appelée rappeler fonction, car elle est appelée, après une sorte d'événement a eu lieu. Vous voyez également les fonctions de rappel qui répondent aux événements de clavier, le mouvement de la souris, et l'achèvement d'une requête AJAX.

    Alternatives à document.ready

    Vous voyez parfois quelques raccourcis parce qu'il est si commune à exécuter du code d'initialisation. Vous pouvez raccourcir

     $ (document) .ready (changeme) -

    le code suivant:

     $ (changeme) -

    Si ce code est pas défini dans une fonction et change moi est une fonction définie sur la page, jQuery exécute automatiquement la fonction directement, tout comme le document.ready approche.

    Vous pouvez également créer directement une fonction anonyme:

     $ (document) .ready (function () {. $ ("# sortie") html («Je changé") -}) -

    Cette méthode (fonction anonyme) est lourd, mais vous voyez souvent le code jQuery en utilisant cette technique. Vous pouvez créer une fonction appelée init () et l'appeler avec une ligne comme ceci:

    $ (init) -

    Cette technique est simple et facile à comprendre, mais vous pouvez rencontrer les autres variations que vous examinez le code sur le web.

    Articles Similaires

    A propos Auteur
    Les méthodes courantes du nœud jquery Les méthodes courantes du nœud jquery

    La bibliothèque jQuery transforme des objets DOM dans les ganglions jQuery puissants. Le tableau suivant présente quelques-unes des méthodes du noeud jQuery les plus couramment utilisés.MéthodeDescriptionaddClass (), removeClass (), toggleClass…

    Comment ajouter html vers une page avec jQuery Comment ajouter html vers une page avec jQuery

    jQuery peut être utilisé pour ajouter du code HTML à une page. Vous pouvez ajouter toutes sortes de HTML, des images, à peu près tout, et changer complètement la présentation de la page en utilisant jQuery. Cela est pas vraiment une bonne…

    Comment ajouter jquery à une page Comment ajouter jquery à une page

    Une fois que vous avez téléchargé ou jQuery savoir où trouver la version de CDN-hébergé, vous devez le référencer dans votre page. jQuery est comme tout fichier javascript externe.Ajouter jQuery locale à une pageTélécharger jQuery et…

    Comment changer les éléments HTML avec jQuery Comment changer les éléments HTML avec jQuery

    WThere sont quelques façons de changer déjà des éléments HTML existants avec jQuery, en fonction de ce que vous voulez changer. Par exemple, disons que vous vouliez changer le texte des éléments de la page que vous venez de travailler sur.Au…

    Comment créer une page mobile prêt dans Dreamweaver Comment créer une page mobile prêt dans Dreamweaver

    Les pages jQuery Mobile Starter de Dreamweaver sont un bon moyen de générer rapidement un site mobile-friendly. La page de démarrage mobile crée une page HTML5 avec cinq jQuery Mobile Data-pages prédéfinies, ou des sections de la page HTML qui…

    Comment intégrer l'jquery prêt () fonction Comment intégrer l'jquery prêt () fonction

    Un problème commun lors de la programmation javascript est que le programme javascript sera exécuté avant la page est chargée. Vous pouvez accéder aux éléments de HTML sur une page. Cela signifie que vous pouvez également accéder…

    Comment lire le clavier sur les toiles de javascript pour HTML5 et CSS3 programmation Comment lire le clavier sur les toiles de javascript pour HTML5 et CSS3 programmation

    Le clavier est une technologie d'entrée principale pour les programmeurs HTML5, en particulier pour les machines de bureau. La méthode standard pour lire le clavier dans la toile de javascript est de mettre en place des fonctions spéciales…

    Comment sélectionner des éléments avec jQuery Comment sélectionner des éléments avec jQuery

    ost de ce que vous faites dans jQuery passe par sélecteurs. Par exemple, vous sélectionnez fréquemment un morceau d'une page Web et ensuite avoir jQuery effectuez une action sur ce morceau de la page. Cette action pourrait être quelque chose de…

    Comment mettre en place les toiles javascript pour HTML5 et CSS3 programmation Comment mettre en place les toiles javascript pour HTML5 et CSS3 programmation

    Pour utiliser le tag en javascript, construire une page web HTML5 et CSS3 avec un élément dans ce commencer. Typiquement vous fournissez largeur, hauteur, et id parameters: Votre navigateur ne supporte pas la balise canvas ...À…

    javascript et HTML javascript et HTML

    Vous pouvez penser javascript comme une extension de html- un add-on, si vous voulez.Voici comment cela fonctionne. Les balises HTML créent Objets- javascript vous permet de manipuler ces objets. Par exemple, vous utilisez le code HTML …

    Méthodes jQuery pour l'envoi d'une requête AJAX Méthodes jQuery pour l'envoi d'une requête AJAX

    Comme vous pouvez le voir étudier le tableau suivant, jQuery fournit plusieurs méthodes pour envoyer une requête AJAX au serveur et analyser les résultats.MéthodeDescriptionget (url, paramètres)Envoyer un HTTP GET demander à la givenURL.…

    HTML5 et javascript options de sélection HTML5 et javascript options de sélection

    Parmi les nombreuses nouvelles fonctionnalités de HTML5, les innovations ayant le potentiel le plus ambitieux sont dans les ajouts à javascript disponibles dans les navigateurs modernes. javascript est habituellement utilisé pour…

    Montrer, cacher, de glissement, et la décoloration des éléments avec jQuery Montrer, cacher, de glissement, et la décoloration des éléments avec jQuery

    jQuery effets sont très amusants et peuvent transformer une simple page Web, statique en une expérience interactive dynamique pour le visiteur du site. Une partie de l'intérêt visuel que jQuery offre est la capacité d'afficher, masquer,…

    Changez votre page web avec les méthodes du modèle objet de document javascript Changez votre page web avec les méthodes du modèle objet de document javascript

    Les méthodes Object Model de documents indiqués dans la liste suivante vous offrent un excellent moyen pour accéder et modifier vos pages Web grâce à votre code javascript.monElement = document.getElementById ("nom") -: Obtient un…

    » » » » Comment utiliser Ajax pour créer une fonction d'initialisation pour HTML5 et CSS3 programmation