jquery

作者: pawN_f294 | 来源:发表于2018-05-02 00:48 被阅读0次

    一、jquery函数会返回一个对象,通过传入一个CSS选择器字符串或者是一个DOM对象作为参数,来拿到包装过的对象。
    该对象上面有包括我们需要的功能函数,这些功能函数会通过闭包来拿到该包装对象,执行对应的操作。

        window.jQuery = function (selector) {
          var node = {};
          if (typeof selector === 'string') { // 判断是否为css选择字符串
            // 如果是就用querySelectorAll选取它,拿到我们想要的属性。
            var temp = document.querySelectorAll(selector);
            for (let i = 0; i < temp.length; i++) {
              node[i] = temp[i]
            }
            node.length = temp.length;
          } else if (selector instanceof Node){ // 如果是一个DOM对象
            node[0] = selector;
            node.length = 1;
          } else {
            throw new Error('只支持css选择器和DOM对象');
          }
          
          // 提供给外部的API
          node.addClass = function (classes) {
            var classArr = classes.split(' ');
            for (var i = 0; i < node.length; i++) {
              for (var j = 0; j < classArr.length; j++) {
                node[i].classList.add(classArr[j]);
              }
            }
            return node;
          }
    
          node.setText = function (string) {
            for(var i = 0; i < node.length; i++) {
             node[i].textContent = string;
            }
            return node;
          }
          return node;
        }
        jQuery('ul > li').setText('hi').addClass('red')
    

    每个API都会返回该包装对象,可以进行链式操作。

    相关文章

      网友评论

          本文标题:jquery

          本文链接:https://www.haomeiwen.com/subject/gzzfrftx.html