Verstehen Sie in zehn Minuten die grundlegenden Operationen von jquery für Elemente

Dieser Artikel bietet Ihnen eine Zusammenfassung der allgemeinen Funktionen von jquery, einschließlich des Abrufens, Verschiebens, Erstellens und Änderns von Elementen. Ich hoffe, dass er für alle hilfreich ist.

Einführung in jQuery

jQuery ist eine Klassenbibliothek von JS, die bestimmte Funktionen in JS kapselt, DOM-Operationen vereinfacht, den Code prägnant und benutzerfreundlich macht und Kettenschreiben unterstützt, gute Kompatibilität.

Die Designidee und Hauptverwendung von jQuery ist: Wählen Sie ein Webseitenelement aus und führen Sie dann einige Operationen daran aus.

Das Besondere an jQuery ist, dass nach der Verwendung von jQuery zum Abrufen der entsprechenden Elemente diese nicht zurückgegeben werden. Stattdessen werden jQuery-Objekte (von jQuery erstellte Objekte) zurückgegeben, und dieses Objekt kann mit diesen entsprechenden Elementen arbeiten.

Die Funktionen, die jQuery erreichen kann, können definitiv von JS erreicht werden, aber nicht unbedingt umgekehrt.

Lassen Sie window.jQuery = window.$ und jQuery als $ abkürzen.

So erhalten Sie Elemente mit jQuery

Fügen Sie einfach einen Auswahlausdruck in den Konstruktor $() ein und rufen Sie dann das ausgewählte Element ab. Der Auswahlausdruck kann ein CSS-Selektor oder ein jQuery-spezifischer Ausdruck sein.

// CSS选择器
$(document) // 选择整个文档对象
$('#xxxID') // 选择ID为xxx的元素
$('div.xxxClass') // 选择Class为xxx的元素
$('input[name=first]') // 选择类名属性为first的元素

// jQuery特有表达式
$('a:first') // 选择网页中第一个a元素
$('tr:odd') // 选择表格的奇数行
$('#myForm:input') // 选择表单中的input元素
$('div:visible') // 选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

So erstellen Sie Elemente mit jQuery

Übergeben Sie das neue Element einfach direkt an den jQuery-Konstruktor.

Das erstellte neue Element wird nicht automatisch in die Seite eingefügt. Wir müssen auch explizit die Position angeben, an der es in die Seite eingefügt wird.

Zum Beispiel: Erstellen Sie ein Paar 4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a-Tags

$(function(){
let $h1 = $(&#39;<h1></h1>&#39;) // 创建元素h1
$(&#39;body&#39;).append($h1) // 将元素h1放入到body里（用append表示成为body的最后一个子元素）
}

Verwenden Sie div zum Beispiel:

$('div').prepend('') // 给div添加一个大儿子（即添加到最前）
$('div').append(选择器/jQuery对象) // 给div添加一个小儿子（即添加到最后）
$(&#39;<h2>xxx</h2>&#39;).appendTo(选择器/jQuery对象) // 在选择器选中的元素的子元素里，将“xxx”添加到最后

Wie jQuery Elemente verschiebt

Methode 1: Verschieben Sie das Element direkt

$('div').insertAfter($('p')) // 将元素div移动到元素p后面

Methode Zwei : Verschieben Sie andere Elemente so, dass die Zielfunktion die gewünschte Position erreicht

$('p').after($('div')) // 把元素p放到元素div前

Der Unterschied zwischen diesen beiden Methoden: Die zurückgegebenen Objekte sind unterschiedlich. Das von Methode eins zurückgegebene Objekt ist div und das von Methode zwei zurückgegebene Objekt ist p.

Verschiedene Möglichkeiten zum Verschieben von Elementen:

.insertAfter()和.after() // 在现存元素的外部，从后面插入元素
.insertBefore()和.before() // 在现存元素的外部，从前面插入元素
.appendTo()和.append() // 在现存元素的内部，从后面插入元素
.prependTo()和.prepend() // 在现存元素的内部，从前面插入元素

Wie jQuery Elementattribute ändert

Verwenden Sie attr(), um Elementattribute und deren Inhalt zu ändern, was in JS die Abkürzung für setAttribute&getAttribute ist. Ob attr einen Wert annimmt oder einen Wert zuweist, wird durch die Parameter der Funktion bestimmt.

Zum Beispiel:

$('img').attr('width','100px') // 为属性'width'赋值'100px'

Verwendung:

$(selector).attr(attribute) // 返回被选元素的属性值
$(selector).attr(attribute.value) // 返回被选元素的属性&值
$(selector).attr(attribute,function(index,oldvalue)) // 用函数返回值设置被选元素的属性&值
$(selector).attr({attribute1:value,attribute2:value...}) // 为被选一个及以上的元素设置属性&值，可一次修改多个属性的属性值

Ergänzung: Die dritte Verwendungsmethode oben bedeutet: Verwenden Sie den Rückgabewert der Funktion, um dem Attribut den Attributwert zuzuweisen. Die Funktion kann den Indexwert des Selektors empfangen und verwenden und Der aktuelle Eigenschaftswert. Beispiel:

$('button').click(function(){
    $('img').attr('width',function(n,v){
     return v-50;  // 点击按钮图片宽度减少50
    })
})

Kettenoperation von jQuery

Nachdem Sie ein Webseitenelement ausgewählt haben, führen Sie eine Reihe von Operationen darauf aus. Alle Operationen können miteinander verbunden und in Form einer Kette geschrieben werden. Dies ist der Kettentyp von jQuery Betrieb.

Zum Beispiel: $('div').find('h3').eq(2).html('Hello'); Diese Codezeile kann wie folgt aufgeteilt werden

$('div') // 找到div元素
  .find('h3') // 选择其中的h3元素
  .eq(2) // 选择第3个h3元素
  .html('Hello'); // 将它的内容改为Hello

jQuery bietet auch eine Zurück-Operation. end(), sodass das Operationsergebnis einen Schritt zurückgenommen werden kann.

$('div')
　.find('h3')
　.eq(2)
　.html('Hello')
　.end() // 退回到选中所有的h3元素的那一步
　.eq(0) // 选中第一个h3元素
　.html('World') // 将它的内容改为World

Empfohlene verwandte Video-Tutorials: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonVerstehen Sie in zehn Minuten die grundlegenden Operationen von jquery für Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!