使用原生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一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原 ...
随机推荐
- Ruby探微初步
我的导师,曾经对我说过,常规编程语言大抵不过顺序.条件.循环 接下来以Ruby为例,简单说说 控制语句 控制语句能让程序在某种条件下,改变执行顺序,或者只执行某一部分. 控制语句的分类 控制语句大致可 ...
- 再不迁移到Material Design Components 就out啦
翻译自国外文档加自己理解 原文 我们最近宣布了 Material Design Components(MDC)1.1.0 ,这是一个库更新,为您的 Android 应用程序带来了 Material T ...
- CentOS6.10下安装MongoDB和Redis
安装mongodb 首先考虑离线安装,但是安装过程中在启动服务的时候出现了问题,centOS出于稳定原因考虑,系统自带的glibc版本过低, 而编译需要使用较高版本,这个问题我查询了一下,需要升级gl ...
- spring标签之SCOPEprototype
默认情况下,从 bean工厂所取得的实例为Singleton(bean的singleton属性) Singleton: Spring容器只存在一个共享的bean实例,默认的配置. Prototype: ...
- ECMAScript 6新特性简介
目录 简介 ECMAScript和JavaScript的关系 let和const 解构赋值 数组的扩展 函数的扩展 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言 ...
- python获取某视频网站视频
还是老生常谈的操作 import requests import os from bs4 import BeautifulSoup from urllib.parse import urljoin h ...
- vscode链接git拉取项目
vscode终端中就可操作 初始化 git init 链接 git git remote add origin http://**************.git 拉取项目 git clone ht ...
- Hbuilder获取手机当前地理位置的天气
前言:前面一段时间,公司项目里有一个需求 是获取当前手机地理位置当天的天气情况 将实时天气信息提供给客户.在网上搜索资料时候,发现知识很零碎,自己实现以后整理出来,方便于各位的学习与使用. 一.获取 ...
- MySQL 修改表中的字段，使其自增
例如,我想使字段 id 自增. 1.查看表定义 mysql> DESC user; +----------+-------------+------+-----+---------+------ ...
- 为自己的网页博客添加L2Dwidget.js看板娘
如果是博客园,直接在设置-->页脚 HTML 代码,加上下面代码: 1 <!-- L2Dwidget.js L2D网页动画人物 --> 2 <script src=" ...