jquery

一、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都会返回该包装对象,可以进行链式操作。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,203评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,394评论 0 2
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,686评论 18 503
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,482评论 0 44
  • 选择器选择器是jQuery的核心。 事件 动画 扩展
    wyude阅读 491评论 0 1