Teilen Sie Beispiele für jQuery-Designideen

Unabhängig von der Sprache ist das Nachdenken sehr wichtig. Bevor Sie sich mit den Details von jQuery befassen, müssen Sie ein allgemeines Verständnis der Designideen von jQuery haben. Wenn Sie auf ein Problem stoßen, wissen Sie, welche Funktion von jQuery Sie verwenden sollten, und finden Sie dann schnell die spezifische Verwendung im Handbuch. In diesem Artikel werden die Designideen von jQuery ausführlich vorgestellt. Schauen wir uns das unten mit dem Herausgeber an.

Elemente auswählen

Die grundlegende Designidee und Hauptverwendung von jQuery besteht darin, „ein Webseitenelement auszuwählen und dann eine Operation daran auszuführen“. Dies ist das grundlegende Merkmal, das es von anderen JavaScript-Bibliotheken unterscheidet.

Der erste Schritt bei der Verwendung von jQuery besteht häufig darin, einen Auswahlausdruck in den Konstruktor jQuery() (abgekürzt als $) einzufügen und dann die ausgewählten Elemente abzurufen

[Simulierte CSS-Auswahlelemente]

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('p.myClass') // 选择class为myClass的p元素
$('input[name=first]') // 选择name属性等于first的input元素

[Einzigartige Ausdrucksauswahl]

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

[Mehrere Filtermethoden]

$('p').has('p'); // 选择包含p元素的p元素
$('p').not('.myClass'); //选择class不等于myClass的p元素
$('p').filter('.myClass'); //选择class等于myClass的p元素
$('p').first(); //选择第1个p元素
$('p').eq(5); //选择第6个p元素

Schreiben

[Methodenfunktionalisierung]

In nativem JavaScript wird der Zuweisungsoperator häufiger verwendet. In jQuery wird hauptsächlich die Methode der Übergabe von Funktionsparametern verwendet, d darauf ausgeführt, und alle Operationen können miteinander verbunden und in Form einer Kette geschrieben werden

//原生
window.onload = function(){};
//jQuery
$(function(){});
//原生
p.onclick = function(){};
//jQuery
p.click(function(){});
//原生
p.innerHTML = '123';
//jQuery
p.html('123');

$('p').find('h3').eq(2).html('Hello') ;

Aufgegliedert sieht es so aus:

Dies ist die lobenswerteste und praktischste Funktion von jQuery. Sein Prinzip besteht darin, dass jede jQuery-Operation ein jQuery-Objekt zurückgibt, sodass verschiedene Operationen miteinander verbunden werden können

jQuery stellt auch die .end()-Methode bereit, sodass die Ergebnismenge einen Schritt zurück gemacht werden kann

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

【Werte abrufen und zuweisen】

Beim Betrieb von Webseitenelementen besteht die häufigste Anforderung darin, deren Werte abzurufen oder ihnen Werte zuzuweisen. jQuery verwendet dieselbe Funktion, um Werte (Getter) und Zuweisungen (Setter) zu vervollständigen, dh „Getter“ und „Assignor“ werden zu einem zusammengefasst. Ob ein Wert erhalten oder zugewiesen werden soll, wird durch die Parameter der Funktion bestimmt

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

Die üblichen Funktionen zur Werterfassung und -zuweisung lauten wie folgt

Es ist zu beachten, dass, wenn der Die Ergebnismenge enthält mehrere Elemente. Bei der Zuweisung werden alle Elemente zugewiesen. Bei der Wertübernahme wird nur der Wert des ersten Elements herausgenommen.

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

[Hinweis].text() ist eine Ausnahme. Es entfernt den Text aller Elementinhalte.

.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值

Ich hoffe, dieser Artikel ist für Sie nützlich.

Verwandte Empfehlungen:

Übung des Proxy-Modus und der Trennung von Lesen und Schreiben in PHP-Designideen

Vollständige jQuery-Designideen_jquery

Austausch von Designideen zum Javascript-Vererbungsmechanismus_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für jQuery-Designideen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!