Heim > Web-Frontend > js-Tutorial > Hauptteil

Was macht das Dollarzeichen $ in jQuery?

青灯夜游
Freigeben: 2022-12-30 11:12:07
Original
5795 Leute haben es durchsucht

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“.

Was macht das Dollarzeichen $ in jQuery?

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属性/
}
Nach dem Login kopieren

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)
Nach dem Login kopieren

Oder

jQuery(selector)
Nach dem Login kopieren

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“)
Nach dem Login kopieren

(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")
Nach dem Login kopieren

(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")
Nach dem Login kopieren

(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)")
Nach dem Login kopieren

(6) Untergeordneter Selektor, gibt alle untergeordneten Elemente von
  • zurück. a>, außer Sun-Tag
  • $("li > a")
    Nach dem Login kopieren

    (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);
    Nach dem Login kopieren

    Der obige Code entspricht:

    jQuery.trim(sString);
    Nach dem Login kopieren

    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");
    
    });
    Nach dem Login kopieren

    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");
    });
    Nach dem Login kopieren

    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);
    Nach dem Login kopieren

    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>
    Nach dem Login kopieren

    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;
    
    });
    
    }
    Nach dem Login kopieren

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

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

    6、解决"$"的冲突

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

    jQuery.noConflict();
    Nach dem Login kopieren

    以上代码可以使""按照其他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!

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage