jquery fügt Elemente hinzu

WBOY
Freigeben: 2023-05-28 11:39:09
Original
4856 Leute haben es durchsucht

Es ist sehr praktisch und effizient, jQuery zum Hinzufügen, Löschen, Ändern und Überprüfen von Elementen zu verwenden. Es kann uns zahlreiche API-Funktionen bieten, die uns bei der einfachen Implementierung dynamischer HTML-Seiten helfen.

1. So fügen Sie Elemente in Jquery hinzu:

  1. append(): Fügen Sie ein neues Element am Ende des untergeordneten Elements des angegebenen Elements hinzu.
  2. prepend(): Fügt ein neues Element zum Kopf des untergeordneten Elements des angegebenen Elements hinzu.
  3. after(): Fügt ein neues Element nach dem angegebenen Element ein.
  4. before(): Fügt ein neues Element vor dem angegebenen Element ein.

2. So löschen Sie Elemente in Jquery:

  1. remove(): Löschen Sie das angegebene Element und alle seine untergeordneten Knoten.
  2. empty(): Alle untergeordneten Knoten des angegebenen Elements leeren (aber das Element selbst behalten).

3. Methoden zum Ändern von Elementen in Jquery:

  1. text(): Textinhalt des angegebenen Elements festlegen oder abrufen.
  2. html(): Legt den HTML-Inhalt des angegebenen Elements fest oder ruft ihn ab.
  3. attr(): Setzt oder ruft den Attributwert des angegebenen Elements ab.
  4. val(): Wert des Formularelements festlegen oder abrufen.

4. So fragen Sie Elemente in Jquery ab:

  1. find(): Untergeordnete Elemente basierend auf dem Selektor finden.
  2. parent(): Finden Sie das übergeordnete Element des angegebenen Elements.
  3. siblings(): Alle Geschwisterelemente des angegebenen Elements finden.
  4. eq(): Gibt das Element an der angegebenen Indexposition zurück.

Die oben genannten Methoden sind die häufig verwendeten Methoden zum Hinzufügen, Löschen, Ändern und Überprüfen von Elementen in Jquery. Schauen wir uns unten einige praktische Beispiele an.

Zum Beispiel haben wir ein HTML-Code-Snippet:

这是一个段落。

  • 列表项1
  • 列表项2
  • 列表项3
Nach dem Login kopieren

Jetzt können wir Jquery verwenden, um dieses Code-Snippet zu bearbeiten.

1. Verwenden Sie die Methode append(), um neue Elemente hinzuzufügen:

$('#myDiv ul').append('
  • 列表项4
  • '); //将新的列表项添加到myDiv下的ul元素中
    Nach dem Login kopieren

    2. Verwenden Sie die Methode after(), um neue Elemente nach dem angegebenen Element hinzuzufügen: # #

    $('#myDiv ul li:first-child').after('
  • 列表项0
  • '); //将新的列表项添加到myDiv下的ul元素中,插在第一个列表项之前
    Nach dem Login kopieren
    # #3. Verwenden Sie die Methode „remove()“, um das angegebene Element und alle seine untergeordneten Knoten zu löschen:

    $('#myDiv ul li:last-child').remove(); //删除myDiv下的ul元素的最后一个列表项
    Nach dem Login kopieren

    4. Verwenden Sie die Methode „text()“, um den Textinhalt des angegebenen Elements zu ändern Element:

    $('#myDiv p').text('这是修改后的段落内容。'); //将myDiv下的p元素的文本内容修改为“这是修改后的段落内容。”
    Nach dem Login kopieren

    5. Verwenden Sie die Methode attr(), um den Attributwert des angegebenen Elements festzulegen:

    $('#myDiv ul').attr('class', 'myList'); //将myDiv下的ul元素的class属性值修改为“myList”
    Nach dem Login kopieren

    6. Verwenden Sie die Methode find(), um Unter- zu finden. Elemente:

    $('#myDiv').find('li'); //查找myDiv下的所有li元素
    Nach dem Login kopieren

    7. Verwenden Sie die eq()-Methode. Geben Sie das Element an der angegebenen Indexposition zurück:

    $('#myDiv ul li').eq(1); //返回myDiv下的ul元素的第二个列表项(索引位置为1)
    Nach dem Login kopieren

    Anhand der obigen Beispiele können wir die Einfachheit und Leichtigkeit erkennen Durch die Verwendung von Jquery können wir das Hinzufügen, Löschen, Ändern und Abfragen von HTML-Seitenelementen schnell abschließen, was unsere Entwicklungseffizienz erheblich verbessert und es uns ermöglicht, uns mehr auf die Implementierung von Funktionen und Interaktionen zu konzentrieren.

    Das obige ist der detaillierte Inhalt vonjquery fügt Elemente hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!