多语言展示
当前在线:693今日阅读:84今日分享:32

JavaScript模拟jQuery选择器

JavaScript模拟jQuery选择器,本经验中只模拟了jQuery中选择器  $('#id')  $('.class')  $('tag')  $('tag#id')  $('tag.class') 五种。
工具/原料

已安装dreamweaver或其它网页编辑器的电脑一台

选择器分析

以jQuery形式 $('')  来选择元素,首先定义一个函数 $(),此函数返回的是获取到的元素。里面的参数看成是字符串,再结合正则表达式判断是否包含 # .  两样字符串,如果包含 # 就需要获取元素的 id,如果包含 . 就需要获取元素的 class。总体四个方面:    1、通过class获取元素的函数调用(小余在前几篇经验中有一篇详细解析了通过class获 取元素的方法,这里就不重复说明了)。    2、参数情况一:包含 #     3、参数情况二:包含 .    4、参数情况三:不包含 # 和 . 只有标签 tagEND

完整函数代码

function $(strSelector){            var reId=/#/g;            var reClass=/\./g;                /* 通过 class 获取元素 */            function getByClass(sClass){                    var arrE=[];                    var allE=document.getElementsByTagName('*');                    var re=new RegExp('\\b' + sClass + '\\b','g');                            for(var i=0;i

代码分析

总体代码并不复杂,包括对字符串、数组、正则表达式以及简单的循环语句。只要你的JavaScript有点基础,这个代码小case啦!至于分析嘛......说实话,真没啥好分析的就那三个对象的基本方法操作了。思想很重要,希望亲以后写代码的时候多注意思想吧!END

注意事项

再次说明:本经验中只模拟了jQuery中选择器  $('#id')  $('.class')  $('tag')  $('tag#id')  $('tag.class') 五种。

推荐信息