Tanulságai javascript diy - 13. lecke

előző ◈ a következő

MÁSODIK RÉSZ

13. Események, HTML és CSS stílusok

  • hogy az ilyen események;
  • egéreseményeket;
  • document.getElementById () és document.all;
  • hogyan kell hívni a CSS stílus tulajdonságait

De ahhoz, hogy menjen egy angol boltban, hogy vesz magának delírium End sajt önmagában nem feltétlenül tanulni Shakespeare (bár, ha a lépés, hogy Angliában évek óta, még mindig kívánatos).

Ezért, hogy kínáljanak „warm-up” egy könnyebb téma, sőt, gyakran használják a web-oldalakat.

Aztán még start „drill” objektum modell, de megpróbálom, hogy könnyebb és szórakoztatóbb.

Utasítások vannak írva az esemény, a szokásos módon, a script (például, a függvény dem_plus (n, k) a mi példánkban). De rendelni az esemény elvégzésére - vannak speciális attribútumokat címkék HTML (példánkban - onClick).

Itt megtalálja szinte az összes események (és a hozzájuk tartozó HTML tag attribútumok) alfabetikus sorrendben:

onAbort, onAfterUpdate, onBeforeUnload, onBlur, onChange, onClick. onDataAvailable, onDatasetChanged, onDatasetComplete, ondblclick. onDragStart, onError, onErrorUpdate, onFilterChange, onFilterEvent, onFocus, onHelp, onkeydown, onkeypress, onkeyup, onLoad. onMouseMove. onMouseOut. onMouseOver. onMouseUp. onreadystatechange, onReset, onResize, onRowEnter, onRowExit, onScroll, onSelect, onSelectStart, onSubmit, onUnload.

Ne aggódj, a szükséges fejlesztések nem annyira: tulajdonképpen ez néhány esemény az egér és onLoad esemény le a dokumentum (ezek pirossal jelöltük a listán). És ma, mi megelégszünk a szükségletek. De ami a legfontosabb - meg fogja tanulni, hogyan kell emelni eseményeket. Egy hívás formájában egyáltalán azonosak. Mind a „egzotikus” események, mi is úgy, fokozatos, de akkor már pontosan tudja, hogyan kell megközelíteni őt.

„Egér” esemény

Ezek közé tartozik onClick. ondblclick. onDragStart. onMouseMove. onMouseOut. onMouseOver és onMouseUp.

A legtöbb „hagyományos bölcsesség” - az onClick. onMouseOver és onMouseOut.

Az alábbi egyszerű analógia használjuk ezeket három esemény és ondblclick.

Vigye az egeret a psevdossylku, kattintson rá, majd kattintson duplán.

Ez a példa pusztán elméleti és valami még nem túl jó, például, én használtam egy elavult tag . De ez azt mutatják, hogy abban az esetben lehet hívni, és irányítja az attribútumok HTML és a CSS stílusokat.

Itt egy példa a kódot:

Ha meg kell változtatni az attribútum az elem, akkor használja a képlet

Ha megváltoztatjuk a CSS stílus az elem, a lánc kerekíteni, mert a stílus maga pedig egy attribútum a tag, van annak tulajdonságait - a választókat:

(Figyeljük meg, hogy én írtam „selektorStilya.” Ez nem véletlen, és hamarosan a korábban oda.)

A fő hangsúly -, hogy megtalálja az elem (tag). Ebben a példában a címke események kapcsolja neki a legjobban. Erre a célra ott van a this kulcsszó. ami visszaadja az aktuális elemet. De amikor a kattintás, meg kell változtatni a CSS stílus másik elem, akkor azt kell valahogy megjelölni, és nézze meg ezt a címkét.

Csakúgy, mint egy 10-leckét, I használt egy id attribútumot, és „szippantás” - módszer document.getElementById. Ez a leginkább egyetemes munkamódszer minden böngészőben. Amikor beszéltünk tömbök és a gyűjtemények, majd lebontották a módja annak, hogy keresni ezeket a gyűjteményeket. De itt nem működik, mert a címke

. szükségünk van, minden „magángyűjtemény” nem tartalmazza. De van egy dokumentum, és a legnagyobb gyűjteménye: document.all. Ez - „mindent a dokumentumban.” A „útlevél” mert ez mindegy id (bár akkor egy név és néhány tag). Ez azt jelenti, hogy lehet írni:

Kérjük, vegye figyelembe: az első esetben a kuku egy tulajdonsága az elem és zárójelbe írjuk és idézetek. A második esetben - egy tárgy. amely „hozzátétele”, hogy a gyűjtemény keresztül (idézőjelek nélkül).

Ezért beszéltem annyira a nyelvtani és szerkezete a korábbi leckéket. Amikor megtanulod, hogyan kell megérteni, hogy ki kicsoda, akkor a kód működni fog. Nos, ha nem is az első, akkor legalább a harmadik alkalommal. Megjegyzem a füledbe: nagyméretű és összetett kódok soha senki az első próbálkozás nem működik megfelelően. De, hogy fel őket, akkor kell egy jó felfogni, mint a szappan anya keretben. Tehát ne lepődj meg, vagy sértve, ha úgy tűnik, hogy már túl sok ismétlődő. Ez a design.

A második út - a document.all - nem mindig és nem mindenhol. Korábban ő egyértelműen csak dolgozott IE. Igaz, az új generációs böngésző alapú Netscape, ahol valahogy működik, bár document.all koncepció még van nem támogatott. Ezért, ha azt szeretnénk, hogy garantálja közel 100% -os, a document.getElementById.

És ismét, ahelyett onMouseOver ebben a helyzetben, akkor ugyanazt a hatást onMouseMove. Ezek különböznek körülbelül ugyanaz, mint document.write () és document.writeln (). Lakom ezen a mai napon nem fogunk.

Hívjon CSS stílusok

Kezdjük egy kis korszerűsítésére például: uberom ezt fosszilis tag . Ehhez be kell állítani a színt a CSS stílus

Azaz:

És itt is helyezni és események. De hogy ez hogyan történik, már tudjuk:

Látod, ha hívjuk a CSS stílus, a szín maga is írt rövidített formában, mint a CSS. Abban az esetben, címke attribútumok egy ilyen rekord nem telt el.

És most készült címke

hogy ez olyan egyszerű gomb:

Játszani? Csak kacsint, de nem nyitotta ki, nem néz.

Most próbálja meg csináld magad.

Kapcsolódó cikkek

előző ◈ a következő