当前位置:首 页 > 技术文章 > 原创 > 详细

javascript自定义标签选择器[三]

字号字号

摘要:接上一篇的茬,将零散的代码合并到一个方法中以方便调用:JavaScript Code复制内容到剪贴板 /* *id:表示id的字符串或页面元素 *expression:表达式[标准或自定义属性=属性值],如class=myclass,onclick=myfun(),x=2,y=……

接上一篇javascript自定义标签选择器[二],将零散的代码合并到一个方法中以方便调用:

JavaScript Code复制内容到剪贴板
  1. /*  
  2. *id:表示id的字符串或页面元素  
  3. *expression:表达式[标准或自定义属性=属性值],如class=myclass,onclick=myfun(),x=2,y=6  
  4. *_all:缺省或为false则返回所有,反之只返回符合条件的子级元素  
  5. */  
  6. function $id(id, expression, _all) {   
  7.        
  8.     var o = (typeof(id) == "string" ? document.getElementById(id) : id);//处理id参数   
  9.        
  10.     //处理expression参数   
  11.     if (expression != null) {   
  12.            
  13.         //如果expression包含有表达式模式:获取满足表达式条件的元素   
  14.         if (/^([\w-]+)\=([\w-]+(\(.*\))?)$/.exec(expression)) {   
  15.                
  16.             var k = RegExp.$1,v = RegExp.$2;   
  17.             //如果_all缺省:递归 > 过滤   
  18.             if (_all == null) { var a = acs(o); return f(a, k, v) }   
  19.             //反之:仅获取子级元素 > 过滤   
  20.             else { var c = o.childNodes; return f(c, k, v) }   
  21.   
  22.         //如果expression="":获取o包含的所有元素   
  23.         } else if (expression == "") {   
  24.                
  25.             //如果_all缺省:递归   
  26.             if (_all == null) { return acs(o) }   
  27.             //反之:仅获取子级元素   
  28.             else {   
  29.                 var c = o.childNodes;   
  30.                 var a = [];   
  31.                 for (var i = 0; i < c.length; i++) {   
  32.                     var n = c[i].nodeName.toLowerCase();   
  33.                     if (n != "#text" && n != "#comment") { a.push(c[i]) }   
  34.                 }   
  35.                 return a   
  36.             }   
  37.   
  38.         //如果expression!=""且没有表达式模式:当做nodeName来处理   
  39.         } else {   
  40.                
  41.             if (_all == null) { return o.getElementsByTagName(expression) }   
  42.             else { var a = o.childNodes; return f(a, "nodeName", expression) }   
  43.   
  44.         }   
  45.   
  46.     } else {//如果expression缺省:直接返回o   
  47.        
  48.         return o   
  49.   
  50.     }   
  51.   
  52.     //私有函数[递归元素包含的所有节点]   
  53.     function acs(o) {   
  54.         var _o = o;   
  55.         var arr = [];//装载结果   
  56.            
  57.         var t = c(_o);//获取元素的所有子级元素[抛弃换行或空格或注释]   
  58.         arr.concat(t);   
  59.   
  60.         r(t);//开始递归   
  61.   
  62.         //递归函数   
  63.         function r(a) {   
  64.             for (var i = 0; i < a.length; i++) {   
  65.                
  66.                 arr.push(a[i]);//将循环到的元素放入arr中   
  67.                 r(c(a[i]))//c(a[i])获取循环到元素的所有子级元素 继续递归   
  68.   
  69.             }   
  70.         }   
  71.   
  72.         //获取元素的所有子级元素[抛弃换行或空格或注释]   
  73.         function c(o) {   
  74.             var a = [];   
  75.             var n = o.childNodes;   
  76.             for (i = 0; i < n.length; i++) {   
  77.                
  78.                 var _n = n[i].nodeName.toLowerCase();   
  79.                 if (_n != "#text" && _n != "#comment") { a.push(n[i]) }   
  80.                    
  81.             }   
  82.             return a//返回元素的所有子级元素   
  83.         }   
  84.   
  85.         return arr//返回结果   
  86.   
  87.     }   
  88.   
  89.     //私有函数[键值过滤]   
  90.     /*  
  91.     *o:元素集合  
  92.     *k:键,如:class,type,onclick  
  93.     *v:值,如:class1,text,myfun()  
  94.     */  
  95.     function f(o, k, v) {   
  96.         var _a = [];//存放过滤结果   
  97.         v = v.toLowerCase();   
  98.         //是否为IE6,IE7   
  99.         var isIE67 = (document.all && parseInt((navigator.userAgent.match(/msie\s\d/ig))[0].match(/\d/g), 10) < 8);   
  100.   
  101.         //对于class,在IE6,IE7中要用“className”来访问   
  102.         if (k == "class") { k = isIE67 ? "className": k }   
  103.   
  104.         //循环过滤   
  105.         for (var i = 0; i < o.length; i++) {   
  106.   
  107.             var _n = o[i].nodeName.toLowerCase();//循环到节点名称   
  108.   
  109.                if (k != "nodeName") {//非节点名称   
  110.   
  111.                 //如果是html或head或换行或空格或注释,跳出本次循环   
  112.                 if (_n == "html" || _n == "head" || _n == "#text" || _n == "#comment") { continue }   
  113.   
  114.                 var nv = "";//循环到元素的属性值   
  115.   
  116.                 //如果是IE6,IE7并且要获取的是事件属性   
  117.                 if (isIE67 && (/^on+/i).test(k)) {   
  118.                     var e = k.toLowerCase();   
  119.                     var _nv = "";   
  120.                     switch (e) {   
  121.                         case "onblur":   
  122.                         _nv = o[i].onblur;   
  123.                         break;   
  124.                         case "onfocus":   
  125.                         _nv = o[i].onfocus;   
  126.                         break;   
  127.                         case "onchange":   
  128.                         _nv = o[i].onchange;   
  129.                         break;   
  130.                         case "onclick":   
  131.                         _nv = o[i].onclick;   
  132.                         break;   
  133.                         case "ondblclick":   
  134.                         _nv = o[i].ondblclick;   
  135.                         break;   
  136.                         case "onkeydown":   
  137.                         _nv = o[i].onkeydown;   
  138.                         break;   
  139.                         case "onkeypress":   
  140.                         _nv = o[i].onkeypress;   
  141.                         break;   
  142.                         case "onkeyup":   
  143.                         _nv = o[i].onkeyup;   
  144.                         break;   
  145.                         case "onmousedown":   
  146.                         _nv = o[i].onmousedown;   
  147.                         break;   
  148.                         case "onmousemove":   
  149.                         _nv = o[i].onmousemove;   
  150.                         break;   
  151.                         case "onmouseout":   
  152.                         _nv = o[i].onmouseout;   
  153.                         break;   
  154.                         case "onmouseup":   
  155.                         _nv = o[i].onmouseup;   
  156.                         break;   
  157.                         case "onselect":   
  158.                         _nv = o[i].onselect;   
  159.                         break;   
  160.                         case "onload":   
  161.                         _nv = o[i].onload;   
  162.                         break;   
  163.                         case "onerror":   
  164.                         _nv = o[i].onerror;   
  165.                         break;   
  166.                         case "onunload":   
  167.                         _nv = o[i].onunload;   
  168.                         break;   
  169.                         case "onresize":   
  170.                         _nv = o[i].onresize;   
  171.                         break;   
  172.                         default:   
  173.                         _nv = "";   
  174.                         break  
  175.   
  176.                     }   
  177.                     if (_nv != "" && _nv != null) {   
  178.                            
  179.                         nv = _nv.toString().replace(/\s+/ig, " ")//_nv是function,要将其转换为string   
  180.   
  181.                     }   
  182.   
  183.   
  184.                 } else {//如果不是IE6,IE7,直接通过getAttribute来获取属性值   
  185.                        
  186.                     nv = o[i].getAttribute(k) != null ? o[i].getAttribute(k).toLowerCase() : ""  
  187.   
  188.                 }   
  189.   
  190.                 //循环到元素的属性值存在   
  191.                 if (nv != "") {   
  192.                     //如果有多个属性值 如class="class1 class2"或onload="fun1();fun2()"或"font-size:12px;color:#999999;"   
  193.                     if (nv.indexOf(" ") > -1 || nv.indexOf(";") > -1) {   
  194.                            
  195.                         if (nv == v || nv.indexOf(v) > -1) { _a.push(o[i]) }//等于 或 包含 即可   
  196.                            
  197.                     } else {//如果是单个属性值则必须 等于   
  198.                            
  199.                         if (nv == v) { _a.push(o[i]) }   
  200.                            
  201.                     }   
  202.                 }   
  203.                    
  204.             } else {//如果是节点名称   
  205.                    
  206.                 if (_n == v.toLowerCase()) { _a.push(o[i]) }   
  207.             }   
  208.         }   
  209.   
  210.         return _a//返回过滤结果   
  211.     }   
  212.        
  213. }  

测试代码:

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. #test div,#test p{border:solid 1px #999padding:1pxmargin:2px;}   
  3. #test span,#test strong,#test b{border:solid 1px #000padding:1pxmargin:2pxdisplay:block;}   
  4. .test{color:#f00;}   
  5. </style>  
XML/HTML Code复制内容到剪贴板
  1. test div:   
  2. <div id="test" style="width:500px; border:dashed 1px #000;">   
  3.   
  4. <div>   
  5.   div1   
  6.   <div a="b">div2:自定义属性a</div>   
  7.   <div class="test test2">   
  8.     div3:class="test test2"  
  9.     <strong onclick="fun1(this)">strong4:onclick="fun1(this)"</strong>   
  10.     <strong onclick="fun1(this)">strong5:onclick="fun1(this)"</strong>   
  11.     <strong onclick="fun1(this);fun2()">strong6:onclick="fun1(this);fun2()"</strong>   
  12.   </div>   
  13.   <div>   
  14.     div7   
  15.     <div class="test">div8:class="test"</div>   
  16.     <div>div9</div>   
  17.     <p class="test">p10:class="test"</p>   
  18.     <span>span11</span>   
  19.   </div>   
  20.   <b class="test">b12:class="test"</b>   
  21.   <b>b13</b>   
  22. </div>   
  23.   
  24. </div>   
  25.   
  26. <input type="button" value="test()" onclick="test()" />  

视图:

JavaScript Code复制内容到剪贴板
  1. //测试      
  2. function test()      
  3. {      
  4.   var o=$id("test");//得到id为test的div   
  5.   alert(o);//弹出:[object HTMLDivElement]”   
  6.      
  7.   var arr1=$id("test","");//得到id为test的元素包含的所有元素   
  8.   alert("所有元素:"+arr1.length);//弹出:13   
  9.      
  10.   var arr2=$id("test","div");//得到id为test的元素包含的所有div   
  11.   alert("div:"+arr2.length);//弹出:6    
  12.      
  13.   var arr3=$id(o,"span");//得到id为test的元素包含的所有span   
  14.   alert("span:"+arr3.length);//弹出:1    
  15.      
  16.   var arr3=$id(o,"class=test");//得到id为test的元素包含的class=test的元素   
  17.   alert("class=test:"+arr3.length);//弹出:4    
  18.      
  19.   var arr4=$id(o,"onclick=fun1(this)");//得到id为test的元素包含的onclick=fun1(this)的元素   
  20.   alert("onclick=fun1(this):"+arr4.length);//弹出:3    
  21.      
  22. }  

经过测试之后发现这个自定义获取标签的$id函数基本上能按我们的意思去获取元素,目的基本上达到了,至于性能提升算法优化等留给大家自己去改进吧,呵呵!

在学习的过程中,需要一点没事找事的精神,这对提升自己的认识是大有补益的。

这是留给你的位置,说出你的真知灼见吧![我要评论][我要收藏][我要举报]
[游客]于[2013-06-01]评论[javascript自定义标签选择器[三]]:

“在学习的过程中,需要一点没事找事的精神”这个说得也是

[游客]于[2012-10-29]评论[javascript自定义标签选择器[三]]:

不错