JS初学示例......

最新推荐文章于 2024-06-18 09:29:44 发布

安宁

最新推荐文章于 2024-06-18 09:29:44 发布

阅读量562

点赞数

分类专栏： JS & CSS & HTML 文章标签： function javascript button border string table

本文链接：https://blog.csdn.net/xiaoqijun/article/details/3167460

版权

JS & CSS & HTML 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

 
 <!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 language = "javascript">
    window.$ = function(id){
        if(typeof id == "string")
        {
            return document.getElementById(id)
        }
        return id ;        
    }
    
    /**
     *  事件处理类
     */
    var Event = function (){};
    
    Event = {
        /**
         *  注册事件
         */
        addEvent : function(element,event,handler){
            if(element.attachEvent){
                element.attachEvent("on" + event,handler);
            }else if(element.addEventListener){
                element.addEventListener(event,handler,false);
            }else{
                element["on"+event] = handler;
            }           
        },
        /**
         *  此方法用于获取事件被调用方法的引用.
         */
        getFunction : function (obj,fun){
            var args = [];
            obj = obj || window;
            // 获取第三个参数,传到注册对象中调用的方法中.
            for (var i = 2;i< arguments.length;i++){
                args.push(arguments[i]);
            }
            // 此处返回的是一个引用. 事件触发时,通过该引用调用方法.
            return function () {
                fun.apply(obj,args);
            }
        }       
    }
    
    Table = function (id){
        this.rows = (function(){
            var tab = $(id);
            if (tab.tBodies.length == 0){
                return tab.rows;
            }
            var rows = [];
            for (var i = 0 ;i < tab.tBodies.length ; i++){
                for (var j = 0 ;j < tab.tBodies[i].rows.length ; j++){
                    rows.push(tab.tBodies[i].rows[j]);
                }
            }
            return rows;
        })();
    }
    Table.prototype = {
        addEvent : function (){
            for (var r = 0;r < this.rows.length; r++){
                this.rows[r].style.backgroundColor = "#FFFFFF"; //初始化背景色.
                Event.addEvent(this.rows[r],"mouseover",Event.getFunction(this,this.overEvent,this.rows[r]))                
                Event.addEvent(this.rows[r],"mouseout",Event.getFunction(this,this.outEvent,this.rows[r]))              
            }
        },
        outEvent : function (row){
            row.style.backgroundColor = "#FFFFFF";
        },
        overEvent : function (row){
            row.style.backgroundColor = "#FF0000";
        }
    }
    var tab;
    function formload(){
        tab = new Table("tab");
        tab.addEvent();
    }
    
    window.onload = formload;
    
    function click(){
        //alert("aa");
        alert(tab.rows.length);
    }
    </script>
</head>
<body>
<table id=tab cellpadding=0 cellspacing=0 border=1>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
</table>
<input id="inp" type="button" value="aa" onclick="javascript:click();"  />
<a href="javascript:click();">aaa</a>
</body>
</html>
 

安宁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS初学示例......

html xmlns="http://www.w3.org/1999/xhtml" >head> title>无标题页title> script language = "javascript"> window.$ = function(id){ if(typeof id == "string") {
复制链接

扫一扫

专栏目录