x
首页 前端[Javascript] javascript选择器

javascript选择器

发表于 2012-04-04 - 浏览:16017 评论:0 收藏 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript元素选择器</title>
<script type="text/javascript">
Array.prototype.each=function(f){
    for(var i=0,l=this.length;i<l;i++)f.call(this[i],i);
    return this
};
Array.prototype.merge=function(arr){
    for(var i=0,l=arr.length;i<l;i++)this[this.length]=arr[i];
    return this
};
var rule=function(a,b){
    var e=[b||document];
    var types={
        '#':this.byId,
        '.':this.byClass,
        '>':this.byTagName,
        ':':this.byAttr,
        'default':true
    },obj=[];
    for(var i=0,k=-1,l=a.length;i<l;i++){
        var s = a.charAt(i);
        if(typeof types[s]==='function'){
            k++;
            obj[k]=''
        }
        obj[k]+=s;
    }
    for(var i=0,l=obj.length;i<l;i++)e=types[obj[i].charAt(0)](e,obj[i].substr(1));
    return e
};
var byId=function(o,t){return [o[0].getElementById(t)]};
var byTagName=function(o,t){
    var tags=[];
    o.each(function(i){tags.merge(o[i].getElementsByTagName(t))});
    return tags;
};
var byClass=function(o,t){
    var _=[];
    o.each(function(i){
        var m=this.getElementsByTagName('*');
        for(var j=0,k=m.length;j<k;j++){
            if((' '+m[j].className+' ').indexOf(' '+t+' ')!==-1)_.push(m[j])
        }
    });
    return _;
};
var $=function(a,b){return rule(a,b)};
</script>
</head>
<body>
<ul id="test1">
    <li>
        <ul>
            <li><a href="">123</a></li>
            <li></li>
        </ul>
    </li>
    <li class="c1"><a href="">123</a></li>
    <li class="c1"><a href="">222</a></li>
    <li class="c1"></li>
    <li><a href="">123</a></li>
</ul>
<script type="text/javascript">
/*示例*/
$('#test1.c1');/*取得test1下面所有class="c1"的元素*/
$('#test1>li');/*取得test1下面所有标签为li的元素*/
$('#test1.c1>a');/*取得#test1下面所有class="c1"元素下的标签为a的元素*/
//---------------------------------------------------------------
$('.c1',document.getElementById('test1'));/*第二个参数为范围,取得test1内的所有class="c1"的元素*/
</script>
</body>
</html>



转载请注明出处:http://www.lowxp.com/aid-11.html
如有任何建议或疑问,欢迎留言讨论。

文章评论。。。