JS自定义选择器

最新推荐文章于 2024-05-24 00:34:26 发布

小图

最新推荐文章于 2024-05-24 00:34:26 发布

阅读量1.8k

点赞数

分类专栏： H5 文章标签： javascript 对象选择器

本文链接：https://blog.csdn.net/xiaotuwy/article/details/53065535

版权

H5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

选择器部分：

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

收藏

觉得还不错? 一键收藏
0
评论
JS自定义选择器

选择器部分：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] =
复制链接

扫一扫