Home > Article > Web Front-end > Why use jquery when you have js?
Why use jquery when you have js?
- WBOYOriginal
- 2022-06-07 17:24:071136browse
Because jquery simplifies some of the complexities of using JavaScript to develop web page special effects, providing automation of common tasks and simplification of complex tasks; using jquery can not only reduce functions that originally require a lot of JavaScript code to be implemented A few lines of code, and provides high enough performance, so if you have JavaScript, you also need to use jquery to reduce the lines of code.
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
Why use jquery if you have js
jQuery is a JavaScript library, so it can run on top of JavaScript. It cannot exist by itself, so you cannot use it on top of one. You can use just JavaScript or JavaScript and jQuery. jQuery was introduced to simplify JavaScript development. It will reduce development time. Use it to add animations and even work on your website.
jQuery simplifies HTML document traversal, event handling, animation, and Ajax interaction for rapid web development. jQuery is easier to use than JavaScript and its other JavaScript libraries. Fewer lines of code need to be written when using jQuery compared to JavaScript.
jQuery is a set of JavaScript libraries that simplify some of the complexities of using JavaScript to develop web page special effects, providing automation of common tasks and simplification of complex tasks. Using jQuery can not only reduce functions that originally require a lot of JavaScript code to a few lines of code, but also provide sufficiently high-speed performance.
As an example, suppose we now have the following basic web page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div id="box2"></div>
</body>
</html>Then we use native JavaScript and jQuery to change the background colors of the three divs above.
<script>
//使用原生JavaScript改变背景颜色
window.onload = function (ev) {
var div1 = document.getElementsByTagName("div")[0];
var div2 = document.getElementsByClassName("box1")[0];
var div3 = document.getElementById("box2");
// console.log(div1);
// console.log(div2);
// console.log(div3);
div1.style.backgroundColor = "red";
div2.style.backgroundColor = "yellow";
div3.style.backgroundColor = "blue";
}
//使用jQuery改变背景颜色
// $(function () {
// var $div1 = $("div")[0];
// var $div2 = $(".box1")[0];
// var $div3 = $("#box2")[0];
// // console.log($div1);
// // console.log($div2);
// // console.log($div3);
// $div1.css({
// background: "red"
// });
// $div2.css({
// background: "yellow"
// });
// $div3.css({
// background: "blue"
// });
// })
</script>Comparing the two methods, we can see that the most direct benefit of using jQuery is that you can quickly obtain DOM elements based on CSS selectors. In addition, when modifying the CSS style of DOM elements, the programming format is similar to the style tag, making it easy to remember. Of course, there are other benefits to using jQuery, which we will continue to discover in later studies.
Video tutorial recommendation: jQuery video tutorial
The above is the detailed content of Why use jquery when you have js?. For more information, please follow other related articles on the PHP Chinese website!