zoukankan      html  css  js  c++  java
  • 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')
  • 相关阅读:
    ss
    Linux vmstat命令实战详解
    【好书摘要】性能优化中CPU、内存、磁盘IO、网络性能的依赖
    mysql 数据库授权(给某个用户授权某个数据库)
    windows下mysql安装包安装
    053(五十五)
    053(五十四)
    053(五十三)
    053(五十二)
    053(五十一)
  • 原文地址:https://www.cnblogs.com/BUBU-Sourire/p/11143343.html
Copyright © 2011-2022 走看看