首先更正一个小问题，昨天的JavaScript入门一文中，末尾的“网页换肤”这个小案例的代码插入的有问题，插入的是名片案例的代码，排版不严谨向您致歉，现在补发更正。
1
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 <link rel="stylesheet" href="pifu2.css" id="link">
9 <script>
10 window.onload = function(){
11 // 按钮单击，换外观 -- 单击：换css而已 -- 找到link标签，href取值做更改
12 var oBtn1 = document.getElementById('btn1')
13 var oBtn2 = document.getElementById('btn2')
14 var oLink = document.getElementById('link')
15 oBtn1.onclick = function(){
16 // 更改link标签的href属性值
17 oLink.href = 'pifu1.css'
18 }
19 oBtn2.onclick = function(){
20 oLink.href = 'pifu2.css'
21 }
22 }
23 </script>
24</head>
25<body>
26 <h1>网页换肤</h1>
27 <button id="btn1">皮肤一</button>
28 <button id="btn2">皮肤二</button>
29</body>
30</html>
下面是所需的css文件：
pifu1.css
1body{
2 /* #cc cc cc #ff cc 00 fc0 */
3 background:#ccc;
4}
5button{
6 width: 200px;
7 height: 50px;
8 /* height: 200px; */
9 background: pink;
10 border: none;
11 color: black;
12 font-size: 20px;
13 border-radius: 25px;
14 /* border-radius: 50%; */
15 /* border-radius: 75%; */
16}pifu2.css
1body{
2 background: gold;
3}
4button{
5 width: 200px;
6 height: 50px;
7 background: green;
8 border: none;
9 color: white;
10 font-size: 20px;
11}JavaScript高级
1、循环
作用：遍历和重复执行命令
1.1while
初始值 var 变量
while(条件){命令 增量}
1.2 for
for(初始值；条件；增量){重复执行的命令}
i += 1可以写为i++
i -=1可以写为i--
只有1的时候可以用
1
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 // 初始值
10 // while(条件){命令 增量}
11 // var i = 0;
12 // while(i<3)
13 // {
14 // alert('while')
15 // i += 1
16 // }
17
18 // for(初始值; 条件; 增量){命令}
19 for(var i=0;i<3;i++)
20 {
21 alert('for')
22 }
23 </script>
24</head>
25<body>
26
27</body>
28</html>
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做数组去重的时候用
在工作中，后端程序猿将数据处理好，然后拿到前端利用，做数据显示，不需要做大量的数据处理，所以学的操作比较少一些。
1
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 // var xx = zhi
10 // var arr1 = new Array(1, 2, 3, 'abc')
11 var arr = [10, 20, 30, 'abc']
12 // alert(arr)
13 // alert(arr[0])
14 // alert(arr.length)
15
16 // 1、push() -- 数组结尾添加数据
17 // arr.push('jqk')
18
19 // 2、pop() -- 结尾删除数据
20 // arr.pop()
21
22 // 3、splice(位置下标, 删除的数据个数, 添加的数据) -- 任意位置添加删除数据
23 // arr.splice(2, 1, 'daqiu') // 10, 20 daqiu abc
24
25 // 4、reverse()
26 // arr.reverse()
27
28 // alert(arr)
29
30 // 5、join('符号') -- 将数组转换成字符串用
31 // alert(arr.join('-'))
32 // alert(arr.join(''))
33 // alert(arr)
34
35 // 6、indexOf(数据) -- 返回某个数据在数组中第一次出现的位置的下标
36 var arr2 = [10, 20, 10, 30, 40, 20]
37 // alert(arr2.indexOf(10))
38 alert(arr2.indexOf(arr2[2]))
39 </script>
40</head>
41<body>
42
43</body>
44</html>
2.3 将数据写入页面
1.根据数组里面数据的个数一次生成li标签，生成好li标签之后 统一放到ul里面即可
2.设置ul的内容
1
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 oContent = document.getElementById('content')
11 var arr = ['海王','小时代','悲伤逆流成河','毒液','无名之辈','无敌破坏王2','神奇动物在哪里2','憨豆特工3','你好，之华','中国蓝盔','地球最后的夜晚']
12 var str = ''
// 根据数组里面数据的个数依次生成li标签，生成好li标签之后 统一放到ul里面即可
13 for(var i=0;i<arr.length;i++){
14 str += '<li>'+arr[i]+'</li>'
15 }
// 设置ul的内容是 str
16 oContent.innerHTML = str
17 }
18 </script>
19</head>
20<body>
21 <ul id="content">
22 <li>111111</li>
23 </ul>
24</body>
25</html>
2.4 数组去重
定义一个新数组存储将来去重之后的数据
如果是没有重复的数据，追加到新的数组的结尾----追加数据用push
1
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 var arr = [10, 20, 10, 30, 40, 20]
10 var newArr = [] // 存储将来去重之后的数据
11 // 如果是没有重复的数据，追加到newArr结尾 -- newArr结尾添加数据push
12 for(var i=0;i<arr.length;i++)
13 {
14 // i indexOf()
15 // 10 0 0
16 // 20 1 1
17 // 10 2 0
18 if(i == arr.indexOf( arr[i] ))
19 {
20 newArr.push( arr[i] )
21 }
22 }
23 alert(newArr)
24 </script>
25</head>
26<body>
27
28</body>
29</html>
3、字符串常用操作方法
将数据转换为number型
parseInt() 去掉小数转换数据类型为数值型，不会四舍五入，直接显示的是整数位
parseFloat() 保留小数部分，转换为数据类型number
substring(开始位置的下标,结尾位置的下标) ----------截取字符串 切片
注意此处不包含结束，左闭右开
split('符号') ------把字符串转换成数组
字符串反转：需要先转换成数组，然后reverse，反转数组之后再用join转换为字符串
indexOf和数组的操作一样
1
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 var str1 = '1'
10 var str2 = '1.1'
11 var str3 = '1.9'
12 var num = 1
13 // alert(num + str1)
14 // parseInt()
15 // alert(typeof(parseInt(str1)))
16 // alert(parseInt(str3))
17
18 // parseFloat()
19 // alert(typeof(parseFloat(str1)))
20 // alert(parseFloat(str3))
21
22 // subtring(开始下标, 结尾下标) -- 截取字符串 -- 不包含结束
23 var str4 = 'abcdefg'
24 // alert(str4.substring(3, 5)) //de
25
26 // split('符号') -- 把字符串转换成数组
27 alert(str4.split('').reverse().join(''))
28 </script>
29</head>
30<body>
31
32</body>
33</html>
4、变量作用域
全局：
局部：作用于某个函数体内容
1.函数体内部修改全局变量直接修改，不需要global。
2.js声明变量可以和python一样不加var，只不过这样的变量就是全局。
1
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 // var num = 1
10 // alert(num)
11 function fn(){
12 var str = 'aa'
13 // alert(str)
14 // alert(num)
15 num = 10
16 // alert(num)
17 }
18 // alert(num)
19 fn()
20 alert(num)
21 // alert(str) // 证明str是局部变量，函数体外面无法访问
22 </script>
23</head>
24<body>
25
26</body>
27</html>
5、定时器
作用：用时间控制命令是否重复执行
在哪里使用：淘宝首页图片每隔一段时间，重复执行更换图片
种类：
不重复执行命令的定时器-----单次定时器
setTimeout(命令,延迟时间)
重复执行命令的定时器 ----多次循环定时器
setInterval(命令,延迟时间)
命令：
参数一：1、匿名函数 2、函数指向 --函数名
参数二：延迟时间用毫秒为单位 1000毫秒=1秒
停止定时器：
clearTimeout停止单次定时器
clearInterval停止多次定时器
匿名函数没有名字，工作中，会先定义一个变量储存定时器，定时器是对象型，命名的时候和time相关。
工作中在清除后，一般会在清除后面加一行代码，就是将原先的变量重新定义为null
单次定时器也要停止，虽然视觉上它停止了，但是实际上还没停止，启动之后，还是要停止。
1
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
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
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"><</div>
73 <div class="right" id="btn02">></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
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
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>
