// 考虑到兼容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. 痞子衡嵌入式：IAR在线调试时设不同复位类型可能会导致i.MXRT下调试现象不一致(J-Link / CMSIS-DAP)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是IAR在线调试时设不同复位类型可能会导致i.MXRT下调试现象不一致. 做Cortex-M内核MCU嵌入式软件开发,可用的集成开发环境( ...

  2. [补题]求a[i]+a[j]+i-j的最大值，要求i<j

    题目 如题. 例: 输入: 5 11 6 5 18 12 输出: 29 题解 思路: 一直是按着(a[i]+a[j])+(i-j)想后序的思路,不应该限制住自己,应该多考虑拆的方法.正确思路是把a[i ...

  3. ARL(资产侦察灯塔系统)-源码搭建

    freebuf能力中心开源了一套资产扫描系统(https://github.com/TophantTechnology/ARL),提供docker版,但并无源码搭建的文档(无完整文档).于是在星光哥及 ...

  4. 并发编程（六）Object类中线程相关的方法详解

    一.notify() 作用:唤醒一个正在等待该线程的锁的线程 PS : 唤醒的线程不会立即执行,它会与其他线程一起,争夺资源 /** * Object类的notify()和notifyAll()方法详 ...

  5. Java Web学习（二）数据加密

    一.Tomcat 体系 首先通过一幅图来了解下tomcat的运行体系: Tomcat服务器的启动是基于一个server.xml文件的. 启动流程: 首先启动一个Server,Server里面就会启动S ...

  6. java内存屏障

    为什么会有内存屏障 每个CPU都会有自己的缓存(有的甚至L1,L2,L3),缓存的目的就是为了提高性能,避免每次都要向内存取.但是这样的弊端也很明显:不能实时的和内存发生信息交换,分在不同CPU执行的 ...

  7. SolrJ使用

    1 //向solr索引库中添加索引 2 public void addDoc() throws Exception { 3 //创建solr客户端的对象 4 HttpSolrClient client ...

  8. Spring 配置文件AOP

    1 <!-- 配置切面bean --> 2 <bean id="permAspect" class="com.tx.spring.aspect.Perm ...

  9. CTFshow_Web入门源码

    Web1 题目打开始是这样的 直接看源码 Web2 题目打开是这样的,右键无法打开菜单,无法查看源码,F12也不可以 更改JavaScript权限,即可查看源码 Web3 真就抓个包看看 Web4 访 ...

  10. Linux安装软件方法总结

    相比于windows系统,Linux安装程序就比较复杂了,很多需要root用户才能安装.常见的有以下几种安装方法 源码安装 rpm包安装 yum安装 (RedHat.CentOS) apt-get安装 ...