Accentsconagua

jQuery Kort gezegd jQuery Manipulation

Code
Share

HTML on the fly maken, gebruiken en toevoegen

U kunt direct HTML-markeringen maken door de jQuery-functie een reeks onbewerkte HTML door te geven.

Het is belangrijk om te weten dat bij het maken van DOM-structuren met de functie jQuery alleen rootelementen in de structuur aan de wrapset worden toegevoegd. In het vorige codevoorbeeld, de

elementen zijn de enige elementen in de set wrapper.

We kunnen de gebruiken vind() methode om te werken op elk element in de HTML-structuur zodra het is gemaakt.

Nadat de nieuwe HTML is gemaakt, is het ook mogelijk om deze in de DOM toe te voegen met behulp van een van de manipulatiemethoden van jQuery. Hieronder gebruiken we de appendTo () methode om de markup aan de pagina toe te voegen.

Opmerkingen: Eenvoudige elementen die geen kenmerken bevatten - bijv. $ ('

') - zijn gemaakt via de document.createElement DOM-methode, terwijl alle andere gevallen op de innerHTML eigendom. In feite kunt u de jQuery-functie direct doorgeven met een element dat is gemaakt met document.createElement -bv. $ (Document.createElement ( 'div')).

De HTML-string die wordt doorgegeven aan jQuery mag geen elementen bevatten die als ongeldig kunnen worden beschouwd binnen een

element.

De HTML-string die aan de jQuery-functie wordt doorgegeven, moet goed zijn gemaakt.

U moet alle HTML-elementen openen en sluiten wanneer u jQuery HTML doorgeeft. Als u dit niet doet, kan dit leiden tot bugs, meestal in Internet Explorer. Sluit, om veilig te zijn, altijd je HTML-elementen af ​​en vermijd het schrijven van snelkoppelings-HTML - bijv. $ (

).

Grokking de index () Methode

U kunt de index van een element in de wrapper-set bepalen door dat element door te geven aan de inhoudsopgave() methode. Stel dat u een wikkelset hebt met alle

elementen in een webpagina, en u zou graag de index van de laatste willen weten
element.

    
0
 
1
 
2
 
3

Het gebruik van inhoudsopgave() komt pas echt thuis als we bedenken hoe het kan worden gebruikt bij evenementen. Als een voorbeeld, door op te klikken

elementen in de onderstaande code kunnen we de geklikte doorgeven
element (met behulp van het trefwoord deze) naar de inhoudsopgave() methode om het geklikte te bepalen
de index.

    
 
nav tekst
 
nav tekst
 
nav tekst
 
nav tekst

Grokking the text () Methode

Men zou ten onrechte kunnen aannemen dat het tekst() methode retourneert alleen het tekstknooppunt van het eerste element in een wrapper-set. Het zal echter daadwerkelijk de tekstknooppunten van alle elementen in een wrapper-set samenvoegen en de aaneengeschakelde waarde als een enkele string retourneren. Zorg ervoor dat u op de hoogte bent van deze functionaliteit, anders kunt u onverwachte resultaten krijgen.

    
1,
 
2,
 
3,
 
4

Tekens bijwerken of verwijderen met behulp van een reguliere expressie

Het gebruik van JavaScript vervangen() methode gecombineerd met een aantal jQuery-functionaliteit, kunnen we heel gemakkelijk een patroon van tekens uit de tekst in een element bijwerken of verwijderen.

    
 Ik heb een hekel aan het gebruik van JavaScript. Ik bedoel echt haten! Het is de beste twister ooit!

U kunt ook alle tekens bijwerken die zich in een tekenreeks bevinden waarnaar wordt geretourneerd html (). Dit betekent dat u niet alleen tekst kunt bijwerken, maar ook DOM-elementen kunt bijwerken en vervangen via een reguliere expressie.

Grokking de .contents () methode

De .inhoud() methode kan worden gebruikt om alle knooppunten van onderliggende elementen te vinden, inclusief tekstknooppunten in een element. Er is echter een vangst. Als de opgehaalde inhoud alleen tekstknooppunten bevat, wordt de selectie in de wrapset als één tekstknooppunt geplaatst. Als de inhoud die u ophaalt echter een of meer elementknooppunten tussen de tekstknooppunten heeft, dan is de .inhoud() methode bevat tekstknooppunten en elementknooppunten. Bestudeer de onderstaande code om dit concept te begrijpen.

    
Ik gebruik graag jQuery!
 
ik hou van werkelijk met behulp van jQuery!

Merk op dat wanneer een item in de wrapper-set een tekstknooppunt is, we de waarde moeten extraheren met behulp van .te krijgen (0) .nodeValue. De inhoud() methode is handig voor het extraheren van tekstknooppuntwaarden. Het is mogelijk om alleen de tekstknooppunten uit een DOM-structuur te extraheren met inhoud().

    
jQuery geeft mij meer macht dan welke andere webtool dan ook!

Het gebruik van remove () verwijdert elementen uit omslagset niet

Wanneer je gebruikt verwijderen(), een DOM-fragment van de DOM de elementen in de verwijderde DOM-structuur bevinden zich nog steeds in de set wrapper. Je zou een element kunnen verwijderen, op dat element kunnen werken en dat element vervolgens daadwerkelijk terug in de DOM kunnen plaatsen, allemaal binnen een enkele jQuery-keten.

    
Verwijder me

Het punt hier is dat alleen maar omdat jij verwijderen() elementen betekent niet dat ze worden verwijderd uit de jQuery-wikkelset.

Code
×