JS自定义选择器

来源：互联网发布：mac系统密码忘记编辑：程序博客网时间：2024/04/28 13:23

选择器部分：

var jojo = (function () {    var jojo = function (arr) {        var _this = this, i = 0;        // Create array-like object        for (i = 0; i < arr.length; i++) {            _this[i] = arr[i];        }        _this.length = arr.length;        return this;    };    var $ = function (selector, context) {        var arr = [], i = 0;        if (selector && !context) {            if (selector instanceof jojo) {                return selector;            }        }        if (selector) {            // String            if (typeof selector === 'string') {                var els, tempParent, html = selector.trim();                if (html.indexOf('<') >= 0 && html.indexOf('>') >= 0) {                    var toCreate = 'div';                    if (html.indexOf('<li') === 0) toCreate = 'ul';                    if (html.indexOf('<tr') === 0) toCreate = 'tbody';                    if (html.indexOf('<td') === 0 || html.indexOf('<th') === 0) toCreate = 'tr';                    if (html.indexOf('<tbody') === 0) toCreate = 'table';                    if (html.indexOf('<option') === 0) toCreate = 'select';                    tempParent = document.createElement(toCreate);                    tempParent.innerHTML = selector;                    for (i = 0; i < tempParent.childNodes.length; i++) {                        arr.push(tempParent.childNodes[i]);                    }                }                else {                    if (!context && selector[0] === '#' && !selector.match(/[ .<>:~]/)) {                        // Pure ID selector                        els = [document.getElementById(selector.split('#')[1])];                    }                    else {                        // Other selectors                        els = (context || document).querySelectorAll(selector);                    }                    for (i = 0; i < els.length; i++) {                        if (els[i]) arr.push(els[i]);                    }                }            }            // Node/element            else if (selector.nodeType || selector === window || selector === document) {                arr.push(selector);            }                       else if (selector.length > 0 && selector[0].nodeType) {                for (i = 0; i < selector.length; i++) {                    arr.push(selector[i]);                }            }        }        return new jojo(arr);    };    jojo.prototype={            };    $.fn=jojo.prototype;    return $;})();

测试部分：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>自定义选择器</title><script type="text/javascript" src="customSelector.js"></script><style> .item{width:100%;height:40px;line-height:40px;text-align: center;border: 1px solid #e6e6e6;margin-top:20px; }</style></head><body><div id="test1" class="item">测试文案1</div><div class="item test2">测试文案2</div></body></html><script type="text/javascript">var t1=jojo('#test1');var t2=jojo('.test2');t1[0].addEventListener('click', function(){alert(t1[0].textContent);});t2[0].addEventListener('click', function(){alert(t2[0].textContent);});</script>

0 0