JavaScript学习笔记1

最新推荐文章于 2019-07-10 23:18:18 发布

原创最新推荐文章于 2019-07-10 23:18:18 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

13 篇文章

订阅专栏

函数定义

几种定义方式：

// 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>