使用原生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一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原 ...
随机推荐
- 向你的C语言项目中加入多线程
C语言在标准库<pthread.h>中为程序员提供了多线程操作接口. 先从简单操作入手 int pthread_create(pthread_t *thread, pthread_attr ...
- SpringBoot 配置的加载
SpringBoot 配置的加载 SpringBoot配置及环境变量的加载提供许多便利的方式,接下来一起来学习一下吧! 本章内容的源码按实战过程采用小步提交,可以按提交的节点一步一步来学习,仓库地址: ...
- python爬取新浪财经
我们来获取这里的title和url然后再获取这里面url的编辑作者 可以看到右边的几个就对应的左边不同的div .m-p1-mb2-list.m-list-container ul li a impo ...
- Java多线程--创建和使用线程池
使用线程池的目的 线程是稀缺资源,不能频繁的创建 解耦作用:线程的创建与执行完全分开,方便维护 将其放入一个池子中,可以给其他任务进行复用 优点 降低资源消耗,通过重复利用已创建的线程来降低线程创建和 ...
- 什么是Python???
1.python是一种解释型语言,这就是说python不用像C语言或者C的衍生语言那样在执行前进行编译. 2.Python是一种动态类型的语言,就是python支持x = 111或者x="1 ...
- 初探JVM
JVM探究 请你谈谈你对JVM的理解?java8虚拟机和之前的变化更新? 什么是OOM,什么是栈溢出StackOverFlowError?怎么分析? JVM的常用调优参数? 内存快照如何抓取,怎么分析 ...
- 新手C++ 练习项目--计算器
本篇博客用于记录我自己用C++实现的一个计算器,目标是完成加减乘除带括号的四则运算,并在后期用工厂设计模式加以优化. Part 1:calculate 1+1=2 实现这样的一个式子的计算,只需要用到 ...
- Redis 作者 Antirez 与 Contributor Mattsta 之间关于 CRC 的 Battle
大家好,我是 yes. 昨天表弟说有个学妹问他 Redis 为什么要用 CRC16(key) mod 16384 来计算 key 所处槽的位置,我想这 CRC 一般都是用来校验的,通过多项式转换成二进 ...
- spark-2-RDD
RDD提供了一个抽象的数据架构,我们不必担心底层数据的分布式特性,只需将具体的应用逻辑表达为一系列转换处理,不同RDD之间的转换操作形成依赖关系,可以实现管道化,从而避免了中间结果的存储,大大降低了数 ...
- 开源两个spring api项目
开源两个spring api项目 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/13762616.html 工作也有五年有余了,中间一直迫于时间或能力没从零开 ...