使用原生js模拟jQuery选择器,实现new方法,兼容ie5

时间:2023-03-08 21:43:13
// 考虑到兼容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
}