Was macht das Dollarzeichen $ in jQuery?

Die Rolle des Dollarzeichens „$“ in jQuery: 1. Als jQuery-Wrapper, Verwendung von Selektoren zur Auswahl von DOM-Elementen; 2. Als Präfix für den Namespace mehrerer allgemeiner Dienstprogrammfunktionen; 4. Erweitern Sie jQuery; 5. Lösen Sie den Konflikt der Funktion „window.onload“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.12.4-Version, Dell G3-Computer.

Empfohlenes Tutorial: jq-Tutorial

1. Selektor

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

, und das „$“ in jQuery als Selektor wählt auch einen bestimmten Typ oder eine bestimmte Art 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 für die Verwendung durch Javascript auszuwählen

$("h2 a")

Nach dem Login kopieren

(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. Durch Hinzufügen von „$“ können jQuery nicht alle Anforderungen aller Benutzer erfüllen, und einige spezielle Anforderungen sind sehr nischenorientiert und nicht geeignet Um in das gesamte jQuery-Framework einbezogen zu werden, können

Benutzer diese Methode anpassen. Der Code lautet wie folgt:

$.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同样提供了noConflict()方法来解决""冲突问题

jQuery.noConflict();

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

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

更多编程相关知识，请访问：编程入门！！

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