JavaScript学习笔记1

来源：互联网发布：芈姝知乎编辑：程序博客网时间：2024/06/07 02:27

函数定义

几种定义方式：

// 1、function func1([参数]){函数体}// 2、var func2 = function([参数]){函数体};// 3、var func3 = function func4([参数]){函数体};// 4、var func5 = new Function();

function func(){函数体}//等价于var func = new Function(){函数体}

对象构造

创建高级对象构造有两种方式：1、使用this关键字构造；2、使用原型prototype构造。如：

    //定义类    function example(test){        //定义函数1        this.test1 = function(){            alert("this:"+test);        }        //定义函数2        example.prototype.test2 = function(){            alert("protype:"+test);        }    }    var testing = new example(document.getElementById("p1").innerText);    testing.test1();    testing.test2();

事件处理

页面加载事件：onLoad
页面卸载事件：onUnload

注意：上面的事件是body标签里的属性，比如<body onLoad="">，onload里面的值可以填写javascript里定义的函数

<body onLoad="loadHandle()" onUnload="closeHandle()">    <script type="text/javascript">        function loadHandle(){          alert("欢迎光临！");        }        function closeHandle(){          alert("再见！");        }        //或者使用匿名函数        window.onLoad = function(){          loadHandle();        }        window.onUnload = function(){          closeHandle();        }          </script></body>

鼠标事件：

onMouseDown 鼠标按下
onMouseMove 鼠标移动
onMouseOut 鼠标移开
onMouseUp 鼠标松开
onMouseOver 鼠标经过
onClick 单击
onDblClick 双击

一个动态改变颜色的实例：

<table bgcolor="#F2F2F2">    <tr onMouseOver="changeColor(this,'#FFFFFF')" onMouseOut="changeColor(this,'#F2F2F2')">        <td>1-1</td>        <td>1-2</td>        <td>1-3</td>            </tr>    <tr onMouseOver="changeColor(this,'#FFFFFF')" onMouseOut="changeColor(this,'#F2F2F2')">        <td>2-1</td>        <td>2-2</td>        <td>2-3</td>            </tr>    <tr onMouseOver="changeColor(this,'#FFFFFF')" onMouseOut="changeColor(this,'#F2F2F2')">        <td>3-1</td>        <td>3-2</td>        <td>3-3</td>            </tr>    </table><script type="text/javascript">    function changeColor(obj,color){        obj.bgColor = color;    }   </script>

动态绑定事件

使用addEventLisener('方法类型','方法名',是否冒泡),第三个参数一般使用false表示动态绑定。

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body>    <span id="span2">图片区域</span>    <button id="button2">点击添加图片</button>    <script type="text/javascript">        /*匿名函数，动态绑定*/        window.onload = function(){            var button2 = document.getElementById("button2");            button2.addEventListener('click',function(){                var span2 = document.getElementById('span2');                span2.innerHTML='<img src= "图片0.jpg"/>';            },false);        }    </script></body></html>

阅读全文

0 0