So bedienen Sie JQuery-Elemente

Dieses Mal zeige ich Ihnen, wie Sie JQuery-Elemente bedienen und welche Vorsichtsmaßnahmen für den Betrieb von JQuery-Elementen gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Schauen wir uns zunächst an, wie man den gewünschten Knoten in jquery findet.

Schritt eins: Sizzle-Selektor

HTML-Elemente „suchen“ (oder auswählen) basierend auf der ID, der Klasse, dem Typ, dem Attribut, dem Attributwert usw. des Elements, einfach Es soll zusätzlich zu einigen spezifischen Selektoren auf CSS-Selektoren basieren.

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 ( ), verfügt über 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 fest oder gibt ihn zurück

2.html() – Legt fest oder gibt das ausgewählte Element zurück. Der Inhalt des Elements (einschließlich HTML-Tags)

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

4.attr() – Setzt oder Geben Sie den Attributwert zurück

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

Schritt 7: Elemente hinzufügen

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

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

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

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

Schritt 8: Element löschen

remove() akzeptiert einen Parameter, mit dem Sie gelöschte Elemente filtern können, empty() kann nicht )

empty() – entfernt untergeordnetes Element Elemente aus dem ausgewählten Element

//等同于$("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中文网其它相关文章！

推荐阅读：

怎样使用Angular打开Font-Awesome

Vue做出弹窗功能（附代码）

Das obige ist der detaillierte Inhalt vonSo bedienen Sie JQuery-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!