仿jquery选择器，事件，css封装

<!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>js封装3</title>
</head>
<body>
    <div id="div">
        <button id="hide" class="hide">hide</button>
        <button id="show" class="show">show</button>
        <div> <img id="img" src="../a/images/1.png" alt=""></div>
        <input type="text" id="input">
        <p id="onmouseover">鼠标移入事件</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <script>
        let f = function(selector){
            this.querySelectorAll(selector);
        }
        f.prototype.querySelectorAll = function(selector){
            this.element = document.querySelectorAll(selector);
            return this.element;
        }
        // // 隐藏
        f.prototype.hide =function(){
            for(i=0;i<this.element.length;i++){
                this.element[i].style.display = 'none';
            }
        }
        // 显示
        f.prototype.show =function(){
            for(i=0;i<this.element.length;i++){
                this.element[i].style.display = 'block';
            }
        }
        // 事件
        f.prototype.click = function(click,ev){
            let c = click;
            // console.log(c);
            switch(true){
                //点击事件
                case c === 'onclick':
                    this.element[0].onclick = ev;
                    break;
                // 失去焦点事件
                case c === "onblur":
                    this.element[0].onblur = ev;
                    break;
                // 元素获得焦点
                case c === "onfocus":
                    this.element[0].onfocus = ev;
                    break;
                // 鼠标移入事件
                case c === "onmouseover":
                    this.element[0].onmouseover = ev;
                    break;
                // 鼠标移除事件
                case c === "onmouseout":
                    this.element[0].onmouseout = ev;
                    break;
            }
        }
        // css样式
        f.prototype.css = function(attr,value){
            this.element[0].style[attr] = value;
        }
        $ = function (selector){
            return new f(selector);
        }
 // 实例调试
        // 获取元素
        let hide = $('.hide');
        $('#hide');
        console.log($('#hide'));
        // 隐藏
        $('#hide').click('onclick',function(){
                $('#img').hide();
            });
        // 显示
        $('.show').click('onclick',function(){
                $('#img').show();
            });
        // 失去焦点
        $('#input').click('onblur',function(){
            console.log(1111);
        });
        // 元素获得焦点
        $('#input').click('onfocus',function(){
            console.log(2222);
        });
        // 鼠标移入事件
        $('#onmouseover').click('onmouseover',function(){
            console.log(3333);
        });
        // 鼠标移除事件
        $('#onmouseover').click('onmouseout',function(){
            console.log(4444);
        });
        // css样式
        $('ul').css('color','red');
        $('ul').css('background','coral');
        $('ul').css('width','100px');
    </script>
</body>
</html>
仿jquery选择器 ，事件，css封装

相关文章
