Was macht $ in jquery?

Die Funktionen sind: 1. Verwenden Sie als jQuery-Wrapper Selektoren, um DOM-Elemente auszuwählen, die Syntax „$(„selector“)“ 2. Funktionspräfix, als Präfix des Namensraums allgemeiner Dienstprogrammfunktionen, zum Beispiel „ $.trim(sString);"; 3. Lösen Sie den Konflikt in der Funktion window.onload; 4. Erstellen Sie ein DOM-Element, zum Beispiel „$("

This is a good story")" 5. Anpassen von Methoden zum Erweitern von jQuery; 6. Verwenden von jQuery und anderen Bibliotheken. 7. Einrichten von Dokumentenbereitschaftshandlern.

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6-Version, Dell G3-Computer.

1. Verwenden Sie als jQuery-Wrapper Selektoren, um DOM-Elemente auszuwählen.

Die Rolle eines Selektors in CSS besteht darin, einen bestimmten Elementtyp (Kategorieselektor) oder ein bestimmtes Element (ID-Selektor) auszuwählen Seite )

, und das „$“ in jQuery als Selektor wählt auch einen bestimmten Typ oder Typ von Elementen aus, aber jQuery bietet

immer umfassendere Auswahlmethoden. Und es behandelt Browserkompatibilitätsprobleme für Benutzer

(1) CSS kann den folgenden Code verwenden, um alle unter dem Tag

enthaltenen Untertags auszuwählen und dann den entsprechenden Stil hinzuzufügen

h2 a{
/添加CSS属性/
}

Und in jquery; Sie können den folgenden Code verwenden, um alle unter dem Tag

enthaltenen Unter-Tags als Objektarray zur Verwendung durch Javascript auszuwählen

$("h2 a")

(2) Die allgemeine Syntax von Selektoren in jquery ist wie folgt:

$(selector)

Oder

jQuery(selector)

wobei der Selektor den CSS3-Standards entspricht

(3) ID-Selektor, äquivalent zu document.getElementById("#showp"") in Javascript

Sie können sehen, dass die Darstellungsmethode von jQuery viel einfacher ist

$("#showp“)

(3) Kategorieselektor, wählt die CSS-Kategorie als alle Knotenelemente von „SomeClass“ aus. Um die gleiche Auswahl in Javascript zu erreichen,

muss eine for-Schleife verwendet werden, um das gesamte DOM zu durchlaufen

$(".SomeClass")

(4) Alle auswählen < p> befindet sich in ungeraden Zeilen Mark, fast alle Marker können „: ungerade“ oder „: gerade“ verwenden, um eine ungerade und gerade Auswahl zu erreichen

$("p : odd")

(5) Die erste Zelle aller Tabellenzeilen ist die erste Spalte beim Ändern eines bestimmten Teils der Tabelle. Dies ist sehr nützlich, wenn das Attribut einer Spalte nicht mehr Zeile für Zeile durchlaufen werden muss.

$("td:nth-child(1)")

(6) Untergeordneter Selektor, gibt alle untergeordneten Elemente von

zurück. a>, außer Sun-Tag

$("li > a")

(7) Wählen Sie alle Hyperlinks aus, und das href-Attribut dieser Hyperlinks endet mit „pdf“. Mit dem Attributselektor können Sie verschiedene charakteristische Elemente auf der Seite auswählen

("a[ href=pdf". ]")

Hinweis:

Das Dollarzeichen „$“ in jQuery entspricht tatsächlich „jQuery“. Es ist aus dem Quellcode von jQuery ersichtlich

Der Einfachheit halber Code wird normalerweise „$“ verwendet

2. Funktionspräfix

In JavaScript müssen Entwickler häufig einige kleine Funktionen ausführen, um verschiedene Vorgangsdetails zu verarbeiten In einem Formular muss

das Textfeld in „Bereinigen der vorderen und hinteren Leerzeichen“ eingefügt werden. JavaScript bietet keine ähnliche Funktion wie trim(). Nach der Einführung von

jQuery können Sie die Funktion trim() direkt verwenden

$.trim(sString);

Der obige Code entspricht:

jQuery.trim(sString);

Das heißt, die trim()-Funktion ist eine Methode des jQuery-Objekts

3. Lösen Sie den Konflikt der window.onload-Funktion

Seit der HTML Das Framework der Seite muss vollständig geladen sein, bevor es verwendet werden kann. Bei der Programmierung des DOM wird die Funktion „window.onload“ häufig verwendet. Wenn diese Funktion an mehreren Stellen auf der Seite verwendet werden muss oder andere .js-Dateien auch die Funktion window.onload enthalten, ist das Konfliktproblem sehr schwierig. Die Methode ready () in jQuery kann das oben genannte Problem sehr gut lösen Führen Sie die Funktionen automatisch aus, nachdem die Seite geladen wurde.

und mehrere ready()-Methoden können auf derselben Seite verwendet werden, ohne dass es zu Konflikten untereinander kommt. Beispielsweise bietet

$(document).ready(function(){

$("table.datalist tr:nth-child(odd)").addClass("altrow");

});

jQuery auch Abkürzungen für den obigen Code. Sie können den Teil „(document).ready“ weglassen. Der Code lautet wie folgt:

$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});

4. Erstellen Sie DOM-Elemente

Verwenden Sie DOM-Methoden Um Elementknoten zu erstellen, müssen normalerweise document.createElement (), document.create TextNode () und appendChild () zusammen verwendet werden, was jedoch sehr problematisch ist. Das Symbol „$“ kann jedoch in jQuery verwendet werden Erstellen Sie direkt DOM-Elemente. Zum Beispielvar oNewP = $("

Das ist eine gute Geschichte")

Der obige Code entspricht dem folgenden Code in Javascript:

var oNewP = document.createElement("p");// 新建节点

var oText = document.createTextNode("这是一个好故事");

oNewP.appendChild(oText);

Darüber hinaus bietet jQuery auch insertAfter of DOM elements ()-Methode, der Pseudocode lautet wie folgt:

$(function(){           // ready函数

var oNewP = $("<p>这是一个好故事</>");// 创建DOM元素

oNewP.insertAfter("#myTarget");// insertAfter()方法

});

<body>

<p id="myTarget">插入到这行文字之后</p>

<p>也就是插入到这行文字之前，但这行没有id,也可能不存在</p>

</body>

5. jQuery erweitern – Anpassen durch Hinzufügen von „$“

jQuery kann nicht alle Anforderungen aller Benutzer erfüllen, und einige spezielle Anforderungen sind sehr spezifisch und nicht geeignet, im gesamten jQuery-Framework platziert zu werden,

用户可以自定义该方法。代码如下：

$.fn.disable = function(){

return this.each(function(){

if(typeof this.disabled != "undefined") this.disabled = true;

});

}

以上代码首先设置".fn.disable",表明为""添加一个方法“disable()”,其中“$.fn”是扩展jQuery时所必须的

然后利用匿名函数定义这个方法，即用each()将调用这个方法的每个元素的disabled属性均设置为true(如果该属性存在)

6、使用jQuery和其他库

例如：Prototype库也是使用$符号，jQuery提供noConflict函数避免冲突，jQuery.noConflict();把$符号还原到非jQuery库定义的含义。

7、文档就绪处理程序，相当于$(document).ready(...)

例如：

$(function(){...}); //里面的函数会在DOM树加载完之后执行

扩展知识：解决"$"的冲突

如果其他框架也是用了“",会引起冲突，jQuery同样提供了noConflict()方法来解决""冲突问题

jQuery.noConflict();

以上代码可以使""按照其他javascript框架的方式运算，这时再jQuery中便不能在使用“”，而必须使用jQuery，

例如$("p p") 必须写成jQuery("p p").

【推荐学习：jQuery视频教程、web前端视频】

Das obige ist der detaillierte Inhalt vonWas macht $ in jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!