my pretty simple jSearch imitating jQuery

 

 

the code is as follows:

<!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>
    <title></title>
    <script>
        /* File Created: March 13, 2013 */
        var jSearch = function (selector, context) {
            if (window == this) {
                return new jSearch(selector, context);
            }

            selector = selector || document;

            if (typeof selector == "string") {
                return new jSearch(context).find(selector);
            }

            return this.setArray((selector.constructor == Array && selector) ||
                            [selector]);
        }

        jSearch.fn = jSearch.prototype = {
            version: 1.0,
            length: 0,

            pushStack: function (a) {
                var ret = new jSearch(a);
                return ret;
            },
            setArray: function (a) {
                this.length = 0;
                [ ].push.apply(this, a);
                return this;
            },
            find: function (t) {
                return this.pushStack(jSearch.find(t));
            },
            val: function () {
                console.log("this is val method just for demonstration");
            },
            text: function () {
                console.log("this is text method just for demonstration");
            }
        }

        jSearch.extend = jSearch.fn.extend = function () {
            var target = arguments[0], a = 1;

            if (arguments.length == 1) {
                target = this;
                a = 0;
            }
            var prop;
            while (prop = arguments[a++]) {
                for (var i in prop) target[i] = prop[i];
            }
            return target;
        }
        jSearch.extend({
            //This is a genuine method to retrieve html object.
            //If t starts with #,just call native getElementById method,etc.
            find: function (t, context) {
                if (t.indexOf("#") == 0) {
                    var id = t.substring(1, t.length);
                    return document.getElementById(id);
                } if (t.indexOf(".") == 0) {
                    return getElementsByClassName(t.substring(1, t.length));
                } else {
                    alert("don't support the selector");
                }

            },
            filter: function () {
                console.log("this is text filter just for demonstration");
            },
            each: function (obj, fn) {
                for (var i = 0, ol = obj.length; i < ol; i++) {
                    fn.apply(obj[i])
                }
            }
        });

        jSearch.event = {
            add: function (element, type, handler) {
                element["on" + type] = handler;
            }
        }

        jSearch.fn.extend({
            each: function (fn) {
                jSearch.each(this, fn);
            },
            bind: function (type, fn) {
                return this.each(function () {
                    jSearch.event.add(this, type, fn);
                });
            }
        })



        function getElementsByClassName(className) {
            var all = document.all ? document.all : document.getElementsByTagName('*');
            var elements = new Array();
            for (var e = 0; e < all.length; e++) {
                if (all[e].className == className) {
                    elements[elements.length] = all[e];
                }
            }
            return elements
        }
    </script>
    <script type="text/javascript">
        window.onload = function(){
            var elem = jSearch(".cjy"); 
            elem.bind("click",test1111); 
        };

        function test1111(){
            alert(1111);
        }
    </script>
</head>
<body>
    <button id="btnSave" class="cjy" role="approve" >btnSave</button>
    <button id="Button1" class="cjy" role="approve" >Button1</button>
    <button id="Button2" role="approve" >Button2</button>
</body>
</html>

 

posted @ 2013-03-13 23:21  cnbwang  阅读(164)  评论(0)  编辑  收藏  举报