使用原生js模拟jQuery选择器，实现new方法，兼容ie5
// 考虑到兼容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的更多相关文章
- 原生JS模拟jQuery $
模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...
- 原生js模拟jquery写法
function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...
- 原生js模拟jquery中的addClass和removeClass方法
js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...
- 原生JS和jQuery创建元素的方法
jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js仿jquery一些常用方法
原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原 ...
随机推荐
- JavaScript 异步编程
博客地址:https://ainyi.com/96 众所周知,JavaScript 是单线程的,但异步在 js 中很常见,那么简单来介绍一下异步编程 同步编程和异步编程 同步编程,计算机一行一行按顺序 ...
- [LeetCode]15. 三数之和（数组）（双指针）
题目 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中不可以包含重复的三 ...
- 软件测试----xml文件介绍
软件测试 目录 软件测试 一.什么是XML?: 二.XML和HTML的差异: 三.XML的特点 1.XML可以自定义标签 2.XML必须包含根元素 如上所示, 3.XML标签对大小写敏感 4.XML ...
- C#开发PACS医学影像处理系统(十六)：2D处理之影像平移和缩放
1.平移,利用WPF中控件边距来控制位移: /// <summary> /// 平移图像 /// </summary> /// <param name="X&q ...
- Arnold变换（猫脸变换）
Arnold变换是Arnold在遍历理论研究中提出的一种变换.由于Arnold本人最初对一张猫的图片进行了此种变换,因此它又被称为猫脸变换.Arnold变换可以对图像进行置乱,使得原本有意义的图像变成 ...
- 虚拟机系列 | JVM特点，基础结构与执行周期
本文源码:GitHub·点这里 || GitEE·点这里 一.虚拟机简介 1.虚拟机概念 虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整 ...
- python3 连接数据库~
~目前记录的是针对python3写的数据库连接,不适用于pyhon2.python3如果想要与数据库进行连接,则需要先下载对应各数据库的插件包,然后导入包.python3的插件下载地址:https:/ ...
- 大话Python函数底层逻辑
函数 叫 子过程或子程序 描叙的更为贴近实际应用场景 这和数学中的函数实现上不同但语义上相识,如 f(x) = expressiom, 给定一个确定的输入必然返回一个确定的输出 数学中函数的关系是通过 ...
- 012 01 Android 零基础入门 01 Java基础语法 02 Java常量与变量 06 浮点型“字面值”
012 01 Android 零基础入门 01 Java基础语法 02 Java常量与变量 06 浮点型"字面值" 浮点型字面值 首先要知道一点:在整型部分中,默认情况下,即整型数 ...
- 用C写一个简单的推箱子游戏（二）
下面接着上一篇随笔<用C写一个简单的推箱子游戏(一)>来写 tuidong()函数是用来判断游戏人物前方情况的函数,是推箱子游戏中非常重要的一个函数,下面从它开始继续介绍推箱子的小程序怎么 ...