一个10行左右的强$代码[2010-8-28修正](附增删改DOM的三个小方法) - javascript- 日志信息 - 飘雨之夜

　　所在位置：杂记 >> javascript >> 一个10行左右的强$代码[2010-8-28修正](附增删改DOM的三个小方法)

一个10行左右的强$代码[2010-8-28修正](附增删改DOM的三个小方法)

发表于十二年前(2010-8-28 12:15:06) | 阅读 (1578) | 评论 (0)

大致功能：
$() 取得所有元素
$("div") 取得所有DIV
$("#a1") 取得ID为a1的元素
$(".a1") 取得className为a1的元素
$("div.a1") 取得className为a1的DIV元素
$("div:w=1") 取得属性w为1的DIV元素
……

开始自己写了一个，但语法罗嗦，就在51JS发了个帖，根据超级版主biyuan的书写思路下写了第一版（请见原帖），但最近发现，在$("X:attName")的支持上存在问题，IE中无法正确取得对象，当X为空attName为自定义属性的时候，各浏览器下均无法使用，现增加以上功能之外还增加了对$("body b.aaa")这样层级筛选的支持，重新整理如下(附送增删改DOM的三个小方法)：

<body>
<b class="Aa">xxxxx</b>
<div class="Aa" id="tes">bbsdd</div>
<div class="Aa">xxcccxxx</div>
<div class="Aab">xxcccxxx</div>
<input type="text" value="1111" />
<form>
<input type="text" name="Aa" value="1111" />
<input type="text" va  />
<input type="password" va="ps" />
<div>testsss</div>
</form>
<script type="text/javascript">
        function $(s, o, c) { //取dom 示例 $() $("*") $("div") $(".class") $("div.class") $(":name")  $("div:name") $("div:name=div1")  $("body div b")
            var r = []; o = o || document; s = s || "*";
            if (s.indexOf(" ") != -1) { r = s.split(" ");for (var i = 0; i < r.length; i++) o = r[i] == "" ? o : $(r[i], o.length == null ? o : o.length > 0 ? o[0] : null);  return o; }
            if (/^(\w+|\*)$/.test(s)) return o.getElementsByTagName(s);
            if (/^#.+$/.test(s)) return o.getElementById(s.substr(1));
            if (/^\..*$/.test(s)) { s = s.substr(1); o = o == document ? $() : o; c = c || "class";for (var k = 0; k < o.length; k++) if (o[k].getAttributeNode(c)) if ((" " + o[k].getAttributeNode(c).value + " ").indexOf(" " +s+ " ")>-1 || s == "") r.push(o[k]);  return r; }
            if (/^\w+\..*$/.test(s)) return $(s.replace(/^(\w+)\.(.*)$/, "$1:class=$2"));
            if (/^.*:\w+$/.test(s))  return $(s + "=");
            if (/^.*:\w+=.*$/.test(s)) { r = s.replace(/\=/g, ":").split(":"); return $("." + (r[2] ? r[2] : ""), $(r[0], o), r[1]); }
            return null;
        };
        function d$(o) { //删dom 示例 d$("#aaa" || $("#aaa"))
            o = typeof o == "string" ? $(o) : o; if (!o) return null; o.parentNode.removeChild(o);
        };
        function e$(o, a, s) { //改dom 示例 d$("#aaa" || $("#aaa"),{id:"div1",style:{border:'1px'}})
            if (o && a) for (var x in a) switch (typeof a[x]) { case "function": o[x] = a[x]; break; case "object": e$(o[x],a[x],1); break;default: o[x] = a[x].toString()+(s && typeof a[x]=="number"?"px":""); break;  }
        };
        function c$(p, t, a) { //创建dom 示例 c$("#aaa" || $("#aaa")/*dom的容器*/,"div",{id:"div1",style:{border:'1px'}})
            var n = document.createElement(t);e$(n, a)
            if (p) { p = (typeof p == "string" ? $(p) : p); p = p ? p.length == null ? p : p.length > 0 ? p[0] : null : null;p && p.appendChild(n); a = p = n = null; }
        };
    alert('$("*").length:'+$("*").length+'\n\n$(".").length:'+$(".").length+'\n\n$().length:'+$().length+'\n\n $("div", $("form")[0]).length:'+$("div", $("form")[0]).length+'\n\n $("#tes").innerHTML:'+$("#tes").innerHTML+'\n\n $(".Aa").length:'+$(".Aa").length+'\n\n $("div.Aab").length:'+$("div.Aab").length+'\n\n $("input:type=text", $("form")[0]).length:'+$("input:type=text", $("form")[0]).length+'\n\n $("b.Aa").length:'+$("b.Aa").length+'\n\n $("input:va"):'+$("input:va")+'\n\n $(":va"):'+$(":va")+'\n\n $(":va=ps"):'+$(":va=ps"));
</script>
</body>

杂记评论(0):

上一篇：IE（包括IE6\IE7\IE8）中的PNG色差导致显示图片比真实颜色深的问题　　下一篇：Flash CS5绿色版运行时“JAVA运行时环境初始化时出现错误” 成功解决方法　　　 <<返回杂记列表