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 官方
a.JavaScript utilise
série getElement, 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.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='na']");
$("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='color: #ff3a29'>呵呵</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='color: #ff3a29'>呵呵</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
*1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点） * children：获取当前节点的所有元素子节点（不包括文本节点） *2.parentNode:获取当前节点的父节点 *3.firstChild:获取第一个元素节点，包括回车等文本节点 * firstElementChild:获取第一个元素节点，不包括回车节点 * lastChild、lastElementChild 同理 *4.previousSibling：获取当前元素的前一个兄弟节点 * previousElementSibling：：获取当前元素的前一个兄弟节点 * nextSibling、nextElementSibling
. JQuery :
1. Fournit un grand nombre de sélecteurs :
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>
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!<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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
