Einführung in JQuery

1 Übersicht

1. Was ist JQuery?

JQuery ist eine JavaScript-Bibliothek, die JS-Operationen vereinfacht und JS-Funktionen erweitert.

2. Trennungsprinzip

JQuery folgt dem Prinzip der Trennung von Import und Verwendung, das heißt, es wird ein verwendet und erstellen Sie ein weiteres < ;script>-Tag.

3. Grundlegende Syntax

$(selector).action();

Holen Sie sich das HTML-Element und führen Sie die angegebene Operation für das Element aus.

Zwei Selektoren

1. Basisselektor

Gleich wie CSS-Selektor, JQuery-Basisselektor Wählt HTML-Elemente basierend auf Tag, Kategorie und ID aus.

2. Kombinationsselektor

• $(selector01,selector02,selectorN): Holen Sie sich die Elemente, die jeden zufrieden stellen Bedingung Eine Sammlung von Elementen.

• $(selector01selector02): Elemente abrufen, die mehrere Bedingungen gleichzeitig erfüllen.

• $(selector01 selector02): Holen Sie sich das Element, das die zweite Bedingung erfüllt, unter den untergeordneten Elementen des Elements, das die erste Bedingung erfüllt.

3. Attributselektor

wählt Elemente basierend auf Attributen aus.

• $("[attr]"): Alle Elemente mit dem attr-Attribut abrufen.

• $("[attr='value']"): Alle Elemente mit dem angegebenen Attributwert abrufen.

• $("[attr!='value']"): Alle Elemente mit dem angegebenen Attribut abrufen, deren Wert nicht dem angegebenen Wert entspricht.

• $("[attr$='value']"): Alle Elemente mit dem angegebenen Attribut abrufen und deren Wert mit dem angegebenen Wert endet.

• $("[attr^='value']"): Ruft alle Elemente mit dem angegebenen Attribut ab, deren Wert mit dem angegebenen Wert beginnt.

4.$(this)

wird normalerweise innerhalb einer Methode verwendet, um das aktuelle Objekt abzurufen , der Methodenaufruf who.

Drei-Elemente-Operationen

1. Elementerstellung

$("<tag>")

Das von JQuery beim Erstellen eines Objekts verwendete HTML-Tag kann nur der Anfangs- sein oder sowohl den Anfangs- als auch den End- oder kann Details enthalten, wie zum Beispiel

<tag style="xxxxx">content</tag>

• 不能够直接使用标签名创建对象，即$("tagName")不能创建对象，这一点不同于JavaScript。

• 不能够单独使用标签结束标识创建对象，即$("")不能创建对象。

2.获取内容

• text()：设置或者返回所选元素的文本内容。

• html()：设置或者返回所选元素的内容（包含HTML标签）。

• val()：设置或者返回所选字段的值。

3.内部插入

• append()：在结尾（后端）添加子元素。

• prepend()：在开头（前端）添加子元素。

• appendTo()：将操作对象作为子对象添加到参数对象结尾。

4.外部插入

• before()：在前面添加兄弟元素。

• after()：在后面添加兄弟素。

• insertBefore()：在前面插入兄弟元素。

• insertAfter()：在后面插入兄弟元素。

5.删除元素

• remove()：删除自身及子元素。

• empty()：删除子元素。

• remove("根据基本选择器选择指定元素")：删除基本选择器中指定元素。

6.获取子元素

• children()：获取全部子元素。

• children("基本组合选择器")：获取具有自定标签与指定属性的子元素。

7.筛选

如果一个选择器返回的结果不是一个对象，而是多个对象构成的集合，可以使用以下方法获取集合中的指定对象：

• eq(index)：获取集合中指定索引位置的对象，索引从0开始。

• filter(":even")：获取集合中所有索引为奇数的对象。

• filter(":odd")：获取集合中所有索引为偶数的对象。

• slice(index)：获取索引大于指定值的对象。

• slice(0,index)：获取索引小于指定值的对象。

• not(selector)：选择指定对象以外的全部对象。

四 属性操作

• attr("attrName")：获取属性值。

• attr("attrName","attrValue")：修改属性值。

• removeAttr("atrrName")：删除属性。

五 常用操作

• 遍历对象：$.each(obj,function(i,n))，i是索引，n是当前遍历子对象。

• 获取单选按钮与复选框的选择状态：$(this).is(":checked")。

六 常用标签及其操作

1.select

⑴增加选项

$(selector).options[index]=new Option(name,value);//按照索引增加$(selector).add(option,before);//按照指定位置增加

⑵删除选项

$(selector).length=0;//全部删除$(selector).remove(index);//按索引删除

⑶option

• option.index: Indexattributwert festlegen und zurückgeben.

• option.text: Text festlegen und zurückgeben.

• option.value: Setz- und Rückgabewert.

• option.selected: Setzt den Auswahlstatus und gibt ihn zurück, wahr/falsch.

Das obige ist der detaillierte Inhalt vonEinführung in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!