Spørg hvad der er wrap element. Manipulering af sideelementer med jQuery

Nu skal vi studere arbejdet med XML. XML er et format til udveksling af data mellem websteder. Det minder meget om HTML, men XML tillader sine egne tags og attributter.

Hvorfor er der brug for XML til at analysere? Nogle gange sker det, at det websted, du skal parse, har en API, som du kan få det, du vil have, uden den store indsats. Derfor lige et råd - før du analyserer et websted, så tjek om det har en API.

Hvad er en API? Dette er et sæt funktioner, hvormed du kan sende en anmodning til dette websted og modtage det ønskede svar. Dette svar kommer oftest i XML-format. Så lad os begynde at studere det.

Arbejde med XML i PHP

Lad os sige, at du har XML. Det kan være i en streng eller gemt i en fil eller serveret efter anmodning til en bestemt URL.

Lad XML gemmes i en streng. I dette tilfælde skal du oprette et objekt fra denne streng ved hjælp af det nye SimpleXMLElement :

$str = "Kolya 25 1000"; $xml = nyt SimpleXMLElement($str);

Nu har vi et objekt med parset XML gemt i $xml-variablen. Ved at få adgang til egenskaberne for dette objekt kan du få adgang til indholdet af XML-tags. Vi ser nærmere på hvordan nedenfor.

Hvis XML er gemt i en fil eller sendt via en URL (hvilket oftest er tilfældet), så skal du bruge simplexml_load_file-funktionen, som laver det samme $xml-objekt:

Kolya 25 1000

$xml = simplexml_load_file(sti til fil eller URL);

Arbejdsmetoder

I eksemplerne nedenfor er vores XML gemt i en fil eller URL.

Lad følgende XML gives:

Kolya 25 1000

Lad os få medarbejderens navn, alder og løn:

$xml = simplexml_load_file(sti til fil eller URL); echo $xml->navn; //vil vise "Kolya" echo $xml->age; //vil udsende 25 echo $xml->løn; // vil udlæse 1000

Som du kan se, har $xml-objektet egenskaber, der svarer til tags.

Du har måske bemærket, at tagget ikke vises nogen steder under anmodningen. Dette er fordi det er root-tagget. Du kan for eksempel omdøbe den til - og intet vil ændre sig:

Kolya 25 1000

$xml = simplexml_load_file(sti til fil eller URL); echo $xml->navn; //vil vise "Kolya" echo $xml->age; //vil udsende 25 echo $xml->løn; // vil udlæse 1000

Der kan kun være ét root-tag i XML, ligesom et tag i almindelig HTML.

Lad os ændre vores XML lidt:

Kolya 25 1000

I dette tilfælde vil vi få en kæde af anmodninger:

$xml = simplexml_load_file(sti til fil eller URL); echo $xml->arbejder->navn; //vil vise "Kolya" echo $xml->worker->age; //vil udsende 25 echo $xml->arbejder->løn; // vil udlæse 1000

Arbejde med attributter

Lad nogle data gemmes i attributter:

Nummer 1

$xml = simplexml_load_file(sti til fil eller URL); echo $xml->worker["navn"]; //vil vise "Kolya" echo $xml->worker["age"]; //vil udsende 25 echo $xml->worker["løn"]; //vil udsende 1000 echo $xml->worker; // vil vise "Nummer 1"

Tags med bindestreger

XML tillader tags (og attributter) med en bindestreg. I dette tilfælde sker adgang til sådanne tags som dette:

Kolya Ivanov

$xml = simplexml_load_file(sti til fil eller URL); echo $xml->worker->(fornavn); //vil vise "Kolya" echo $xml->worker->(efternavn); // vil vise "Ivanov"

Løkker

Lad os nu ikke have én medarbejder, men flere. I dette tilfælde kan vi iterere over vores objekt ved hjælp af en foreach loop:

Kolya 25 1000 Vasya 26 2000 Petya 27 3000

$xml = simplexml_load_file(sti til fil eller URL); foreach ($xml som $worker) ( echo $worker->name; //vil vise "Kolya", "Vasya", "Petya" )

Fra objekt til normal array

Hvis du ikke er tryg ved at arbejde med objektet, kan du konvertere det til et normalt PHP-array ved at bruge følgende trick:

$xml = simplexml_load_file(sti til fil eller URL); var_dump(json_decode(json_encode($xml), sand));

Mere information Parsing baseret på sitemap.xml

Ofte har et websted en sitemap.xml-fil. Denne fil gemmer links til alle sider på webstedet for at lette indeksering af søgemaskiner (indeksering er i det væsentlige site-parsing af Yandex og Google).

Generelt bør vi ikke bekymre os meget om, hvorfor denne fil er nødvendig, det vigtigste er, at hvis den eksisterer, behøver du ikke at gennemgå siderne på webstedet ved hjælp af nogen vanskelige metoder, men blot bruge denne fil.

Sådan kontrolleres tilstedeværelsen af denne fil: lad os analysere webstedet site.ru, og gå derefter til site.ru/sitemap.xml i browseren - hvis du ser noget, så er det der, og hvis du ikke kan se det, så ak.

Hvis der er et sitemap, så indeholder det links til alle sider på webstedet i XML-format. Tag roligt denne XML, parse den, adskil links til de sider, du har brug for på nogen måde, der er praktisk for dig (for eksempel ved at analysere URL'en, som blev beskrevet i spider-metoden).

Som et resultat får du en liste over links til at analysere, alt du skal gøre er at gå til dem og analysere det indhold, du har brug for.

Læs mere om sitemap.xml-enheden på Wikipedia.

Hvad skal du gøre nu:

Begynd at løse problemer ved at bruge følgende link: problemer til lektionen.

Når du bestemmer alt, så gå videre til at studere et nyt emne.

jQuery DOM Methods definition og anvendelse

jQuery .wrapAll()-metoden ombryder alle elementer (element) i sættet med det valgte HTML-element.

Hvis du skal ombryde hvert matchede element eller elementer i et sæt med udvalgte HTML-elementer, så kan du bruge .wrap()-metoden.

jQuery syntaks: 1.2 syntaks: $(selector).wrapAll( indpakningElement) Syntaks 1.4: $(selector).wrapAll(function ) Før jQuery 3.0 blev funktionen kaldt forkert for hvert element i sættet, den modtog indekset for elementet i sættet som en parameter (svarende til .wrap( ) metode). Tilføjet i jQuery 1.2 (syntaks opdateret i 1.4) Parameterværdier Brugseksempel Brug af jQuery .wrapAll() metoden (indpakning af et HTML-element)

.violetBorder /* sæt en fast lilla kant på 1 pixelstørrelse */ )

$("p ").wrapAll(" "); // wrap alle elementer

I sættet ) ); ) ); Skrig

Almindelig stk

Andet regulære afsnit

Tredje regulære afsnit

.wrapAll()

i et sæt af et element med en klasse .violetBorder.

Et lignende resultat kan opnås, når du opretter et DOM-element:

$("p").wrapAll( document.createElement("div"));

Resultatet af vores eksempel:

Bemærk, at du kan oprette en kompleks indlejret struktur ved at ombryde de nødvendige elementer med flere HTML-elementer:

Brug af jQuerys .wrapAll()-metode (indpakning af flere HTML-elementer)

div (kant: 1px solid violet;)

$(document).ready(function ()( $("knap ").click(function ()( // indstil funktionen, når der klikkes på elementet $("span ").wrapAll(" "); // pak alle elementer i sættet ) ) ) ); Klik på Normal span

Almindelig stk

Andet regulære span

I dette eksempel, ved hjælp af jQuerys .wrapAll()-metode, når der klikkes på en knap, ombryder vi alle elementerne i dokumentet med flere HTML-elementer. Læg mærke til, hvordan elementerne er grupperet, og hvordan dokumentets flow har ændret sig.

Resultatet af vores eksempel:

Overvej følgende eksempel, hvor vi sender en funktion som en parameter til metoden .wrapAll().

Brug af jQuerys .wrapAll()-metode (fungerer som parameter)

div ( kant : 1px fast orange ; /* sæt en 1 pixel fast orange kant */ )

$(document).ready(function ()( $("button").click(function ()( // sæt funktionen, når der klikkes på elementet $("span ").wrapAll(function ()( // wrap alle elementer i sættet $(this).css("farve", "rød" // sæt tekstfarven til det første element i sættet returnerer " "; Klik på Normal span Anden normal span Tredje normal span

I dette eksempel, ved at bruge jQuerys .wrapAll()-metode, ombryder vi alle elementer, når der klikkes på en knap

HTML-elementmanipulation giver dig mulighed for at forfine, udvide et indpakket sæt elementer ved at tilføje nyt indhold eller fjerne elementer fra sættet. For at manipulere elementer skal de vælges ved hjælp af vælgere eller udvælgelsesmetoder.

Elementsætstyring 1. Tilføjelse af indhold til siden 1.1. Method.html()

Returnerer HTML-indholdet i det første element i det ombrudte sæt eller føjer HTML-indhold til hvert element i sættet.

Html() Metoden er angivet uden parametre. Returnerer indholdet af det første element i det matchende sæt som HTML-markering. .html (markup fragment) markup fragment - tilføjer et fragment af HTML markup til indholdet af alle elementer i det tilsvarende sæt. .html(funktion) funktion - tager to argumenter: indekset for elementet og det aktuelle indhold af elementet. Returværdien tilføjes som nyt indhold.

1.2. Method.text()

Returnerer det kombinerede tekstindhold af alle elementer i det ombrudte sæt, inklusive deres underordnede, eller tilføjer nyt tekstindhold.

Text() Metoden er angivet uden parametre. Sammenkæder tekstindholdet af alle ombrudte elementer og returnerer den resulterende tekst som et resultat, der kan gemmes i en variabel. .text(string) string - Indstiller indholdet af parameteren til at være det nye tekstindhold for alle ombrudte elementer, fjerner det gamle indhold. Hvis linjen indeholder vinkelparenteser, erstattes de med tilsvarende HTML-elementer. .text(function)-funktion - Kaldes for hvert element i det indpakkede sæt. Funktionen tager to argumenter - elementets indeks og elementets aktuelle indhold. Returværdien tilføjes som nyt indhold.

2. Tilføjelse af elementer 2.1. Method.append()

Føjer indholdet angivet af parameteren til slutningen af hvert element i det indpakkede sæt efter dets indhold. Det nye sæt vil indeholde det originale indhold og tilføjede indhold.

Tilføj(indhold1, indhold2) indhold1 indhold2 er en valgfri parameter, der specificerer yderligere indhold ved at tilføje et eller flere HTML-elementer, arrays, strenge eller jQuery-objekter. .tilføj (funktion) funktion

2.2. Method.appendTo()

Metoden ligner .append() med den forskel, at jQuery-funktionen videregives det element, der skal tilføjes, i stedet for det indpakkede sæt. Tilføjer elementerne i det indpakkede sæt efter indholdet af de elementer, der er angivet af parameteren.

AppendTo (det element, som indholdet er tilføjet til)

2.3. Method.prepend()

Fungerer på samme måde som .append(), kun det nye indhold tilføjes i begyndelsen, umiddelbart efter elementets åbningstag, før elementets indhold.

Prepend(content1, content2) content1 - Tilføjer et HTML-element, array, streng eller jQuery-objekt som indhold. content2 - valgfri parameter, definerer yderligere indhold, et eller flere HTML-elementer, arrays, strenge eller jQuery-objekter tilføjes. .prepend(function) funktion - kaldet for hvert element i sættet, funktionen sendes to argumenter - elementets indeks og det aktuelle indhold af elementet. Funktionen returnerer en streng, DOM-element eller jQuery-objekt. Den returnerede værdi vil blive brugt som indhold for at komplementere elementets eksisterende indhold.

2.4. Method.prependTo()

Metoden ligner .prepend() med den forskel, at jQuery-funktionen videregives det element, der skal tilføjes, i stedet for det indpakkede sæt. Tilføjer elementerne i det indpakkede sæt til begyndelsen af indholdet af de elementer, der er angivet af parameteren.

PrependTo(element, hvortil indhold føjes) Elementet, som indhold føjes til - en selector, HTML-element, elementarray, streng eller jQuery-objekt føjes til elementet.

2.5. Method.before()

Tilføjer HTML-fragmentet eller -elementet, der er angivet i metodeparameteren, til DOM-træet før hvert element i det indpakkede sæt. Funktionen kaldes for hvert element i sættet, den videregives selve elementet og to argumenter - elementets indeks og elementets aktuelle indhold. Den returnerede værdi vil blive brugt som indhold for at komplementere elementets eksisterende indhold.

Før(indhold1, indhold2) indhold1 - Tilføjer et HTML-element, array, streng eller jQuery-objekt som indhold. content2 - valgfri parameter, definerer yderligere indhold, et eller flere HTML-elementer, arrays, strenge eller jQuery-objekter tilføjes. .before(function) funktion - indekset for elementet i sættet og dets aktuelle værdi sendes som et argument til funktionen. Funktionen returnerer en streng, DOM-element eller jQuery-objekt. Den returnerede værdi vil blive brugt som indhold, der skal tilføjes. .before(funktion) funktion

2.6. Method.insertBefore()

Indsætter indholdet, der sendes til jQuery-funktionen, før hvert element, der er angivet som et argument til denne metode.

InsertBefore(element, hvortil indhold er tilføjet) Elementet, som indhold er tilføjet til - en selector, HTML-element, matrix af elementer, streng eller jQuery-objekt tilføjes til elementet.

2.7. Method.after()

Tilføjer det indhold, der er angivet i metodeparameteren, til DOM-træet efter hvert element i det indpakkede sæt.

After(content1, content2) content1 - Tilføjer et HTML-element, array, streng eller jQuery-objekt som indhold. content2 - valgfri parameter, definerer yderligere indhold, et eller flere HTML-elementer, arrays, strenge eller jQuery-objekter tilføjes. .after(function) funktion - indekset for elementet i sættet og dets aktuelle indhold sendes som et argument til funktionen. Funktionen returnerer en streng, DOM-element eller jQuery-objekt. Den returnerede værdi vil blive brugt som indhold, der skal tilføjes. .after(funktion) funktion - indekset for elementet i sættet sendes som et argument til funktionen. Funktionen returnerer en streng, DOM-element eller jQuery-objekt. Den returnerede værdi vil blive brugt som indhold, der skal tilføjes.

2.8. Method.insertAfter()

Indsætter indholdet, der sendes til jQuery-funktionen efter hvert element, der er angivet som en parameter til denne metode.

InsertAfter(element, hvortil indhold er tilføjet) Elementet, som indhold er tilføjet til - en selector, HTML-element, matrix af elementer, streng eller jQuery-objekt tilføjes til elementet.

2.9. Method.wrap()

Metoden ombryder et element eller en gruppe af elementer med HTML-markering. Hvis sættet indeholder flere elementer, vil hver af dem blive pakket ind.

Wrap Et wrapper-element er en streng, der repræsenterer et stykke HTML-markering, en selector, et element med en given klasse eller en jQuery-funktion, der vil ombryde et sæt elementer. .wrap (tilbagekaldsfunktion) tilbagekaldsfunktion

2.10. Method.wrapAll()

Ombryder alle elementer i et sæt som en enkelt enhed i den angivne HTML-markering.

WrapAll(wrapper element) wrap-element er en streng, der repræsenterer et stykke HTML-markup, selector, element med en given klasse eller jQuery-funktion, der vil ombryde et sæt elementer. .wrapAll (tilbagekaldsfunktion) tilbagekaldsfunktion - kaldet én gang for hvert element i sættet. Modtager indekset for elementet i sættet som et argument. Inde i funktionen refererer dette til det aktuelle element i sættet. Returnerer DOM-elementet, JQuery-objektet eller HTML-fragmentet, som det tilsvarende element vil blive pakket ind i.

2.11. Method.wrapInner()

Ombryder indholdet af de indstillede elementer, inklusive tekstindhold, i den angivne HTML-markering.

WrapInner Et wrapper-element er en streng, der repræsenterer et stykke HTML-markering, en selector, et element med en given klasse eller en jQuery-funktion, der vil ombryde indholdet af et sæt elementer. .wrapInner (tilbagekaldsfunktion) tilbagekaldsfunktion - kaldet én gang for hvert element i sættet. Modtager indekset for elementet i sættet som et argument. Inde i funktionen refererer dette til det aktuelle element i sættet. Returnerer et DOM-element, JQuery-objekt eller HTML-fragment, hvori indholdet af det tilsvarende element vil blive pakket ind.

3. Udskiftning og fjernelse af elementer 3.1. Method.unwrap()

Fjerner det element, der omslutter sættet.

Unwrap() Metoden kaldes uden parametre.

3.2. Method.detach()

Fjerner alle elementer i det indpakkede sæt fra DOM. Holder data og begivenheder forbundet med elementer intakte. Alle underordnede elementer er også udelukket fra DOM. Udelukkede elementer og deres tilknyttede data kan senere returneres til DOM-træet.

Afmonter (vælger) vælgeren

3.3. Method.remove()

Fjerner fuldstændigt alle elementer i det indpakkede sæt fra DOM. I dette tilfælde kan du slette flere elementer med samme klasse. Alle underordnede elementer er også udelukket fra DOM. Samtidig slettes alle data og hændelser forbundet med dem.

Remove(selector) selector er en valgfri parameter, der specificerer, hvilke elementer der skal fjernes.

3.4. Method.empty()

Fjerner indholdet af alle elementer i et sæt, fjerner alt indhold såvel som alle underordnede elementer i det.

Empty() Der sendes ingen argumenter til metoden.

3.5. Method.replaceWith()

Erstatter hvert element i det indpakkede sæt med indholdet, der sendes som argument til metoden.

ErstatMed(nyt indhold) nyt indhold - angiver det indhold, der skal indsættes. Kan være et stykke HTML-markering med eller uden indhold, en vælger, en række elementer eller et jQuery-objekt. .replaceWith(function)-funktion - returværdien erstatter hvert element i det indpakkede sæt.

3.6. Method.replaceAll()

Erstatter hvert element, der matcher den vælger, der er sendt til metoden, med et ombrudt sæt elementer. Returnerer et pakket sæt, der indeholder de erstattede elementer. Udskiftede elementer fjernes og kan ikke deltage i efterfølgende operationer.

ReplaceAll(target element) Målelementet er en vælger, JQuery-objekt, HTML-element eller en række af elementer, der skal erstattes.

3.7. Method.clone()

Opretter kopier af elementerne i det indpakkede sæt. Elementer kopieres sammen med deres indlejrede elementer. De resulterende kopier af elementer kan derefter tilføjes til en anden placering i DOM'et for yderligere behandling.

Clone() boolean - angiver, om elementers hændelseshandlere skal kopieres sammen med dem. Standardværdien er falsk. Hvis den er sat til sand , vil hændelseshandlere blive kopieret sammen med elementerne.

Denne lektion dækker arbejdet med attributter, egenskaber og avancerede jQuery-vælgere.

Arbejde med attributter

Nu vil vi lære, hvordan man læser, tilføjer og ændrer attributter for HTML-tags ved hjælp af jQuery. Alt dette gøres ved hjælp af .attr() metoden. Den fungerer på samme måde som .html()-metoden - afhængigt af antallet af parametre, den vil læse eller ændre værdien af attributten.

Den første parameter i .attr() er navnet på attributten, og den anden er dens nye værdi. For eksempel som denne - .attr("værdi", "www") - vil vi skrive strengen "www" til værdiattributten.

Hvis vi kalder .attr() med én parameter, vil den returnere værdierne for den attribut, hvis navn vi angiver i den første parameter. For eksempel som denne - .attr("værdi") - vil vi få værdien af værdiattributten.

I det følgende eksempel får vi et input af dets id og viser værdien af dets værdiattribut:

alert($("#test").attr("værdi")); // vil udskrive "!!!"

Lad os nu skrive den nye værdi "www" til den samme attribut:

$("#test").attr("værdi", "www");

Fjernelse af en attribut

Hvis du vil fjerne en attribut helt, skal du bruge metoden .removeAttr(attributnavn). Lad os se, hvordan det fungerer med følgende eksempel:

$("#test").removeAttr("værdi");

HTML-koden vil se sådan ud - værdiattributten er der ikke længere:

Ejendomme

For attributter som deaktiveret og kontrolleret er .attr()-metoden ikke egnet (sådanne attributter kaldes "egenskaber"). For dem skal du bruge .prop()-metoden, som tager attributnavnet som den første parameter og sand eller falsk som den anden.

Hvis den er sat til sand, vil attributten blive installeret, og hvis den er falsk, vil attributten blive fjernet.

Lad os indstille den deaktiverede attribut for input:

$("#test").prop("deaktiveret", true);

HTML-koden vil se sådan ud:

Nu, tværtimod, lad os fjerne deaktiveret:

$("#test").prop("deaktiveret", false);

HTML-koden vil se sådan ud:

Du kan ikke kun ændre værdierne af sådanne egenskabsattributter, men også læse dem:

alert($("#test").prop("deaktiveret")); //vil vise true - attributten eksisterer

værdiformer

For at arbejde med værdi-attributten for input, kan du også bruge .val() metoden, som giver dig mulighed for at læse og skrive nye værdier.

Lad os skrive den nye værdi "www" til værdiattributten:

$("#test").val("www");

HTML-koden vil se sådan ud:

Lad os nu vise den aktuelle værdi på skærmen:

alert($("#test").val());

Der er en nuance mere - for textarea-tagget kan du ikke få det interne indhold gennem .html()-metoden. For at gøre dette skal du bruge .val() metoden:

!!! alert($("#test").val()); // vil udskrive "!!!"

Det er højst sandsynligt gjort for at sikre ensartethed i arbejdet med formularer.

Arbejde med klasser

Lad mig minde dig om, at i klasseattributten i HTML-kode kan du skrive flere klasser adskilt af et mellemrum.

Lad os forestille os denne situation - du vil tilføje en ny klasse til de eksisterende uden at overskrive dem. I dette tilfælde vil blot at gøre .attr("class", "new-class") ikke virke - du vil overskrive de klasser, der allerede er i attributten.

Metoden .addClass() giver dig mulighed for at tilføje en klasse til et element (eller elementer) uden at miste andre klasser. Klassen du vil tilføje til elementet tages som en parameter til denne metode.

I det følgende eksempel tilføjes et element, der allerede har to klasser - class="www zzz" - også med klassen kkk . Som et resultat vil indholdet af attributten se sådan ud - class="www zzz kkk" :

Afsnitstekst.

$("#test").addClass("kkk");

HTML-koden vil se sådan ud:

Afsnitstekst.

Der findes en lignende metode til at fjerne en klasse - .removeClass() . Det fjerner klassen angivet i parameteren uden at påvirke de andre.

Følgende eksempel fjerner klassen zzz fra attributten class="www zzz":

Afsnitstekst.

$("#test").removeClass("zzz");

HTML-koden vil se sådan ud:

Afsnitstekst.

Der er også en nyttig .toggleClass()-metode, der tilføjer den angivne klasse, hvis den ikke eksisterer, og fjerner den, hvis den gør. Det kan være nødvendigt, så når du klikker på den samme knap med et sideelement, sker der periodiske ændringer.

Lad os f.eks. gøre dette: Når du klikker på knappen for første gang, vil den røde klasse blive tilføjet til elementet, som tilføjer den røde farve, og når du klikker på den igen, vil denne klasse blive fjernet, og den røde farve vil forsvinde. Hvis du trykker på knappen igen, vil alt ske igen.

Prøv at køre følgende kode og se selv (zzz-klassen er kursivt for at vise, at toggleClass ikke vil forstyrre andre klassers arbejde):

Rød ( farve: rød; ) .zzz ( skrifttype: kursiv; )

Afsnitstekst.

$("#test").toggleClass("rød");

Efter det første klik vil HTML-koden se sådan ud (den røde klasse tilføjes):

Afsnitstekst.

Og efter det andet klik - sådan her (den røde klasse forsvinder):

Afsnitstekst.

Nå, den sidste metode til at arbejde med klasser, som vi vil se på, hedder .hasClass() . Den kontrollerer tilstedeværelsen eller fraværet af den klasse, der er sendt til den som en parameter. Hvis elementet har en sådan klasse, vil det udskrive sandt, og hvis der ikke er en sådan klasse, vil det udskrive falsk.

Indpakningselementer

Tags kan pakkes ind i andre tags, hvis vi for eksempel har paragraffer, så kan vi desuden pakke dem ind i tags. Til sådanne ting bruges .wrap()-metoden, som giver dig mulighed for at pakke hvert element, der findes i et specificeret tag.

Lad os f.eks. ombryde alle afsnit med www-klassen med tagget. For at gøre dette sender vi strengen "div" som en parameter til metoden, sådan her - .wrap("div"). Se hvad vi kan finde på:

Afsnitstekst.

$(".www").wrap("div");

HTML-koden vil se sådan ud:

Afsnitstekst.

Som en parameter kan du sende ikke kun navnet på tagget, men også følgende konstruktion - "" - i dette tilfælde vil effekten være nøjagtig den samme:

Afsnitstekst.

$(".www").wrap("");

HTML-koden vil se sådan ud:

Afsnitstekst.

Selvfølgelig er den anden metode - "" - mindre praktisk, men den har en fordel - du kan skrive alle attributter i åbningsmærket (i vores tilfælde div), og indpakningen vil være sammen med disse attributter.

Lad os pakke vores afsnit ind i en div med zzz-klassen:

Afsnitstekst.

$(".www").wrap("");

HTML-koden vil se sådan ud:

Afsnitstekst.

Tværtimod kan du ikke pakke elementet, men pakke det ud (det vil sige fjerne det overordnede) ved hjælp af .unwrap() metoden.

I det følgende eksempel har vi afsnit, der er inde i . Lad os udføre udpakningsoperationen for afsnit med www-klassen:

Afsnitstekst.

$(".www").unwrap();

HTML-koden vil se sådan ud:

Afsnitstekst.

Du kan også pakke tags ikke på ydersiden, men på indersiden. Dette gøres ved hjælp af .wrapInner() metoden. Det accepterer parametre på samme måde som .wrap() , men det vil ikke ombryde de fundne tags, men teksten inde i disse tags.

I det følgende eksempel vil vi pakke teksten ind i afsnit med klassen www i et tag:

Afsnitstekst.

$(".www").wrapInner("b");

HTML-koden vil se sådan ud:

Afsnitstekst.

Du kan ikke pakke hvert element individuelt, men alle fundne elementer sammen ved hjælp af .wrapAll()-metoden

Lad os finde alle afsnittene med klassen www og pakke dem alle ind i ét tag:

Afsnitstekst.

$(".www").wrapAll("div");

HTML-koden vil se sådan ud:

Afsnitstekst.

Bemærk venligst, at hvis de indpakkede elementer ikke er tilstødende, vil .wrapAll()-metoden først flytte elementerne til ét sted og derefter ombryde dem. Se følgende eksempel:

Teksten til stk.

Teksten til stk. 2.

Afsnitstekst.

Teksten til stk. 3.

$(".www").wrapAll("div");

HTML-koden vil se sådan ud:

Teksten til stk.

Teksten til stk. 2.

Teksten til stk. 3.

Afsnitstekst.

Indsættelse af elementer

Der er 4 metoder til at indsætte elementer i jQuery: .append(), .prepend(), .after(), .before().

Metoden .prepend() giver dig mulighed for at tilføje tekst til begyndelsen af elementer:

Afsnitstekst.

$("p").prepend("!!!");

HTML-koden vil se sådan ud:

!!!Afsnitstekst.

Metoden .append() giver dig mulighed for at tilføje tekst til slutningen af elementer:

Afsnitstekst.

$("p").append("!!!");

HTML-koden vil se sådan ud:

Afsnitstekst.!!!

Metoden .before() giver dig mulighed for at tilføje tekst foran elementer:

Afsnitstekst.

$("p").before("!!!");

HTML-koden vil se sådan ud:

!!!

Afsnitstekst.

Metoden .after() giver dig mulighed for at tilføje tekst efter elementer:

Afsnitstekst.

$("p").after("!!!");

HTML-koden vil se sådan ud:

Afsnitstekst.

!!!

Der findes også alternative former for metoder til indsættelse af elementer. For eksempel, i stedet for .append() kan du bruge .appendTo() .

Forskellen ligger i anvendelsesmetoden: hvis append tager den tekst, der skal indsættes som en parameter, så tager appendTo tværtimod som parameter en selektor af elementer, for hvilke append skal anvendes.

Følgende poster svarer til:

$(".www").append("!!!") $("!!!").appendTo(".www")

Der er også andre tilsvarende metoder. Her er de:

Metoder .prepend() og .prependTo() :

$(".www").prepend("!!!") $("!!!").prependTo(".www")

Metoder .before() og .insertBefore() :

$(".www").before("!!!") $("!!!").insertBefore(".www")

Metoder .after() og .insertAfter():

$(".www").after("!!!") $("!!!").insertAfter(".www")

Udskiftning af elementer

Du kan erstatte nogle elementer med andre ved at bruge .replaceWith() metoden. Lad os erstatte alle afsnit med klassen www med !!! .

Sidste opdatering: 1/11/2015

I det foregående afsnit indsatte vi underordnede elementer i et allerede eksisterende element. Men vi kan også skabe et nyt element og pakke eksisterende ind i det. Metoden wrap() og de lignende metoder wrapAll() og wrapInner() bruges til dette. For eksempel kan vi være nødt til at pakke nogle elementer ind i et nyt div-element. Til dette tyer vi til ovenstående metoder.

indpakningsmetode

Ombrydningsmetoden ombryder elementerne i markeringen med det element, der sendes som et argument til denne metode. Det har følgende anvendelsesmuligheder:

wrap("html markup") : ombryder markeringselementerne i et element oprettet ud fra html markup

wrap(element) : ombryder udvalgselementerne i html-elementet, der sendes som en parameter

wrap("selektor") : ombryder markeringselementerne i dokumentelementet, der matcher vælgeren

wrap(jQuery): Ombryder markeringselementerne i et jQuery-objekt

wrap(funktion): ombryder markeringselementerne i objektet, der returneres af funktionen

Lad os sige, at vi har følgende markering:

Java
C/C++

Lad os pakke listen ved hjælp af wrap-metoden:

$(".langs").wrap("");

Java
C/C++

På samme måde kan vi bruge indpakningsmetoden på andre måder:

Var header = document.getElementById("header"); $(".langs").wrap(header);

Bemærk, at i dette tilfælde er listen ikke indsat i et eksisterende element, men blot det eksisterende element klones, og listen er pakket ind i denne kopi.

wrapAll metode

Brug wrapAll-metoden for at samle alle elementerne i markeringen som en helhed i ét element. Det har lignende anvendelsestilfælde:

wrapAll("html markup") : Ombryder alle markeringselementer i et enkelt element genereret fra html-markeringen

wrapAll(element): ombryder alle elementer i markeringen i et enkelt html-element, der sendes som en parameter

wrapAll("vælger"): ombryder alle elementer i markeringen i et enkelt element, der matcher vælgeren

wrapAll(jQuery): Ombryder alle markeringselementer i et enkelt jQuery-objekt

For eksempel har vi følgende markering:

Java C/C++ PHP

Lad os pakke alle disse elementer ind i et div-element:

$(".lang").wrapAll("");

Efter dette vil opmærkningen se sådan ud:

Java C/C++ PHP

wrapInner metode

Brug wrapInner-metoden for at pakke indholdet af elementer ind i et nyt element. Det har følgende anvendelsesmuligheder:

wrapInner("html markup") : ombryder indholdet af udvalgselementerne i et element, der er oprettet ud fra html-markeringen

wrapInner(element): ombryder indholdet af udvalgselementerne i html-elementet, der er sendt som en parameter

wrapInner("vælger") : Ombryder indholdet af udvalgselementerne i dokumentelementet, der matcher vælgeren

wrapInner(jQuery): ombryder indholdet af udvalgselementerne i et jQuery-objekt

wrapInner(funktion): ombryder indholdet af udvalgselementerne i objektet returneret af funktionen

Den indledende markering vil se sådan ud:

Java
C/C++

Pak indholdet af listeelementer ind i tags

$("li.lang").wrapInner("");

Den endelige markering vil se sådan ud: