为什么要使用jquery-js教程-PHP中文网

首页

web前端

js教程

为什么要使用jquery

Nov 16, 2020 am 10:53 AM

使用jquery

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

为什么要使用jquery

推荐：《jquery视频教程》

一、什么是jQuery

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

二、为什么要使用jQuery

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

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;style&gt;
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div id=&quot;box2&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

登录后复制

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

&lt;script&gt;
        //使用原生JavaScript改变背景颜色
        window.onload = function (ev) {
            var div1 = document.getElementsByTagName(&quot;div&quot;)[0];
            var div2 = document.getElementsByClassName(&quot;box1&quot;)[0];
            var div3 = document.getElementById(&quot;box2&quot;);
            // console.log(div1);
            // console.log(div2);
            // console.log(div3);
            div1.style.backgroundColor = &quot;red&quot;;
            div2.style.backgroundColor = &quot;yellow&quot;;
            div3.style.backgroundColor = &quot;blue&quot;;
        }
 
        //使用jQuery改变背景颜色
        // $(function () {
        //     var $div1 = $(&quot;div&quot;)[0];
        //     var $div2 = $(&quot;.box1&quot;)[0];
        //     var $div3 = $(&quot;#box2&quot;)[0];
        //     // console.log($div1);
        //     // console.log($div2);
        //     // console.log($div3);
        //     $div1.css({
        //         background: &quot;red&quot;
        //     });
        //     $div2.css({
        //         background: &quot;yellow&quot;
        //     });
        //     $div3.css({
        //         background: &quot;blue&quot;
        //     });
        // })
    &lt;/script&gt;

登录后复制

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