So bedienen Sie JQuery-Elemente schnell

Dieses Mal zeige ich Ihnen, wie Sie JQuery-Elemente schnell bedienen und welche Vorsichtsmaßnahmen für den Betrieb von JQuery-Elementen gelten. Hier sind praktische Fälle, schauen wir uns das an.

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

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: Abfrage Nachkommen

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, die Die Methode durchläuft den DOM-Baum nur eine Ebene tiefer

find()

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

Gibt die Nachkommen des ausgewählten Elementelements zurück, 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() Das

prev() Die Methoden prevAll() und prevUntil() funktionieren ähnlich wie die oben genannten Methoden, jedoch in der entgegengesetzten Richtung: Sie geben das vorherige Geschwisterelement zurück (vor dem Geschwisterelement entlang der Elementdurchquerung des DOM-Baums, nicht Element-nach-Element-Durchquerung).

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 die Elemente gefunden wurden, müssen wir die gefundenen Elemente bearbeiten Knoten entsprechend den 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() – 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

第八步：删除元素

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中文网其它相关文章！

推荐阅读：

jQuery代码性能优化方法总结

jQuery动态操作div步骤详解

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