Jquery cseretétel, felerősítését, mozgó és egyéb műveletek, kódrészletek
Hogyan változtassuk meg a tartalmát az elemek jQuery
Ebben a leckében fogjuk kipróbálhatják a tartalom megváltoztatása elemek a jQuery.
Tehát, a leggyakrabban használt műveleteket, hogy változik a tartalmi elemek. Kívül a jQuery könyvtár erre a célra használja a innerHTML tulajdonság dokumentum. Például, hogy helyezzen be egy új elemet a részazonosítóból divL, akkor a következő kódot.
jQuery könyvtár is lehetővé teszi, hogy használja ezt a funkciót. Ahhoz, hogy megtalálja ezt az elemet használja a $ (), majd átalakítani a gyűjtemény elemeinek egy sor jQuery DOM-elemekkel.
Erre a célra, akkor is használhatja a get () metódus.
A jQuery könyvtár tartalmának megváltoztatási az elemek az alábbi módszerek használhatók.
- szöveg ([3nachenie]) - lehetővé teszi, hogy vagy a szöveg elemet. Ha nincs megadva, akkor az eljárás visszatér a szöveges érték, címkék nélkül. Ha több elemet a gyűjtemény minden értéke egy string kerül vissza. Ha azt szeretnénk, hogy az érték csak az első eleme a gyűjtemény, akkor lehetséges, hogy a módszer ekvivalens ().
Azt is korlátozzák a készlet a választó:
Ha megad egy string paraméterként, akkor cserélje ki a tartalmát az összes eleme a gyűjtemény. Ha vannak speciális karakterek egy sorban, akkor kell cserélni a HTML-egyenérték.
Ebben a példában a sort az eredeti HTML-kód lesz a következő.
- html ([3nachenie]) - lehetővé teszi, hogy beállítani, vagy a HTML-kód elem. Ha nincs megadva, az eljárás egy értéket ad vissza, valamint a címkéket. Ha több gyűjteményünknek kerül vissza csak az első elemet.
Ha megad egy HTML-kódot a paraméter, akkor cserélje ki a tartalmát minden eleme a gyűjtemény, és a dokumentum objektum modell frissítésre kerül. Levezetjük a HTML kódot az összes tag div.
Ha értékének megváltoztatása csak az első eleme a gyűjtemény, lehetőség van használni a módszert a eq () vagy kiválasztó. először.
- append (Expression) - egészíti ki a mondat, hogy a végén a tartalom a kiválasztott elem. Paraméterként HTML-kód is megadható, DOM-jQuery elem vagy elemek gyűjteménye. Például, adja hozzá a HTML-kódot végén az elem.
Az eredmény a következőképpen fog kinézni.
Most add DOM-elem.
- betoldott (Expression) - egészíti kifejezést az elején a tartalmát a kijelölt elemet. Paraméterként HTML-kód is megadható, DOM-jQuery elem vagy elemek gyűjteménye. A módszer azonos azzal a módszerrel appendO, azzal az eltéréssel, hogy a kifejezés nem tesz hozzá, hogy a végén az elem, mint kezdetben. Például, adja hozzá a HTML-kódot, hogy a tetején az elem.
- appendTo (választó) - gyűjtése jQuery elemeket ad hozzá a végén az összes elem megfelelő említett kiválasztó. Például, adja hozzá a HTML-kódot végén az elem az ID divl.
Amint láthatjuk, mi változott a paramétereket a helyszínek és használt append () metódus helyett a módszer appendTo ().
- prependTo (választó) - egészíti jQuery gyűjtemény elemek elején minden olyan elemet amely megfelel az említett kiválasztó. Például, adja hozzá a HTML-kódot, hogy a tetején az elem az ID divl.
Hogyan adjunk tartalom előtt vagy után egy elem
Az előző részben megnéztük a változás a belső tartalom az elem. jQuery könyvtár eljárásokat is biztosít, amely lehetővé teszi, hogy adjunk néhány tartalom előtt vagy után egy elem. Tekintsük ezeket a módszereket.
- afteg (Expression) - egészíti utáni kifejezés az összes elemet a gyűjteményben. Paraméterként HTML-kód is megadható, DOM-jQuery elem vagy elemek gyűjteménye. Például adja hozzá a következő HTML-kód elem.
Most adjuk hozzá a létrehozott elem jQuery gyűjtemény. $ ( "# Divl"). Ezután ($ ( "új szöveg„));
- előtt (Expression) - hozzáteszi kifejezést minden elemét a gyűjtemény. Paraméterként HTML-kód is megadható, DOM-jQuery elem vagy elemek gyűjteménye. A módszer azonos azzal a módszerrel után (), kivéve, hogy a kifejezés nem tesz hozzá az elem, és előtte. Például adja hozzá a HTML-kódot, mielőtt az elemet.
Az eredmény a következőképpen fog kinézni.
új szöveg
JÓ kimenet leírása (alt) szerint a fotó
- insertAfter (választó) - egészíti jQuery gyűjtemény elemek után minden elem megfelel a nevezett választó. Például adja hozzá a HTML-kód után az elem az ID divl.
Az eredmény ugyanaz lesz, mint amikor a módszer után ().
$ ( "# Divl"). Ezután ( "új szöveg„);
- insertBefore (választó) - egészíti jQuery gyűjtemény elemek az összes elem megfelelő említett kiválasztó. Például adja hozzá a HTML-kódot, mielőtt az elemet az azonosító divl.
Az eredmény ugyanaz lesz, mint amikor a módot, mielőtt ().
$ ( "# Divl".) Mielőtt ( "új szöveg„);
Minden gyűjteményünknek lehet helyezni bármely más elemet. Az alábbi módszerek tervezték beágyazására elemek.
- wraplnner (HTML-BOM sejt vagy elem) -vkladyvaet belső tartalmát az egyes gyűjtő elem egy másik elemmel. Például válassza ki az összes tartalom a div tag.
Ugyanez a hatás érhető el halad, mint a paraméter DOM-elem.
Azt is át egy elemet által létrehozott $ () függvény.
- pakolás (HTML-elemet vagy elem BOM) -teljesen helyezi minden elem a gyűjtemény egy másik elem.
Az eredmény a következő:
- wrapAll (HTML-elemet vagy elem PTO) - gyűjti az összes elemet a gyűjtemény egy helyen, és teszi őket egy másik elem.
Az eredmény a következőképpen fog kinézni.
Néhány szöveg 1
Mint látható a példában, minden tagja a gyűjtemény kerültek az első tag és elhelyezve a tag u.
Mozgó és klónozási elemek
Ha a paraméter előtt módszerek (), elő- (), append () és után (), hogy meghatározza a gyűjtemény már meglévő elemek jQuery, akkor lehet mozgatni. Amennyiben elemek vannak bedugva, függ az adott módszer: mielőtt () (első elem) rgepend () (az elején a tartalom), append () (tartalom a végén), után () (miután az elem). Például, megtalálja az összes link egy oldalon, és add hozzá a végén az elem.
Ennek eredményeként, az összes hivatkozás kerül át a végén a tartalma az elem az ID divl, és megkapjuk az alábbi HTML-kódot.
Ugyanez a hatás érhető el módszerekkel insertBefore (), prependTo (), appendTo () és insertAfter (). Amennyiben elemek vannak bedugva, függ az adott módszer: insertBefore O (első elem), prependTo () (az elején a tartalom), appendTo () (tartalom a végén), insertAfter () (miután az elem). Például, megtalálja az összes link egy oldalon, és add hozzá a tételt.
Ennek eredményeként az összes link kerül közvetlenül előtte egy elem egy azonosítót divl, és megkapjuk az alábbi HTML-kódot.
jQuery könyvtár lehetővé teszi, hogy másolatokat meglévő elemek (klón). Erre a módszer olyan klónt ([igaz]). Ha a paraméter értéke igaz, akkor is lehet klónozni és eseménykezelőkkel. Készítsen másolatot az első kapcsolat egy dokumentumot, majd ebből az elem után azonosítója divl. $ ( "A") eq (0) .clone () insertAfter ( "# divl") ..;
Az eredmény a következőképpen fog kinézni.
Tisztítás és eltávolítja a tartalmat az elem
A következő módszereket használjuk, hogy tiszta, és távolítsa el a tartalmát az elem.
- empty () - eltávolítja az összes al-elemek az aktuális elem.
Amint látható a példa, eltávolítása után divl tartalmat egy azonosítóval elem az elem továbbra is elérhető a manipulációt.
- eltávolítás ([választó]) - eltávolítja az elemeket a Document Object Model.
Ez a példa azt mutatja hiányában egy elem, ha a Törlés gombra. Kattintva az elemek száma az első alkalom, hogy az 1. számú, és ha rákattintunk eltávolítása után egy elem, megkapjuk a 0 szám.
HASZNOS Magnific felugró
Ha a gyűjtemény több mint egy elem, akkor minden elem törlődik. remove () módszer lehetővé teszi, hogy meghatározza egy további feltétele, hogy meg kell felelnie az elemeket eltávolították. Példaként, törölje az összes hivatkozást a terjeszkedés. php.
Tartalmának megváltoztatása elemek
Gets a gyűjtemény termékek és hozzáférést egyes elemei már megtanult. Most nézd meg a különböző módszerek, hogy módosítsa a tulajdonságokat és az elemek a gyűjtemény. Egyes módszerek általunk alkalmazott Példáinkben hogy az eredményt, vagy megváltoztathatja a tulajdonságait az elemek.
A leggyakrabban használt műveletek változtatni a tartalmi elemek. Kívül a jQuery könyvtár erre a célra használja a innerHTML tulajdonság dokumentum. Például, hogy helyezzen be egy új elemet a részazonosítóból divL, akkor a következő kódot.
jQuery könyvtár is lehetővé teszi, hogy használja ezt a funkciót. Ahhoz, hogy megtalálja ezt az elemet használja a $ (), majd átalakítani a gyűjtemény elemeinek egy sor jQuery DOM-elemekkel.
Erre a célra, akkor is használhatja a get () metódus.
A jQuery könyvtár tartalmának megváltoztatási az elemek az alábbi módszerek használhatók.
- szöveg ([3nachenie]) - lehetővé teszi, hogy vagy a szöveg elemet. Ha nincs megadva, akkor az eljárás visszatér a szöveges érték, címkék nélkül. Ha több elemet a gyűjtemény minden értéke egy string kerül vissza. Ha azt szeretnénk, hogy az érték csak az első eleme a gyűjtemény, akkor lehetséges, hogy a módszer ekvivalens ().
Azt is korlátozzák a készlet a választó:
Ha megad egy string paraméterként, akkor cserélje ki a tartalmát az összes eleme a gyűjtemény. Ha vannak speciális karakterek egy sorban, akkor kell cserélni a HTML-egyenérték.
Ebben a példában a sort az eredeti HTML-kód lesz a következő.
- html ([3nachenie]) - lehetővé teszi, hogy beállítani, vagy a HTML-kód elem. Ha nincs megadva, az eljárás egy értéket ad vissza, valamint a címkéket. Ha több gyűjteményünknek kerül vissza csak az első elemet.
Ha megad egy HTML-kódot a paraméter, akkor cserélje ki a tartalmát minden eleme a gyűjtemény, és a dokumentum objektum modell frissítésre kerül. Levezetjük a HTML kódot az összes tag div.
Ha értékének megváltoztatása csak az első eleme a gyűjtemény, lehetőség van használni a módszert a eq () vagy kiválasztó. először.
- append (Expression) - egészíti ki a mondat, hogy a végén a tartalom a kiválasztott elem. Paraméterként HTML-kód is megadható, DOM-jQuery elem vagy elemek gyűjteménye. Például, adja hozzá a HTML-kódot végén az elem.
Az eredmény a következőképpen fog kinézni.
Most add DOM-elem.
- betoldott (Expression) - egészíti kifejezést az elején a tartalmát a kijelölt elemet. Paraméterként HTML-kód is megadható, DOM-jQuery elem vagy elemek gyűjteménye. A módszer azonos az append () módszer, azzal az eltéréssel, hogy hozzáad egy elemet a kifejezés nem cél, hanem a kezdete. Például, adja hozzá a HTML-kódot, hogy a tetején az elem.
Az eredmény a következőképpen fog kinézni.
szöveg
- appendTo (választó) - gyűjtése jQuery elemeket ad hozzá a végén az összes elem megfelelő említett kiválasztó. Például, adja hozzá a HTML-kódot végén az elem az ID divl.
Az eredmény ugyanaz lesz, mint amikor a módszerrel append ().
$ ( "# Divl"). Hozzáfűzése ( "új szöveg„);
Amint láthatjuk, mi változott a paramétereket a helyszínek és használt append () metódus helyett a módszer appendTo ().
- prependTo (választó) - egészíti jQuery gyűjtemény elemek elején minden olyan elemet amely megfelel az említett kiválasztó. Például, adja hozzá a HTML-kódot, hogy a tetején az elem az ID divl.
Az eredmény ugyanaz lesz, mint amikor a módszerrel betoldott ().
$ ( "# Divl"). Prepend ( "új szöveg„);
A szkript kép pakolások kizárásával többi címke + osztály + törölni bizonyos attribútumokat