封装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 = arrayarray.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>