jQuery基本实现思路

转载来至方应杭github

1 JS 基本知识

1.1 数组属于对象吗?
1.2. 函数属于对象吗?
1.3. 给数组加一个属性行吗?

  var array = []
  array.xxx = 2

2 DOM API 基本知识

2.1. 如果通过 ID 获取一个元素

  document.getElementById(id)
  document.querySelector(id)
  document.querySelectorAll(id)

2.2. 如何改变一个元素的属性(name、id、class、style)

  div.name ='xxx'
  div.id = 'yyy'
  div.classList.add
  div.style.border = '1px solid red'

API(结果)
// 我们的代码

  window.jQuery = ...
  window.$ = window.jQuery

// 别人的代码

  window.jQuery === window.$ 

  var $xxx = $('#xxx') // 得到对应的元素的封装

  var div = $xxx[0]

  $xxx.on('click', function(){})
  $xxx.addClass('c1')
  $xxx.removeClass('c2')
  $xxx.toggleClass('c3')
  $xxx.text()  // innerText
  $xxx.text('hi') // 就会将 xxx 元素的内容设置为 hi
  $xxx.html() // innerHTML
  $xxx.html('<b>bold</b>') // 插入 html 到元素中

  $xxx.addClass('c4').text('hi').on('click', function(){})

  $xxx.on('click', function(){})

  $xxx.find('p').end() === $xxx

// 我的代码

  window.jQuery = function(selectorOrElements){
    var array = []

    if(typeof selectorOrElements === 'string'){
      var elements = document.querySelectorAll(selectorOrElements)

      for(var i=0; i<elements.length; i++){
        array.push(elements[i])
      }
    }else if(selectorOrElements instanceof Array){
      for(var i=0; i<selectorOrElements.length; i++){
        array.push(selectorOrElements[i])
      }
      array.previousSelection = selectorOrElements.previousSelection
    }

    array.on = function(eventType, fn){
      for(var i=0; i<array.length; i++){
        array[i].addEventListener('click', fn)
      }
      return array
    }
    array.addClass = function(className){
      for(var i=0; i<array.length; i++){
        array[i].classList.add(className)
      }
      return array
    }
    array.removeClass = function(className){
      for(var i=0; i<array.length; i++){
        array[i].classList.remove(className)
      }
      return array
    }
    array.toggleClass = function(className){
      for(var i=0; i<array.length; i++){
        array[i].classList.toggle(className)
      }
      return array
    }
    array.text = function(value){
      if(value === undefined){
        var result = []
        for(var i=0; i<array.length; i++){
          result.push(array[i].textContent)
        }
        return result
      }else{
        for(var i=0; i<array.length; i++){
          array[i].textContent = value
        }
        return array
      }

    }
    array.html = function(htmlString){
      if(htmlString === undefined){
        var result = []
        for(var i=0; i<array.length; i++){
          result.push(array[i].innerHTML)
        }
        return result
      }else{
        for(var i=0; i<array.length; i++){
          array[i].innerHTML = htmlString
        }
        return array
      }
    }

    array.find = function(selector){
      var array2 = []
      for(var i=0; i<array.length; i++){
        var elements = array[i].querySelectorAll(selector)
        for(var j=0; j<elements.length; j++){
          array2.push(elements[j])
        }
      }
      array2.previousSelection = array
      var _array = jQuery(array2)
      return _array
    }

    array.end = function(){
      return array.previousSelection
    }

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,860评论 18 139
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,112评论 6 13
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,742评论 18 399
  • webpack config scss
    Vijay_阅读 1,196评论 0 0
  • 公元2017年11月16日 【功课检视】 每天静坐5分钟 至简心法朗读 起心N维在无穷,存在至简正弦涌,一切呈现投...
    般若明阅读 707评论 0 1