JavaScript

作者: jxvl假装 | 来源:发表于2019-09-29 09:00 被阅读0次

JavaScript-01
锋利的 jQuery | 第1章_认识 jQuery
javascript学习思维导图
javaScript 基础知识
JavaScript 基础
JS——Hoisting(提升)
2018-06-22
JavaScript基础
JavaScript 学习脑图
JavaScript学习指南

JavaScript介绍

JavaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是欠与用户交互的问题，包括使用交互与数据交互。javascript是浏览器解释执行的，前端脚本语言还有JScript（微软，ie独有），ActionScript（adobe公司，需要插件）等

前端三大块

HTML：页面结构
CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

JavaScript嵌入页面的方式

行间事件（主要用于事件）

input type="botton" name="" onclick="alert('ok!');">
<!-- onclick表示鼠标点击的时候 -->

页面script标签嵌入

<script type="text/javascript">
    alert('ok!');
</script>

外部引入

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

变量

定义

JavaScript是一种弱类型语言，JavaScript的变量类型由它的值来决定。定义变量需要用关键字"var"

var iNum = 123;
var sTr = "add";
//同时定义多个变量可以用","隔开，共用一个var关键字
var iNum = 45, sTr = "qwe", sCount = "68";

ps：一条js语句以";"结束表示

变量类型

5种基本类型：

number数字类型
string 字符串类型
boolean 布尔类型 true | false
undefined undefined类型，变量声明未初始化，它的值就是undefined
null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回的值就是null，比如：var obj=none

1种复合类型：

object

注意：两个“方法”：

isNaN(参数)：判断一个变量是否是数，is not a number
typeof 变量：获得变量类型

正则表达式变量

定义：用两个/包起来

使用：正则表达式变量.test(要匹配的对象)

var reg = /^1\d{10}$/;
// var reg = /^afhvasAdfa$/i;表示忽略大小写
console.info(reg.test("18323954188"));

如果在变量定义的最后加：i：表示忽略大小写

特殊的“值”

var max = Infinity; //max为无穷，对应的，负无穷为：-Infinity

三目表达式

expr ? expr1 : expr2;

//一行代码求三个数的最大值
max = a>b?(a>c?a:c):(b>c:b:c);

内容的简单输出（程序调试）

alert（）：以弹窗的形式（会阻止函数的运行）
console.info（）：控制台输出，对于在控制台的操作，可以直接访问程序中的全局变量，eg：直接输入：iNum，就可以访问这个变量
console.log（）：控制台输出
document.write（）：写到页面上
document.title = 要显示的数据：显示在页面标题上

prompt()：在网页弹出输入框
confirm()：在网页弹出确认框

命名

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

区分大小写
第一个字符必须是字母、下划线、或者美元符号（$）
其他字符可以是字母、下划线、美元符号或数字

匈牙利命名风格

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Fouction 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

注释

单行注释：//单行注释以双斜线标识
多行注释：/* 多行注释用/*...*/ 包起来*/

实例：

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        var iNum = 12;
        // 赋值语句
        // 每个语句用";"结束
        // 对缩进没有要求
        alert("hello");
        alert(iNum);
        // 系统的函数，用于提示用户信息
        var sTr = "hello world";
        alert(sTr);
        // var sTr = "hello world", iNum = 12;
        // 缩写
    </script>
</head>
<body>

</body>
</html>

元素的获取

方法一：getElementById

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，如：

<script type="text/javascript">
    var oDiv = document.getElementById("div1");
</script?

……

<div di="div1">这是一个div元素</div>

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面是从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面的最下边（body里面的最下面）

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">

<body>
    <div id="div1">这是一个div元素</div>
    <script type="text/javascript">
        var oDiv1 = document.getElementById("div1");
        // 获得了这个元素，通常要对其进行操作，最常见的操作是操作她的属性
        oDiv1.style.color="red";
    </script>
</body>
</head>
</html>

第二种方法：window.onload = function(){ js的代码 }：告诉程序，当加载完整个页面的内容的时候，再执行这里面的代码

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        window.onload = function(){
            var oDiv1 = document.getElementById('div1');
            oDiv1.style.color="gold";   //标签里面怎么写，这里就怎么写
            oDiv1.style.fontSize="18px";
            // 对于css中的“-”，在js里面直接用驼峰即可
            var sId = oDiv1.id; //读取属性
            alert(sId);
            var oA = document.getElementById("link");
            oA.href = "www.baidu.com";
            oA.title = "百度一下";
        }
    </script>
<body>
    <div id="div1">这是一个div元素</div>
    <a href="#" id="link">这是一个a标签</a>
</body>
</head>
</html>

第三种方法：暂略

获取元素的方法二：getElementsByTagName

可以使用内置对象document上的getElementsByTagName方法来获得页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素

案例：隔行换色

<!DOCTYPE html>
<html>
<head>
    <title>标签获取元素</title>
    <meta charset="utf-8">
    <style type="text/css">

    </style>
    <script type="text/javascript">
        window.onload = function() {
            var aLi = document.getElementsByTagName('li');  //会选中页面上所有的li
            alert(aLi.length);  //弹出13
            var iLiLen = aLi.length;
            for (var i = 0; i < iLiLen; i++){
                aLi[i].style.backgroundColor = "gold";
            }
            var OUl = document.getElementById('list1');
            var aLi2 = OUl.getElementsByTagName('li');  //只选中list1中的li标签
            var iLi2 = aLi2.length;
            for (var i = 0; i < iLi2; i += 2){  //设置隔行换色
                aLi2[i].style.backgroundColor = "yellowgreen";
            }
        }
    </script>
</head>
<body>
    <ul id="list1">
        <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>
    </ul>
    <ul id="list2">
        <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
    </ul>
</body>
</html>

获取元素标签的方法三：getElemetByClassName

var oDiv1 = document.getElementsByClassName("dvi1");

获取元素标签的方法四：querySelector/querySelectorAll

var oEles = document.querySelector("#button2");

注意：此方法仅仅返回匹配指定选择器的第一个元素，如果要返回匹配的所有标签，使用下面的方法

document.querySelectorAll(".div");
//返回的是一个集合，可以用[下标]的方法获取其中的元素

操作元素的属性

获取页面的元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写

操作属性的方法

"."操作：直接操作属性
"[]"操作：可以识别变量

属性写法

html的属性和js里面的属性写法一样
"class"属性写成"className"（这是class属性特别的地方）
"style"属性里面的属性，有横杠的改成驼峰式（横杠后面的单词首字母大写），比如："font-size"，改写为“style.fontSize"

案例：

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        window.onload = function(){
            var oDiv1 = document.getElementById('div1');
            var sMyStyle = "color";
            var sValue = "green";
            oDiv1.style.color="gold";
            // oDiv1.style.sMyStyle = sValue;   如果是直接这样写，sMyStyle会被认为是属性，而不是变量，当程序把其当作属性去找时，找了一圈找不到，于是什么也不干，也不报错
            oDiv1.style[sMyStyle] = sValue;
            // 这样做，就会把sMyStyle认为是变量，而不是直接是去找属性
        }
    </script>
<body>
    <div id="div1">这是一个div元素</div>
</body>
</head>
</html>

innerHTML

innerHTML可以读取或者写入标签包裹的内容

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        window.onload = function(){
            var oDiv1 = document.getElementById('div1');
            alert(oDiv1.innerHTML); //读元素，输出“这是一个div元素”
            oDiv1.innerHTML = "<a href='http://www.baidu.com'>百度一下</a>";    //写元素，在里面写一个标签
        }
    </script>
<body>
    <div id="div1">这是一个div元素</div>
</body>
</head>
</html>

函数

函数就是重复执行的代码片

函数的定义与执行

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function fnAlert(){ //函数定义,function：定义函数的关键字，相当于Python里面的def
            alert("hello world");
        }   //注意，这里没有分号；函数体内没有缩进要求
        fnAlert();  //函数执行
    </script>
<body>
    <div id="div1">这是一个div元素</div>
</body>
</head>
</html>

案例：当点击的时候才执行函数

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function fnAlert(){ //函数定义
            alert("hello world");
        }   //注意，这里没有分号
    </script>
<body>
    <div id="div1" onclick="fnAlert()">这是一个div元素</div>
    <!-- 当点击的时候，执行fnAlert() -->
</body>
</head>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function fnAlert(){ //函数定义
            alert("hello world");
        }   //注意，这里没有分号
        // fnAlert();   //函数执行
    // }
        function fnChange(){
            var oDiv1 = document.getElementById("div1")
            oDiv1.style.color = "red";
            oDiv1.style.fontSize = "30px";
        }
    </script>
<body>
    <input type="button" name="" value="改变div1" onclick="fnChange()">
    <div id="div1" onclick="fnAlert()">这是一个div元素</div>
    <!-- 当点击的时候，执行fnAlert() -->
</body>
</head>
</html>

箭头函数

var a = v => v+2;
//相当于：function a(v){return v+2;}

匿名函数

情形：某个函数只为某个元素服务

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
    <script type="text/javascript">
            window.onload = function(){
                var oBtn = document.getElementById("btn1");
                oBtn.onclick = function(){
                    var oDiv1 = document.getElementById("div1")
                    oDiv1.style.color = "red";
                    oDiv1.style.fontSize = "30px";
                };  
            }
    </script>
<body>
    <input type="button" name="" value="改变div1" id="btn1">
    <div id="div1">这是一个div元素</div>
    <!-- 当点击的时候，执行fnAlert() -->
</body>
</head>
</html>

经典使用：网页换肤，通过函数，实现对同一个网页采用不同的css文件从而换肤（拥有不同的显示格式）

网页换肤简单示例：

html代码：

<!DOCTYPE html>
<html>
<head>
    <title>网页换肤</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/skin01.css" id="Link">
    <script type="text/javascript">
        window.onload = function() {
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');
            var oLink = document.getElementById("Link");
            oBtn01.onclick = function(){
                oLink.href = "./css/skin01.css";
            }
            oBtn02.onclick = function(){
                oLink.href = "./css/skin02.css";
            }
        }
    </script>
</head>
<body>
    <input type="button" name="" value="皮肤1" id="btn01">
    <input type="button" name="" value="皮肤2" id="btn02">
</body>
</html>

./css/skin01.css

body {
    background-color: yellowgreen;
}
input {
    width: 200px;
    height: 50px;
    background-color: gold;
    color: #fff;
}

./css/skin02.css

body {
    background-color: #ddd;
}
input {
    width: 200px;
    height: 50px;
    border-radius: 25px;
    background-color: pink;
    color: #666;
}

提取行间事件

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
    <script type="text/javascript">         
            window.onload = function(){
                var oBtn = document.getElementById("btn1")
                oBtn.onclick = fnChange;    //注意：此处不能加引号
                //注意：将事件与一个函数相关联，函数不能写小括号（行间的时候需要写小括号）
                function fnChange(){    //函数的定义也可以提到window之外
                    var oDiv1 = document.getElementById("div1")
                    oDiv1.style.color = "red";
                    oDiv1.style.fontSize = "30px";
                }
            }
    </script>
<body>
    <input type="button" name="" value="改变div1" id="btn1">
    <div id="div1">这是一个div元素</div>
    <!-- 当点击的时候，执行fnAlert() -->
</body>
</head>
</html>

变量与函数预解析

JavaScript解析过程分为两个阶段，先是编译阶段，然后是执行阶段，在编译阶段会将function定义的函数（整体）提前；并且将var定义的变量声明提前，将它赋值为undefined（即：变量的声明提前，但是赋值不提前）。但是如果使用了在整个程序中都没有定义的变量或函数，会出错

函数传参

<!DOCTYPE html>
<html>
<head>
    <title>网页换肤</title>
    <meta charset="utf-8">
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function() {
            function fnChangeStyle(myStyle, val){
                var oDiv1 = document.getElementById('div1');
                oDiv1.style[myStyle] = val;
            }
            fnChangeStyle("fontSize", "30px");
            fnChangeStyle("backgroundColor", "pink");
        }
    </script>
</head>
<body>
    <div class="div1" id="div1">这是一个div</div>
</body>
</html>

函数返回值

<!DOCTYPE html>
<html>
<head>
    <title>案例</title>
    <meta charset="utf-8">
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function() {
            function fnAdd(a, b){
                var c = a+b;
                alert("内部的c="+c);
                return c;
            }
            alert(fnAdd(2,5));
        }
    </script>
</head>
<body>
    <div class="div1" id="div1">这是一个div</div>
</body>
</html>

案例：加法运算

<!DOCTYPE html>
<html>
<head>
    <title>加法运算</title>
    <meta charset="utf-8">
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function() {
            var oInput01 = document.getElementById('input01');
            var oInput02 = document.getElementById('input02');
            var oBtn01 = document.getElementById('btn01');

            oBtn01.onclick = function(){
                var iVal01 = parseInt(oInput01.value);
                // parseInt是将字符串转换为整数
                var iVal02 = parseInt(oInput02.value);
                alert(iVal02 + iVal01);
            }
        }
    </script>
</head>
<body>
    <input type="text" name="" id="input01">+<input type="text" name="" id="input02">
    <input type="button" name="" value="相加" id="btn01">
</body>
</html>

return关键字

作用：

返回函数的执行结果
结束函数的运行
阻止默认行为

作用域

变量作用域指的是变量的作用范围，js中的变量分为全局变量和局部变量

JS默认情况下，变量以函数为范围
变量加var和不加var的区别：前者是局部变量，后者是全局变量
全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问(包括修改)
局部变量：在函数内部定义的变量，只个在定义该变量的函数内部访问，外部无法访问

闭包与封闭函数

闭包

“函数里面套函数”（类似于python），内部的函数，可以使用外部的变量

function otter(){
    var a = "outter";
    function inner(){
        var a = "inner";
        console.info(a);
    }
    console.info(a);
    return inner;
}
console.info(outter()());

ps：js中，一切皆对象

封闭函数

封闭函数就javascript中匿名函数的另外一种叫法，创建一个一开始就执行而不用命名的函数

作用：创建一个独立的空间，在这个空间内自己定义的变量和函数不会影响到外界，外界也无法对其进行访问，当可以避免在一个文件中写的函数将另一个文件中的函数覆盖

通常在一个封闭函数中完成一个单独的功能

第一种写法：

(function (){
    alert("hello world");
})();

第二种写法：

!function(){
    函数的功能
}();

第三种写法：

~function(){
    函数的功能
}();

ps：关于函数的压缩

函数最终会被压缩成一行，为了避免一个函数与前面的一行代码连接起来，在函数的定义前面加一个分号

;(fundtion()[
函数的功能
})();

条件语句

运算符

算数运算符：+（加）、-（减）、*（乘）、/（除）、%（求余/求模）
赋值运算符：=、+=、-=、*=、/=、%=
条件运算符：==（等于）、===（为了修正==中的bug）、>、>=、<、<=、!=、&&（且）、||（或）、！（否）
自增减运算符：++、--；注意：a++，先使用a的值，再使a+1，++a，先+1，再使用

对于==，不太严谨，如果是字符串的2和整数的2，会判断相等，因为它会先将比较的二者换算为相同的类型，再进行比较

对于===，先比较两边的类型，如果类型不同，直接不用比较，判断为不等，否则再进行判断

ps：JS中！、&&、||的优先级特别低，比如可以直接这样用：if (4>3 && 2>1){}

if else

if(条件语句){
……
}else{
……
}

案例：

<!DOCTYPE html>
<html>
<head>
    <title>案例</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box01 {
            width: 200px;
            height: 400px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oBtn01 = document.getElementById('btn01');
            var oBox01 = document.getElementById('box01');
            oBtn01.onclick = function(){
                if (oBox01.style.display != "none"){
                    oBox01.style.display = "none";
                }
                else{
                    oBox01.style.display = "block";
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" name="" value="切换" id="btn01">
    <div class="box01" id="box01"></div>
</body>
</html>

注意：对于JavaScript，判断语句与其他语句不同，例如以上案例中的if (oBox01.style.display != "none)不能写成if (oBox01.style.display)

ps：对于style中的属性，JS是到行标签中去找，如果在行标签中没有指定，那么在JS中就无法找到，该值就为空

else if

if(){
……
}
else if(){
……
} 
else{
……
}

switch

性能比多重if else语句要高

switch(变量){
    case 一个值:
        ……;break;
    case 一个值:
        ……;break;
    ……
    default:
        当上面的case都不满足时执行的语句;
}

案例：计算器改进

<!DOCTYPE html>
<html>

<head>
    <title>计算器</title>
    <meta charset="utf-8">
    <style type="text/css">
    .box01 {
        width: 200px;
        height: 400px;
        background-color: gold;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var oInput01 = document.getElementById('input01');
        var oOperator = document.getElementById('operator');
        var oInput02 = document.getElementById('input02');
        var oAnwser = document.getElementById('anwser');
        var oBtn = document.getElementById('btn');

        oBtn.onclick = function() {
            var first = parseInt(oInput01.value);
            var second = parseInt(oInput02.value);
            switch (oOperator.value) {
                case "+":
                    {
                        ans = first + second;
                        break;
                    }
                case "-":
                    {
                        ans = first - second;
                        break;
                    }
                case "*":
                    {
                        ans = first * second;
                        break;
                    }
                case "/":
                    {
                        ans = first / second;
                        break;
                    }
                case "%":
                    {
                        ans = first % second;
                        break;
                    }
                default:
                    {
                        ans = "error";
                    }
            }
            oAnwser.value = ans;
        }
    }
    </script>
</head>

<body>
    <input type="text" name="" id="input01">
    <input class="operator" type="text" style="width: 10px;height: 10px;margin: 5px;" id="operator">
    <input type="text" name="" id="input02">
    <input type="button" name="" value="=" id="btn">
    <input type="text" name="" value="" id="anwser">
</body>

</html>

数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。（这一点与python中的列表类似）

数组的定义方法

//对象的实例创建
var aList = new Array(1,2,3);   //通过面向对象的方式创建，性能不高，一般不这么用

//直接量创建
var aList2 = [1,2,3,"asd"];

操作数组中数据的方法

获取数组的长度：数组名.length; 注意：length是属性，不是方法, aList.length
用下标操作数组的某个数据：数组名[下标]; 注意：下标还是从0开始, aList[0]
join()将数组成员通过一个分隔符合并成字符串，aList.join('-')

var sList = [1,2,3,4];
alert(aList.join('-');  //弹出1-2-3-4

push()和pop()从数组最后增加成员或删除成员，aList.push(5), aList.pop()

var aList = [1,2,3,4];
aList.push(5);
alert(aList);   //弹出1，2，3，4，5
aList.pop();
alert(aList);   //弹出1，2，3，4

unshift()和shift()从数组前面增加成员或删除成员，aList.unshift(5)，aList.shift()

var aList = [1,2,3,4];
aList.shift();  //弹出2，3，4
alert(aList);   
aList.unshift(1);   //弹出1，2，3，4
alert(aList);

reverse()将数组元素逆序，aList.reverse()，就地逆序
indexOf()返回数组中某个元素第一次出现时的索引值，aList.indexOf(5)
splice()在数组中增加或删除成员，aList.splice(2,1,7,8,9) 从第二个元素开始，删除1个元素，然后在此位置（下标2处）增加7，8，9三个元素

多维数组

多维数组指的是数组的成员也是数组的数组

var aList = [[1,2,3],["a","b","c","d"]];
alert(aList[0][1]); //弹出2
alert(aList.length);    //弹出2
alert(aList[1].length); //弹出4

循环语句

用法和C语言相同

for循环

for (var i=0; i < 8; i++){

}

案例：将数据放到页面中

<!DOCTYPE html>
<html>
<head>
    <title>案例</title>
    <meta charset="utf-8">
    <style type="text/css">

    </style>
    <script type="text/javascript">
        window.onload = function() {
            var aList = ["美人鱼","三国演义","红楼梦"];
            var oList = document.getElementById('mylist');
            var iLen = aList.length;
            var sTr = "";
            for(var i=0; i<iLen; i++){
                sTr +='<li>' + aList[i] + '</li>';
            }
            oList.innerHTML = sTr;
        }
    </script>
</head>
<body>
    <ul id="mylist"></ul>
</body>
</html>

案例：数组去重

<!DOCTYPE html>
<html>
<head>
    <title>案例</title>
    <meta charset="utf-8">
    <style type="text/css">

    </style>
    <script type="text/javascript">
        window.onload = function() {
            //数组去重
            var aList = [1,23,4,3,2,3,4,5,5,6,6,7,4,2];
            var iLen = aList.length;
            var aList2 = [];
            for (var i = 0; i < iLen; i++){
                if(i == aList.indexOf(aList[i])){
                    //判断元素是否是第一次出现
                    aList2.push(aList[i]);
                }
            }
            alert(aList2);
        }
    </script>
</head>
<body>
    <ul id="mylist"></ul>
</body>
</html>

while循环

while(i<8){

i++;
}

do while循环

var i = 0;
do {
要做的事情
}while(某个条件);

for in

for (i in aTr){
    console.info(aTr[i]);   //一次获取aTr中的元素
}

break和continue

break：跳出循环体
continue：跳出本次循环（如果条件还满足循环的要求，则继续下一次循环）

JavaScript组成

ECMAscript：javascript的语法（变量、函数、循环语句等语句）
DOM：文档对象模型，操作html和css的方法（document object module），对文档节点进行操作
BOM：浏览器对象模型，操作浏览器的一些方法（browser object module）

字符串处理方法

与java类似

字符串合并操作："+"，数字相加就直接是数字，如果是数字加字符串，就当作字符串相加
parseInt()：将数字字符串转换为整数，如果是小数字符串，直接舍去小数点后的部分
parseFloat()：将浮点数字符串转换为小数
split()：把一个字符串分隔为字符串组成的数组
charAt()：获取字符串中的某一个字符，如果没有，返回-1
indexOf()：查找字符串是否含有某字符，如果参数是字符串，则返回第一个字符所在的索引，不存在则弹出-1
substring()：截取字符串方法用法：substring(start, end)（包首不包尾），注意，string为小写。如果第二个参数不写，一直截取到末尾。与substr()非常类似
toUpperCase()：字符串转大写，本身不会改变
toLowerCase()：字符串转小写，本身不会改变

字符串反转

字符串没有reverse方法

var sTr = "asf2345ujf";
var sTr2 = sTr.split("").reverse().join("");
alert(sTr2);

定时器

定时器在javascript中的作用

制作动画
异步操作
函数缓冲与节流

定时器类型及语法

定时器可以隔一段时间调函数

/*
    定时器：
    setTimeout 只执行一次的定时器
    clearTimeout 关闭只执行一次的定时器
    setInterval 反复执行的定时器
    clearInterval 关闭反复执行的定时器
*/

var time1 = setTimeout(myalert, 2000);  
//第一个参数为函数名称或者是匿名函数，第二个参数是时间，单位是毫秒（不写）
//开一个定时器并将其赋给一个变量（如果不考虑后面的关闭，可以不必赋给变量）
var time2 = setInterval(myslert, 2000);

/*
clearTimeout(time1);
clearInterval(time2);
*/

function myalert(){
    alert("ok!");
}

案例：定时器制作移动动画

<!DOCTYPE html>
<html>
<head>
    <title>定时器动画示例</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: gold;
            position: absolute;
            left: 0px;
            top: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            var iLeft =  0;
            var timer = setInterval(function (){
                iLeft += 3;
                oDiv.style.left = iLeft + "px";
                if (iLeft > 700){
                    clearInterval(timer);   //如果iLeft>700，动画停止
                }
            }, 30); //如果要动画比较连续，参数有一个经验值：30ms
        }
    </script>
</head>
<body>
    <div class="box" id="div1"></div>
</body>
</html>

案例：定时器制作无缝滚动(细节需改进)

<!DOCTYPE html>
<html>
<head>
    <title>无缝滚动</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .list_con {
            width: 1000px;
            height: 200px;
            border: 1px solid #000;
            margin: 10px auto 0px;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;
        }
        .list_con ul {
            list-style: none;
            width: 4000px;
            height: 200px;
            position: absolute;
            left: 0px;
            /*top: 0px;*/
        }
        .list_con li a img {
            float: left;
            line-height: 200px;
            width: 268px;
            height: 200px;
        }
        .left, .right {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: yellowgreen;
        }
        .left {
            display: inline-block;
            line-height: 100%;
            float: left;
        }
        .right {
            /*display: inline-block;*/
            line-height: 100%;
            float: right;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('slide');
            var oUl = oDiv.getElementsByTagName('ul')[0];   //取出ul选择集中的第1个元素（但是因为一共只有1个元素
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
            var oBtn01 = document.getElementById('btn01')
            var oBtn02 = document.getElementById('btn02');
            var iLeft = 0;
            var iSpeed = 2
            var iNoewSpeed = 0;
            function moving(){
                if (iLeft > 0){
                    iLeft = -1000;
                }
                else if (iLeft < -1000){
                    iLeft = 0;
                }
                iLeft += iSpeed;
                oUl.style.left = iLeft + "px";
                if (iLeft < -268 * 6){
                    iLeft = 0;
                }
            }
            var timer = setInterval(moving, 30);

            oBtn01.onclick = function(){
                iSpeed = -3;
            }
            oBtn02.onclick = function(){
                iSpeed = 3;
            }
            oDiv.onmouseover = function(){
                iNoewSpeed = iSpeed;
                iSpeed = 0;
            }   //当鼠标移入的时候
            oDiv.onmouseout = function(){
                iSpeed = iNoewSpeed;
            }   //当鼠标移出的时候
        }
    </script>
</head>
<body>
    <div class="btns_con">
        <div class="left" id="btn01">&lt;</div>
        <div class="right" id="btn02">&gt;</div>
    </div>
    <div class="list_con" id="slide">
        <ul>
            <li><a href=""><img src="./images/58city.jpg"></a></li>
            <li><a href=""><img src="./images/baidu.jpg"></a></li>
            <li><a href=""><img src="./images/iqiyi.png"></a></li>
            <li><a href=""><img src="./images/jingdong.png"></a></li>
            <li><a href=""><img src="./images/sina.jpg"></a></li>
            <li><a href=""><img src="./images/taobao.png"></a></li>
        </ul>
    </div>
</body>
</html>

案例：定时器制作时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟案例</title>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            // alert(oDiv);

            function fnTimego(){
                var sNow = new Date();
                var iYear = sNow.getFullYear();
                // alert(iYear);
                var iMonth = sNow.getMonth() + 1;
                // 月份是从0-11，所以需要加1
                var iDate = sNow.getDate();
                var iWeek = sNow.getDay();  //星期是从0到6，0是星期天
                var iHour = sNow.getHours();
                var iMinute = sNow.getMinutes();
                var iSecond = sNow.getSeconds();

                var sTr = '当前时间是：' + iYear + '年' + iMonth + '月' + iDate + '日' + fnToweek(iWeek) + "  " + fnTodouble(iHour) + ':' + fnTodouble(iMinute) + ":" + fnTodouble(iSecond) ;
                oDiv.innerHTML = sTr;
            }
            

            function fnToweek(n){
                if(n == 0){
                    return "星期日";
                }else if(n == 1){
                    return "星期一"
                }else if(n == 2){
                    return "星期二"
                }else if(n == 3){
                    return "星期三"
                }else if(n == 4){
                    return "星期四"
                }else if(n == 5){
                    return "星期五"
                }else if(n == 6){
                    return "星期六"
                }
            }

            function fnTodouble(n){
                if(n < 10){
                    return "0" + n;
                }else{
                    return n;
                }
            }

            fnTimego();
            setInterval(fnTimego,1000);

        }
    </script>
    <style type="text/css">
        #div1 {
            text-align: center;
            font-size: 30px;
            color: hotpink;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

面向对象

对象的定义与创建

法一：只能创建一个对象（作用类似于单例设计模式）

//法一：只能创建一个对象
var student = {
    //用大括号括起来的就是对象
    name:"zhang3",  //注意：这里必须是逗号，不能是分号
    age:23,
    sayInfo:function(){ //注意这里是冒号
        alert(this.name + ":" + this.age);
    }
}
student.sayInfo();
alert(student.age);
alert("---分隔符---");
alert(student['age']);

法二：可以创建多个对象

//法二：可以创建多个对象
function Student(name,age){
    this.name = name;   //核心是this关键字
    this.age = age;
    this.sayHello = function(){alert("hello world!")}
}
var s1 = new Student("li4", 88);
s1.sayHello();

此时，Student函数可以称之为构造函数

继承：基于原型的继承

对于JS，每用一个类创建一个对象，不仅会开辟一块空间存储属性，还会存储方法，即：对于方法，js中的对象并不共享代码，如果自己没有，就去原型上找，如果原型上还没有，就去原型的原型上找

即：基于原型的继承保证了同一个类中的多个对象对类中方法的代码区共享

function Student(name,age){
    this.name = name;
    this.age = age;
};
Student.prototype.sayHello = function(){alert("hello world!")}
//新创建的对象若使用此方法，就去原型中查找，即它的对象可以共享方法的代码段
var s1 = new Student("li4", 88);
s1.sayHello();

常用内置对象

document

document.getElementById(元素的id); //通过id获取元素
document.getElementsByTagName(标签的名字);   //通过标签的名字获取元素
document.referrer   //一个属性，获取上一个跳转页面的地址（需要服务器环境）

location

window.location.href    //获取或重定向url地址
window.location.search  //获取地址参数部分（?及其以后的部分）
window.location.hash    //获取页面锚点的哈希值(地址栏#及其后部分)
window.location.reload()    //刷新页面

案例：通过地址参数改变页面背景

<!DOCTYPE html>
<html>
<head>
    <title>通过网址参数控制页面背景色</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        window.onload = function(){
            var oBody = document.getElementById('body01');
            var sData = window.location.search;
            // alert(sData)
            if (sData != ""){
                var aRr = sData.split("=");
                var iNum = aRr[1];
                if (iNum == 1){
                    oBody.style.backgroundColor = 'gold';
                }else if(iNum == 2){
                    oBody.style.backgroundColor = "pink";
                }
            }
        }
    </script>
</head>
<body id="body01">
</body>
</html>

Math

Math是一个对象

Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过网址参数控制页面背景色</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        window.onload = function(){
            var iPi = Math.PI;
            console.log(iPi);
            var iNum = Math.random();   //js中不能产生某个区间的随机数，需要自己做
            console.log(iNum);
            //如何生成一个区间内的随机整数，eg：10-20
            var iN01 = 10, iN02 = 20;
            var fRand = Math.floor((iN02 - iN01) * Math.random() + iN01);   //因为用了floor，所以包首不包尾；如果要包尾，就再+1即可
            console.log(fRand);
        }
    </script>
</head>
<body id="body01">
</body>
</html>

history

window.history.forward(1);  //相当于浏览器中的前进按钮

模块的导入

在需要被导出的js文件中，对于需要导出的函数：

export function sum(x, y){
    return x + y;
}

在需要导入上面sum方法的文件中

import {sum} from "lib/math.js"`//假设上面代码文件的路径为lib/math.js

事件（event）

事件的传播机制

事件的三个阶段

1、事件捕获：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

2、目标阶段：事件对象传递到事件目标。如果事件的type属性表明后面不会进行冒泡操作，那么事件到此就结束了。

3、事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。（通常要设置禁止冒泡）

在冒泡型事件流中click事件传播顺序为div=>body=>html=>document。
在捕获型事件流中click事件传播顺序为document=>html=>body=>div。

如何取消事件的传播

js冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。

用法

<div 事件名="函数"></div>
//当这个元素发生了对应的事件时，就会执行这个函数

onclick

<!DOCTYPE html>
<html>
<head>
    <title>事件</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function b1(){
            alert("哈哈哈哈");
        }

        function b2(arg){   //形参名随便取
            arg.stopPropagation();  //阻止事件向上冒泡（给父级元素）
            alert("嚯嚯嚯嚯");
            var src = arg.target;
            // 获取点击事件源，即元素（标签）对象
            src.style.backgroundColor = "lightcyan";
        }
        function b3(arg){
            arg.preventDefault();   //阻止默认行为，即让a标签不会跳转
            alert("跳转不了吧？");
            alert("想跳吗？");
            alert("快说想跳！");
            var jump = confirm("那就跳？");
            if (jump){
                window.location.href = arg.target.href;
            }
        }
    </script>

    <style type="text/css">
        #div1 {
            width: 500px;
            height: 400px;
            background-color: purple;
        }
        #div2 {
            width: 300px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="div1" onclick="b1(event)">
        <!-- event就是事件本身，比如点击的地方等 -->
        <div id="div2" onclick="b2(event)"></div>
    </div>
    <a href="http://www.baidu.com" onclick="b3(event)">百度一下</a>
</body>
</html>

其他事件

onload

可以body执行，<body onload="alert(123)"></body>,其中onload后面可以写一个方法，如：onload="test()",然后在JavaScript中写一个test()方法，则在页面一开始加载的时候会先调用这个方法。

onchange

当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。

onblur事件和onfocus事件

当前元素焦点变化时触发该事件，对应的是onfocus事件：得到焦点事件；onblur事件：元素失去焦点。

onscroll

窗口滚动事件：当页面滚动时调用函数。此事件写在方法（定义处）的外面，且函数名后面不加括号，例如window.onscroll=move。

onsubmit

属于<form>表单元素，写在<form>表单标签内。表单中的确认按钮被点击时发生的事件

鼠标相关

Onmouseover:鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。

Onmouseout:鼠标离开某对象范围时，触发事件调用函数。

Onmousemove:鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。

JavaScript-01
A 什么是JavaScript JavaScript 定义JavaScript JavaScript基础语法常用...
锋利的 jQuery | 第1章_认识 jQuery
一、JavaScript和JavaScript库 JavaScript简介 JavaScript是Netscape...
javascript学习思维导图
JavaScript 数据类型 JavaScript 变量 Javascript 运算符 JavaScript 流...
javaScript 基础知识
javaScript 基础知识一 JavaScript概述 JavaScript概述 JavaScript是客户...
JavaScript 基础
JavaScript基础 JavaScript简介JavaScript对象 JavaScript简介为什么使用j...
JS——Hoisting(提升)
Javascript Hoisting的概念 Javascript Hoisting：In javascript,...
2018-06-22
javascript之路 01-认识JavaScript 初始JavaScript JavaScript是一种直译...
JavaScript基础
JavaScript简介JavaScript变量JavaScript对象、函数JavaScript数字，字符串Ja...
JavaScript 学习脑图
javascript数据类型 javascript变量 javascript运算符 javascript数组 ja...
JavaScript学习指南
1.1 JavaScript基础概念： JavaScript (ECMAScript) ：JavaScript 是...