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('bold') // 插入 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

你可能感兴趣的:(jQuery基本实现思路)