JQuery概念及其简单的原理

最新推荐文章于 2024-03-19 05:54:06 发布

稻田里展望者

最新推荐文章于 2024-03-19 05:54:06 发布

阅读量385

点赞数 1

分类专栏： javaWeb 文章标签： JQuery

本文链接：https://blog.csdn.net/weixin_46441425/article/details/123667797

版权

javaWeb 专栏收录该内容

94 篇文章 3 订阅

订阅专栏

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

原本的方法

<head>
    <meta charset="UTF-8">
    <title>01-自定义js框架</title>
</head>
<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>
        //1. 根据id获取元素对象
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");

        //2. 获取标签体内容
        alert(div1.innerHTML);
        alert(div2.innerHTML);

    </script>
</body>
</html>

使用封装方法,根据id获取元素对象

<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>

        var div1 = get("div1");
        var div2 = get("div2");

        //2. 获取标签体内容
        alert(div1.innerHTML);
        alert(div2.innerHTML);

        //封装方法,根据id获取元素对象
        function get(id) {
            var obj = document.getElementById(id);
            return obj;
        }

    </script>
</body>

运用框架的思想,把刚刚封装起来的方法存在另一个单独的js文件上,然后在需要用到的时候调用它

//封装方法,根据id获取元素对象
        function get(id) {
            var obj = document.getElementById(id);
            return obj;
        }

在html页面调用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-自定义js框架</title>
    <script src="./Js/Jquery1.js"></script>
</head>
<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>

        var div1 = get("div1");
        var div2 = get("div2");

        //2. 获取标签体内容
        alert(div1.innerHTML);
        alert(div2.innerHTML);
    </script>
</body>
</html>