jQuery: find ()
jQuery je odličen okvir JavaScript. Če niste imeli priložnost za delo z njim, upam, da bo naslednja objava, vas spodbujamo, da izkoristijo te posebne rešitve. Ker je značilna hitrost, optimizacijo kode, da ga sprejme v čim več brskalnikov, kot tudi, kar verjetno mnogi najbolj zanimivo - lahko za izgradnjo kompleksnih rešitev.
V današnjem članku se bo osredotočil na zelo uporabno metodo našli ().
Če še niste bili, ki se ukvarjajo s tem okvirom, vas pozivam, da se seznanite z osnovami selektorji, z uporabo uradno API na selectorów , ali ga je pripravil Bartosz Medonia jQuery seveda osnove . To znanje bo zelo olajšalo razumevanje rešitev, predstavljenih v tem dokumentu.
Best kaj je dobil nekaj konkretnega primera to metodo. Na večini strani, eden od osnovnih elementov za navigacijo menija. Potrudili se bomo, da ustvarite svoj animirani meni uporabo najmanjšega števila komponent in delujejo na podlagi katere koli brskalnikom, ki podpira JavaScript.
Najprej Priprava elementov
Začnimo z ustvarjanjem prazen dokument HTML:
<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> Meni </ title> </ Head> <body> </ Body> </ HTML>
Potem zgrabi najnovejšo različico jQuery iz uradni strani projekta (proizvodnja) in jo kopirajte v mapo naših HTML datotek.
V tem dokumentu, lahko uporabite nekaj vzorčno vsebino, in naše meni. Uporablja se za ta div in span oznake. Seveda, morajo točke na našem meniju so povezave, s čimer se jih razvrsti v blok. Celoti pa je v skupinske div z id = meniju. Dodano datoteko z uporabo jQuery skript oznako. Celoti bi izgledala nekako takole:
<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> </ P> <div> href # 2 Meni </ 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> </ P> <div> href # 3 Meni </ a> <span> href # 3,1 Menu </ a> href # 3,2 Menu </ a> href # 3,3 Menu </ a> href # 3,4 Menu </ a> </ Span> </ P> <div> href # 4 Meni </ a> <span> href # 4,1 Menu </ a> href # 4,2 Menu </ a> </ Span> </ P> </ Div> <! - End # menu -> Obstaja nekaj vzorcev vsebine. Obstaja nekaj vzorcev vsebine. Obstaja nekaj vzorcev vsebine. Obstaja nekaj vzorcev vsebine. Obstaja nekaj vzorcev vsebine. Obstaja nekaj vzorcev vsebine. Obstaja nekaj vzorcev vsebine. Obstaja nekaj vzorcev vsebine. Obstaja nekaj vzorcev vsebine. Obstaja nekaj vzorcev vsebine. <script type="text/javascript" src="jquery.js"> </ script>
Posebej dal veliko elementov v meniju pokazati, kako enostavno bo pritožba na mnoge od njih s jQuery, odvisno od tega, kateri blok se premaknite miško.
Drugo Določite izgled menija (CSS)
V tem delu definiramo videz, ki se uporablja v HTML datotek, blokov kode. Sem se pripravil, naslednjo kodo v stilu, ki se nahaja v glavi oddelku:
<style type="text/css"> <! - * {Margin: 0px, padding: 0px;} a {text-decoration: none; font: 20px Gruziji, "Times New Roman", Times, serif;} html, body {margin: 10px;} # Meni {top: 0px; float: left; širina: 100%;} Div # menu {position: relativna; float: left;} Div # meni: aktiven, div # meni: link, div # meni: obiskal {zaslon: blok, lega: relativna; navpično poravnati: srednja; background: # ccc; color: # fff; padding: 5px 10px; širina: 150px;} Div # meni: hover {background: # 999;} Div # meni span {display: none; položaj: absolutno, top: 100%; levo: 0, float: none;} Div div # meni: aktiven, # menu div div: link, div # meni span A: obiskano {Stališče: relativna; prikaza: blok; float: left; top: 0px; background: # DDD; color: # FFF; padding: 5px 10px, širina: 150px;} Div div # meni: hover {background: # 999;} -> </ Style>
V našem primeru smo ustvarili samo preprosto dveh ravneh meni, vendar ni nič na način, da jih spremeni in prilagodi na katero koli številnih ravneh.
Če smo na tej točki, bi morali prav tako nanaša na okvir za ustvarjanje css'owego meni .
Tretji Žebelj programa - najti.
S temi ukrepi, smo pripravljeni izvesti polno stran JavaScript kodo. Vemo tudi, kot omenjeno, pravi selektor. V našem primeru, primer je zelo preprost, saj so samo štirje glavni meni, vendar to ni težko predstavljati, da je lahko več, in vsak ima lahko več podružnic. To diskvalificira v zanko način, prav tako izključuje Brutalni, po pregledu vseh primerov ločeno. Toda po zaslugi našli način, problem izvira na eno zelo jasno vrstico kode, ki izvajajo celotno delo za nas. Dobro je, da naša JavaScript kode je bil v $ (dokument). Ready, ki zagotavlja, smo potrebovali pri stran se nalaga, vse zunanje skripte, slogi in druge datoteke.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Dokument). Pripravljen (function () { $ ("# Div meni"). Hover ( funkcija () { . $ (To), Najdi ("span") CSS ({motnost: 0,98}) SlideToggle ("hitra");.. } funkcija () { . $ (To), Najdi ("span") SlideToggle ("hitra").; } ); }); / /]]> -> </ Script>
Kodo zgoraj priporočam postaviti skript oznako, ki smo se nanašajo na jQuery, na dnu.
V glavnem izbiro nanašajo na oznake iz id = "jedilnik", znotraj katerega je div. Metoda. Hover (), pomeni dogodek napadejo miško, izbrani predmet in kot parametri, traja eno ali dve funkcije, ki se izvajajo v času začetka tega dogodka. Druga značilnost je obvezna in se izvaja, ko miška zapusti območje našega elementa. Poskušal uvesti kodo, tako da sta obe funkcije pregleden bralcu, vendar vam priporočam čim kodo v obstoječe projekte.
Zdaj pa analizira kodo v funkciji. Spet, tukaj bomo uporabili izbiro, tokrat smo se nanašajo na predmet, v katerem živimo. Vsak vrne jQuery selektor, ki ga je mogoče rešiti z to klavzulo. Toda, če želite znotraj elementa, se nanašajo na postavke znotraj postavke, uporabite Najdi metodo, ki najde in vrne vse ujemajoče elemente. Imejte to v mislih, kajti če želite, da se nanašajo na določeni točki, bi uporabili tak razred in po pritožbi. Najdi (". ClassNazwa"). Seveda, v notranjosti našli, lahko nanaša tudi na bolj zapleten strukture elementov, kot tudi jQuery selektorji.
Prva značilnost, kot lahko vidite, spremenite našli metoda vrne predmet, in spremenite svojo transparentnost, nato pa uporabite metodo slideToggle (), se začne animacijo, v tem primeru, je animacija, "spušča" na dno, ki določa parametrov za prikaz nihče v nastavitvah elementa (element je neviden, tako da potisnete je edina stvar, lahko naredimo je, da ga pokažejo).
V drugi zgodbi je vse videti zelo podobna, le da mi ni več treba spremeniti motnosti, saj je že spremenilo. Uspelo nam je na jQuery, vključno ker v CSS, ne bi bilo mogoče, na tak način, da doseže popolno skladnost z W3C validator, in da je preglednost je pravilno prikazan na vseh modernih brskalnikih, ki podpirajo JavaScript.
4. Povzetek
Namen tega članka, je bilo učenje, kako ustvariti animiranih menijev, vendar, spoznavanje veliko zanimivih vprašanj v zvezi z metodo našli (), kot tudi jQuery. Možnosti so velike, in upam, da je po branju tega članka, se bo pridobil nekaj navdušence.
Medtem ko je učinek našega dela, lahko vidimo demonstracijo .
Zelo lep članek - zelo uporabna metoda jQuery in zelo praktičen primer. Vse jasno in prijetno, čakam naslednjih umetnikov