javascript封装函数仿jQuer选择器（日常基本够用）

来源：互联网发布：云端分享软件编辑：程序博客网时间：2024/05/21 14:45

因为不想写那么多的document.get…..所以就封装了一个玩意，于是乎，他就诞生了。和jQuery当然差很多了，不过作为日常娱乐，小小的方便还是可以的，在不能用jq又能用js的DOM时候，就可以派上用场了~~~~

用法：

id选择器 (id前面必须加#号)

getDom('#id');

class选择器 (class名前面必须加 . )

getDom('.class');

name选择器 (前面必须加上%号之后直接写上name的属性值即可)

getDom('%nameValue');

data-*自定义属性选择器 (必须传入三个参数，分别是：标签名，自定义属性名, 自定义属性值)

getDom('div','data-id','123456');

标签名选择器 (直接写上标签名即可)

getDom('div');

注意事项：因为class,标签名，name, 自定义属性等选择器在js当中都必须指定下标才可以使用时间，因为为了更灵活，所以代码中并没有默认[0]就是第一个元素为触发元素，需要自行添加上去,下面举个栗子

//class,标签名，name，自定义属性选择器处理都一样 getDom('.class')[0].onclick = function() {} //为第一个元素添加事件getDom('.class')[1].onclick = function() {} //为第二个元素添加事件var className = getDom('.class');for (var i = 0; i < className.length; i++) {  className[i].onclick = function () {} //为所有元素添加事件}

代码部分：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">    </head>    <body>        <button id="myBtn" class="mys" name='dd'>点击这里</button>        <div class="mys">99</div>        <div class="mys" data-id='123456'>88</div>        <div class="mys" data-id='123456'>77</div>        <p id="demo"></p>        <script>            //javascript自定义函数封装类似jQuery选择器            function getDom (str,attr,value) {                if (str) {                    var strVal = str.substr(1);                    if (str.substr(0, 1) == '#') {                        //id选择器                        return document.getElementById(strVal);                    } else if(str.substr(0, 1) == '.') {                        //class选择器                        return document.getElementsByClassName(strVal)                    } else if(str.substr(0, 1) == '%') {                        //name选择器                        return document.getElementsByName(strVal);                    } else if (attr.substr(0, 5) == 'data-') {                        //data-* 自定义属性选择器                        var aElements = document.getElementsByTagName(str);                        var aEle = [];                        for(var i = 0; i < aElements.length; i++) {                            if(aElements[i].getAttribute(attr) == value)                                aEle.push(aElements[i]);                        }                        return aEle;                                        } else {                        //标签名选择器                        return document.getElementsByTagName(str)                    }                } else {                    return str;                }            }            var dataId = getDom('div','data-id','123456');            for(var i = 0; i < dataId.length; i++) {                dataId[i].onclick = function () {                    displayDate()                }            }            function displayDate () {                getDom("#demo").innerHTML = Date();            }        </script>    </body></html>

阅读全文

0 0