// 考虑到兼容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. pycharm代码中批量粘贴内容的快捷键

    windows电脑中,竖向批量复制的快捷键:Alt

  2. 一篇文章说清楚TDengine的FQDN

    TDengine2.0以后需要使用FQDN来进行访问.小朋友,你是否有很多小问号:什么是FQDN,为什么要配置FQDN,如何配置FQDN.我们今天来简单讲一下.心急的小伙伴,可以直接跳转到配置章节. ...

  3. Linux实战（13）：Centos8 同步时间

    前言 以下操作是通过ntpdate命令实现同步 timedatectl set-timezone Asia/Shanghai # 设置时区 rpm -ivh http://mirrors.wlnmp. ...

  4. Linux实战（6）：Centos8上传镜像

    小记 做以下操作之前得准备一个Docker Hub 的账号,然后创建仓库可私有也可公有这得看你自己了,仓库的名称需记住等等会有用. 安装podman podman跟docker使用的命令非常的接近,但 ...

  5. php post数据丢失

    from的enctype="multipart/form-data" php版本5.6.6 问题:部分POST数据接收不到 追源代码发现是php中max_input_vars配置造 ...

  6. java执行器

    Executor 执行已提交的 Runnable 任务对象.此接口提供一种将任务提交与每个任务将如何运行的机制(包括线程使用的细节.调度等)分离开来的方法.Executor 接口并没有严格地要求执行是 ...

  7. 用 Java 做个“你画手机猜”的小游戏

    本文适合有 Java 基础的人群 作者:DJL-Lanking HelloGitHub 推出的<讲解开源项目>系列.有幸邀请到了亚马逊 + Apache 的工程师:Lanking( htt ...

  8. java安全编码指南之:可见性和原子性

    目录 简介 不可变对象的可见性 保证共享变量的复合操作的原子性 保证多个Atomic原子类操作的原子性 保证方法调用链的原子性 读写64bits的值 简介 java类中会定义很多变量,有类变量也有实例 ...

  9. Zookeeper 笔记小结

    转自: https://www.cnblogs.com/raphael5200/p/5285583.html  1.Zookeeper的角色 » 领导者(leader),负责进行投票的发起和决议,更新 ...

  10. UltraEdit文字编辑器菜单热键推荐

    键盘映射和自定义菜单热键 任何使用过UltraEdit / UEStudio一段时间的人都可能会告诉您,他们如此喜欢它的原因之一是"几乎所有东西都是可定制的".看一下产品鉴定,您会 ...