使用原生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 阅读(179) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

365/24/60

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

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

文章分类

文章档案

阅读排行榜