jQuery选择器是一种非常强大的工具,可以让开发者轻松地选取DOM元素并对其进行操作。然而,对于一些常用的选择器,每次都写一遍会很繁琐。因此,我们可以封装一些常用的选择器,以便于重复使用。

//封装ID选择器function $(id){return document.getElementById(id);}//封装类选择器function $$(className){if(document.getElementsByClassName){return document.getElementsByClassName(className);}else{var arr = [];var dom = document.getElementsByTagName(*);for(var i=0;i<dom.length;i++){if(dom[i].className == className){arr.push(dom[i]);}}return arr;}}//封装标签选择器function $$$(tagName){return document.getElementsByTagName(tagName);}

以上代码分别封装了ID选择器、类选择器和标签选择器。我们可以对其进行扩展,以实现更灵活的选择器。例如,我们可以对类选择器进行正则判断,以兼容一些带有多个类名的元素。以下是一个简单的扩展:

//封装类选择器+扩展function $$(selector){if(document.querySelectorAll){return document.querySelectorAll(selector);}else{var arr = [];var dom = document.getElementsByTagName(*);var reg = new RegExp("(^|s)" + selector.substring(1) + "(s|$)");for(var i=0;i<dom.length;i++){if(reg.test(dom[i].className)){arr.push(dom[i]);}}return arr;}}

在这个例子中,我们可以使用$$(#test)或者$$(#test .test)来选取DOM元素,并在IE6/7中兼容多个类名的情况。

通过封装常用的选择器,我们可以使代码更加简洁、灵活,也能提升我们的开发效率。

jquery选择器的封装