Detaillierte Erläuterung der JQuery-Elementoperationen

Dieses Mal werde ich Ihnen eine detaillierte Erläuterung der Vorsichtsmaßnahmen für die JQuery-Elementoperation geben.

Schritt eins: Sizzle-Selektor

„Suchen“ (oder auswählen) basierend auf der ID, Klasse, dem Typ, dem Attribut, dem Attributwert usw. des Elements. HTML Das Element basiert einfach auf dem CSS-Selektor , zusätzlich zu einigen spezifischen Selektoren.

Schritt 2: Vorfahren abfragen

parent()

Gibt das direkte übergeordnete Element des ausgewählten Elements zurück . DOM-Baumdurchquerung

parents()

Optionale Parameter können verwendet werden, um die Suche nach übergeordneten Elementen zu filtern
Gibt alle Vorgängerelemente des ausgewählten Elements bis zur Wurzel zurück des Dokumentelements

parentsUntil()

gibt alle Vorgängerelemente zwischen zwei angegebenen Elementen zurück. Das Folgende ist ein Beispiel:

$(document).ready(function(){
  //会返回span开始到p为止的祖先元素
  $("span").parentsUntil("p");
});

Schritt 3: Untergeordnete Elemente abfragen

children()

Sie können optionale Parameter verwenden, um die Suche nach untergeordneten Elementen zu filtern

Gibt alle direkten untergeordneten Elemente des ausgewählten Elements zurück. Nur diese Methode Das DOM Der Baum wird zur nächsten Ebene durchlaufen

find()

Optionale Parameter können verwendet werden, um die Suche nach Elementen zu filtern

Gibt die Nachkommenelemente des ausgewählten Elements Alle zurück der Weg bis zum letzten Nachkommen

Schritt 4: Geschwister abfragen

siblings()

Alle Geschwisterelemente des ausgewählten Elements zurückgeben

next()

Gibt das nächste gleichgeordnete Element des ausgewählten Elements zurück

nextAll()

Gibt alle gleichgeordneten Elemente nach dem ausgewählten Element zurück

nextUntil()

Gibt alle folgenden Geschwisterelemente zwischen den beiden angegebenen Argumenten zurück

$(document).ready(function(){
  //返回介于 <h2>与<h6>元素之间的所有同胞元素
  $("h2").nextUntil("h6");
});

prev(), prevAll() und prevUntil()

The prev(), prevAll( ) und prevUntil()-Methoden funktionieren ähnlich wie die oben genannten Methoden, jedoch in der entgegengesetzten Richtung: Sie geben die vorherigen Geschwisterelemente zurück (Durchlaufen entlang der vorherigen Geschwisterelemente im DOM-Baum und nicht nach Elementdurchquerung).

Schritt 5: Filterung bei der Abfrage hinzufügen

first()

Das erste Element unter den ausgewählten Elementen zurückgeben

last( )

Gibt das letzte Element unter den ausgewählten Elementen zurück

eq()

Gibt das Element mit der angegebenen Indexnummer unter den ausgewählten Elementen zurück. zum Beispiel: $(element[flag]) hat das gleiche Ergebnis wie element.eq(flag)

filter()

filtert die Abfrageergebnisse, ähnlich wie not() unten, hat aber der gegenteilige Effekt

not()

Gibt alle Elemente zurück, die nicht dem Standard entsprechen

$(document).ready(function(){
  //返回不带有类名"target"的所有p元素
  $("p").not(".target");
});

Nachdem das Element gefunden wurde, müssen wir die gefundenen Knoten entsprechend bearbeiten an die Anforderungen.

Schritt 6: text(), html(), val() und attr()

text(), html(), val() und attr ( ), hat eine Rückruffunktion . Die Rückruffunktion benötigt zwei Parameter: den Index des aktuellen Elements in der ausgewählten Elementliste und den ursprünglichen (alten) Wert. Geben Sie dann die Zeichenfolge zurück, die Sie als neuen Wert der Funktion verwenden möchten

1.text() – Legt den Textinhalt des ausgewählten Elements

2.html fest oder gibt ihn zurück () – Setzt den Inhalt des ausgewählten Elements oder gibt ihn zurück (einschließlich HTML-Tags)

3.val() – Setzt den Wert des Formularfelds oder gibt ihn zurück

4.attr() – Legen Sie den Attributwert fest oder geben Sie ihn zurück:

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "旧文本: " + origText + " 新文本: index: " + i;
  });
});

Schritt 7: Elemente hinzufügen

append() – Inhalt am Ende des ausgewählten Elements einfügen

prepend () – Nachher Inhalt am Anfang des ausgewählten Elements einfügen

after() – Inhalt nach dem ausgewählten Element einfügen

before() – Inhalt vor dem ausgewählten Element einfügen

Schritt 8: Element löschen

remove()可接受一个参数，允许你对被删元素进行过滤，empty()不可以

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

//等同于$("p.target").remove();
$("p").remove(".target");

第九步：替换元素

replaceAll()和replaceWith()功能类似，但是目标和源相反

replaceWith() - 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

replaceAll() - 用集合的匹配元素替换每个目标元素

第十步：class操作

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

hasClass() - 判断一个元素是否存在该class

第十一步：css()方法

设置或返回被选元素的一个或多个样式属性

css("propertyname"); - 返回propertyname属性的值

css("propertyname","value"); - 设置propertyname属性的值

css({"propertyname":"value","propertyname":"value",...}); - 设置多个值

第十二步：元素尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth() 方法返回元素的宽度（包括内边距）

innerHeight() 方法返回元素的高度（包括内边距）

outerWidth() 方法返回元素的宽度（包括内边距和边框）

outerHeight() 方法返回元素的高度（包括内边距和边框）

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

源生js实现哈夫曼编码步骤详解

Vue实现不刷新分页

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JQuery-Elementoperationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!