jQuery: find ()
jQuery est un grand cadre JavaScript. Si vous n'avez pas eu l'occasion de travailler avec lui, j'espère que la publication suivante, vous encouragera à prendre avantage de cette solution particulière. Parce qu'il est caractérisé par la vitesse, l'optimisation du code pour l'accommoder à autant de navigateurs ainsi, ce qui a probablement beaucoup des plus intéressants - facile à construire des solutions complexes.
Dans l'article d'aujourd'hui portera sur une méthode très utile find ().
Si vous n'avez pas eu affaire à ce cadre, je vous invite à vous familiariser avec les rudiments de sélecteurs, en utilisant le API officielle sur selectorów , ou avec préparée par Bartosz Medonia jQuery bases bien sûr . Cette connaissance va grandement faciliter la compréhension des solutions présentées ici.
Meilleur passons un exemple concret de cette méthode. Sur la plupart des pages, l'un des éléments de base pour un menu de navigation. Nous allons essayer de créer leur propre menu animé en utilisant le nombre minimum de composants et d'exploitation sous n'importe quel navigateur qui supporte JavaScript.
Première Préparation d'éléments
Commençons par créer un document HTML vide:
<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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Menu </ title> </ Head> <body> </ Body> </ Html>
Puis, prenez la dernière version de jQuery à partir du site officiel du projet (production) et le copier dans un dossier de nos fichiers HTML.
Dans ce document, pourrait utiliser une partie du contenu de l'échantillon, et notre menu. Utilisé pour cette div et des balises span. Bien sûr, les articles sur notre menu, doivent être des liens, donc de les placer dans un bloc. Le tout mis dans un div avec id = bloc de menu. Ajouté le fichier en utilisant la balise script jQuery. Un ensemble devrait ressembler à ceci:
<div id="menu"> <div> href # 1 Menu </ a> <span> href # 1.1 Menu </ a> href # 1.2 Menu </ a> href # 1.3 Menu </ a> </ Span> </ Div> <div> href # 2 Menu </ a> <span> href # 2.1 Menu </ a> href # 2.2 Menu </ a> href # 2.3 Menu </ a> href # 2.4 Menu </ a> href # 2.5 Menu </ a> </ Span> </ Div> <div> href # 3 Menu </ a> <span> href # 3.1 Menu </ a> href # 3.2 Menu </ a> href # 3.3 Menu </ a> href # 3.4 Menu </ a> </ Span> </ Div> <div> href # 4 Menu </ a> <span> href # 4.1 Menu </ a> href # 4.2 Menu </ a> </ Span> </ Div> </ Div> <! - Fin # menu -> Il certain contenu de l'échantillon. Il certain contenu de l'échantillon. Il certain contenu de l'échantillon. Il certain contenu de l'échantillon. Il certain contenu de l'échantillon. Il certain contenu de l'échantillon. Il certain contenu de l'échantillon. Il certain contenu de l'échantillon. Il certain contenu de l'échantillon. Il certain contenu de l'échantillon. <script type="text/javascript" src="jquery.js"> </ script>
Spécialement mis de nombreux articles sur le menu pour montrer avec quelle facilité fera appel à un grand nombre d'entre eux à partir du jQuery, selon le bloc, nous déplacez la souris.
Deuxième Définir l'apparence du menu (css)
Dans cette section, nous définissons l'aspect utilisé dans les blocs de code HTML, de fichiers. Je me suis préparé, le code suivant dans le style, situé dans la section head:
<style type="text/css"> <! - * {Margin: 0px, padding: 0px;} A {text-decoration: none; police: 20px Géorgie, "Times New Roman", Times, serif;} html, body {margin: 10px;} Menu # {top: 0px; float: left; width: 100%;} Div # menu {position: relative; float: left;} Div # menu de a: active, div # menu a: link, div # menu a: visited {display: block; position: relative; vertical-align: middle; background: # ccc; color: # fff; padding: 5px 10px; largeur: 150px;} Div # menu de a: hover {background: # 999;} Div # menu de span {display: none; position: absolute, en haut: 100%; left: 0; float: none;} Div # menu a: active, # div div menu a: link, div # menu portée a: visited {position: relative; display: block; float: left; top: 0px; background: # ddd; color: # fff; padding: 5px 10px; largeur: 150px;} Div # menu a: hover {background: # 999;} -> </ Style>
Dans notre exemple, nous créons seulement simple à deux niveaux de menu, mais il n'y a rien dans la façon de les modifier et d'adapter à n'importe quel nombre de niveaux.
Si nous en sommes à ce point, vous devriez également consulter le cadre pour créer des menus css'owego .
Troisième Le clou du programme - trouver.
Par ces mesures, nous sommes prêts à mettre en œuvre un code JavaScript pleine page. Nous savons aussi, comme mentionné, en disant le sélecteur. Dans notre cas, l'exemple est assez simple, car il ya seulement quatre menu principal, mais il n'est pas difficile d'imaginer qu'il ya peut-être plus, et chacun peut avoir de multiples branches. Cette disqualifie la méthode boucle, exclut aussi une force brute, Ayant examiné tous les cas séparément. Mais grâce à la méthode de recherche, les problème se résume à une ligne très claire de code qui exécute tout le travail pour nous. Il est bon que notre code JavaScript était dans le $ (document). Prêt, nous assurer que nous vous y référer si la page se charge, tous les scripts externes, de styles et d'autres fichiers.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Document). Ready (function () { $ ("Div # menu"). Hover ( la fonction () { . $ (Ce) qui trouve ("span") Css ({opacity: 0.98}) SlideToggle ("rapide");.. } la fonction () { . $ (Ce) qui trouve ("span") SlideToggle ("rapide").; } ); }); / /]]> -> </ Script>
Le code ci-dessus, je recommande de mettre la balise script, auquel nous nous référons à jQuery, sur le fond.
Dans le sélecteur principal, reportez-vous à la balise d'id = "menu", à l'intérieur duquel il ya un div. Méthode. Hover (), désigne un événement envahissent la souris, l'élément sélectionné et en tant que paramètres, prend une ou deux fonctions qui sont exécutées lors de l'initiation de cet événement. La deuxième caractéristique est facultatif et est exécuté lorsque la souris de quitter la zone de notre élément. Essayé d'introduire le code de sorte que les deux fonctions sont transparentes pour le lecteur, mais je recommande en minimisant le code dans des projets existants.
Analysons maintenant le code dans la fonction. Encore une fois, ici, nous utilisons le sélecteur, cette fois nous nous référons à ce sujet dans lequel nous vivons. Chacune renvoie un sélecteur jQuery, qui peut être adressée par cette clause. Mais si vous voulez à l'intérieur de l'élément, reportez-vous à l'élément à l'intérieur d'un élément, utilisez la méthode Find, qui trouve et renvoie tous les éléments correspondants. Gardez cela à l'esprit, parce que si vous voulez faire référence à un élément particulier, vous devez utiliser une telle classe et après l'appel. Trouver (". ClassNazwa"). Bien sûr, l'intérieur de la trouver, on peut aussi se référer à un des éléments de structure les plus complexes, ainsi que les sélecteurs jQuery.
Le premier long métrage comme vous pouvez le voir, modifier la méthode de recherche renvoie un objet et modifier sa transparence, puis utilisez la slideToggle méthode (), doit être lancé d'animation, dans ce cas, il ya de l'animation, «descendant» vers le bas, qui détermine le jeu de paramètres pour afficher aucun dans les paramètres d'un élément (un élément est invisible, alors glisser la seule chose à faire est de le montrer).
Dans le deuxième long métrage, tout semble très similaire, sauf que nous n'avons plus besoin de modifier l'opacité, car il a déjà été changé. Nous l'avons fait sur le jQuery, y compris parce que dans css, ne serait pas possible, de telle manière à assurer la pleine conformité avec le validateur du W3C, et que la transparence a été affiché correctement sur tous les navigateurs modernes JavaScript soutien.
4e Résumé
Le but de cet article, il a été d'apprendre à créer des menus animés, mais, d'apprendre à connaître de nombreuses questions intéressantes relatives à la méthode find (), ainsi que le jQuery. Les possibilités sont énormes, et j'espère qu'après avoir lu cet article, il gagnera quelques passionnés.
Bien que l'effet de notre travail, nous pouvons voir la démonstration .
Très bel article - méthode très utile décrit jQuery, et par exemple tout à fait pratique. Tout est clair et agréable, je suis en attente pour les artistes à venir