仿JQ插件

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style type="text/css">
    * { padding:0; margin:0;}
    li { list-style:none; width:200px; height:200px; float:left; text-align:center; line-height:200px; color:White; font-size:80px; }
     
    </style>
    <script language="javascript" type="text/javascript">
 
 
        /*这里是库*/
        (function (window, undefined) {
 
            window.$ = function (id) {
                return new Init(id);
            }
            function Init(id) {
                if (typeof id == "string") {
                    this[0] = document.getElementById(id);
                }
                else if (typeof id == "object") {
                    this[0] = id;
                }
            }
 
            Init.prototype.on = function (attr, fn, select) {
                this[0]["on" + attr] = function (ev) {
                    var oEvent = ev || event;
                    var _this = oEvent.srcElement || oEvent.target;
                    if (_this.tagName.toUpperCase() === select.toUpperCase()) {
                        if (fn) fn.call(_this, oEvent);
                    }
 
                }
                return this; //不断返回new出来的那个对象 实现Jquery的连缀 $("").on(function(){}).on(funciton(){})......
            }
            Init.prototype.css = function (json) {
                for (var i in json) {
                    this[0].style[i] = json[i];
                }
                return this; //不断返回new出来的那个对象 实现Jquery的连缀 $("").on(function(){}).on(funciton(){})......
            }
 
 
        })(window);
        /*这里是库*/
 
 
        window.onload = function () {
            $("ul1").on("click", function () {
                $(this).css({ background: "green", height: "400px" }).css({ fontSize: "100px" }).on("mouseover", function () {
                    $(this).css({ height: "200px" });
                }, "li");
            }, "li");
 
        }
 
    </script>
</head>
<body>
<ul id="ul1">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
 
 
js原生可以用 
http://www.oschina.net/question/54100_25614
posted @ 2015-05-28 10:36  、摩卡  阅读(214)  评论(0)    收藏  举报