Javascript笔记

简略

嵌入方式

  • 行间事件

    1
    <input type="button" name="" value="按钮" onclick="alert('ok');" />

  • 页面插入

    1
    2
    3
    <script type="text/javascript">
        alert("ok");
    </script>

  • 外部引入

    1
    <script type="text/javascript" src="test.js" ></script>

变量

  • 定义方式

    1
    var 变量名 = 初始值;

  • 变量类型

    数字(number)、字符串(string)、布尔(boolean)、未定义(undefined，未初始化的对象)、null(存放对象的未初始化变量)

  • 注释

    1
    2
    3
    // 单行注释

    /*多行注释*/

  • 变量、函数、属性、函数参数命名规范

    1. 区分大小写
    2. 第一个字符必须为字符、下划线、美元符号($)
    3. 其余字母：字符、数字、下划线、美元符号

获取、操作元素

  • 获取元素对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <script type="text/javascript">
        // 通过Id属性来定位
        var vid = document.getElementById('vid1');
        // 利用标签来获取对象，返回的是一个对象集，无法直接对一整个对象集中的元素属性进行设定
        var vid = document.getElementByTagName("li");
    </script>

    // 解决页面未加载完成不能定位的bug
    // 方法1：将js内容写在页面的底端
    // 方法2：将js内容写在window.onload方法中
    <script type="text/javascript">
        window.onload = function () {
            var vid1 = document.getElementById('vid1')
            }
    </script>

  • 读取对象属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /*
    js中属性写法与html中一致，以下两种例外
    1. class属性需写为className
    2. style属性中的属性，有横杠的修改为驼峰式，如font-size改写为fontSize
    */
    <script type="text/javascript">
        window.onload = function () {
        var vid1 = document.getElementById('vid1');
        var data = vid1.id
        }
    </script>


    // 获取对象的内容：innerHtml
    <script type="text/javascript">
        window.onload = function () {
        var vid1 = document.getElementById('vid1');
        var data = vid1.innerHtml;
        vid.innerHtml = "hahah";
        }
    </script>

  • 修改对象属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // .方式操作属性
    <script type="text/javascript">
        window.onload = function () {
        var vid1 = document.getElementById('vid1');
        vid.style.fontSize = "55px";
        }
    </script>

    // []方式操作属性，通过变量方式
    <script type="text/javascript">
        window.onload = function () {
        var vid1 = document.getElementById('vid1');
        var sKey = "font-size";
        var sData = "55px";
        vid1.style[sKey] = sData;
        }
    </script>

函数

  • 函数定义和执行

    1
    2
    3
    4
    5
    6
    7
    // 定义
    funcation 函数名(参数){
        函数体;
    }

    // 执行，函数调用是先编译，后执行
    函数名(参数)

  • 行间事件与代码分离

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script type="text/javascript">
        window.onload = function () {
            // 在js中给html标签绑定js事件 
            var target = document.getElementById('vid1');
            // js中赋值事件不能够加()
            target.onclick = alertfuncation;
            function alertfuncation() {
                var vid1 = document.getElementById('vid1');
                var sKey = "innerHtml";
                var sData = "hahahah";
                vid1.innerHTML = sData;
            }
        }
    </script>

  • 传参和return

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script type="text/javascript">
        window.onload = function () {
            var nData = add(1, 2)
            function add(a, b) {
                // return 与python中return语句是类似的
                return a + b
            }
        }
    </script>

条件语句

  • 运算符

    算数运算符：+、-、*、/、%

    赋值运算符：=、+=、-+、*=、/=、%=

    条件运算符：==(不区分类型)、===(区分类型)、>、<、>=、<=、!=、&&、||、!

  • 条件语句

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    // 简单判断
    <script type="text/javascript">
        window.onload = function () {
            var iNum1 = 2;
            var iNum2 ='2';
            if (iNum1 === iNum2){
                alert("相等");
            } else {
                alert("不相等");
            }
        }
    </script>

    // 多条件判断
    <script type="text/javascript">
        window.onload = function () {
            var iNum1 = 2;
            var iNum2 ='2';
            if (iNum1 === iNum2){
                alert("相等");
            } else if {
                alert("不相等");
            } else {
                alert("神奇的事")
            }
        }
    </script>

    // 离散型判断
    <script type="text/javascript">
        window.onload = function () {
            var iNum1 = 2;
            switch (iNum) {
                case 1:
                    alert(1);
                    break;
                case 2:
                    alert(2);
                    break;
                default:
                    alert(3);
            }
        }
    </script>

数组与循环语句

数组

  • 数组定义

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script type="text/javascript">
        window.onload = function () {
            // 对象实例创建
            var aList = new Array('tets', 1, 2, 3)
            // 直接创建
            var aList1 = [1,3,4, 'test']
            alert(aList[0])
        }
    </script>

  • 方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    // aList 是一个数组

    // 长度
    aList.length

    // 访问子元素
    aList[0]

    // 将成员通过特定字符连接为一个字符串
    aList.join('-')

    // 数据末尾添加元素
    aList.push(1)

    // 数组末尾去除元素
    aList.pop()

    // 数组前端添加元素
    aList.unshift(5)

    // 数组前端删除元素
    aList.shift()

    // 将数组进行反转
    aList.reverse()

    // 定位数组中第一次出现的索引值
    aList.indexOf("test")

    // 在数组中指定位置删除和添加成员
    aList.splice(起始位置, 删除元素数量, 填充的数据)
    // 从aList的第三个索引位置开始，删除两个元素，之后在该位置填充test, shuai, 1三个元素
    aList.splice(3, 2, "test", "shuai", 1)

循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// while循环
<script type="text/javascript">
    window.onload = function () {
        // 对象实例创建
        var aList = new Array('tets', 1, 2, 3)
        var i = 0;
        var sDivInnerHtml = document.getElementById("vid1");
        while (i < aList.length) {
            sDivInnerHtml.innerHTML += "<p>" + aList[i] +"</p>"
            i ++ ;
        }
    }
</script>


// for循环
<script type="text/javascript">
    window.onload = function () {
        // 对象实例创建
        var aList = [1,2,3,4,5,6,7,8,8,9]
        var sDivInnerHtml = document.getElementById("vid1");
        for (i =0; i<aList.length; i++){
            sDivInnerHtml.innerHTML += "<p>" + aList[i] + "</p>"
        }
    }
</script>

字符串

  • javascript 组成

    • ECMAScript：构成了javascript的语法
    • DOM文档对象模型：操作html和css的方法
    • BOM浏览器对象模型：操作浏览器的一些方法

  • 字符串方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    // sString：是一个字符串
    // 字符串拼接
    sString + "123"

    // 将字符串转化为整数
    parseInt(sString)

    // 将字符串转化为小数
    parseFloat(sString)

    // 将字符串按指定字符进行分割
    sString.split('-')
    sString.split("") // 将字符串所有的字符全部分割出来

    // 获取字符串中指定位置的字符
    sString.charAt(索引值)

    // 查找字符串中是否包含某字符
    sString.indexOf("shuai")

    // 截取字符串内瓤，终止位置可不填
    sString.substring(起始位置, 终止位置)

    // 字符串转换为大写
    sString.toUpperCase()

    // 字符串转换为小写
    sString.toLowerCase()

    // 字符串反转
    sString.split("").reverse().join("")

  • 类型转换

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 直接转换
    // isNum是数字类型的字符
    parseFloat(isNum)
    parseInt(isNum)

    // 隐式转换：==、-
    if ('3' == 3) ...
    alert('10' - 3)  // 得7

    // NaN 和 isNaN
    parseInt("1test")  // 得1
    parseInt("test1")  // 得NaN

  • 变量作用域

    变量作用的范围为该变量所在{}范围内。

定时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
    window.onload = function () {
        var oDiv = document.getElementById('div1');

        function getTime() {
            // 生成时间对象
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var date = now.getDate();
            var week = now.getDay();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            alert(now + year + month + date + week + hour + minute + second)
        }
        getTime();
        setInterval(getTime(), 1000);
    }
</script>

封闭函数

  • 封闭函数用于函数定义使用时，不会覆盖掉其它同名函数，使用方式如下：

    1
    2
    3
    4
    // 封闭函数的定义，使用(包裹)
    (funcation(){
         alert(1);
    })();

  • 封闭函数也可以使用**!和~**来定义

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 封闭函数的定义，使用!
    !funcation(){
         alert(1);
    }();

    // 使用~定义
    ~funcation(){
         alert(1);
    }();

  • 解决网站压缩代码时，造成封闭函数前后连接在一起的问题

    1
    2
    3
    4
    // 在封闭函数的前方添加一个;
    ;(funcation(){
         alert(1);
    })();

内置函数

document

1
2
3
4
5
// 获取上一个跳转页面的url
document.referrer

// 网页得title
document.title

location

1
2
3
4
5
6
7
8
// 获取当前地址栏的Url
window.location.href

// 获取地址中的?携带的参数部分，如：www.baidu.com?id=1&name=2，它获取的是：?id=1&name=2
window.location.search

// 获取地址中的#携带的参数部分，如：www.baidu.com#id=1,它获取的是：#id=1
window.location.hash

Math

math是已经实例化的对象，可以直接使用

1
2
3
4
5
6
7
8
// 获取0~1之间的随机数
var nNum = Math.random();

// 向上取整数,结果：6
var nNum = Math.ceil(5.6);

// 向上取整数,结果：5
var nNum = Math.floor(5.6);

正则

定义

1
2
3
4
5
6
/* 参数有以下：
    i：忽略大小写
    g：贪婪匹配
    m：执行多行匹配
*/
var $变量名 = /正则部分/参数;

使用

1
2
3
4
5
/* 方法：
    test：检测输入内容是否匹配正则
    replace：将符合正则的部分替换为指定的字符
*/
$rexReg.test($content)  // 符合返回true，反之false

知识点

提供脑图以便于记忆：脑图