suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist der Unterschied zwischen Javascript und JQuery?

Was ist der Unterschied zwischen Javascript und JQuery?

青灯夜游
青灯夜游Original
2021-09-07 13:16:402527Durchsuche

Unterschied: 1. JavaScript ist eine leichte Programmiersprache, während JQuery eine JavaScript-Funktionsbibliothek ist. 2. js verwendet die DOM-Methode, um Elementknoten zu erstellen, und jQuery kann DOM-Elemente direkt mit $ erstellen Knoten sind unterschiedlich; 4. Die Methoden zur Bedienung von Attributknoten sind unterschiedlich.

Was ist der Unterschied zwischen Javascript und JQuery?

Die Betriebsumgebung dieses Tutorials: Windows7-System, Javascript1.8.5 &&jquery1.10.0-Version, Dell G3-Computer.

1. Wesentliche Unterschiede

1. JavaScript ist eine leichtgewichtige Programmiersprache, die über das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 eingefügt wird.

2.JQuery ist eine JavaScript-Funktionsbibliothek. Mit anderen Worten, es ist das beliebteste Framework in JavaScript.

Um JQuery zu verwenden, müssen Sie zunächst am Anfang des HTML-Codes einen Verweis auf die jQuery-Bibliothek hinzufügen, z. B.: 

<script src="js/jquery.min.js"></script>

Die Bibliotheksdatei kann lokal platziert werden, oder Sie können direkt das CDN eines gut Der Vorteil bekannter Unternehmen besteht darin, dass das CDN dieser großen Unternehmen relativ beliebt ist. Bevor Benutzer Ihre Website besuchen, wird es wahrscheinlich beim Besuch anderer Websites im Browser zwischengespeichert, sodass das Öffnen der Website beschleunigt werden kann. Ein weiterer Vorteil liegt auf der Hand: Die Einsparung von Bandbreite für den Website-Verkehr. Zum Beispiel: 

<script src=></script>　　//Google

或者：

<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方　

2. Unterschiede in der Syntax

1. Verschiedene Methoden zur Bedienung von Elementknoten

a. JavaScript verwendet

getElement-Serie, Abfrageserie 

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script>
　　document.getElementById("first");　　　　　　　　//是一个元素
　　document.getElementsByClassName("cls");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByName("na");　　　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用　　
　　document.getElementsByTagName("li");　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用　　
　　document.querySelector("#div");　　　　　　　　//是一个元素 　　
　　document.querySelectorAll("#div li");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
</script

b. JQuery verwendet

a lot Der Selektor verwendet auch $(), um den Selektor zu umschließen. Die Methoden zum Betreiben von Attributknoten sind unterschiedlich. Attributname", "Attributwert")

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>　　//使用JQuery取到的是jquery对象都是一个数组，即使只有一个元素被选中,但是在使用时候不一定需要使用:eq(0)来拿到这一个在使用可以直接使用
    $("#first");　　　　　　　　　　　　
    $(".cls");
    $("li type[name=&#39;na&#39;]");
    $("li");

    $("#div");
    $("#div li");
</script>

b.JQuery verwendet .attr(), um einen Parameter zu übergeben, um ihn abzurufen, und zwei Parameter, um

.prop()prop und festzulegen attr kann den Text sowohl lesen als auch festlegen.

Der Unterschied zwischen den beiden besteht darin, dass beim Lesen aktivierte, deaktivierte und andere Attribute mit Attributnamen = Attributwerte sind.

attr gibt beim Lesen den Attributwert zurück Das überprüfte Attribut wird nicht basierend auf der Auswahl ausgewählt. Wenn das überprüfte Attribut gelesen wird, wird es geändert, je nachdem, ob es ausgewählt ist Das von attr erhaltene Attribut muss das auf dem Etikett angegebene Attribut sein, andernfalls kann es nicht abgerufen werden.

a. JavaScript verwendet

innerHTML B. den HTML-Code eines Knotens, können Sie CSS abrufen und in Form von Text zurückgeben

innerText: Holen Sie sich den HTML-Code eines Knotens oder legen Sie ihn fest und können Sie das CSS nicht abrufen

Wert: Rufen Sie den von input[type= 'text']

<body>
    <ul>
        <li id=>哈哈</li>
    </ul>
</body>
<script>).getAttribute().setAttribute(,　　document.getElementById("first").removeAttribute("name");
</script>

b.JQuery verwendet

.html(), um den Knoten abzurufen oder festzulegen. Der HTML-Code .text() ruft den Text im Knoten ab oder legt diesen fest. .val() ruft den ab oder legt ihn fest Wertattributwert der Eingabe 

<body>
    <ul>
        <li id="first">哈哈</li>
    </ul>
</body><script src="js/jquery.js"></script>
<script>
　　$("#first").attr("id");
　　$("#first").attr("name","nafirst");　　$("#first").removeAttr("name");
　　$("#first").prop("id"); 　　$("#first").prop("name","nafirst"); 　　$("#first").removeProp("name");
</script>

4 Die Methoden zur Bedienung von CSS-Stilen sind unterschiedlich

JavaScript:

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script>
    document.getElementById("serven_times").innerHTML;
    document.getElementById("serven_times").innerHTML = "<span style=&#39;color: #ff3a29&#39;>呵呵</span>";
    document.getElementById("eight_times").innerText;
    document.getElementById("eight_times").innerText = "啦啦";
    document.getElementById("input").value;
</script>

JQuery:

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script src="/js/jquery.min.js"></script>
<script>
    $("#serven_times").html();
    $("#serven_times").html("<span style=&#39;color: #ff3a29&#39;>呵呵</span>");
    $("#eight_times").text();
    $("#eight_times").text("啦啦");
    $("#input").val();
    $("#input").val("哈哈");
</script>

JavaScript:

* 1.使用setAttribute设置class和style
*   document.getElementById("first").setAttribute("style","color:red");
* 2.使用.className添加一个class选择器
*   document.getElementById("third").className = "san";
* 3.使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法
*   document.getElementById("four_times").style.fontWeight = "900";
* 4.使用.style或.style.cssText添加一串行级样式：
*   document.getElementById("five_times").style = "color: blue;";//IE不兼容
*   document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";

JQuery:


1. Bietet eine große Anzahl von Selektoren:

: erstes Kind

: erstes Kind

1.9+

:letztes Kind:letztes- of-type

1.9+

:nth-child

  • :nth-last-child()

    1.9+

  • :nth-last-of-type()1.9+

  • :nth-of-type()

    1.9+

  • :only-child

  • :only-of-type

    1.9+

  • 2. Darüber hinaus gibt es auch entsprechende Funktionen vorausgesetzt:

    first()　

  • last()　

  • children()　

  • parents()　

    parent()　

Geschwister()

  • 6. Binden Sie Ereignisse an einen Knoten

  • JavaScript:

    Verwenden Sie das Dom0-Ereignismodell und das Dom2-Ereignismodell. Weitere Informationen finden Sie in meinem letzten Blog
  • JQuery:

    　①.
    • Abkürzung für die Ereignisbindung

  • $("#p2").css("color","yellow");

$("#p2").css({
    "color" : "white",
    "font-weight" : "bold",
    "font-size" : "50px",
});

    　② : Verwenden Sie
    • on für die Ereignisbindung

  • *1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点）
*  children：获取当前节点的所有元素子节点（不包括文本节点）
*2.parentNode:获取当前节点的父节点
*3.firstChild:获取第一个元素节点，包括回车等文本节点
*  firstElementChild:获取第一个元素节点，不包括回车节点
*  lastChild、lastElementChild 同理
*4.previousSibling：获取当前元素的前一个兄弟节点
*  previousElementSibling：：获取当前元素的前一个兄弟节点
*  nextSibling、nextElementSibling

7. Der Unterschied zwischen window.onload

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
     $("button:eq(0)").click(function () {
        alert(123);
     });</script>
3. Die Methoden von JavaScript-Objekten und JQuery-Objekten können nicht gemischt werden.

1. JavaScript-Objekte und JQuery-Objekte 

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
    //①使用on进行单事件的绑定
     $("button:eq(0)").on("click",function () {
        alert(456);
    });
     //②使用on同时给同一对象绑定多个事件
    $("button:eq(0)").on("click dblclick mouseover",function () {
        console.log(123);
    });
    //③使用on，给一个对象绑定多个事件
    $("button:eq(0)").on({
        "click":function () {
            console.log("click");
        },
        "mouseover":function () {
            console.log("mouseover");
        },
        "mouseover":function () {
            console.log("mouseover2");
        }
    });
    //④使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到；jquery中的e只能通过参数传进去，不能用window.event
    $("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
        console.log(e);
        console.log(e.data);
        console.log(e.data.name);
        console.log(e.data.age);
        console.log(window.event);//js中的事件因子

    });
    
</script>

2. Gegenseitige Konvertierung von JavaScript-Objekten und JQuery-Objekten 

*① JQuery --->  JavaScript :使用get(index)或者[index]选中的就是JavaScript对象
*  $("p").get(0).onclick = function(){}
*  $("p").[0].onclick = function(){}
* ② JavaScript ---> JQuery :使用$()包裹JavaScript对象        (我们发现JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件)
*  var p = document.getElementById("p");
*  $(p).click(function(){});

【推荐学习：javascript高级教程】

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Javascript und JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Was für ein Framework ist vuejs?Nächster Artikel：Was für ein Framework ist vuejs?

In Verbindung stehende Artikel

Mehr sehen