Tutoriels • jQuery
jQuery - Un cadre de JavaScript avec de nombreux avantages - Partie 1: Le "niveau d'entrée" - un premier petit exemple
1996 ("web-Stone Age"), j'ai commencé à créer les premiers sites Internet - un moment où je rêvais de possibilités qui s'offrent aujourd'hui n'ont même pas ».
Près de 15 ans plus tard (ok je ne '"web grand-mère" am :-)) a la WWWelt beaucoup changé. La combinaison de (X) HTML, CSS (3) et JavaScript et le support du navigateur correspondant offrent des possibilités presque illimitées dans l'apparence et la fonctionnalité.
Un grand soulagement et l'assistance sont également des cadres divers javascript.
Conduit à une série d'articles sur l'jQuery framework javascript
Les sections de ce message:
<Exemple> <HTML <Code <CSS <Code <jQuery <Code <Télécharger> <autres Beispiele>
Qu'est-ce qu'un framework JavaScript et ce sont les avantages de l'utilisation?
Cadres (structure du cadre, la hauteur, structure de base ...) en termes de langages de programmation ou de scripting, les bibliothèques, les tâches de base und-/oder récurrents résumées dans les fonctions.
Facilite l'utilisation d'un cadre et accélère le développement de leurs propres scripts et fonctions, parce que vous pouvez tirer parti de leurs pré-testés fonctions sans «réinventer la roue" à avoir.
Cadres Javascript doivent généralement avoir une implémentation de la fonction unique pour les différents navigateurs.
Cela permet aux développeurs et concepteurs de sites Web un énorme soulagement et gain de temps dans les essais sites Web dans différents navigateurs Web.
Pourquoi est-jQuery?
Dans cette série d'articles que j'ai pour le framework jQuery JavaScript choisi parce qu'il a à côté de sa performance a également une très forte prévalence, cela implique les avantages suivants.:
- Il existe une variété de produits finis, utilisables gratuitement les plug-ins (par exemple sous forme curseur sur l'image-testeur, les trieurs de table, etc) qui peuvent être utilisés directement
- Les taux élevés fournit également une constante amélioration, (rapport de bogue)
- Il ya beaucoup d'informations et de tutoriels sur jQuery
- jQuery est également pour les personnes sans connaissances en programmation d'apprendre rapidement et facilement
Pour commencer, ce sont à mes yeux (avec la vitesse et la fonctionnalité), les trois aspects les plus importants. En outre, tous les cadres javascript travailler sur un principe similaire. Alors, qui s'occupe de jQuery et apprendre plus tard sur un cadre différent umsteigt raison à la maison.
Personnellement, je travaille en fonction du projet et la tâche des cadres différents (par exemple extjs pour le développement d'applications et de solutions intranet), mais dans la création de sites clients les plus souvent associés à jQuery très élevé en raison de la propagation.
Pour commencer, premier petit exemple de jQuery
<cliquez HTML <Code <cliquez CSS <Code <cliquez jQuery <Code <cliquez download>
Pour vous donner une idée de ce que les possibilités qu'elle peut apporter jQuery fournit un premier exemple simple ci-dessous.
Le code jQuery:
$ (Document). Ready (function () { $ ('# Demo_button1'). Cliquez sur (function () { $ ('Div.demo_absatz1') addClass («brun») montrent ('slow') ..; }); });
DEMO - exécuter du code DEMO réinitialisation
Bonjour, Je suis un DIV HTML avec la classe "demo_absatz1" après le clic sur le bouton DEMO est visible.
Si vous cliquez sur le bouton Demo, je reçois une nouvelle classe CSS vous devrez d'abord (brun) et apparaîtra finalement dans une animation lente.
Pas vu? Il suffit de "réinitialiser DEMO" et essayez à nouveau!
Le code en détail
Cet exemple se compose de 3 parties:
- Le code HTML (par exemple dans le fichier demo1.html)
- Le code CSS pour la conception (dans le fichier demos.css)
- Le code jQuery (en demos.js de fichier)
Note:
Vous trouverez des exemples de chacun de le code complet pour que vous puissiez comprendre tout tenir ensemble.
Je ne suis pas un avocat pour eux d'écrire du code CSS et Javascript dans le document. Externalisez vos projets web dans le code dans des fichiers séparés.
Le code HTML
<cliquez Beispiel> <cliquez CSS <Code <cliquez jQuery <Code <cliquez download>
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir=ltr lang="de-DE"> <head> Un premier jQueryBeispiel <title> </ title> <link media='all' type='text/css' rel='stylesheet' href='/demos.css' /> </ Head> <body> <a id="demo_button1" class="demo_button" href="#"> DEMO - exécuter du code </ a> <div class="demo_absatz1"> <strong> Bonjour, Je suis un DIV HTML avec l'id "demo_absatz1" après le clic sur le bouton DEMO est visible. </ strong> </ p> <p> Si vous cliquez sur le bouton Demo, je reçois une nouvelle classe CSS vous devrez d'abord (brun) et apparaîtra finalement dans une animation lente. </ p> <p> pas vu? Il suffit de "réinitialiser DEMO" et essayez à nouveau! </ P> </ Div> Cliquez ici src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script> <script type='text/javascript' src='/demos.js'> </ script> </ Body> </ Html>
Considérons le code HTML d'un peu plus près:
Ligne 5: Cette ligne de code CSS externalisée des demos.css fichier chargé. Selon l'endroit où vos fichiers sont stockés, vous devez définir le répertoire "src" URL peut changer encore.
Dans les balises body (lignes 8-14), voir les balises HTML pour l'exemple ci-dessous.
Ligne 8: Il commence par un "<a>" jour (un lien) qui a été attribué id "demo_button1". Cela devrait être un identifiant id unique dans votre document HTML. Cet ID est plus tard dans le code jQuery pour trouver un intérêt manifeste pour le lien.
Le lien a également été attribué une classe CSS (classe). "Demo_button" dans ce cas. Cette classe sera dans le code CSS utilisé pour créer l'élément.
Ligne 10/Zeile 14: Ici, vous trouverez un "<div>" jour (une boîte) de la classe CSS "demo_absatz1» a été attribué. Cette classe est utilisée dans le code CSS pour la conception de l'élément et le code jQuery pour l'identification.
Lignes 11-13: Voici le texte qui est démontré par la suite dans la boîte. Il est formaté en 3 paragraphes <p>). Ceci est le contenu pur qui n'est pas pour le CSS et le code jQuery de sens.
Ligne 16: Voici est très important, car une fois activé, le framework jQuery. Dans cet exemple, je suis sorti du cadre par l'intermédiaire Libs Google a décidé d'intégrer. Vous pouvez, bien sûr, la version actuelle de jQuery dans votre copie de site Web, mais doit être le "src" URL en conséquence.
Ligne 17: Voici les fichiers javascript "demos.js" dans lequel le code jQuery est chargé de mon serveur web. Selon l'endroit où vos données sont stockées, vous devez régler le "src" URL si nécessaire.
Les fichiers sont chargés seulement à la fin, parce que les actions sont exécutées jQuery après le chargement du code HTML et CSS. Chargement des fichiers javascript finirez par économiser le temps de chargement avant la construction du document HTML.
Le code CSS:
<cliquez Beispiel> <cliquez HTML <Code <cliquez jQuery <Code <cliquez download>
. Demo_absatz1 { display: none; padding: 10px 20px; border: 1px solid # ccc; color: # 000; -Moz-border-radius: 15px; -Webkit-border-radius: 15px; border-radius: 15px; } . Brown { color: # FFF; background-color: # 847d6b; border-top: 15px solid # 212 421; } {A.demo_button padding: 10px 4px 4px 8px; background-color: # c6c700; color: # fff; font-weight: bold; border: 1px solid # ccc; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; border-radius: 5px; text-decoration: none; }
Le code CSS sous le microscope:
Ligne 1-10: Voici la classe "demo_absatz1" défini. En plus de la conception attributs que vous trouverez une entrée pertinente dans la ligne 2: "display: none". Cela signifie que tous les éléments de cette classe qui a été affecté à l'écran ne sont pas visibles (dans le code HTML déjà fait).
Notre boîte est également charger des documents HTML invisible.
Ligne 11-15: La classe "brun" est apparu précédemment dans le document HTML ne fonctionne pas. Il est ensuite utilisée pour placer la boîte dans le Salon plus distincte.
Ligne 16-28: Ici vous trouverez les caractéristiques de conception du lien "DEMO - exécuter du code" qui était la classe "démo-bouton" affecté.
Les caractéristiques de conception individuelles, je voudrais tout d'abord ne pas aller plus loin. Novices CSS peuvent rechercher les attributs, par exemple dans www.css4you.de.
Comme un rappel une fois de plus le code jQuery
<cliquez Beispiel> <cliquez HTML <Code <cliquez CSS <Code <cliquez download>
$ (Document). Ready (function () { $ ('# Demo_button1'). Cliquez sur (function () { $ ('Div.demo_absatz1') addClass («brun») montrent ('slow') ..; }); });
Maintenant que ça devient intéressant: Le code jQuery avec plus de précision en considération:
Ce que chacun est susceptible de remarquer immédiatement que le code est relativement courte - le slogan jquery équivalent "Écrire moins, faire plus».
jQuery est Javascript. Toutes les fonctionnalités du framework sont appelés à commencer par "jQuery" ou l'abréviation "$".
Ligne 1 et 5: ". $ (Document) prêts» signifie «Si le document est chargé (tous les éléments HTML) d'exécuter la fonction suivante ..."
Dans cette fonction devrait être incluse d'un code jQuery définie sur les éléments du document HTML fait référence.
Ligne 2 et 4: «Si l'élément HTML avec id" demo_button1 "est cliqué, d'exécuter la fonction suivante ..."
"# Demo_button1" est un sélecteur - dont il ya beaucoup de jQuery, que je vais descendre dans d'autres parties de cette série d'articles dans plus de détails.
# Est-l'identification d'un ID
Avec ce sélecteur, vous pouvez identifier clairement un élément de votre code HTML.
Ligne 3: «... Toutes les boîtes de Div avec la classe" demo_absatz1 "obtenir une nouvelle classe CSS appelé« brun »et apparaissent lentement."
Dans cette ligne, un autre sélecteur est utilisé "div.demo_absatz1". Contrairement à la précédente, ce n'est pas unique, il pourrait être affecté dans notre document HTML aussi plusieurs boîtes div class "demo_absatz1" (ce n'est pas le cas, mais il pourrait être :-)).
Dans ce cas, l'action s'applique à l'ensemble de ces éléments.
"AddClass" a trouvé les éléments d'une autre classe appelée "brune" à (Voir le code CSS en ligne 11-15) et de changer la couleur de la boîte.
Ça y est ...
Quelques modifications mineurs ...
Effet ... et un autre!
Au lieu de "show" que nous utilisons "slideIn"
$ (Document). Ready (function () { $ ('# Demo_button2'). Cliquez sur (function () { $ ('Div.demo_absatz2') addClass («brun») glissent vers le bas ("lent") ..; }); });
DEMO - exécuter du code DEMO réinitialisation
Bonjour, Je suis un DIV HTML avec la classe "demo_absatz2" après le clic sur le bouton DEMO est visible.
Si vous cliquez sur le bouton Demo, je reçois une nouvelle classe CSS vous devrez d'abord (brun) et apparaîtra finalement dans une animation lente.
Pas vu? Il suffit de "réinitialiser DEMO" et essayez à nouveau!
Au lieu de "show" nous sommes évidement "fadeIn"
$ (Document). Ready (function () { $ ('# Demo_button3'). Cliquez sur (function () { $ ('Div.demo_absatz3') addClass («brun») fadeIn ('slow') ..; }); });
DEMO - exécuter du code DEMO réinitialisation
Bonjour, Je suis un DIV HTML avec la classe "demo_absatz3" après le clic sur le bouton DEMO est visible.
Si vous cliquez sur le bouton Demo, je reçois une nouvelle classe CSS vous devrez d'abord (brun) et apparaîtra finalement dans une animation lente.
Pas vu? Il suffit de "réinitialiser DEMO" et essayez à nouveau!
"Trois à la fois»
Dans cet exemple il ya 3 sections masquées sont tous à la même classe "demo_absatz4" ont.
Avec un clic sur "code de démonstration Run" pour cette raison tous les trois sur Ouvrir il regarde dans le sélecteur de la classe.
$ (Document). Ready (function () { $ ('# Demo_button4'). Cliquez sur (function () { $ ('Div.demo_absatz4') addClass («brun») fadeIn ('slow') ..; }); });
DEMO - exécuter du code DEMO réinitialisation
Bonjour, Je suis le premier DIV HTML avec la classe "demo_absatz4" après le clic sur le bouton DEMO est visible.
Si vous cliquez sur le bouton Demo, je reçois une nouvelle classe CSS vous devrez d'abord (brun) et apparaîtra finalement dans une animation lente.
Pas vu? Il suffit de "réinitialiser DEMO" et essayez à nouveau!
Oui, où est le 2ème les ventes cachés?
Bonjour, Je suis le 2e DIV HTML avec la classe "demo_absatz4" après le clic sur le bouton DEMO est visible.
Oui, où est le 3ème les ventes cachés?
Bonjour, je suis le 3e DIV HTML avec la classe "demo_absatz4" après le clic sur le bouton DEMO est visible.
Pas vu? Il suffit de "réinitialiser DEMO" et essayez à nouveau!
Conclusion:
<cliquez Beispiel> <cliquez HTML <Code <cliquez CSS <Code <cliquez jQuery <Code <cliquez download>
jQuery, CSS et HTML sont étroitement liés et ...
.... c'est tout ce que n'est pas si difficile 
Je peux trouver quelques bonnes idées que vous avez avec cet exemple jQuery simple, le début et certains sont de réels avantages à l'WWWelt changement.
Télécharger:
Vous pouvez utiliser le code à partir des sections de code ci-dessus ou directement copier un fichier zip avec tous les 3 fichiers (. Html. Css et. Js) ici.
hpv24_jquery_beispiel1 (219)
Give it a try!
1 vote / s, note moyenne: 6.00 étoiles à partir de max. 6 étoiles possibles
Chargement en cours ... 
