找回密码
当前位置：前端开发者 > JavaScript > 正文

前端js选择器封装

2018-11-12 20:41:48 分类：JavaScript 阅读(66) 评论(0)
谷歌浏览器的前端开发工具
wps前端开发工具
前端界面开发工具

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <title>documents</title>
        <meta name=”description” content=”” />
        <meta name=”keywords” content=”” />
        <link href=”” rel=”stylesheet” />
        <style type=”text/css”>
            .box {
                height: 100px;
                width: 100px;
                background: red;
                float: left;
                margin: 10px;
                transition: opacity linear 0.8s;
            }
            #box {
                height: 100px;
                width: 100px;
                background: yellow;
                margin: 10px;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class=”box”></div>
        <div class=”box”></div>
        <div class=”box”></div>
        <div class=”box”></div>
        <div id=”box”></div>
        <script type=”text/javascript”>
            // class的封装
            function $(tar) {
                if (tar == undefined) return
                if (tar.match(/\./)) {
                    var classN = tar.split(‘.’)
                    if (!document.getElementsByClassName) {
                        console.log(1)
                        return getClass(classN)
                    } else {
                        console.log(2)
                        return document.getElementsByClassName(classN[1])
                    }
                } else if (tar.match(/\#/)) {
                    var idTar = tar.split(‘#’)
                    var getId = document.getElementById(idTar[1])
                    return getId
                } else {
                    return document.getElementsByTagName(tar)
                }
            }
            function getClass(obj) {
                var allTar = document.getElementsByTagName(‘*’)
                var arr = []
                for (var i = 0; i < allTar.length; i++) {
                    if (allTar[i].className == obj[1]) {
                        arr.push(allTar[i])
                    }
                }
                return arr
            }
            //事件监听
            var eventUtil = {
                addEvent: function(obj, type, fn) {
                    if (obj.addEventLisenter) {
                        obj.addEventLisenter(type, fn, false)
                    } else if (obj.attachEvent) {
                        obj.attachEvent(‘on’ + type, fn)
                    } else {
                        obj[‘on’ + type] = fn
                    }
                },
                removeEvent: function() {
                    if (obj.removeEventLisenter) {
                        obj.removeEventLisenter(type, fn, false)
                    } else if (obj.detachEvent) {
                        obj.detachEvent(‘on’ + type, fn)
                    } else {
                        obj[‘on’ + type] = null
                    }
                },
            }
            eventUtil.addEvent($(‘#box’), ‘click’, function() {
                console.log(‘addEventLisenter’)
            })
            // $(obj).prototype={
            // addEvent:function(obj,type,fn){
            // if(obj.addEventLisenter){
            // obj.addEventLisenter(type,fn,false);
            // }else if(ele.attachEvent){
            // obj.attachEvent(‘on’+type,fn)
            // }else{
            // obj[“on”+type]=fn;
            // }
            // }
            // }
            // $()prototype.on(type,fn)
            // $(obj).onclick=function(){
            // }
        </script>
    </body>
</html>
前端h5游戏开发工具
linux前端开发工具
前端开发是用什么开发工具
» 本文来自：前端开发者 » 《前端js选择器封装》
» 本文链接地址：https://www.rokub.com/6367.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论