Maison > Article > interface Web > Quelle est la différence entre javascript et jquery

Quelle est la différence entre javascript et jquery

青灯夜游original: 2021-09-07 13:16:402464parcourir

Différence : 1. JavaScript est un langage de programmation léger, tandis que JQuery est une bibliothèque de fonctions JavaScript ; 2. js utilise la méthode DOM pour créer des nœuds d'éléments, et jQuery peut créer directement des éléments DOM en utilisant $ ; les nœuds sont différents ; 4. Les méthodes de fonctionnement des nœuds d'attributs sont différentes.

L'environnement d'exploitation de ce tutoriel : système windows7, version javascript1.8.5&&jquery1.10.0, ordinateur Dell G3.

1. Différences essentielles

1. JavaScript est un langage de programmation léger qui est inséré dans les pages HTML via la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0

2.JQuery est une bibliothèque de fonctions JavaScript. En d’autres termes, c’est le framework le plus populaire en JavaScript.

Pour utiliser JQuery, vous devez d'abord ajouter une référence à la bibliothèque jQuery au début du code HTML, comme :

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

Le fichier de la bibliothèque peut être placé localement, ou vous pouvez directement utiliser le CDN d'un bien- entreprise connue. L'avantage est que le CDN de ces grandes entreprises est relativement populaire, avant que les utilisateurs visitent votre site Web, il est susceptible d'avoir été mis en cache dans le navigateur lors de la visite d'autres sites Web, ce qui peut accélérer l'ouverture du site Web. Un autre avantage est évident : économiser la bande passante du trafic du site Web. Par exemple :

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

或者：

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

2. Différences de syntaxe

1. Différentes méthodes de fonctionnement des nœuds d'éléments

a JavaScript utilise la série

getElement, la série de requêtes

<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. un lot Le sélecteur utilise également $() pour envelopper le sélecteur

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

2 Les méthodes de fonctionnement des nœuds d'attribut sont différentes

a JavaScript utilise

getAttribute("Attribute Name") , setAttribute(" Nom de l'attribut", "Valeur de l'attribut")

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

b.JQuery utilise

.attr() pour transmettre un paramètre pour l'obtenir, et transmet deux paramètres pour définir

.prop()

prop et attr peut à la fois modifier le texte. Les attributs sont lus et définis ;

La différence entre les deux est lors de la lecture des attributs cochés, désactivés et d'autres attributs avec des noms d'attribut = valeurs d'attribut

attr renvoie la valeur de l'attribut ou non défini, et lors de la lecture l'attribut vérifié, cela ne dépendra pas du fait qu'il soit sélectionné ou non. Et changer

prop renvoie vrai et faux. Lorsque l'attribut vérifié est lu, il changera selon qu'il est sélectionné. être obtenu par attr doit être l'attribut écrit sur l'étiquette, sinon il ne peut pas être obtenu

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

3 Il existe différentes manières d'utiliser les nœuds de texte

a JavaScript utilise

innerHTML : Get ou. définissez le code HTML d'un nœud, vous pouvez obtenir du CSS et le renvoyer sous forme de texteinnerText : Obtenir Ou définir le code HTML d'un nœud et ne pas obtenir la valeur CSS

: Récupérer le texte saisi par input[type ='text']

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

b.JQuery utilise

.html() pour obtenir ou définir le nœud Le code html .text() obtient ou définit le texte dans le nœud .val() obtient ou définit la valeur de l'attribut value de l'entrée

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

4. Les méthodes de fonctionnement des styles CSS sont différentes

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:

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

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

5. avaScript :

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

JQuery :1. Fournit un grand nombre de sélecteurs :

: premier-enfant

: premier du type

1.9+

:dernier-enfant
:dernier -of-type^1.9+
:ntième-enfant
:ntième-dernier-enfant()
1.9+
1.9+
1.9+
: only-of-type
1.9+
first()

last()　

children()　
parents()　
parent()　
frères et sœurs()

Utilisation du modèle d'événement Dom0 et du modèle d'événement Dom2. Pour plus de détails, consultez mon dernier blogJQuery :　①.

Raccourci pour la liaison d'événement

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
     $("button:eq(0)").click(function () {
        alert(123);
     });</script>

② : Utilisez

on pour la liaison d'événement

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

7.Les fonctions prêtes pour les documents de JQuery et La différence entre window.onload

*①.window.onload必须等待网页资源（包括图片等）全部加载完成后，才能执行；
*      而文档就绪函数只需要等到网页DOM结构加载完成后，即可执行
*②.window.onload在一个页面中，只能写一次，写多次会被最后一次覆盖
*      而文档就绪函数在一个页面中可以有N个

3 Les méthodes des objets JavaScript et des objets JQuery ne peuvent pas être mélangées.

1. Objets JavaScript et objets JQuery

① 使用$("")取到的节点为JQuery对象，只能调用JQuery方法，不能调用JavaScript方法； * $("#p").click(function(){})√ * $("#p").onclick = function(){}× 使用JQuery对象调用JavaScript方法 * * 同理，使用、document.getElement系列函数取到的对象为JavaScript对象，也不能调用JQery函数

2. Objets JavaScript et objets JQuery conversion mutuelle .

*① 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高级教程】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quel type de framework est vuejs ?Article suivant：Quel type de framework est vuejs ?

Articles Liés

Voir plus