// 考虑到兼容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. nginx.config 多个方案解决跨域问题

    #user nobody; user sam owner; worker_processes 1; #error_log logs/error.log; #error_log logs/error.l ...

  2. RXJAVA源码之多线程

    在不指定线程的情况下, RxJava 遵循的是线程不变的原则,即:在哪个线程调用 subscribe(),就在哪个线程生产事件:在哪个线程生产事件,就在哪个线程消费事件.如果需要切换线程,就需要用到 ...

  3. RIP思维导图

  4. 微信小程序-实现文字跑马灯-wepy

    百度蛮多例子的,但是代码太长懒得看了 前言 要实现跑马灯主要就是获得判断开始定界和结束定界, 1.9.3新增的wxml操作接口 就可以拿到节点长宽等属性,当然你也可以直接用 文字数量 * 文字大小(注 ...

  5. （转载）浏览器 user-agent 字符串的故事

    本文转载自:http://www.cnblogs.com/ifantastic/p/3481231.html. 如有侵权,请联系处理!   你是否好奇标识浏览器身份的User-Agent,为什么每个浏 ...

  6. Python练习题 019：求分数序列之和

    [Python练习题 019] 有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13...求出这个数列的前20项之和. --------------------------------- ...

  7. Java知识系统回顾整理01基础01第一个程序01JDK 安装

    一.首先第一步看JDK配置成功后的效果 点WIN键->运行(或者使用win+r) 输入cmd命令 输入java -version 注: -version是小写,不能使用大写,java后面有一个空 ...

  8. 达梦产品技术支持培训-day7-DM8数据库备份与还原-原理

    (本文部分内容摘自DM产品技术支持培训文档,如需要更详细的文档,请查询官方操作手册,谢谢) 1.DM8备份还原简介 1.1.基本概念 (1)表空间与数据文件 ▷ DM8表空间类型: ▷ SYSTEM ...

  9. Django Croppie

    下载 Django CroppieDjango Croppie django -croppie是一个简单集成croppie.js图像cropper到django项目的应用程序. 安装 安装与pip安装 ...

  10. 第五周：面向对象部分内容总结（5）---java设计规则

    面向对象设计原则 1.开闭原则 开闭原则理解: 简单说就是一个软件实体支持扩展,不支持修改.就是在不改变源码的基础上,扩展其它的功能. 其实笔者认为,开闭原则无非就是想表达这样一层意思:用抽象构建框架 ...