代码改变世界

jQuery部分功能使用js进行实现(初探JQ)

2019-01-16 17:16  小花儿鹿  阅读(310)  评论(0)    收藏  举报

今天使用js写了段jq中的html()方法。我的原则是废话不多说，直接放代码。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery初探</title>
</head>
<body>
    <div id="box">
        <span>1112</span>
    </div>
    <script>
        var Kodo = function(selector){
            return new Kodo.prototype.init(selector);
        }
        Kodo.prototype = {
            constructor : Kodo,
            length : 0,
            splice : [].splice,
            selector : '',
            id:{},
            init : function(selector){
                //这里统一认为是id
                if(selector){               
                     this.id = this.createrEleById(selector.substring(1,selector.length));
                }

            },
            html : function(){
                return this.toTrim(this.id.innerHTML);
            },
            createrEleById : function(idName){
                return document.getElementById(idName);
            },
            toTrim : function(str){
                //去除字符串两端空格
                return str.replace(/(^\s*)|(\s*$)/g, ""); 
            }
        }
        Kodo.prototype.init.prototype = Kodo.prototype;
        Kodo.prototype.ajax = function(){
            console.log('这里可以写ajax');
        }
        window.$ = Kodo;
        //$('#box').ajax();
        console.log($('#box').html());
    </script>
</body>
</html>