首先更正一个小问题，昨天的JavaScript入门一文中，末尾的“网页换肤”这个小案例的代码插入的有问题，插入的是名片案例的代码，排版不严谨向您致歉，现在补发更正。

下面是所需的css文件：

pifu1.css

pifu2.css

JavaScript高级

1、循环

作用：遍历和重复执行命令

1.1while

初始值 var 变量

while(条件){命令增量}

1.2 for

for(初始值；条件；增量){重复执行的命令}

i += 1可以写为i++

i -=1可以写为i--

只有1的时候可以用

2、数组

数组就相当于python中的列表

作用：储存多个数据

2.1 声明数组

var xx = 数值（如果是一个数据就是变量，如果是多个数据就是数组）

工作中不常用的：

var array（或者arr相关的名字）= new Array(数据,数据,.....)

new 后面跟一个单词，要注意大写

工作中常用的：

var arr = [数据,数据,......]

2.2数组常用操作方法

arr[下标值] arr是列表的名，支持下标索引

arr.length 列表长度，length是属性

push() -----数组结尾添加数据

arr.push('xxx')

pop() -----结尾删除数据

arr.pop()

splice(位置下标,删除的数据个数,添加的数据) -----任意位置添加删除数据

arr.splice(2,1,'xxx')

reverse() ----反转排序

arr.reverse()

join('符号') -----将数组转换位字符串用

arr.join('-') 将数组中的数组用-连接，如果不想有链接符号，直接''

indexOf(数据) ------返回某个数据在数组中第一次出现的位置的下标

indexOf做数组去重的时候用

在工作中，后端程序猿将数据处理好，然后拿到前端利用，做数据显示，不需要做大量的数据处理，所以学的操作比较少一些。

2.3 将数据写入页面

1.根据数组里面数据的个数一次生成li标签，生成好li标签之后统一放到ul里面即可

2.设置ul的内容

2.4 数组去重

定义一个新数组存储将来去重之后的数据

如果是没有重复的数据，追加到新的数组的结尾----追加数据用push

3、字符串常用操作方法

将数据转换为number型

parseInt() 去掉小数转换数据类型为数值型，不会四舍五入，直接显示的是整数位

parseFloat() 保留小数部分，转换为数据类型number

substring(开始位置的下标,结尾位置的下标) ----------截取字符串切片

注意此处不包含结束，左闭右开

split('符号') ------把字符串转换成数组

字符串反转：需要先转换成数组，然后reverse，反转数组之后再用join转换为字符串

indexOf和数组的操作一样

4、变量作用域

全局：

局部：作用于某个函数体内容

1.函数体内部修改全局变量直接修改，不需要global。

2.js声明变量可以和python一样不加var，只不过这样的变量就是全局。

5、定时器

作用：用时间控制命令是否重复执行

在哪里使用：淘宝首页图片每隔一段时间，重复执行更换图片

种类：

不重复执行命令的定时器-----单次定时器

setTimeout(命令,延迟时间)

重复执行命令的定时器 ----多次循环定时器

setInterval(命令,延迟时间)

命令：

参数一：1、匿名函数 2、函数指向 --函数名

参数二：延迟时间用毫秒为单位 1000毫秒=1秒

停止定时器：

clearTimeout停止单次定时器

clearInterval停止多次定时器

匿名函数没有名字，工作中，会先定义一个变量储存定时器，定时器是对象型，命名的时候和time相关。

工作中在清除后，一般会在清除后面加一行代码，就是将原先的变量重新定义为null

单次定时器也要停止，虽然视觉上它停止了，但是实际上还没停止，启动之后，还是要停止。

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
 9        window.onload = function(){
10            var oBtn1 = document.getElementById('btn1')
11            var oBtn2 = document.getElementById('btn2')
12            var oBtn3 = document.getElementById('btn3')
13            var oTimer = null  // 将来这个变量存储的是定时器，定时器是对象型
14            // 单次 setTimeout()
15            // 多次 setInterval()
16            // 都有两个参数：参数1是命令  参数2是延迟时间：以毫秒为单位 1000毫秒=1秒
17            // 命令:1、匿名函数  2、函数指向 -- 函数名
18            oBtn1.onclick = function(){
19                // 单次
20                setTimeout(function(){
21                    alert('单次定时器')
22                }, 2000)
23            }
24            oBtn2.onclick = function(){
25                // 多次
26                oTimer = setInterval(fnAlert, 2000)
27                function fnAlert(){
28                    alert('多次定时器')
29                }
30            }
31
32            oBtn3.onclick = function(){
33                // clearInterval(定时器的名字)
34                clearInterval(oTimer)
35                oTimer = null
36            }
37        }
38    </script>
39</head>
40<body>
41    <button id="btn1">单次定时器</button>
42    <button id="btn2">多次定时器</button>
43    <button id="btn3">停止多次定时器</button>
44</body>
45</html>

5.1无缝滚动案例

1.所有的产品默认左侧移动

2.箭头单击，改变运动方向

3.鼠标滑过，停止播放，鼠标离开，继续播放

有多少产品，宽度就要写多大

一个区域打开的和关闭的是一个定时器

动画移动原理：

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <style>
 9        div{
10            width: 200px;
11            height: 200px;
12            background: green;
13            position: absolute;
14            left: 0;
15            top: 0;
16        }
17    </style>
18
19</head>
20<body>
21    <div id="box"></div>
22</body>
23</html>
24<script>
25        var oBox = document.getElementById('box')
26        var num = 0  // 代替left取值
27        var speed = 5
28        setInterval(fnMove, 50)
29        function fnMove(){
30            // 改变定位的left取值
31            num += speed
32            // 如果num值大于800，左走 -- left减小
33            if(num>600)
34            {
35                // num -= 5
36                // num -= 10
37                // num += -5
38                speed = -5
39            }
40            // 如果num值<0. 右侧 -- left增大
41            if(num<0)
42            {
43                speed = 5
44            }
45            oBox.style.left = num+'px'
46        }
47    </script>

无缝滚动：（html文件）

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <title>无缝滚动</title>
 6    <style type="text/css">
 7        body,ul{
 8            margin:0;
 9            padding:0;
10        }
11
12        .list_con{
13
14            width:1000px;
15            height:200px;
16            border:1px solid #000;
17            margin:10px auto 0;
18            background-color:#f0f0f0;
19            position:relative;
20            overflow:hidden;
21        }
22
23        .list_con ul{
24            list-style:none;
25            width:2000px;
26            height:200px;
27            position:absolute;
28            left:0;
29            top:0;
30        }
31
32
33        .list_con li{
34            width:180px;
35            height:180px;
36            float:left;
37            margin:10px;
38        }
39
40        .btns_con{
41            width:1000px;
42            height:30px;
43            margin:50px auto 0;
44            position:relative;
45        }
46
47        .left,.right{
48            width:30px;
49            height:30px;
50            background-color:gold;
51            position:absolute;
52            left:-40px;
53            top:124px;
54            font-size:30px;
55            line-height:30px;
56            color:#000;
57            font-family: 'Arial';
58            text-align:center;
59            cursor:pointer;
60            border-radius:15px;
61            opacity:0.5;
62        }
63        .right{
64            left:1010px;            
65            top:124px;          
66        }
67    </style>
68    <script src="js/move.js"></script>
69</head>
70<body>
71    <div class="btns_con">
72        <div class="left" id="btn01">&lt;</div>
73        <div class="right" id="btn02">&gt;</div>
74    </div>
75    <div class="list_con" id="slide">
76        <ul id="list">
77        <li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
78        <li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
79        <li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
80        <li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
81        <li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
82        </ul>
83
84    </div>
85</body>
86</html>

js文件：

1window.onload = function(){
 2    // alert(1)
 3    console.log(100)
 4    document.title = 'daqiu'
 5    // 1、所有产品默认左侧移动 -- ul定位的left取值不断变大变小 -- 多次循环
 6    var oList = document.getElementById('list');
 7    var num = 0  // left取值
 8    var speed = 5
 9    var oTimer = null;
10    oList.innerHTML += oList.innerHTML  // 保证一份产品移动，另外一份做显示区域的填充
11    // oList.innerHTML = oList.innerHTML+oList.innerHTML
12    oTimer = setInterval(fnMove, 50)
13    function fnMove(){
14        // oList 的left取值变化
15        num -= speed
16
17        // 如果num《-1000 ，回到0
18        if(num<-1000)
19        {
20            num = 0
21        }
22
23        // 如果num>0 num = -1000
24        if(num>0)
25        {
26            num = -1000
27        }
28        oList.style.left = num +'px'
29    }
30
31    // 2、箭头单击，改变运动方向
32    var oBtn01 = document.getElementById('btn01')
33    var oBtn02 = document.getElementById('btn02')
34    oBtn02.onclick = function(){
35        speed = -5
36    }
37    oBtn01.onclick = function(){
38        speed = 5
39    }
40
41    // 3、鼠标滑过，停止播放--停止定时器，鼠标离开继续播放 -- 打开定时器 -- 选择显示区域
42    var oSlide = document.getElementById('slide')
43    oSlide.onmouseover = function(){
44        clearInterval(oTimer)
45        oTimer = null
46    }
47    oSlide.onmouseout = function(){
48        // setInterval(fnMove, 50) -- 速度越来越快 -- 定时器累加现象：一个区域保证停止和打开的是同一个定时器
49        oTimer = setInterval(fnMove, 50)
50    }
51}

6、调试程序的方法

alert弹窗后，如果不点确定，不会执行下面的代码，使浏览器冻结。

console 控制台

console.log(想输出的内容)

不会打打断程序，但是会需要多操作一步。

控制台也会报错。

element元素、标签

断点调试用source，谷歌浏览器外链式的才可以断点调试。嵌入式和行内式没办法

document.title = "xxx"可以改网页顶部的tile

7、封闭函数、封闭空间

作用：如果同事之间配合工作，如果定义函数的时候，名字冲突了的解决方案。

封闭函数有三种写法：

1.已经冲突了的解决方案：一个或任意多个封号然后写个小括号，将函数放在一个匿名函数里，然后将匿名函数放到小括号里。最外面再写一对小括号用来调用。

2.没有冲突之前：先写一个！，然后写一个匿名函数

3.和2一样，前面写~

但是所有的封闭函数有弊端，就是做不到哪里用哪里调用，只能是整体复制过去。

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
 9        function fn(){
10            alert(1)
11        }
12        fn()
13
14        // 已经冲突的情况
15        ;;;;;(function(){
16            function fn(){
17                alert(2)
18            }
19            fn()
20        })()
21
22        !function(){
23            alert(3)
24        }()
25
26        ~function(){
27            alert(4)
28        }()
29
30    </script>
31</head>
32<body>
33
34</body>
35</html>

JQuery

jq就是js封装的函数库而已------学习jq就是学习对应的函数的用法只要调用某个函数就能完成对应的功能，但是不需要自己封装函数。

学习jq就是学习函数的调用，如果记不住的就根据想要的功能区查手册，只记住一些关键的。

jq是美国人John Resig 2006年

jq 广告语：write less do more

支持链式编程和链式调用

js ---- 原生原生js

1.0 2.0 3.0 国内用的都是1.0 因为2和3不再兼容低版本的浏览器

1.jq的使用方法

先导入函数库，再写自己的。

jQuery的入口函数就是jq的事件语法

发生事件的目标.事件属性(function(){命令})

$(fuction(){})

jq可以有多个入口函数。

onclick 在jq里面是click

目标------$(选择器) -----jq的选择函数----查找标签的作用

jQuery中的选择器和css里面的选择器一样。但是jQuery中的选择器有和css中重叠的部分，也有不重叠的部分。

入口函数的作用：保证标签先执行，再执行命令。

bug

$is not defined 如果显示$找不到，百分之百是导入的代码错了

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script src="jQuery/jquery-1.12.4.min.js"></script>
 9    <script>
10        // jq入口函数就是jq的事件语法  onclick  -- click
11        // 目标.事件属性(function(){命令})
12        // 目标 --  $(选择器) -- jq的选择函数 -- 查找标签的作用
13        // 当网页文档准备好之后执行大括号里面的命令
14        $(document).ready(function(){
15            alert(1)
16        })
17
18        // $(匿名函数)
19        $(function(){
20            alert(2)
21        })
22    </script>
23</head>
24<body>
25
26</body>
27</html>