JavaScript高级
首先更正一个小问题，昨天的JavaScript入门一文中，末尾的“网页换肤”这个小案例的代码插入的有问题，插入的是名片案例的代码，排版不严谨向您致歉，现在补发更正。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="pifu2.css" id="link">
<script>
window.onload = function(){
// 按钮单击，换外观 -- 单击：换css而已 -- 找到link标签，href取值做更改
var oBtn1 = document.getElementById('btn1')
var oBtn2 = document.getElementById('btn2')
var oLink = document.getElementById('link')
oBtn1.onclick = function(){
// 更改link标签的href属性值
oLink.href = 'pifu1.css'
}
oBtn2.onclick = function(){
oLink.href = 'pifu2.css'
}
}
</script>
</head>
<body>
<h1>网页换肤</h1>
<button id="btn1">皮肤一</button>
<button id="btn2">皮肤二</button>
</body>
</html>
下面是所需的css文件：
pifu1.css
body{
/* #cc cc cc #ff cc 00 fc0 */
background:#ccc;
}
button{
width: 200px;
height: 50px;
/* height: 200px; */
background: pink;
border: none;
color: black;
font-size: 20px;
border-radius: 25px;
/* border-radius: 50%; */
/* border-radius: 75%; */
}
pifu2.css
body{
background: gold;
}
button{
width: 200px;
height: 50px;
background: green;
border: none;
color: white;
font-size: 20px;
}
JavaScript高级
1、循环
作用：遍历和重复执行命令
1.1while
初始值 var 变量
while(条件){命令 增量}
1.2 for
for(初始值；条件；增量){重复执行的命令}
i += 1可以写为i++
i -=1可以写为i--
只有1的时候可以用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 初始值
// while(条件){命令 增量}
// var i = 0;
// while(i<3)
// {
// alert('while')
// i += 1
// }
// for(初始值; 条件; 增量){命令}
for(var i=0;i<3;i++)
{
alert('for')
}
</script>
</head>
<body>
</body>
</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做数组去重的时候用
在工作中，后端程序猿将数据处理好，然后拿到前端利用，做数据显示，不需要做大量的数据处理，所以学的操作比较少一些。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// var xx = zhi
// var arr1 = new Array(1, 2, 3, 'abc')
var arr = [10, 20, 30, 'abc']
// alert(arr)
// alert(arr[0])
// alert(arr.length)
// 1、push() -- 数组结尾添加数据
// arr.push('jqk')
// 2、pop() -- 结尾删除数据
// arr.pop()
// 3、splice(位置下标, 删除的数据个数, 添加的数据) -- 任意位置添加删除数据
// arr.splice(2, 1, 'daqiu') // 10, 20 daqiu abc
// 4、reverse()
// arr.reverse()
// alert(arr)
// 5、join('符号') -- 将数组转换成字符串用
// alert(arr.join('-'))
// alert(arr.join(''))
// alert(arr)
// 6、indexOf(数据) -- 返回某个数据在数组中第一次出现的位置的下标
var arr2 = [10, 20, 10, 30, 40, 20]
// alert(arr2.indexOf(10))
alert(arr2.indexOf(arr2[2]))
</script>
</head>
<body>
</body>
</html>
2.3 将数据写入页面
1.根据数组里面数据的个数一次生成li标签，生成好li标签之后 统一放到ul里面即可
2.设置ul的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oContent = document.getElementById('content')
var arr = ['海王','小时代','悲伤逆流成河','毒液','无名之辈','无敌破坏王2','神奇动物在哪里2','憨豆特工3','你好，之华','中国蓝盔','地球最后的夜晚']
var str = ''
// 根据数组里面数据的个数依次生成li标签，生成好li标签之后 统一放到ul里面即可
for(var i=0;i<arr.length;i++){
str += '<li>'+arr[i]+'</li>'
}
// 设置ul的内容是 str
oContent.innerHTML = str
}
</script>
</head>
<body>
<ul id="content">
<li>111111</li>
</ul>
</body>
</html>
2.4 数组去重
定义一个新数组存储将来去重之后的数据
如果是没有重复的数据，追加到新的数组的结尾----追加数据用push
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = [10, 20, 10, 30, 40, 20]
var newArr = [] // 存储将来去重之后的数据
// 如果是没有重复的数据，追加到newArr结尾 -- newArr结尾添加数据push
for(var i=0;i<arr.length;i++)
{
// i indexOf()
// 10 0 0
// 20 1 1
// 10 2 0
if(i == arr.indexOf( arr[i] ))
{
newArr.push( arr[i] )
}
}
alert(newArr)
</script>
</head>
<body>
</body>
</html>
3、字符串常用操作方法
将数据转换为number型
parseInt() 去掉小数转换数据类型为数值型，不会四舍五入，直接显示的是整数位
parseFloat() 保留小数部分，转换为数据类型number
substring(开始位置的下标,结尾位置的下标) ----------截取字符串 切片
注意此处不包含结束，左闭右开
split('符号') ------把字符串转换成数组
字符串反转：需要先转换成数组，然后reverse，反转数组之后再用join转换为字符串
indexOf和数组的操作一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var str1 = '1'
var str2 = '1.1'
var str3 = '1.9'
var num = 1
// alert(num + str1)
// parseInt()
// alert(typeof(parseInt(str1)))
// alert(parseInt(str3))
// parseFloat()
// alert(typeof(parseFloat(str1)))
// alert(parseFloat(str3))
// subtring(开始下标, 结尾下标) -- 截取字符串 -- 不包含结束
var str4 = 'abcdefg'
// alert(str4.substring(3, 5)) //de
// split('符号') -- 把字符串转换成数组
alert(str4.split('').reverse().join(''))
</script>
</head>
<body>
</body>
</html>
4、变量作用域
全局：
局部：作用于某个函数体内容
1.函数体内部修改全局变量直接修改，不需要global。
2.js声明变量可以和python一样不加var，只不过这样的变量就是全局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// var num = 1
// alert(num)
function fn(){
var str = 'aa'
// alert(str)
// alert(num)
num = 10
// alert(num)
}
// alert(num)
fn()
alert(num)
// alert(str) // 证明str是局部变量，函数体外面无法访问
</script>
</head>
<body>
</body>
</html>
5、定时器
作用：用时间控制命令是否重复执行
在哪里使用：淘宝首页图片每隔一段时间，重复执行更换图片
种类：
不重复执行命令的定时器-----单次定时器
setTimeout(命令,延迟时间)
重复执行命令的定时器 ----多次循环定时器
setInterval(命令,延迟时间)
命令：
参数一：1、匿名函数 2、函数指向 --函数名
参数二：延迟时间用毫秒为单位 1000毫秒=1秒
停止定时器：
clearTimeout停止单次定时器
clearInterval停止多次定时器
匿名函数没有名字，工作中，会先定义一个变量储存定时器，定时器是对象型，命名的时候和time相关。
工作中在清除后，一般会在清除后面加一行代码，就是将原先的变量重新定义为null
单次定时器也要停止，虽然视觉上它停止了，但是实际上还没停止，启动之后，还是要停止。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oBtn1 = document.getElementById('btn1')
var oBtn2 = document.getElementById('btn2')
var oBtn3 = document.getElementById('btn3')
var oTimer = null // 将来这个变量存储的是定时器，定时器是对象型
// 单次 setTimeout()
// 多次 setInterval()
// 都有两个参数：参数1是命令 参数2是延迟时间：以毫秒为单位 1000毫秒=1秒
// 命令:1、匿名函数 2、函数指向 -- 函数名
oBtn1.onclick = function(){
// 单次
setTimeout(function(){
alert('单次定时器')
}, 2000)
}
oBtn2.onclick = function(){
// 多次
oTimer = setInterval(fnAlert, 2000)
function fnAlert(){
alert('多次定时器')
}
}
oBtn3.onclick = function(){
// clearInterval(定时器的名字)
clearInterval(oTimer)
oTimer = null
}
}
</script>
</head>
<body>
<button id="btn1">单次定时器</button>
<button id="btn2">多次定时器</button>
<button id="btn3">停止多次定时器</button>
</body>
</html>
5.1无缝滚动案例
1.所有的产品默认左侧移动
2.箭头单击，改变运动方向
3.鼠标滑过，停止播放，鼠标离开，继续播放
有多少产品，宽度就要写多大
一个区域打开的和关闭的是一个定时器
动画移动原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script>
var oBox = document.getElementById('box')
var num = 0 // 代替left取值
var speed = 5
setInterval(fnMove, 50)
function fnMove(){
// 改变定位的left取值
num += speed
// 如果num值大于800，左走 -- left减小
if(num>600)
{
// num -= 5
// num -= 10
// num += -5
speed = -5
}
// 如果num值<0. 右侧 -- left增大
if(num<0)
{
speed = 5
}
oBox.style.left = num+'px'
}
</script>
无缝滚动：（html文件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul{
margin:0;
padding:0;
}
.list_con{
width:1000px;
height:200px;
border:1px solid #000;
margin:10px auto 0;
background-color:#f0f0f0;
position:relative;
overflow:hidden;
}
.list_con ul{
list-style:none;
width:2000px;
height:200px;
position:absolute;
left:0;
top:0;
}
.list_con li{
width:180px;
height:180px;
float:left;
margin:10px;
}
.btns_con{
width:1000px;
height:30px;
margin:50px auto 0;
position:relative;
}
.left,.right{
width:30px;
height:30px;
background-color:gold;
position:absolute;
left:-40px;
top:124px;
font-size:30px;
line-height:30px;
color:#000;
font-family: 'Arial';
text-align:center;
cursor:pointer;
border-radius:15px;
opacity:0.5;
}
.right{
left:1010px;
top:124px;
}
</style>
<script src="js/move.js"></script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul id="list">
<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
</ul>
</div>
</body>
</html>
js文件：
window.onload = function(){
// alert(1)
console.log(100)
document.title = 'daqiu'
// 1、所有产品默认左侧移动 -- ul定位的left取值不断变大变小 -- 多次循环
var oList = document.getElementById('list');
var num = 0 // left取值
var speed = 5
var oTimer = null;
oList.innerHTML += oList.innerHTML // 保证一份产品移动，另外一份做显示区域的填充
// oList.innerHTML = oList.innerHTML+oList.innerHTML
oTimer = setInterval(fnMove, 50)
function fnMove(){
// oList 的left取值变化
num -= speed
// 如果num《-1000 ，回到0
if(num<-1000)
{
num = 0
}
// 如果num>0 num = -1000
if(num>0)
{
num = -1000
}
oList.style.left = num +'px'
}
// 2、箭头单击，改变运动方向
var oBtn01 = document.getElementById('btn01')
var oBtn02 = document.getElementById('btn02')
oBtn02.onclick = function(){
speed = -5
}
oBtn01.onclick = function(){
speed = 5
}
// 3、鼠标滑过，停止播放--停止定时器，鼠标离开继续播放 -- 打开定时器 -- 选择显示区域
var oSlide = document.getElementById('slide')
oSlide.onmouseover = function(){
clearInterval(oTimer)
oTimer = null
}
oSlide.onmouseout = function(){
// setInterval(fnMove, 50) -- 速度越来越快 -- 定时器累加现象：一个区域保证停止和打开的是同一个定时器
oTimer = setInterval(fnMove, 50)
}
}
6、调试程序的方法
alert弹窗后，如果不点确定，不会执行下面的代码，使浏览器冻结。
console 控制台
console.log(想输出的内容)
不会打打断程序，但是会需要多操作一步。
控制台也会报错。
element元素、标签
断点调试用source，谷歌浏览器外链式的才可以断点调试。嵌入式和行内式没办法
document.title = "xxx"可以改网页顶部的tile
7、封闭函数、封闭空间
作用：如果同事之间配合工作，如果定义函数的时候，名字冲突了的解决方案。
封闭函数有三种写法：
1.已经冲突了的解决方案：一个或任意多个封号然后写个小括号，将函数放在一个匿名函数里，然后将匿名函数放到小括号里。最外面再写一对小括号用来调用。
2.没有冲突之前：先写一个！，然后写一个匿名函数
3.和2一样，前面写~
但是所有的封闭函数有弊端，就是做不到哪里用哪里调用，只能是整体复制过去。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function fn(){
alert(1)
}
fn()
// 已经冲突的情况
;;;;;(function(){
function fn(){
alert(2)
}
fn()
})()
!function(){
alert(3)
}()
~function(){
alert(4)
}()
</script>
</head>
<body>
</body>
</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 如果显示$找不到，百分之百是导入的代码错了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jQuery/jquery-1.12.4.min.js"></script>
<script>
// jq入口函数就是jq的事件语法 onclick -- click
// 目标.事件属性(function(){命令})
// 目标 -- $(选择器) -- jq的选择函数 -- 查找标签的作用
// 当网页文档准备好之后执行大括号里面的命令
$(document).ready(function(){
alert(1)
})
// $(匿名函数)
$(function(){
alert(2)
})
</script>
</head>
<body>
</body>
</html>