Heim >Web-Frontend >js-Tutorial >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
h2 a{ /添加CSS属性/ }
Und in jquery; Sie können den folgenden Code verwenden, um alle unter dem Tag c1a436a314ed609750bd7c7d319db4da enthaltenen Unter-Tags als Objektarray für die Verwendung durch Javascript auszuwählen
$("h2 a")
$(selector)
Oder
jQuery(selector)
wobei der Selektor den CSS3-Standards entspricht
Sie können sehen, dass die Darstellungsmethode von jQuery viel einfacher ist
$("#showp“)
muss eine for-Schleife verwendet werden, um das gesamte DOM zu durchlaufen
$(".SomeClass")
$("p : odd")
$("td:nth-child(1)")
$("li > a")
("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 = $("e388a4556c0f65e1904146cc1a846beeDas ist eine gute Geschichte5f557f62ae7ac7a14e0b1cb564790dfc")
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!