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

// 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="http://www.likecs.com/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 }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyyyxj.html