Heim >Web-Frontend >Front-End-Fragen und Antworten >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 „$("e388a4556c0f65e1904146cc1a846beeThis is a good story5f557f62ae7ac7a14e0b1cb564790dfc")" 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
h2 a{ /添加CSS属性/ }
Und in jquery; Sie können den folgenden Code verwenden, um alle unter dem Tag c1a436a314ed609750bd7c7d319db4da enthaltenen Unter-Tags als Objektarray zur 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. 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",表明为""添加一个方法“disable()”,其中“$.fn”是扩展jQuery时所必须的 然后利用匿名函数定义这个方法,即用each()将调用这个方法的每个元素的disabled属性均设置为true(如果该属性存在) 6、使用jQuery和其他库 例如:Prototype库也是使用$符号,jQuery提供noConflict函数避免冲突,jQuery.noConflict();把$符号还原到非jQuery库定义的含义。 7、文档就绪处理程序,相当于$(document).ready(...) 例如: 扩展知识:解决"$"的冲突 如果其他框架也是用了“",会引起冲突,jQuery同样提供了noConflict()方法来解决""冲突问题 以上代码可以使""按照其他javascript框架的方式运算,这时再jQuery中便不能在使用“”,而必须使用jQuery, 例如$("p p") 必须写成jQuery("p p"). 【推荐学习:jQuery视频教程、web前端视频】$.fn.disable = function(){
return this.each(function(){
if(typeof this.disabled != "undefined") this.disabled = true;
});
}
$(function(){...}); //里面的函数会在DOM树加载完之后执行
jQuery.noConflict();
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!