Home > Article > Web Front-end > Is jquery javascript?
jquery is not javascript. JavaScript is an interpretive scripting language, and jquery is a JavaScript function library, a framework written based on the JavaScript language; and there are many differences in syntax between the two.
The operating environment of this tutorial: windows7 system, javascript1.8.5&&jquery1.10.2 version, Dell G3 computer.
jquery is not javascript.
javascript is an interpretive scripting language, and jquery is a JavaScript function library, a framework written based on JavaScript language
To use JQuery, you must first put it at the front of the HTML code Add a reference to the jQuery library, for example:
<script src="js/jquery.min.js"></script>
The library file can be placed locally, or you can directly use the CDN of a well-known company. The advantage is that the CDN of these large companies is more popular, and users will not be able to access your website for a long time. It may have been cached in the browser when visiting other websites, so it can speed up the opening of the website. Another benefit is obvious, saving website traffic bandwidth. For example:
<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 uses
getElement series, query series
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 uses
A large number of selectors and uses $() to wrap the selector
<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. Manipulate attribute nodes
##a.JavaScript uses 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 uses .attr() to pass in one parameter to get, and to pass in two parameters to set .prop()prop and attr can both read and set text attributes; The difference between the two is when reading attributes such as checked, disabled, etc. whose attribute name = attribute valueattr Returns the property value or undefined. When the checked property is read, it will not change depending on whether it is selected.prop returns true and false. When the checked property is read, it will change depending on whether it is selected. That is to say, the attribute to be obtained by attr must be the attribute written on the label, otherwise it cannot be obtained <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. Operation text node
a.JavaScript usage innerHTML: Get or set the HTML code of a node, you can get the css and return it in the form of text innerText: Get or set the HTML code of a node HTML code, cannot get cssvalue: Get the text entered by 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 uses .html() to get Get or set the html code in the node .text() Get or set the text in the node
.val() Get or set the value attribute value of the 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. When operating css styles
JavaScript:1. Use setAttribute to set class and styledocument.getElementById("first").setAttribute("style","color:red");2. Use .className to add A class selectordocument.getElementById("third").className = "san";3. Use .style.style to directly modify a single style. Note that the style name must use camel case document.getElementById("four_times").style.fontWeight = "900";4. Use .style or .style.cssText to add a serial-level style: 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. Operating hierarchy nodesJavaScript:*1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点） * children：获取当前节点的所有元素子节点（不包括文本节点） *2.parentNode:获取当前节点的父节点 *3.firstChild:获取第一个元素节点，包括回车等文本节点 * firstElementChild:获取第一个元素节点，不包括回车节点 * lastChild、lastElementChild 同理 *4.previousSibling：获取当前元素的前一个兄弟节点 * previousElementSibling：：获取当前元素的前一个兄弟节点 * nextSibling、nextElementSiblingJQuery:1. Provides a large number of selectors:
6. Bind an event to a node
JavaScript: Using Dom0 event model and Dom2 event Model, please see my last blog for detailsJQuery: ①.Shortcut for event binding
<body>
<button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
$("button:eq(0)").click(function () {
alert(123);
});
</script> ②: Use on for event binding
<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>[Related recommendations: The above is the detailed content of Is jquery javascript?. For more information, please follow other related articles on the PHP Chinese website!