首页 > 网络编程 > JavaScript > javascript类库 > jquery > jquery元素选择器

宝儿的zQuery库选择器简单原型

2008-06-01 20:23:25 作者：

编写zQuery库初始起因一则是由于旧版的jQuery执行效率（现在的版本好像还可以），二则是对javascript语言的喜爱，每每总是亲历亲为，最后由于在项目中的需求，加入了对事件侦听机制的和DOM节点操作方法的扩展。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> 
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>宝儿的zQuery库选择器简单原型</title> 
</head> 
<body> 
<h1>宝儿的zQuery库选择器简单原型</h1> 
<div id="idTest"> 
  <ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
  </ul> 
</div> 
<div class="classTest"> 
  <ul class="classTest"> 
    <li class="classTest"></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
  </ul> 
</div> 
<script type="text/javascript"> 
var zQuery=function(ele,tagName,className){ 
    if(!arr){var arr=new Array()} 
    var elem=typeof(ele)=="object"?ele:document.getElementById(ele); 
    if(!tagName){ 
        return elem; 
    }else{ 
        if(elem.constructor!=Array){ 
            var tags=elem.all&&!window.opera?tagName=="*"?elem.all:elem.all.tags(tagName):elem.getElementsByTagName(tagName); 
            if(!className){ 
                for(var i=0, l=tags.length; i<l; i++) 
                    arr.push(tags[i]); 
            }else{ 
                for(var i=0, l=tags.length; i<l; i++) 
                    if(RegExp("(^|\\s+)"+className+"($|\\s+)").test(tags[i].className)) 
                        arr.push(tags[i]); 
            } 
        }else{ 
            for(var i=0, l=elem.length; i<l; i++){ 
                arr=arr.concat(zQuery(elem[i],tagName,className)); 
            } 
        } 
    } 
    return arr; 
} 
var $=zQuery; 
alert( $("idTest").id ); 
alert( $("idTest","li").length); 
alert( $(document,"div").length ); 
alert( $( $(document,"div"),"ul").length ); 
alert( $( $( $(document,"div"),"ul"),"li").length ); 
alert( $(document,"div","classTest").length ); 
alert( $( $(document,"div","classTest"),"ul","classTest").length ); 
alert( $( $( $(document,"div","classTest"),"ul","classTest"),"li","classTest").length ); 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]