简单实现一个jquery框架

东明兄 • 2018-11-01 • 开发笔记 • 1828 阅读
chat

模拟jquery框架，实现.text() .html功能 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="wrapper">hello jquery! ~~~ <b>你好啊~</b></div>

<script>

//作用域隔离
    (function () {

        window.jQuery = window.$ = jQuery;//将模拟的jq 挂载到window

        function jQuery(id) {
            return new jQuery.prototype.init(id);

        }

        var init=jQuery.prototype.init=function (id) {
            this[0] = document.getElementById(id.slice(1));
            this.length = 1;
            return this;
        }



        jQuery.prototype.text = function (value) {

            if (value) {
                this[0].innerText = value;
                return this;//链式操作的关键点   执行完 return 这个对象

            } else {
                return this[0].innerText;
            }

        };

        jQuery.prototype.html = function (value) {

            if (value) {

                this[0].innerHTML = value;
                return this;//链式操作的关键点   执行完 return 这个对象

            } else {

                return this[0].innerHTML;

            }

        };


        init.prototype = jQuery.prototype;

    })();



    //模拟使用 jq 的text()
    console.log($("#wrapper").text());
//模拟使用 jq 的html()
    console.log($("#wrapper").html());



//试一试链式操作
    $("#wrapper").html("<b>你好啊</b>").text("over");

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

版权声明：
作者：东明兄
链接：https://blog.crazyming.com/note/641/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
简单实现一个jquery框架
简单模拟jquery框架，实现.text() .html功能
<<上一篇
下一篇>>
chat