JQuery api manipuláció - manipuláció elemei dom
Miután megismerése ebben a szakaszban a dokumentáció jQuery segítségével egyszerűen manipulálni az elemek a Document Object Model. Ma megtanulják, hogyan kell beszúrni, pakolás, cseréje, másolni, illetve törölni DOM elemeket.
.html (): string
Visszaadja html-tartalom a kiválasztott elem.
Ha több elem van, az érték kerül sor az első.
.html (string): jQuery objektum
Ez helyettesíti a tartalmát az összes elemet a kiválasztott húr.
.html (jQuery objektum | DOM objektum): jQuery objektum
A kiválasztott oldalon elemek elemek (a korábbi tartalmát ezután eltávolítjuk).
Beállíthatjuk a DOM-elemek vagy alá jQuery.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.html (függvény (index, érték)): jQuery objektum
Lecseréli a tartalmát a kijelölt elemeket a visszaadott érték a felhasználói funkció.
Ez a funkció a külön-külön a kiválasztott terméket.
Amikor hívja a következő paramétereket átadni neki:
index - a helyzet az elem a készletben,
érték - az aktuális HTML-tartalmat. Ebben a példában kattintva az egérrel a szakasz váltja át HTML-kódot a szövegben.
Nyissa meg a például az új ablak és nézd meg a forráskódot
Ebben a példában adjunk hozzá egy kevés html-kódot minden egyes eleme a div.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.szöveg (): string
Visszaadja a szöveg a kiválasztott elem.
.szöveg (string): jQuery objektum
Lecseréli a teljes tartalmát a kijelölt elemek a szöveg.
.szöveg (function (index, érték)): jQuery objektum
Lecseréli a teljes tartalmát a kiválasztott elemeket a felhasználó által megadott függvény értéke szöveget.
Ha megpróbálod a szöveges () metódus, hogy egy másik elemet a HTML-szöveget, jQuery kikerülne címkékkel.
.append (tartalom)
Hozzáteszi összes tartalmat a belsejében a kiválasztott elem után a meglévő tartalmat. Ez a művelet hasonló a használata AppendChild.
Ebben a példában adunk hozzá egy HTML-kód végén bekezdések.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.appendTo (tartalom)
Hozzáadja az összes kiválasztott elemet a másik elemekre után a meglévő tartalmat.
Ez a művelet az inverze a kifejezés használatát $ (A) .append (B). amely növeli a B A.
Itt egy adunk B.
Csak hasonlítsuk össze a példáját append ().
Nyissa meg a például az új ablak és nézd meg a forráskódot
.Prepend (tartalom)
Hozzáteszi összes tartalmat a belsejében a kiválasztott elemeket a meglévő tartalmat.
Ez a legjobb megoldás, hogy helyezze elemek a legelején.
Ebben a példában adunk hozzá egy HTML-kód elején bekezdéseket.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.prependTo (tartalom)
Hozzáadja az összes kiválasztott elemet a másik meg az elemeket, amelyek a meglévő tartalmat.
Ez a művelet az inverze a kifejezés használatát $ (A) .prepend (B). amely növeli a B A. Itt egy adunk B.
Csak hasonlítsuk össze a példa betoldott ().
Nyissa meg a például az új ablak és nézd meg a forráskódot
.után (tartalom)
Szúr kontentPOSLE egyes kiválasztott elem.
A példában beszúrni egy HTML-kód elvégre bekezdését.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.insertAfter (tartalom)
Helyezze be az összes többi kiválasztott elementyPOSLE meghatározott insertAfter.
Ez a művelet az inverze a kifejezés használatát $ (A) .Egy (B). ahol B egészül ki a A.
Itt van beillesztve után V.
Csak hasonlítsuk össze például azután ().
Nyissa meg a például az új ablak és nézd meg a forráskódot
.előtt (tartalom)
Szúr kontentPERED egyes kiválasztott elem.
A példában beszúrni egy HTML-kód előtt minden pontjában.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.insertBefore (tartalom)
Helyezze be az összes többi kiválasztott elementyPERED meghatározott insertBefore.
Ez a művelet az inverze a kifejezés használatát $ (A) .Előbb (B). ahol B egészül ki a A.
Itt van beillesztve után V.
Csak hasonlítsuk össze a példa előtt ().
Ebben a példában az összes a bekezdések előtt egy elem, amely a „foo” id attribútumot. Ugyanezt lehet tenni írásban: $ ( "# foo"), mielőtt ( "p").
Nyissa meg a például az új ablak és nézd meg a forráskódot
.pakolás (html | DOM elem | jQuery elem)
Ez pakolások minden elem elem meg egy wrapper.
Ez hasznos lehet az injekció kiegészítő szerkezetet a dokumentumot, de nem zavarja az eredeti szemantikai minőségű dokumentum.
Ebben a példában DIV csomagolja az új elem körül minden részén. A HTML-kód működik, mint egy érv.
Nyissa meg a például az új ablak és nézd meg a forráskódot
Nyissa meg a például az új ablak és nézd meg a forráskódot
Nyissa meg a például az új ablak és nézd meg a forráskódot
.wrapAll (html | DOM elem | jQuery elem)
Ez pakolások minden eleme egy sor egyetlen átalakító elem.
Ez hasznos lehet az injekció kiegészítő szerkezetet a dokumentumot, de nem zavarja az eredeti szemantikai minőségű dokumentum.
Ebben a példában csomagoljuk egy új div körül minden a bekezdéseket. A HTML-kód működik, mint egy érv.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.wrapInner (html | DOM elem | jQuery elem)
Belső pakolások mindegyik tartalmi elemek (beleértve a szöveges csomópontok) a HTML struktúra.
Ez hasznos lehet az injekció kiegészítő szerkezetet a dokumentumot, de nem zavarja az eredeti szemantikai minőségű dokumentum.
Ebben a példában, akkor válassza ki a bekezdéseket, és takarja tag b belső tartalmát. A HTML-kód működik, mint egy érv.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.replaceWith (tartalom)
Felváltja az összes halmaz elemeit a HTML vagy DOM elemeket.
Ebben a példában a gombra kattintva helyébe a div elem ugyanazzal a szöveggel, ami a gombot.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.replaceAll (választó)
Kicseréli az összes meghatározott elemek a kiválasztó, az említett (i) elemek.
Ez a funkció kiegészíti a replaceWith (). hogy megoldja ugyanazt a problémát fordított.
Ebben a példában azt cserélje ki az összes bekezdésben a szöveg címkék b.
Nyissa meg a például az új ablak és nézd meg a forráskódot
Eltávolítja az összes gyermek csomópontok (beleértve a szöveges csomópontok) egy sor elemet.
Is eltávolítja eseménykezelőkkel és belső gyorsítótárazott adatokat.
Ebben a példában egy kattintás a gombra töröl minden gyermek csomópontok minden pontban.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.eltávolítás (expr)
Törli az összes kiválasztott elemét DOM.
Ezek azonban nem lehet eltávolítani jQuery objektum, amely lehetővé teszi, hogy használja őket a jövőben.
Adott esetben, az expressziós expr szűrő alkalmazható.
Ebben a példában a gombra kattintva, akkor törölje az összes pontban a DOM.
Nyissa meg a például az új ablak és nézd meg a forráskódot
Eltávolítja a szülő eleme a kiválasztott terméket ugyanabban az időben, azok tartalmát a helyén marad. Tekintsük az oldalt, amely tartalmazza a következő szöveget: Miután az alkalmazás weboldala a következőképpen működnek:
.klón ([withDataAndEvents]): jQuery objektum
withDataAndEvents - meghatározza, hogy az adatok másolását és eseménykezelőkkel telepített a másolt elemek szükségesek. Alapértelmezés szerint ez a paraméter értéke false.
Ebben a példában, akkor a klón az összes elemét b (és válasszon klónozott), és illessze be őket, mielőtt a bekezdéseket.
Nyissa meg a például az új ablak és nézd meg a forráskódot
Ebben a példában létrehozunk egy gombot, amely képes klónozni magát, és a klónok maguk is képesek ugyanazt a klónt. Hm, próbálja meg a legjobban ponazhimat ezt a gombot.
Nyissa meg a például az új ablak és nézd meg a forráskódot
.add (választó)
Hozzáteszi a megadott elemeket a meglévő elemekre.
A hozzáadott elemek keresett az oldalon a megadott választó választó.
.adjunk hozzá (elemek)
A hozzáadott elemek által meghatározott egy vagy több (array) DOM-elemek.
.add (html)
A hozzáadott elemek meghatározott html-szöveget.
add (választó, kontextus)
A hozzáadott elemek keresi az oldalon a megadott kiválasztó kiválasztó, meghatározott területen belül a szövegösszefüggésnek.
A keresési terület lehet állítani DOM-elem, jQuery objektum vagy dokumentum objektumot.
.Tartalom ()
Garancia minden gyermek kiválasztott tagjainak, valamint a szöveges tartalmat.
Ellentétben a hasonló módszerrel .children (). Ebben az eljárásban, az eredmény tartalmazni fogja a szöveg blokkokat fekvő közvetlenül belül a kiválasztott terméket.
Például egy oldalt, ahol a következő html szöveges e két módszer eltérő eredményt fognak:
Ez adja vissza az előző sor elemei a jelenlegi lánc módszerekkel.
Példa: De lehet használni: