Maison >interface Web >Questions et réponses frontales >Est-ce que jquery est javascript ?

Est-ce que jquery est javascript ?

青灯夜游original: 2021-11-26 16:07:274032parcourir

jquery n'est pas javascript. JavaScript est un langage de script interprétatif et jquery est une bibliothèque de fonctions JavaScript, un framework écrit sur la base du langage JavaScript et il existe de nombreuses différences de syntaxe entre les deux ;

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

jquery n'est pas javascript.

javascript est un langage de script interprétatif, et jquery est une bibliothèque de fonctions JavaScript, un framework écrit basé sur le langage JavaScript

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

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google
或者：
<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方

Il existe de nombreuses différences de syntaxe entre jquery et javascript

1 Manipuler les nœuds d'éléments

a.JavaScript utilise

série getElement, série de requêtes

6c04bd5ca3fcae76e30b72ad730ca86d
    ff6d136ddc5fdfeffaf53ff6ee95f185
        f720c45ccc45a0fb64cf9d40e6aab528哈哈bed06894275b65c1ab86501b08a632eb
        cf1867405928e86c5f34ccfa5e1981eb啦啦bed06894275b65c1ab86501b08a632eb
        0b4e0e7a752f25a03382c188595aae70呵呵bed06894275b65c1ab86501b08a632eb
        4b092670435d4bbf91b8df6a5cec99d9嘿嘿bed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689
    7b2cfc96e4c0d74da423eefa2832bb6a
        ff6d136ddc5fdfeffaf53ff6ee95f185
            0b4e0e7a752f25a03382c188595aae70呵呵bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6嘿嘿bed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
3f1c4e4b6b16bbbd69b2ee476dc4f83a
　　document.getElementById("first");　　　　　　　　//是一个元素
　　document.getElementsByClassName("cls");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByName("na");　　　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByTagName("li");　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.querySelector("#div");　　　　　　　　//是一个元素 
　　document.querySelectorAll("#div li");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
2cacc6d41bbb37262a98f745aa00fbf0

b.JQuery utilise

a. 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 Utiliser le nœud d'attribut

a JavaScript utilise

getAttribute("Attribute Name"), setAttribute("Attribute Name", "Attribute. Value")

<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 à obtenir, et transmettre deux paramètres pour définir

.prop()

prop, comme attr, peut lire et définir les attributs du texte ;

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

attr renvoie la valeur de l'attribut ou non défini. Lors de la lecture de l'attribut coché, elle ne changera pas en fonction. selon qu'il est sélectionné ou non.

prop renvoie true et false Lorsque l'attribut vérifié est lu, il changera selon qu'il est sélectionné. En d'autres termes, l'attribut à obtenir par attr doit être l'attribut écrit sur le. label, 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. Manipuler le nœud de texte a.Utilisation de JavaScript

innerHTML : obtenez ou définissez le code HTML d'un nœud, vous pouvez obtenir du CSS, le renvoyer dans le fichier. form of text

innerText : récupère ou définit le code HTML d'un nœud, vous ne pouvez pas obtenir de css

value : récupère 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 code html dans le nœud

.text() pour obtenir ou définir le code html dans le nœud Text

.val() obtient ou définit l'attribut value de input

<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. fonctionnement du style CSSJavaScript :

1. Utilisez setAttribute pour définir la classe et le style

document.getElementById("first").setAttribute("style","color:red");

2. Utilisez className ajoute un sélecteur de classe

document.getElementById("third").className = "san";

3. Notez que le nom du style doit utiliser la casse camel

document.getElementById("four_times").style.fontWeight = "900";

4. Utilisez .style ou .style.cssText pour ajouter un style de niveau série :

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. Manipuler les nœuds hiérarchiques

JavaScript :

*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

6. Lier un événement à un nœud JavaScript :

　Utilisation du modèle d'événement Dom0 et du modèle d'événement Dom2, voir mon blog précédent pour plus de détails

JQuery:

　①.

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

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

[Recommandations associées :

Tutoriel d'apprentissage 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：Qu'est-ce qu'un tableau en JavascriptArticle suivant：Qu'est-ce qu'un tableau en Javascript

Articles Liés

Voir plus