Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

php爱好者> php文档>redFox 框架“$”对像 2010-07-22

redFox 框架“$”对像 2010-07-22

时间：2010-09-15 来源：毛狮子

今天做了这个”$”(元素选择)对像自己认为有分享的价值就弄出来了。给大家看看

呵通过这个对像可对页面DOM做一些查询不给代码做解释了。-_- 有API哦（redFox框架里的API）

下面是”$”对像的源代码

   var $=  {};
        $.$     =       function(by,n,scope,d,v){
                if(!by||!n)return false;
                scope   =       scope||document;
                return  $.$.By(by,{key:n,scope:scope,deep:d,value:v})   
        }
        $.$.inClass     =       function(n,node){
                if(!n||!node)return false;
                var cExp        =       "\\b"+n+"\\b";
                var re          =       new RegExp(cExp);
                if(!node.className)return false;
                return re.test(node.className);
        }
        $.$.eachNodes   =       function(n,d,c){
                if(!n)return false;     if(!n.childNodes.length)return null;
                d       =       (d==void(0))?true:d;c   =       typeof(c)=="function"?c:null;
                var r   =       [];
                for(var i=0;i<n.childNodes.length;i++){
                        c?(c(n.childNodes[i])?r.push(n.childNodes[i]):null):r.push(n.childNodes[i]);    
                        if(d&&n.childNodes[i].childNodes.length)r = r.concat(arguments.callee(n.childNodes[i],true,c)||[])
                }
                return r||null;
        }
        $.$.By          =       function(by,args){
                if(!by||!args)return false;
                args.deep=      args.deep==void(0)?true:args.deep;
                var n   =       args.key,scope  =       args.scope;
                var BY  =       {
                        id      　　:{d:function(){return scope.getElementById(n)},c:null},
                        tag     　　:{
                                         d:function(){return scope.getElementsByTagName(n)},dp  : scope.getElementsByTagName,
                                         c:function(node){return (node.tagName==n||node.nodeName==n)}
                                　　},
                        name    　　:{
                                         d:function(){return scope.getElementsByName(n)},dp : scope.getElementsByName,
                                         c:function(node){return (node.name==n||(node.getAttribute?node.getAttribute("name")==n:false))}
                                　　},
                        className　　:{
                                         d:function(){return scope.getElementsByClassName(n)},dp :      scope.getElementsByClassName,
                                         c:function(node){return $.$.inClass(n,node)}
                                　　 },
                        attr    　　:{dp:null,c:function(node){return node.getAttribute?node.getAttribute(n)===args.value:false}}
                };
                if(!(by in BY))return false;
                if(by=="id") return BY[by].d(args.key);
                if(args.deep&&BY[by].dp) return BY[by].d(n.key);
                return $.$.eachNodes(scope,args.deep,BY[by].c);
        }
        $.$.By.id               =       function(id){return document.getElementById(id)}
        $.$.By.tag      =       function(n,scope,d){return $.$.By("tag",                {key:n,scope:scope,deep:d})}
        $.$.By.name     =       function(n,scope,d){return $.$.By("name",               {key:n,scope:scope,deep:d})}
        $.$.By.className        =       function(n,scope,d){return $.$.By("className",  {key:n,scope:scope,deep:d})}
        $.$.By.attr     =       function(attr,value,scope,d){return $.$.By("attr",{key:attr,value:value,scope:scope,deep:d})}

$.eachNodes 方法和 $.By方法是整个对像实现的核心代码

$对像包含了一组查询页面DMO元素的方法

参数说明

by 指定执行的查询接受的值(string类型)有

id 查询页面元素id为参数n的节点

tag 查询页面元素标签名为参数n的节点集合

name查询页面元素name属性为参数n的节点集合

className 查询页面元素class属性为参数n的节点集合

n/key 指定要查询元素的id、标签名、name属性值、class属性值或其他属性名

scope 指定在哪个节点下进行查找默认是document根目录开始

d/deep 指定是否进行深度查询(遍历全部的节点)除对查询id外。其他都有效默认是true(执行深度

查询) (注：如果设置为false 则只查询当前域下的子节点是否符合要求，)

v/value 查询指定属性的值

node DOM节点引用

c 指定一个自定义函数在节点遍历时会调用调用时会把当前遍历的节点做为参数传给这个

函数如果这个函数返回是true 或 c=null时(相当于把所有的节点都做为返回结果)则往

返回的结果中追加当前遍历的节点

args 一个对像型参数可将上面除的参数名做为该对像的属性并指定相应的值

$(by,n,scope,d,v) 默认调用函数查询页面DMO元素的方法综合

$.inClass(n,node) 普通一个node节点中的class属性中是否有参数n 可匹配 class=’a b c’ 类型的

$.earchNodes(n,d,c) 遍历节点并返回相应的节点

$.By(by,args) 查询页面DMO元素的方法综合

$.By.id(id) 返回元素id属性为参数id的节点

$.By.tag(n,scope,d) 返回页面元素标签名为参数n的节点集合

$.By.name(n,scope,d) 返回页面元素name属性为参数n的节点集合

$.By.className(n,scope,d) 返回页面元素class属性为参数n的节点集合

$.By.attr(key,value,scope,d) 返回页面元素属性为参数key并对应值为参数value的节点集合

注:上面方法的参数都在（参数说明）中有请查看

上面在$.By()方法中有一个地方代码多写了些看上去有点多余那是因为有一个问题

我不能 by[by].dp(n) 去调用这个默认的函数在Fierfox 有报错见下图：

看不明白。后来只好用 function(){return ….} 这个方法。呵呵

(呀，写的不好不要见怪哈。有不明白或发现问题的欢迎找我)