jQuery~函数封装记1

获取某元素的所有兄弟元素、添加或删除某个元素的class属性

window.jQuery = function (nodeOrSelector) {
    var node;
    if (typeof nodeOrSelector === 'string') {
        node = document.querySelector(nodeOrSelector);
    } else {
        node = nodeOrSelector;
    }//判断输入的内容是不是选择器
    return {//返回一个哈希
        //获取兄弟元素
        getSiblings: function () {
            var allChild = node.parentNode.children;
            var array = {
                length: 0
            }; //空伪数组
            for (var i = 0; i < allChild.length; i++) {
                if (allChild[i] !== node) {
                    array[array.length] = allChild[i];
                    array.length += 1;
                }
            }
            return array;
        },
        //添加或删除某个class属性
        addClass: function (classes) {
            for (var key in classes) {
                var value = classes[key];
                var methodName = value ? 'add' : 'remove';
                node.classList[methodName](key);
            }
        }
    }
}

//  window.$ = jQuery
//  var $xxx = $(item3);
//   console.log(xxx.getSiblings());
//   $xxx.addClass({
//     'a': true,
//     'b': false,
//     'c': true
//   })    

 

增删多个元素的class属性,批量修改或获取文本内容

window.jQuery = function (nodeOrSelector) {
    var nodes = {}//闭包隐藏变量
    if (typeof nodeOrSelector === 'string') {//如果输入的是字符串
        var temp = document.querySelectorAll(nodeOrSelector)//伪数组
        for (var i = 0; i < temp.length; i++) {
            nodes[i] = temp[i];
        }
        nodes.length = temp.length;//纯净公用属性
    } else if (nodeOrSelector instanceof Node) {//如果输入的是个节点
        nodes = {
            0: nodeOrSelector,
            length: 1
        }//判断输入的内容是不是选择器
    }
    nodes.addClass = function (classes) {//闭包匿名函数
        classes.forEach((value) => {
            for (var i = 0; i < nodes.length; i++) {
                nodes[i].classList.add(value);
            }
        });
    }
    //批量获取或修改文本内容
    nodes.text = function (text) {
        if (text === undefined) {
            var texts = [];
            for (var i = 0; i < nodes.length; i++) {
                texts.push(nodes[i].textContent);
            }
            return texts;
        } else {
            for (var i = 0; i < nodes.length; i++) {
                nodes[i].textContent = text;
            }
        }
    }
    return nodes;
}

//wondow.$=jQuery
// var $node2 = $('ul>li');
// $node2.addClass(['red']);
//获取文本
// var $txt= $node2.text();
// console.log(txt);
//设置文本
//nodes.text('xxx')

 

posted @ 2019-07-06 17:09  BUBU_Sourire  阅读(192)  评论(0编辑  收藏  举报