封装jQuery

封装jQuery

完成以下操作

1. $xxx.addClass(‘c1’)

2. $xxx.removeClass(‘c1’)

3. $xxx.toggleClass(‘c3’)

4. $xxx.text()

5. $xxx.text(‘hello’)

6. $xxx.html()

7. $xxx.html(‘< b >world< /b >’)

代码如下：

//html
<div class="xxx"></div>

//js 方法调用
var $xxx = $('.xxx')
$xxx.on('click', function(){
  console.log($xxx[0])
})

// $xxx.addClass('c1')

// $xxx.removeClass('c1')

// $xxx.toggleClass('c3')

// $xxx.text()

// $xxx.text('hello')

// $xxx.html()

// $xxx.html('<b>world</b>')

// js 定义方法
window.jQuery = function(selector){
    var array = []
    var elements = document.querySelectorAll(selector)

    for(var i=0; i < elements.length; i++){
      array.push(elements[i])
    }

    array.on = function(eventType, fn){
       for(var i=0; i< array.length; i++){
          array[i].addEventListener(eventType, fn)
       }
    }

    array.addClass = function(className){
      for(var i=0; i<array.length; i++){
        array[i].classList.add(className)
      }
    }

    array.removeClass = function(className){
      for(var i=0; i<array.length; i++){
        array[i].classList.remove(className)
      }
    }

    array.toggleClass = function(className){
      for(var i=0; i<array.length; i++){
        array[i].classList.toggle(className)
      }
    }

    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
        }
      }
    }

    array.html = function(string){
      if(string === 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 = string
        }
      }
    }

    return array
}
window.$ = window.jQuery

若使用链式调用，每一个方法都要返回array

$xxx.addClass('c1').text('hello')

array.addClass = function(className){
  for(var i=0; i<array.length; i++){
    array[i].classList.add(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
  }
}

若使用find()方法，采用递归方式

//html
<div class="xxx">
  <div class="hello"></div>
</div>

//find()
$xxx.find('.hello').addClass('world')

// find方法定义
array.find = function(selector){
  var newArray = []

  for(var i=0; i<array.length; i++){
    var elements = array[i].querySelectorAll(selector)
    for(var j=0; j<elements.length; j++){
      newArray.push(elements[j])
    }
  }

  return jQuery(newArray)
}

若使用end（）方法，使$xxx.find('p').end() === $xxx成立，需要记录之前的元素

var array = []

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

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


// find方法中 newArray.previousSelection = array
array.find = function(selector){
  var newArray = []

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

// end方法 返回之前的元素
array.end = function(){
  return array.previousSelection
}

源码：

jquery-demo.js

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

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

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

  array.on = function(eventType, fn){
    for(var i=0; i< array.length; i++){
        array[i].addEventListener(eventType, 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(string){
    if(string === 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 = string
      }
      return array
    }
  }

  array.find = function(selector){
    var newArray = []

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

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

  return array
}
window.$ = window.jQuery

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="./jQuery-demo.js"></script>
  <style>
    .xxx{
      background: gray;
      margin-bottom: 10px;
      height: 30px;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="xxx">
    <div class="hello"></div>
  </div>
  <div class="xxx"></div>
  <script>
    var $xxx = $('.xxx')
    $xxx.on('click', function(){
      console.log($xxx[0])
    })

    // $xxx.addClass('c1')

    // $xxx.removeClass('c1')

    // $xxx.toggleClass('c3')

    // $xxx.text()

    // $xxx.text('hello')

    // $xxx.html()

    // $xxx.html('<b>world</b>')

    // $xxx.addClass('c1').text('hello')

    // $xxx.find('.hello').addClass('world')

    // console.log($xxx.find('p').end() === $xxx)
  </script>
</body>
</html>