使用原生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一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原 ...
随机推荐
- JAVA基础知识之面向对象编程知识汇总
JAVA基础课程部分面向对象已经学习完成,知识结构如下: 总体知识框架: 类的结构: 面向对象编程三大特征: 关键字和抽象类接口等: 常见知识汇总: 成员变量和局部变量比较 有无返回值方法比较: 权限 ...
- k8s数据管理（八）
volume 我们经常会说:容器和 Pod 是短暂的.其含义是它们的生命周期可能很短,会被频繁地销毁和创建.容器销毁时,保存在容器内部文件系统中的数据都会被清除. 为了持久化保存容器的数据,可以使用 ...
- python语句与函数
赋值语句 : 分支语句 : 函数 :根据输入参数产生不同输出功能 程序的输入与输出 input() 从控制台获得用户输入的函数 使用格式 print()函数 以字符形式向控制台输出结果的函数 字符类型 ...
- git修改未push和已经push的注释信息
修改还未push的注释: git commit --amend 修改后保存退出. 刚刚push到远端还没有人其他人下载或改动的: git commit --amend1进入修改页面修改注释信息,修改后 ...
- python爬取花木兰豆瓣影评，并进行词云分析
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资 ...
- vulnhub靶机Os-hackNos-1
vulnhub靶机Os-hackNos-1 信息搜集 nmap -sP 192.168.114.0/24 找到开放机器192.168.114.140这台机器,再对这台靶机进行端口扫描. 这里对他的端口 ...
- burp suite之Target(目标)
Target : 将攻击的目标,全部展现到Target下. Site map:站点地图 Scope: 范围 目录爬行: 复制所有子目录的链接 Spidor this host: 发送至Spidor选项 ...
- NoActionBar主题下如何添加OptionsMenu
菜单无法显示 为了不显示标题栏,所以主题使用了 NoActionBar,这也直接导致选项菜单无处显示 解决方案 添加一个ToolBar,自定义标题栏 <androidx.appcompat.wi ...
- 使用内置对象Math.random实现猜数字游戏
function getRandom(min,max){ return Math.floor(Math.random()*(max-min+1))+min; //得到两个数之间的随机整数,包含实 ...
- 可变参数__VA_ARGS__使用
1. 调试功能一般会使用到宏+可变参数的方式 1.1 ##__VA_ARGS__ 之详细解析 例如: case A. #define my_print1(...) printf(__V ...