- <!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>
JS初学示例......
最新推荐文章于 2024-06-18 09:29:44 发布