首页 web前端 js教程 为什么要使用jquery

为什么要使用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

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

<!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还有别的好处,这在后面的学习中继续发现挖掘。

相关免费学习推荐:JavaScript(视频)

以上是为什么要使用jquery的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在JavaScript中替换字符串字符 在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替换字符串字符

自定义Google搜索API设置教程 自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

自定义Google搜索API设置教程

示例颜色json文件 示例颜色json文件 Mar 03, 2025 am 12:35 AM

示例颜色json文件

8令人惊叹的jQuery页面布局插件 8令人惊叹的jQuery页面布局插件 Mar 06, 2025 am 12:48 AM

8令人惊叹的jQuery页面布局插件

构建您自己的Ajax Web应用程序 构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

构建您自己的Ajax Web应用程序

什么是这个'在JavaScript? 什么是这个'在JavaScript? Mar 04, 2025 am 01:15 AM

什么是这个'在JavaScript?

通过来源查看器提高您的jQuery知识 通过来源查看器提高您的jQuery知识 Mar 05, 2025 am 12:54 AM

通过来源查看器提高您的jQuery知识

10张移动秘籍用于移动开发 10张移动秘籍用于移动开发 Mar 05, 2025 am 12:43 AM

10张移动秘籍用于移动开发

See all articles