Fork me on GitHub

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

使用原生js模拟jQuery选择器,实现new方法,兼容ie5

// 考虑到兼容ie5,未使用es6语法
/* 使用方法:
在<head>标签中(需使用ready方法):
  <script src="./jQuery2.js"></script>
  <script>
    var jQuery = new jQuery()
    $ = jQuery.dealParams
    jQuery.ready(function(){
      console.log($('#list'));
      console.log($('li'));
      console.log($('li #div1'));
    })
  </script>
*/
var retElement = []
// 多种选择条件用空格分开
function dealParams(params){
  retElement = []
  // 如果存在多项选择条件,处理一下参数
  var paramsList = params.split(' ')
  retElement = selectElement(paramsList.shift())
  var param = paramsList.shift()
  console.log(retElement);
  while(param){
    retElement =  arrayFilter(retElement,param)
    param = paramsList.shift()
    console.log(retElement);
  }
  return retElement
}
function arrayFilter(arr,requestion) {
  // 进行多轮选择
  // 如需实现 原生jquery中$(':first/:even')在此步基础上做进一步处理
  var newArr = []
  switch(requestion[0]){
    case '.':
      for(var i =0 ;i< arr.length ; i++){
        if(arr[i].className === requestion.slice(1)) newArr.push(arr[i])
      }
      break;
    case '#':
      for(var i =0 ;i< arr.length ; i++){
        if(arr[i].id === requestion.slice(1)) newArr.push(arr[i])
      }
      break;
    default:
      for(var i =0 ;i< arr.length ; i++){
        if(arr[i].tagName === requestion) newArr.push(arr[i])
      }
      break;
  }
  return newArr
}
// 根据参数选择不同方式
function selectElement(param){
  console.log(param);
  // 每次查询前初始化
  var body = document.getElementsByTagName('body')
  nodeQueue = [body[0]]
  if(!param) return []
  // 还未做链式查询
  switch(param[0]){
    case '.':
      return selectClass(param.slice(1));
    case '#':
      return selectId(param.slice(1));
    default:
      return selectTag(param.toUpperCase())
  }
}
// 几种不同的选择方式
function selectClass(classN){
  while (nodeQueue.length) {   
    var curNode = nodeQueue.shift()
    if(curNode.className === classN) retElement.push(curNode) 
    for(var i =0 ;i<curNode.childNodes.length;i++){
      if (curNode.childNodes[i].nodeType === 1 && curNode.childNodes[i].tagName !== 'SCRIPT') { 
        nodeQueue.push(curNode.childNodes[i])    
      }   
    }
  }
  return retElement
}
function selectTag(tagN){
  while (nodeQueue.length) {   
    var curNode = nodeQueue.shift()
    if(curNode.tagName === tagN) retElement.push(curNode)
    for(var i =0 ;i<curNode.childNodes.length;i++){
      if (curNode.childNodes[i].nodeType === 1 && curNode.childNodes[i].tagName !== 'SCRIPT') { 
        nodeQueue.push(curNode.childNodes[i])    
      }   
    }
  }
  return retElement
}
function selectId(id){
  while (nodeQueue.length) {   
    var curNode = nodeQueue.shift()
    if(curNode.id === id) return curNode;// ie只会显示当前节点,实际上可以取到属性
    for(var i =0 ;i<curNode.childNodes.length;i++){
      if (curNode.childNodes[i].nodeType === 1 && curNode.childNodes[i].tagName !== 'SCRIPT') { 
        nodeQueue.push(curNode.childNodes[i])    
      }   
    }
  }
  return null
}
function ready(callback){
  window.onload = callback
}
function jQuery() {
  this.dealParams =  dealParams;
  this.selectElement = selectElement,
  this.ready = ready
}
posted @ 2020-10-19 16:40  365/24/60  阅读(134)  评论(0编辑  收藏  举报