// 考虑到兼容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. Docker镜像下载很慢，各种加速无效

    mcr.microsoft.com/dotnet/......   改成: dockerhub.azk8s.cn/dotnet/...... 或 mcr.azk8s.cn/dotnet/......

  2. bernoulli, multinoulli distributions 讲解

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

  3. 乔悟空-CTF-i春秋-Web-Backdoor

    2020.09.05 每次遇到不会的,想两分钟就放弃了,直接奔wp,一看wp发现,wc,就这?我怎么没想到--心里想着下道题一定自己想,不看wp,然后周而复始

  4. PHP7做了哪些优化

    一  zval使用栈内存 在Zend引擎和扩展中,经常要创建一个PHP的变量,底层就是一个zval指针.之前的版本都是通过MAKE_STD_ZVAL动态的从堆上分配一个zval内存.而PHP7可以直接 ...

  5. IDEA 2020.2安装破解版教程激活码注册码破解补丁 for Mac Windows Linux-中关村老大爷

    IntelliJ Idea Ultimate 2020.2.x版软件最新安装破解版教程方法,本教程提供Idea Ultimate 2020.2版安装包,破解补丁,激活码,亲测100%完美破解激活,支持 ...

  6. 突然挂了！Redis缓存都在内存中，这下完了！

    我是Redis,一个叫Antirez的男人把我带到了这个世界上. “快醒醒!快醒醒!”,隐隐约约,我听到有人在叫我. 慢慢睁开眼睛,原来旁边是MySQL大哥. “我怎么睡着了?” “嗨,你刚才是不是出 ...

  7. hystrix(1) 概述

    首先我们来讲一下hystrix解决什么问题.在大型分布式系统中经常会存在下面的几类问题: 1.大型分布式系统中,服务之间相互依赖,如果依赖的服务发生异常,那么当前服务也会出现异常,这样将会导致联级的服 ...

  8. Spring系列 之数据源的配置 数据库 数据源 连接池的区别

    Spring系列之数据源的配置 数据源,连接池,数据库三者的区别 连接池:这个应该都学习过,比如c3p0,druid等等,连接池的作用是为了提高程序的效率,因为频繁的去创建,关闭数据库连接,会对性能有 ...

  9. Spring ioc 源码分析之--beanFactory.registerResolvableDependency(）方法

    背景: 在spring ioc refresh()方法中,看到了如下逻辑: 要理解该逻辑的原理,先看场景:有个接口InterFaceA,它有2个实现类A1和A2 那么,如果一个类C 依赖了InterF ...

  10. 抛弃vue-webpack-template，踩坑Vue-Cli创建vue项目

    官方指导网站https://cli.vuejs.org/ 一.全局安装@vue/cli //本人包管理工具使用yarn yarn global add @vue/cli 安装完成 二.创建vue项目 ...