为什么要使用jquery

互联网 20-11-16

使用jquery的原因：1、可以根据CSS选择器快速地获取DOM元素；2、另外在修改DOM元素的CSS样式时，与style标签编程格式相似，方便记忆。

推荐：《jquery视频教程》

一、什么是jQuery

jQuery是一套JavaScript的库，它简化了使用JavaScript进行网页特效开发的一些复杂性，提供了对常见任务的自动化和复杂任务的简化。使用jQuery不仅能够将原本需要很多JavaScript代码才能实现的功能缩减为几行代码，而且提供了足够高速的性能。

二、为什么要使用jQuery

举个栗子，假设我们现在有以下基本网页：

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

然后我们分别使用原生JavaScript、jQuery来改变上面三个div的背景颜色。

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

对比两种方法，我们可以看到使用jQuery的好处最直接的是：可以根据CSS选择器快速地获取DOM元素。另外在修改DOM元素的CSS样式时，与style标签编程格式相似，方便记忆。当然，使用jQuery还有别的好处，这在后面的学习中继续发现挖掘。