// 考虑到兼容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

}

使用原生js模拟jQuery选择器，实现new方法，兼容ie5的更多相关文章

  1. 原生JS模拟jQuery $

    模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...

  2. 原生js模拟jquery写法

    function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...

  3. 原生js模拟jquery中的addClass和removeClass方法

    js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...

  4. 原生JS和jQuery创建元素的方法

    jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...

  5. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  6. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  7. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. 原生js仿jquery一些常用方法

    原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   最近迷上了原 ...

随机推荐

  1. bernoulli, multinoulli distributions 讲解

    bernoulli, multinoulli distributions 讲解   常用概率分布-Bernoulli 分布 & Multinoulli 分布 转自:迭代自己-19常用概率分布 ...

  2. 《C++深度解析》课程目录

    <C++深度解析>课程目录 第1课 - 学习 C++ 的意义 第2课 - C到C++的升级     第3课 - 进化后的const分析 第4课 - 布尔类型和引用 第5课 - 引用的本质分 ...

  3. 老生常谈SpringAop日志收集与处理做的工具包

    AopLog是基于Spring Aop 和ThreadLocal实现的一个专门对请求方法内容日志的拦截与处理的日志工具包. 场景 : 我想知道一些重要的请求方法的请求参数,响应参数,请求头,以及耗时, ...

  4. 1.7Hadoop-HDFS命令

  5. 这10道springboot常见面试题你需要了解下

    ​ 1.什么是Spring Boot? 多年来,随着新功能的增加,spring变得越来越复杂.只需访问https://spring.io/projects页面,我们就会看到可以在我们的应用程序中使用的 ...

  6. 转载：python的format格式化输出

    https://www.cnblogs.com/chunlaipiupiupiu/p/7978669.html python中format函数   ---恢复内容开始--- python中format ...

  7. MySQL存储引擎入门介绍

    什么是MySQL? MySQL 是一种关系型数据库,在Java企业级开发中非常常用,因为 MySQL 是开源免费的,并且方便扩展.阿里巴巴数据库系统也大量用到了 MySQL,因此它的稳定性是有保障的. ...

  8. Centos-对比文件差异-diff

    diff 比较文件差异 相关选项 -c 显示全部内容,并标记不同之处 -b 忽略行尾空格,并认为字符串中一个或多个空格视为相同 -r  当比较双方都是目录时,会比较子目录中的文件 -s 当两个文件相同 ...

  9. milvus和faiss安装及其使用教程

    写在前面 高性能向量检索库(milvus & faiss)简介 Milvus和Faiss都是高性能向量检索库,可以让你在海量向量库中快速检索到和目标向量最相似的若干个向量,这里相似度量标准可以 ...

  10. Linux系统编程—信号集操作函数

    先来回顾一下未决信号集是怎么回事. 信号从产生到抵达目的地,叫作信号递达.而信号从产生到递达的中间状态,叫作信号的未决状态.产生未决状态的原因有可能是信号受到阻塞了,也就是信号屏蔽字(或称阻塞信号集, ...