模拟实现JQ中的链式编程和事件注册

simpleJQ.js

实现的方法 :

$('选择器'):可选值, ID,类,标签,属性
click():$(select).click(function(){ }): 注册点击事件
css(): $(selector).css({color:'red',background:'pink'}): 设置样式
show(): $(selector).show(): 显示元素
hide():$(selector).hide(): 隐藏元素
html():
- $(selector).html(content) 设置标签内容
- $(selector).html(): 获取标签内容; 不可继续进行链式编程

function $(selector) {
    // 获取dom元素
    var dom = document.querySelector(selector);
    return {
        0:dom,
        click:function(callback){
            dom.onclick=callback
        },
        css: function () {
            // 说明是key,val
            if (arguments.length == 2) {
                dom.style[arguments[0]] = arguments[1];

            } else if (arguments.length == 1) {  //说明传递的是对象格式的属性{}
                for (var key in arguments[0]) {
                    dom.style[key] = arguments[0][key];
                }
            }
            return this;
        },
        show: function () {
            dom.style.display = 'block';
            return this;
        },
        hide: function () {
            dom.style.display = 'none';
            return this;
        },
        html: function (content) {
          if(content){
                dom.innerHTML = content;
                return this;
            }else{
                return dom.innerHTML;
            }
        }
    }
}

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试代码</title>
    <style>
    
    </style>
</head>
<body>
    <div class="container">
        <button id='show'>显示</button>
        <button id='hidden'>隐藏</button>
        <button id='bgchange'>修改背景色</button>
        <hr>
    
        <div id="box">
            这是一个用于测试的div盒子, 点击显示按钮,显示该div, 点击隐藏按钮, 隐藏该div
        </div>

    </div>

</body>
<script src="simpleJQ.js"></script>
<script>
    console.log($("#box"));
// 显示box
$("#show").click(function(){
    $("#box").show();
});

// 隐藏box
$("#hidden").click(function(){
    $("#box").hide();
});

// 修改box的样式
$("#bgchange").click(function(){
    $("#box").show().css({color:'red',background:'pink'})
});


</script>
</html>