JavaScript
JavaScript
- JavaScript一种直译式脚本语言，是一种动态类型、弱类型、 基于原型的语言，内置支持类型
- Javascript是当今最流行的脚本语言，我们生活中看到的网页 和基于html5的app里面的交互逻辑都是由javascript驱动的
- 一句话概括就是javascript是一种运行在浏览器中的解释型的编程语言
JS的组成
- ECMAScript : 解释器、翻译者 (描述了该语言的语法和基本对 象) 它是javascript的标准。
- DOM : Document Object Model 文档对象模型 W3C是DOM 的标准。
- BOM : Browser Object Model 浏览器对象模型 缺乏标准。
演示
注册事件、找到目标元素、修改css属性
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 200px;
height: 200px;
border:1px solid black;
margin:0 auto;
}
</style>
</head>
<body>
<div id="tim" onmouseover="tim.style.background='red'" onmouseout="tim.style.background='white'"></div>
</body>
</html>
获取标签元素
# 返回这个id名的元素
document.getElementById('ID名')
# 返回所有这个标 签名的元素的集合
document.getElementsByTagName('div')
# 返回所有这个 class的元素的集合
document.getElementsByClassName('className')
# 返回第一个
document.querySelector("css任意选择器")
# 返回符合的所有
document.querySelectorAll("css任意选择器")
# 获取HTML元素
document.documentElement
# 获取body元素
document.body
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 200px;
height: 200px;
border:1px solid black;
margin:0 auto;
}
</style>
</head>
<body>
<div id="tim" class="xiaod"></div>
<script type="text/javascript">
//返回这个id名的元素
// document.getElementById('tim').style.background='red'
//返回所有这个标签名的元素的集合 获取到的是一个集合，拥有数组的特性
// document.getElementsByTagName('div')[0].style.background='black'
//通过classname获取到的也是一个集合
// document.getElementsByClassName('xiaod')[0].style.background='yellow'
//document.querySelector("css任意选择器") 返回第一个
// document.querySelector("div").style.background='black'
//document.querySelectorAll("css任意选择器") 返回符合的所有
document.querySelectorAll("div")[0].style.background='red'
</script>
</body>
</html>
JS编写的位置
- 一般情况下JS是写在页面的任何位置都可以的，需要script标签包着，但是别写在html标签外
- 最常见的是写在head标签内部和body内部
- 写在head标签内需要写上window.onload包着，要不然会报错,因为执行js时页面标签还没加载
* window.onload的作用是当页面加载完成后自动触发事件
* ⼀个页面应该只有⼀个window.onload事件，因为如果写多个的话会覆盖只执行最后一个
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 200px;
height: 200px;
border:1px solid black;
margin:0 auto;
}
</style>
<script type="text/javascript" src="js代码应该写在哪里.js"></script>
</head>
<body>
<div id="tim" class="xiaod"></div>
<!-- <script type="text/javascript">
//window.onload的作用是当页面加载完成后自动触发事件
window.onload=function(){
document.getElementsByTagName('div')[0].style.background='red'
alert(1)
}
window.onload=function(){
document.getElementsByTagName('div')[0].style.background='black'
alert(2)
}
window.onload=function(){
document.getElementsByTagName('div')[0].style.background='yellow'
alert(3)
}
</script> -->
</body>
</html>
详细分析JS输出及调试方式
# 弹窗型输出
alert('输出内容')
# 浏览器调试窗口输出
console.log('输出内容')
# innerHTML、innerText（innerText不会解析HTML标签，而是原样输出）
document.getElementById('id名').innerHTML='内容'
# document.wirte("输出内容")
输出内容会清空原有的 html 再生成一个新的 html
document.getElementById('rewrite').onclick=function(){
document.write('我是新的html了，原本的已经被我替代掉')
}
JS常见事件
JS事件就是我们的行为能被检测到，且触发相对应的函数（to do sth）
onclick 鼠标点击事件
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素上面移开
onchange 元素值改变，一般用在表单元素上
onkeydown 用户按下键盘按键
onfocus 元素获得焦点
onblur 元素失去焦点
window.onload 页面加载完成
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width:300px;
height: 300px;
background:red;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim"></div>
<input type="" name="" id="xd">
<script type="text/javascript">
//点击事件
document.getElementById("tim").onclick=function(){
//函数里面写我们要做的事情
alert('我是被点击了')
}
//鼠标移入事件
document.getElementById("tim").onmouseover=function(){
console.log('鼠标移入我的范围内了')
}
//鼠标移出事件
document.getElementById("tim").onmouseout=function(){
console.log('鼠标移出我的范围内了')
}
//元素改变事件，一般用在表单元素
document.getElementById('xd').onchange=function(){
console.log(document.getElementById('xd').value)
}
//键盘事件，按下键盘事件
document.getElementById('xd').onkeydown=function(){
console.log('键盘按下了')
}
//获取焦点事件
document.getElementById('xd').onfocus=function(){
console.log('我获取到焦点了')
}
//失去焦点事件
document.getElementById('xd').onblur=function(){
console.log('我失去焦点了')
}
</script>
</body>
</html>
手动操作DIV的任意样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<button id="taller">增高</button>
<button id="longer">增长</button>
<button id="changebg">改变背景颜色</button>
<div id="tim" ></div>
<script type="text/javascript">
window.onload=function(){
//给我们的增高按钮添加点击事件
document.getElementById('taller').onclick=function(){
//获取id名为tim的div
document.getElementById('tim').style.height='300px'
}
//给我们的增高长按钮添加点击事件
document.getElementById('longer').onclick=function(){
//获取id名为tim的div
document.getElementById('tim').style.width='300px'
}
//给我们的改变背景颜色按钮添加点击事件
document.getElementById('changebg').onclick=function(){
//获取id名为tim的div
document.getElementById('tim').style.background='black'
}
}
</script>
</body>
</html>
数据类型
基础数据类型
* 字符串 string
* 数字(整型浮点型) number
* 布尔 boolean
* 空对象 null console.log(typeof(null)) => null
* undefined 未定义
复杂数据类型
* 数组 Array
* 对象 Object console.log(typeof({})) =>
检测数据类型的两种基本方法
* typeof //复杂数据类型、引用数据类型 在 typeof() 下都显示为 object
* Object.prototype.toString.call('数据') //鉴别复杂数据类型、引用数据类型
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//字符串
console.log(typeof('string'))
//数字
console.log(typeof(234))
//布尔值
console.log(typeof(true))
//null
console.log(typeof(null))
//undefined
console.log(typeof(undefined))
//object
// console.log(typeof({}))
console.log(Object.prototype.toString.call({})) /* [object Object] */
//数组
// console.log(typeof([]))
console.log(Object.prototype.toString.call([])) /* [object Array] */
</script>
</body>
</html>
变量
如何定义变量
var name
命名规则
首字母(a-zA-Z)或下划线()或美元符($)开头，不能是数字
后面的可以是字母(a-zA-Z)或下划线()或美元符($)或数字，并且是区分大小写的。
区分大小写的意思是 var name 和 var Name 是定义两个不同的变量。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<button id="taller">增高</button>
<button id="longer">增长</button>
<button id="changebg">改变背景颜色</button>
<div id="tim" ></div>
<script type="text/javascript">
//定义变量 用var
console.log('我是'+a)
var a='tim'
//上面两行代码等同于下面的代码 因为js执行是先定义再执行 变量提升问题
var a
console.log('我是'+a)
a='tim'
//变量的使用方式
window.onload=function(){
var oDiv=document.getElementById('tim')
//给我们的增高按钮添加点击事件
document.getElementById('taller').onclick=function(){
//获取id名为tim的div
oDiv.style.height='300px'
}
//给我们的增高长按钮添加点击事件
document.getElementById('longer').onclick=function(){
//获取id名为tim的div
oDiv.style.width='300px'
}
//给我们的改变背景颜色按钮添加点击事件
document.getElementById('changebg').onclick=function(){
//获取id名为tim的div
oDiv.style.background='black'
}
}
</script>
</body>
</html>
数据类型之间的转换
显式转换（强制类型转换）
Number()
parseInt()
pareFloat()
String()
toString()
Boolean()
隐式转换
* 操作符或者语句进行运算时
* if while 比较里面也会进行隐式转换
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var a='123'
var b='abc'
//强制类型转换(显式转换)
console.log(a,"类型："+typeof(a))
console.log(a,"用number进行类型转换之后的类型："+typeof(Number(a)))
//用number转换一个是字符串类型，但内容不是数字
console.log(b,"类型："+typeof(b))
console.log(b,Number(b),"用number进行类型转换之后的类型："+typeof(Number(b)))
//NaN是not a number的缩写 意思是 不是一个数字
var c='3.1415926abc'
console.log(c,'整形转换：'+parseInt(c))
console.log(c,'浮点型转换:'+parseFloat(c))
var d=123456
console.log(d,String(d),typeof(String(d)))
console.log(d,d.toString(),typeof(d.toString()))
console.log(d,Boolean(d))
//隐式转换
//数字跟数字相加，不用转换类型
// var sum
// sum=1+2
// console.log('sum='+sum)
//数字跟字符串相加 发生类型转换，会变成字符串之间的拼接，就是把我们的数字1变成了字符串‘1’
var sum
sum=1+'2'
console.log('sum='+sum,typeof(sum))
if(12=='12'){
console.log('判断成立了，我被执行了')
}
</script>
</body>
</html>
复杂数据类型的创建
数组创建
# 直接创建
var arr=[] //空数组
var arr=[1,2] //创建有内容的数组
# 利用构造函数创建
var arr1 = new Array(); //创建空数组
var arr2 = new Array(10); //创建一个长度为10的数组
var arr3 = new Array(5,4,3,2,1) //创建数组并初始化
对象创建
# 直接创建
var obj={} //创建空对象
var obj1={a:1,b:2} //创建有内容的对象
# 利用构造函数创建
var obj = new Object()
函数
函数出现的意义：方便我们封装、调用代码
函数的定义
function fun(){console.log(1)}
var fun = function(){console.log(2)}
var fun = new Function(console.log(3)) //这种方式函数会自调用（函数自己完成调用动作）
函数的调用
fun()
示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<button id="taller" onClick="taller()">增高</button>
<button id="longer" onClick="longer()">增长</button>
<button id="changebg" onClick="changebg()">改变背景颜色</button>
<div id="tim" ></div>
<script type="text/javascript">
//获取到要改变的div id为tim
var oDiv=document.getElementById('tim')
//写点击增高的按钮时需要调用的函数
var taller=function(){
oDiv.style.height='300px'
}
//写点击增长的按钮时需要调用的函数
function longer(){
oDiv.style.width='300px'
}
//写点击改变背景颜色的按钮时需要调用的函数
function changebg(){
oDiv.style.background='black'
}
// window.onload=function(){
// //给我们的增高按钮添加点击事件
// document.getElementById('taller').onclick=function(){
// //获取id名为tim的div
// document.getElementById('tim').style.height='300px'
// }
// //给我们的增高长按钮添加点击事件
// document.getElementById('longer').onclick=function(){
// //获取id名为tim的div
// document.getElementById('tim').style.width='300px'
// }
// //给我们的改变背景颜色按钮添加点击事件
// document.getElementById('changebg').onclick=function(){
// //获取id名为tim的div
// document.getElementById('tim').style.background='black'
// }
// }
</script>
</body>
</html>
命名规范
# 变量
小驼峰命名法：第一个单词以小写字母开始，第二个单词开始以后的每个单词的首字母都大写 var tim
# 函数名
小驼峰命名法 function getUserInfo(){}
# 常量
全大写单词间用下划线隔开(_) var CH_NAME='tim'
函数的几种写法
function fun(){} //最常见的声明
(function fun(){}) //函数表达式声明方式，只在括号内起作用，外部无法访问
(function(){}) //匿名函数表达式，外部无法访问
new Function() //通过构造器方式，因为麻烦，很少用
export default function(){} //es6的向外暴露方法
()=>{} //箭头函数，es6
函数的传参、取参
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<button id="taller" onClick="change('height','300px')">增高</button>
<button id="longer" onClick="change('width','300px')">增长</button>
<button id="changebg" onClick="change('background','black')">改变背景颜色</button>
<div id="tim" ></div>
<script type="text/javascript">
//获取到要改变的div id为tim
var oDiv=document.getElementById('tim')
//写点击增高的按钮时需要调用的函数
// var taller=function(){
// oDiv.style.height='300px'
// }
// //写点击增长的按钮时需要调用的函数
// function longer(){
// oDiv.style.width='300px'
// }
// //写点击改变背景颜色的按钮时需要调用的函数
// function changebg(){
// oDiv.style.background='black'
// }
function change(styleattr,value){
//两种写法是一样的，但是如果需要传入变量就需要用第二种
// oDiv.style.styleattr=value
oDiv.style[styleattr]=value
}
</script>
</body>
</html>
不定参数（arguments）
不确定传入的参数有多少个。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//利用arguments来编写一个求和函数
function sum(){
var sum=0
for(var i=0;i<arguments.length;i++){
sum=sum+arguments[i]
}
console.log(sum)
}
sum(1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10)
</script>
</body>
</html>
变量作用域
# 局部变量
只在定义的函数内部使用
# 全局变量
可以在整个script作用域内都可以使用
# 作用域链
只有在自己当前的小作用域内找不到才会向父级作用域寻找，直到找不到为止（存在同名变量时，在当前作用域内局部变量会覆盖全局变量，局部变量优先级比较高）
闭包
可以调用函数内部变量的函数。
//闭包
function a(){
var tim=10
var b=function(){
console.log(tim)
}
return b
}
//a方法返回b方法，再执行：b方法可以调用函数内部变量tim，避免造成全局变量的污染
a()()
函数的返回值
* 一个函数可以有多个return，但是第一个return代表函数结束运行。
* 不写return，函数默认返回undefined
* 想返回多个值，可以把多个值封装成：数组、或是json对象
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//函数不写返回值会默认返回undefined
function fun(){
var tim=10
var xd=20
var obj={'tim':tim,'xd':xd}
return obj
}
console.log(fun())
</script>
</body>
</html>
流程控制
- if else if else
- b==='10'?console.log('成立'):console.log('不成立')
- switch case
示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var a=9
//判断 一个=表示赋值 两个==是判断左右两边是否相等 还会进行类型的转换
//三个===是全等的类型，意思是不会转换类型 ，要判断===左右两边的类型和值都相等才会返回true
// if(a==10){
// console.log('a等于10是成立的')
// }else{
// console.log('a等于10是不成立的')
// }
// if(a=='11'){
// console.log('两个==会转换类型')
// }else if(a==10){
// console.log('a等于10是成立的')
// }else{
// console.log('a不等于10 也不等于11')
// }
//全等是三个=== ，需要左右两边的类型和值都一样才返回true
// if(a==='9'){
// console.log('现在的是指和类型都相等')
// }else{
// console.log('现在的是指和类型不全相等，有可能是值不相等，有可能是类型不相等，也有可能两者都不相等')
// }
//三目运算 条件？'成立执行冒号前面的': '不成立执行冒号后面的'
// var b=10
// b==='10'?console.log('成立'):console.log('不成立')
//switch case 的高级用法 这里case 是 === 全等的判断
function fun(type){
switch(type){
case 0:
console.log('传入的条件是0');
break;
case 1:
console.log('传入的条件是1');
break;
case 2:
console.log('传入的条件是2');
break;
case 3:
console.log('传入的条件是3');
break;
case 4:
console.log('传入的条件是4');
break;
default:
console.log('我是默认的，就是上述条件都不成立就输出我');
break;
}
}
fun(0)
</script>
</body>
</html>
循环
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//第一种 while循环
//1、创建循环变量
// var tim =10
// //2、判断循环条件
// while(tim>=5){
// //3、判断成立就执行循环体里面的操作
// console.log(tim)
// //4、更新循环变量
// tim=tim-1
// // tim--
// }
// do while 循环
//创建循环变量
// var tim = -1;
// //即使初始条件不成立，循环体内容还是会执行一次
// do{
// //执行循环体内容
// console.log(tim);//10 9 8 7 6 5 4 3 2 1 0
// //更新循环变量
// tim--;
// }while(tim>=0);//判断循环条件
// console.log(tim);//-1
//for循环 一般拿来循环数组
// var arr=['篮球','足球','乒乓球','羽毛球','排球']
// console.log(arr.length,arr[4])
// for(var i=0;i<arr.length;i++){
// console.log(arr[i])
// }
//for in 一般拿来循环对象
var obj={a:'篮球',b:'足球',c:'乒乓球'}
// console.log(obj.b)
for(o in obj){
// console.log(o)
console.log(obj[o])
}
</script>
</body>
</html>
break、continue
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//break用于循环体内部跳出循环
// for(var i=0;i<=5;i++){
// if(i==3){
// break;
// }
// console.log(i)
// }
// console.log(i,'我是循环体外的i，不是循环体内部的内容')
//continue用于中断符合判断条件的当前迭代
for(var i=0;i<=5;i++){
if(i==3){
continue;
}
console.log(i)
}
console.log(i,'我是循环体外的i，不是循环体内部的内容')
</script>
</body>
</html>
真假
- 真：除了假都是真
- 假：false 数字0 空字符串 null undefined NAN
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//判断里面的真假
// 假: false 数字0 空字符串 null undefined NAN
var a={a:'1'}
var key=true
if(key){
console.log('我是真的')
}else{
console.log('我是假的')
}
</script>
</body>
</html>
逻辑运算符
- && 全部真才返回真
- || 一个真就返回真
- ! 真变成假，假变成真
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//判断里面的真假
// 假: false 数字0 空字符串 null undefined NAN
//与 && 意思是判断条件都需要为真才返回真
var a=false
var b=undefined
var c=null
// if( a && b && c){
// console.log('a和b都是真的')
// }else{
// console.log('a和b不全是真')
// }
//或 || 只需要有一个条件成立为真 就返回真
// if( a || b || c){
// console.log('a或b或c有一个为真')
// }else{
// console.log('三者都为假')
// }
// ！ 非 真变成假 假变成真
if(!a){
console.log('a是假')
}
</script>
</body>
</html>
JSON
JavaScript Object Notation 的缩写，它是一种数据交换格式。
JSON基于文本，轻量，用于前后端交换数据。
JSON是ECMA的一个标准，几乎所有的变成语言都有解析JSON的库。
# JSON VS XML
* 可读写 XML更加规范
* 便捷性 JSON更加便捷
* 轻量级 意味着数据交换速率快
JSON对象
{"name":"JSON对象","address":"广东省广州市","age":28}
JSON数据
[
{"name":"JSON数组1","address":"广东省广州市","age":28},
{"name":"JSON数组1","address":"广东省广州市","age":28},
]
JSON字符串
'{"name":"JSON数组1","address":"广东省广州市","age":28}'
演示：json对象、json数组、json字符串
<script type="text/javascript">
//json对象
var jsonObj={"name":"tim","age":28}
console.log(jsonObj,typeof(jsonObj))
//json数组
var jsonarr=[
{"name":"tim","age":28},
{"name":"tim","age":28},
"json字符串"
]
console.log(jsonarr,typeof(jsonarr))
//json字符串
var jsonString='{"name":"tim","age":28}'
console.log(jsonString,typeof(jsonString))
</script>
JSON字符解析
# 序列化 JSON.parse()
把 js 对象转成 json 字符串
# 反序列化 JSON.stringify()
把 JSON 字符串转成 js 对象
JSON对象操作
# 增
obj.xxx='xxx'
# 删
delete obj.xxx
# 改
obj.xxx='xxx'
# 查
obj.xxx
<script type="text/javascript">
//对于json对象的操作
var obj={"name":"tim","age":18}
// console.log(obj)
//对对象增加一个属性
obj.height="180cm"
//删除一个属性 删除年龄
delete obj.age
//更改一个属性的值 把名字改成tom
obj.name="tom"
//查找名字是什么 obj.name
console.log(obj.name)
var arr=[
{"name":"tim","age":18},
{"name":"tony","age":20},
{"name":"jerry","age":23}
]
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
</script>
数组操作
* shift() 删除数组第一个元素，并返回被删除的元素
* pop() 删除数组最后一个元素，并返回被删除的元素
* unshift() 向数组第一个元素前面添加一个元素，返回数组长度
* push() 向数组最后一个元素后面添加一个元素，返回数组长度
* concat() 合并两个或多个数组
* join(separator) 数组转字符串，可传入一个参数用于分隔元素
* split(separator,howmany) 字符串转数组，可传入两个参数
separator：必选，实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回
howmany：可选，该参数可指定返回的数组的最大长度，如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
* reverse() 翻转数组，颠倒数组中元素的顺序
* sort(fucntion) 数组排序，传入一个参数function
function 规定排序顺序，必须函数。如果不传入函数则按照字符编码顺序排序
* slice(start,end) 返回数据中被选定的元素，不包含下标end的元素
start 必选，从何处开始选取。如果是负数，则从数组未必开始算起，-1代表最后一个元素。
end 可选，规定从何处结束选取。如果不指定则从start开始截取到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组为不开始算起的元素。
* splice(index,howmany,x,y,z) 可以对数组进行增加，删除，更改的操作，会返回被删除的元素。
index 必选，整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必选，要删除的元素数目，如果设置为0，则不会删除元素.
x,y,z 可选项，为添加的新元素
* indexOf(item,start) 返回元素的索引，即下标，如果没有查找的元素就返回-1
item 必选，查找的元素
start 可选，整数，规定在数组中开始检索的位置，如不选则为第一个开始检索
<script type="text/javascript">
//创建数组
var arr=["篮球","足球","乒乓球","羽毛球"]
//删除数组第一个元素 返回值为被删除的元素
// var first=arr.shift()
// console.log(first)
// console.log(arr)
//删除数组最后一个元素 返回值为被删除的元素
// var end=arr.pop()
// console.log(end)
// console.log(arr)
//向我们的数组的第一个元素前面添加元素，返回添加后数组长度
// var arrLength=arr.unshift('排球')
// console.log(arrLength)
// console.log(arr)
//向我们数组最后一个元素后面添加元素，返回添加后数组长度
var arrLength=arr.push("排球")
console.log(arrLength)
console.log(arr)
//创建数组
//合并数组，可合并两个或多个
// var arr=["篮球"]
// var arr1=["足球"]
// var arr2=["乒乓球"]
// console.log(arr.concat(arr1,arr2))
// console.log(arr)
//数组转字符串
// var arr=["篮球","足球","乒乓球"]
// console.log(arr.join(''))
//字符串转数组
// var string1="abcdecefg"
// console.log(string1.split('c',3))
//翻转数组，颠倒数组中元素的顺序
var arr=[1,2,3,4,5]
console.log(arr.reverse())
// var arr=[1,3,5,4,2,6,7,7,9,11,8]
//数组排序 有正向和反向（从大到小或从小到大） 不传参数就是按照字符编码排序
//sort函数接收的参数也是一个函数,里面接收两个参数，
// 返回第一个参数减第二个参数(a-b)即按照从小到大排序，
// 返回第二个参数减第一个参数(b-a)即按照从大到小排序
// console.log(arr.sort(function(a,b){
// return b-a
// }))
//选定数组里面指定下标的元素 slice
// var a=arr.slice(6,8)
// console.log(a)
//可以对数组进行增删改的方法 splice
// var arr=["篮球","足球"]
// //利用splice方法增加
// // arr.splice(0,0,"排球")
// // console.log(arr)
// //利用splice方法删除
// // arr.splice(0,1)
// // console.log(arr)
// //利用splice方法进行更改元素
// arr.splice(0,1,"排球","乒乓球")
// console.log(arr)
//查找元素索引，即下标 indexOf
var arr=["篮球","足球","乒乓球","排球"]
console.log(arr.indexOf("棒球"))
</script>
定时器
# 间隔性定时器 setInterval(fun,time)
* fun为执行的函数
* time为间隔执行的时间，单位为毫秒，每过time时间就执行一次fun里面的代码
# 延时性定时器 setTimeout(fun,time)
* fun为执行的函数
* time为延时执行时间，单位为毫秒，经过time时间后执行fun代码，只执行一次
<script type="text/javascript">
//延时型的定时器 setTimeout 只会执行一次
// setTimeout(function(){
// alert("我是延时三秒执行的弹窗")
// },3000)
//间隔型定时器 setInterval 每间隔time的时间就会执行一次
setInterval(function(){
console.log(1)
},2000)
</script>
清除定时器
* clearInterval 清除间隔性定时器
* clearTimeout 清除延时性定时器
<script type="text/javascript">
//清除定时器
//创建间隔性定时器
var timer1=setInterval(function(){
console.log("我是间隔型定时器")
// clearTimeout(timer2)
},1000)
//创建延时性的定时器
var timer2=setTimeout(function(){
console.log("我是延时性定时器")
clearInterval(timer1)
},3000)
</script>
延时性定时器演示
延时提示框
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
float: left;
width: 50px;
height: 50px;
background: red;
margin-right: 30px;
}
#div2{
float: left;
width: 200px;
height: 200px;
background: black;
display: none;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
var timer=null
//给div2添加鼠标移入事件
oDiv2.onmouseover=oDiv1.onmouseover=function(){
//改变div2的display
clearTimeout(timer)
oDiv2.style.display='block'
}
//给div2添加鼠标移出事件
oDiv2.onmouseout=oDiv1.onmouseout=function(){
//改变div2的display
timer=setTimeout(function(){
oDiv2.style.display='none'
},500)
}
</script>
</body>
</html>
间隔性定时器演示
无缝滚动图片展示
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
#banner{
position: relative;
width: 600px;
height: 150px;
margin:100px auto;
overflow: hidden;
}
#banner ul{
position: absolute;
left: 0;
top:0;
}
#banner li{
float: left;
width: 200px;
height: 150px;
list-style: none;
}
#banner li img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
<li><img src="img/5.png"></li>
<li><img src="img/6.png"></li>
</ul>
</div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('banner')
var oUl=oDiv.getElementsByTagName('ul')[0]
var oLi=oUl.getElementsByTagName('li')
var timer=null
//拼接多一份ul里面的内容 这两种写法相等
// oUl.innerHTML=oUl.innerHTML+oUl.innerHTML
oUl.innerHTML+=oUl.innerHTML
//计算ul的宽度
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'
function moving(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0'
}
oUl.style.left=oUl.offsetLeft-2+'px'
}
timer=setInterval(moving,30)
oDiv.onmouseover=function(){
clearInterval(timer)
}
oDiv.onmouseout=function(){
timer=setInterval(moving,30)
}
}
</script>
</body>
</html>
DOM操作
节点获取
# 获取子节点
childNodes 获取子节点（包括换行和空格）
children children不会返回文本节点，返回的是元素节点
# 获取父节点
parentNode 获取的是当前元素的直接父元素，w3c的标准
parentElement 获取的是当前元素的直接父元素，ie的标准
offsetParent 获取离当前节点最近的一个有定位的父节点或祖先节点，如果没有即为获取body
# 判断节点的类型
nodeType 1为元素节点 3为文本节点（即空格或换行，字符）
# 获取第一个子节点
firstChild 有可能会匹配到时空白或换行的节点信息
firstElementChild 不会匹配空白或换行的节点信息（获取到的是元素节点，不会获取到文本节点）
# 获取最后一个子节点
lastChild 有可能会匹配到时空白或换行的节点信息
lastElementChild 不会匹配空白或换行的节点信息（获取到的是元素节点，不会获取到文本节点）
# 获取上一个兄弟节点
previousSibling 有可能会匹配到空白或换行的节点信息
previousElementSibling 不会匹配空白或换行的节点信息（获取到的是元素节点，不会获取到文本节点）
# 获取下一个兄弟节点
nextSibling 有可能会匹配到时空白或换行的节点信息
nextElementSibling 不会匹配空白或换行的节点信息（获取到的是元素的即诶但，不会获取到文本节点）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#bigdiv{
position: relative;
}
</style>
</head>
<body>
<div id="bigdiv">
<div id="div1">
<div>1111</div>
<div>2222</div>
</div>
</div>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
//childNodes获取子节点会获取到文本节点和元素节点
var div1=oDiv.childNodes
console.log(oDiv.childNodes)
//这种只获取元素节点，不会获取到文本节点 children
console.log(oDiv.children)
//获取父节点
// console.log(oDiv.parentNode)
// console.log(oDiv.parentElement)
// console.log(oDiv.offsetParent)
//判断节点类型 1是元素节点 3是文本节点
console.log(div1[0].nodeType,'我是第一个，我是文本节点')
console.log(div1[1].nodeType,'我是第二个，我是元素节点')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="div1">
<div>我是第一个</div>
<div>我是第二个</div>
<div id="three">我是第三个</div>
<div>我是第四个</div>
<div>我是第五个</div>
</div>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
var three=document.getElementById('three')
//获取第一个子节点
// console.log(oDiv.firstChild)
// console.log(oDiv.firstElementChild)
//获取最后一个子节点
// console.log(oDiv.lastElementChild)
//获取上一个兄弟节点
console.log(three.previousElementSibling)
//获取下一个兄弟节点
console.log(three.nextElementSibling)
</script>
</body>
</html>
元素属性操作的三种方式
# 第一种
oDiv.style.display="block";
# 第二种
oDiv.style["display"]="block";
# 第三种(DOM方式)
获取 getAttribute(属性名字)
设置 setAttribute(属性名称，值)
删除 removeAttribute(属性名称)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="div1" value="2">123</div>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
//第一种
// oDiv.style.color='red'
//第二种
oDiv.style['color']='red'
//第三种 dom的方式
//获取属性
console.log("我是改变前的id："+oDiv.getAttribute('id'))
console.log("我是改变前的value："+oDiv.getAttribute('value'))
//改变属性
oDiv.setAttribute('id','tim')
oDiv.setAttribute('value','100')
console.log("我是改变后的id："+oDiv.getAttribute('id'))
console.log("我是改变后的value："+oDiv.getAttribute('value'))
//删除属性 removeAttribute
oDiv.removeAttribute('value')
</script>
</body>
</html>
DOM节点的创建、插入、删除
# 创建并添加DOM元素
document.createElement('标签名') 创建一个DOM节点
appendChild(DOM节点) 为某个DOM添加一个子节点，在最后面添加
# 插入元素
insertBefore(节点，原有节点) 在已有元素前插入
# 删除DOM元素
removeChild(节点) 删除一个节点
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul id="ullist">
<li>我是第一个</li>
<li>我是第二个</li>
<li>我是第三个</li>
<li>我是第四个</li>
</ul>
<script type="text/javascript">
var oUl=document.getElementById('ullist')
var oLi=oUl.getElementsByTagName('li')
//创建dom节点
var li=document.createElement('li')
li.innerHTML='我是新创建的li'
// oUl.appendChild(li)
//我们要在指定的位置插入新创建的li
// oUl.insertBefore(li,oLi[2])
//删除节点
oUl.removeChild(oLi[3])
</script>
</body>
</html>
文档碎片
减少页面渲染DOM的次数
DOM操作表格元素
早期提供了更便捷的方法。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table id="table1" border="1">
<thead>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>180cm</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>190cm</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>170cm</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var table1=document.getElementById('table1')
// alert(table1.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[0].innerHTML)
// alert(table1.tBodies[0].rows[0].cells[0].innerHTML)
table1.tBodies[0].rows[0].cells[0].innerHTML='tim'
</script>
</body>
</html>
运动框架
运动基础演示
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#div1{
position: absolute;
left: 0;
top:50px;
width: 200px;
height: 200px;
background:red;
}
</style>
</head>
<body>
<button onclick="moving()">开始运动</button>
<div id="div1"></div>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
var timer=null
function moving(){
timer=setInterval(function(){
if(oDiv.offsetLeft>=300){
clearInterval(timer)/*清楚定时器就会停止运动*/
}else{
oDiv.style.left=oDiv.offsetLeft+1+'px'
}
},30)
}
</script>
</body>
</html>
单物体运动框架
封装好一个方法，让外部传入目的地的值，即让物体停下来的值。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#div1{
position: absolute;
left: 0;
top:50px;
width: 200px;
height: 200px;
background:red;
}
</style>
</head>
<body>
<button onclick="moving(500)">开始运动</button>
<div id="div1"></div>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
var timer=null
function moving(target){
var speed=0
if(oDiv.offsetLeft<target){
speed=7
}else{
speed=-7
}
timer=setInterval(function(){
if(Math.abs(target-oDiv.offsetLeft)<=7){
oDiv.style.left=target+'px'
clearInterval(timer)
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px'
}
},30)
}
</script>
</body>
</html>
多物体运动框架
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1,div{
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div></div>
<div></div>
<script type="text/javascript">
var oDiv=document.getElementsByTagName('div')
// var timer=null
for(var i=0;i<oDiv.length;i++){
//添加鼠标移入事件
oDiv[i].timer=null
oDiv[i].onmouseover=function(){
moving(this,400)
}
//添加鼠标移出事件
oDiv[i].onmouseout=function(){
moving(this,100)
}
}
// //添加鼠标移入事件
// oDiv.onmouseover=function(){
// moving(400)
// }
// //添加鼠标移出事件
// oDiv.onmouseout=function(){
// moving(100)
// }
function moving(obj,target){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
var speed=(target-obj.offsetHeight)/8
//做向上取整和向下取整处理
speed=speed>0?Math.ceil(speed):Math.floor(speed)
if(obj.offsetHeight==target){
clearInterval(obj.timer)
}else{
obj.style.height=obj.offsetHeight+speed+'px'
}
},30)
}
</script>
</body>
</html>
改变单一任意值运动框架
在多物体运动框架的前提下增加一个修改样式的参数
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1,div{
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="div1" style="color:black;">111</div>
<div id="div2"></div>
<div id="div3"></div>
<script type="text/javascript">
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
var oDiv3=document.getElementById('div3')
//给div1添加鼠标移入事件
oDiv1.onmouseover=function(){
moving(this,'fontSize',50)
}
//给div1添加鼠标移出事件
oDiv1.onmouseout=function(){
moving(this,'fontSize',12)
}
//给div2添加鼠标移入事件
oDiv2.onmouseover=function(){
moving(this,'width',400)
}
//给div2添加鼠标移出事件
oDiv2.onmouseout=function(){
moving(this,'width',100)
}
//给div3添加鼠标移入事件
oDiv3.onmouseover=function(){
moving(this,'height',400)
}
//给div3添加鼠标移出事件
oDiv3.onmouseout=function(){
moving(this,'height',100)
}
//oDiv1.style.xxx只能获取行内样式(内联样式)
// console.log(oDiv1.style.color,'颜色')
// console.log(oDiv1.style.width,'宽度')
//获取内部样式（写在style标签内部的） 外部样式（通过link引入的样式表）
//在谷歌浏览器获取内部和外部样式getComputedStyle
// console.log(getComputedStyle(oDiv1,false)['width'])
//在ie浏览器下就是用oDiv1.currentStyle
//写一个方法获取我们需要改变的样式的值
function getStyleValue(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj,false)[attr]
}
}
console.log(getStyleValue(oDiv1,'width'))
function moving(obj,attr,target){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
//定义一个变量接收我们需要改变的样式的值
var currvalue=parseInt(getStyleValue(obj,attr))
var speed=(target-currvalue)/8
//做向上取整和向下取整处理
speed=speed>0?Math.ceil(speed):Math.floor(speed)
if(currvalue==target){
clearInterval(obj.timer)
}else{
obj.style[attr]=currvalue+speed+'px'
}
},30)
}
</script>
</body>
</html>
链式运动框架
在改变单一任意值运动框架添加一个回调函数参数
链式运动顾名思义就是先运动完一个值，再运动另一个。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1,div{
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="div1">点击我展开</div>
<div id="div2"></div>
<div id="div3">点击我收起</div>
<script type="text/javascript">
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
var oDiv3=document.getElementById('div3')
oDiv1.onclick=function(){
moving(oDiv2,'width',400,function(){
moving(oDiv2,'height',400)
})
}
oDiv3.onclick=function(){
moving(oDiv2,'height',100,function(){
moving(oDiv2,'width',100)
})
}
//写一个方法获取我们需要改变的样式的值
function getStyleValue(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj,false)[attr]
}
}
console.log(getStyleValue(oDiv1,'width'))
function moving(obj,attr,target,callbackfun){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
//定义一个变量接收我们需要改变的样式的值
var currvalue=parseInt(getStyleValue(obj,attr))
var speed=(target-currvalue)/8
//做向上取整和向下取整处理
speed=speed>0?Math.ceil(speed):Math.floor(speed)
if(currvalue==target){
clearInterval(obj.timer)
if(callbackfun){
callbackfun()
}
}else{
obj.style[attr]=currvalue+speed+'px'
}
},30)
}
</script>
</body>
</html>
改变多值运动框架
同时改变多个需要改变的样式值。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1,div{
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="div1">点击我展开</div>
<div id="div2"></div>
<div id="div3">点击我收起</div>
<script type="text/javascript">
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
var oDiv3=document.getElementById('div3')
oDiv1.onclick=function(){
moving(oDiv2,{"width":400,"height":400})
}
oDiv3.onclick=function(){
moving(oDiv2,{"width":100,"height":100})
}
//写一个方法获取我们需要改变的样式的值
function getStyleValue(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj,false)[attr]
}
}
console.log(getStyleValue(oDiv1,'width'))
function moving(obj,json){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
//判断所有运动是否已完成
var beclear=true
for(var attr in json){
//定义一个变量接收我们需要改变的样式的值
var currvalue=parseInt(getStyleValue(obj,attr))
var speed=(json[attr]-currvalue)/8
//做向上取整和向下取整处理
speed=speed>0?Math.ceil(speed):Math.floor(speed)
if(currvalue!=json[attr]){
beclear=false
obj.style[attr]=currvalue+speed+'px'
}
}
if(beclear){
clearInterval(obj.timer)
}
},30)
}
</script>
</body>
</html>
完美运动框架
基于多值运动框架，在运动完之后传入回调函数。
改变透明度opacity需要做特殊处理
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1,div{
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 20px;
}
#div2{
/*兼容ie的写法*/
filter: alpha(opacity:30);
/*兼容非ie浏览器的写法*/
opacity:0.3;
}
</style>
</head>
<body>
<div id="div1">点击我展开</div>
<div id="div2"></div>
<div id="div3">点击我收起</div>
<script type="text/javascript">
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
var oDiv3=document.getElementById('div3')
oDiv1.onclick=function(){
moving(oDiv2,{"width":400,"height":400,"opacity":100},function(){
alert('我已经执行完了')
})
}
oDiv3.onclick=function(){
moving(oDiv2,{"width":100,"height":100,"opacity":30})
}
//写一个方法获取我们需要改变的样式的值
function getStyleValue(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj,false)[attr]
}
}
console.log(getStyleValue(oDiv1,'width'))
function moving(obj,json,callbackfun){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
//判断所有运动是否已完成
var beclear=true
for(var attr in json){
//定义一个变量接收我们需要改变的样式的值
var currvalue=0
if(attr=='opacity'){
// 为什么使用四舍五入的取整方式，是因为计算机对于计算存在一些bug，大家可以尝试输出 0.7*100就明白了
currvalue=Math.round(getStyleValue(obj,attr)*100)
}else{
currvalue=parseInt(getStyleValue(obj,attr))
}
var speed=(json[attr]-currvalue)/8
//做向上取整和向下取整处理
speed=speed>0?Math.ceil(speed):Math.floor(speed)
if(currvalue!=json[attr]){
beclear=false
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(currvalue+speed)+')'
obj.style.opacity=(currvalue+speed)/100
}else{
obj.style[attr]=currvalue+speed+'px'
}
}
}
if(beclear){
clearInterval(obj.timer)
if(callbackfun){
callbackfun()
}
}
},30)
}
</script>
</body>
</html>
事件
事件对象
用来获取事件的详细信息，例如：鼠标位置、键盘按键。
ie下可以直接使用event、非ie需要传入事件对象参数。
事件冒泡
&esmp;事件流会从DOM节点最里面的事件往最外面执行。
取消事件冒泡兼容写法
* 获取事件对象(兼容写法) var oEvent=ev || event;
* 取消事件冒泡 oEvent.cancelBubble=true;
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
background: pink;
}
#div2{
width: 150px;
height: 150px;
background: black;
color: #fff;
}
</style>
</head>
<body>
<div id="div1" >
<div id="div2"></div>
</div>
<script type="text/javascript">
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
// //通过事件对象获取鼠标移动时的坐标位置
// document.onmousemove=function(ev){
// //定义获取事件对象兼容（获取鼠标移动的横坐标、纵坐标）
// var oEvent=ev||event
// oDiv2.innerHTML=oEvent.clientX+','+oEvent.clientY
// }
// //通过事件对象获取键盘按键的值
// document.onkeydown=function(ev){
// //定义获取事件对象兼容
// var oEvent=ev||event
// //键盘每个键对应的值可以百度搜索一下有一个表的 keyCode就是键的值
// oDiv2.innerHTML=oEvent.keyCode
// }
oDiv1.onclick=function(){
console.log("你点击了div1")
}
oDiv2.onclick=function(ev){
console.log("你点击了div2")
//阻止冒泡
var oEvent=ev||event
oEvent.cancelBubble=true
console.log(oEvent)
}
</script>
</body>
</html>
事件绑定、事件解绑、事件捕获
# 事件绑定
addEventListener(事件名称，函数，捕获)，第三个参数为可选，默认为false，false 即事件流为事件冒泡。
# 事件解绑
removeEventListener(事件名称，函数，捕获)，默认为false，false即事件流为事件冒泡
注意，时间绑定中传入匿名函数会导致无法进行事件解绑
# 事件捕获
addEventListener(事件名称，函数，true) 和时间冒泡相反，如果开启了时间捕获就先执行捕获的事件，再执行当前被点击事件。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
background: pink;
}
#div2{
width: 100px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<script type="text/javascript">
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
//当你需要解绑的时候，事件绑定里面的函数不能是匿名函数
oDiv1.addEventListener('click',fun,true)
oDiv2.addEventListener('click',function(){
console.log('你点击了div2')
oDiv1.removeEventListener('click',fun,true)
},false)
function fun(){
console.log('你点击了div1')
}
</script>
</body>
</html>
键盘事件以键盘码
单个键盘事件 document.onkeydown
组合按键事件 document.onkeyup
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//键盘事件
// document.onkeydown=function(event){
// console.log(event)
// if(event.keyCode==13){
// alert('你按下了回车键')
// }
// }
document.onkeyup=function(event){
if(event.ctrlKey && event.keyCode==67){
alert('你按下了crtl+c')
}
}
</script>
</body>
</html>
默认行为，阻止默认行为
在浏览器里鼠标右键事件 oncontextmenu 会默认的给我们显示一个弹窗，这些就是事件的默认行为。
a标签跳转也是一个默认行为，我们可以通过在他的点击事件里面用return false 来阻止默认行为。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="https://baidu.com" onClick="return false;">百度</a>
<script type="text/javascript">
document.oncontextmenu=function(){
//用return false来阻止默认行为
return false;
}
</script>
</body>
</html>
Ajax
AJAX是什么？
AJAX 是一种无须重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量的数据交换，AJAX 可以使网页实现异步更新。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
使用AJAX
调用封装好的AJAX，传入读取的文件地址，成功需要做的事情和失败需要做的事。情.ajax(url,fnSucceed,fnFailed)
npm install -g http-server 安装http-server 启动一个本地静态服务。 启动服务使用 http-server
浏览器为了安全考虑，默认禁止跨域访问。
调用AJAX
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="read">读取数据</button>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var oBtn=document.getElementById('read')
oBtn.onclick=function(){
ajax('xiaod.txt?t='+new Date().getTime(),function(res){
alert(res)
},function(){
alert('读取失败')
})
}
</script>
</body>
</html>
封装AJAX
# 创建AJAX对象
ie5、ie6 使用 var oAjax=new ActiveXObject("Microsoft.XMLHTTP")
现在浏览器使用 var oAjax=new XMLHttpRequest()
# 连接服务器
oAjax.open('GET',url,true)
请求类型、文件服务器地址、异步(true) || 同步(false)
# 接收数据 （onreadystatechange事件）
readyState属性：请求状态
0 (为初始化) 还没有调用open()方法
1 (载入) 已调用send()方法
2 (载入完成) send()方法完成，已收到全部响应内容
3 (解析) 正在解析响应内容
4 (完成) 响应内容解析完成，可以在客户端调用了
status 属性：请求结果
200："OK"
404：未找到页面
请求成功返回内容
oAjax.responseText
//封装ajax调用事件
function ajax(url,fnSucceed,fnFailed){
//1、创建ajax对象
//创建ajax对象需要兼容，看看是否是ie5、6
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest()
}else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP")
}
//2、连接服务器
//传入三个参数，第一个为请求类型、第二个给请求地址，第三个是同步(true)或异步(false)
oAjax.open('GET',url,true)
//3、发送请求
oAjax.send()
//4、接收数据
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
fnSucceed(oAjax.responseText)
}else{
if(fnFailed){
fnFailed()
}
}
}
}
}
面向对象
封装、继承、多态。
# 对象的组成
方法：函数：过程、动态的
属性：变量：状态、静态的
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// var obj1=new Object() //创建对象
// //定义属性
// obj1.name='Tim'
// obj1.age=29
// //定义方法
// //this指向调用此方法的对象 所以this指向obj1
// obj1.showName=function(){
// alert('我的名字'+this.name)
// }
// obj1.showAge=function(){
// alert('我的年龄'+this.age)
// }
// obj1.showName()
// obj1.showAge()
// var obj2=new Object() //创建对象
// //定义属性
// obj2.name='xiaod'
// obj2.age=32
// //定义方法
// //this指向调用此方法的对象 所以this指向obj1
// obj2.showName=function(){
// alert('我的名字'+this.name)
// }
// obj2.showAge=function(){
// alert('我的年龄'+this.age)
// }
// obj2.showName()
// obj2.showAge()
function createMan(name1,age1){ //构造函数
var obj=new Object() //创建对象
//定义属性
obj.name=name1
obj.age=age1
//定义方法
obj.showName=function(){
alert('我的名字'+this.name)
}
obj.showAge=function(){
alert('我的年龄'+this.age)
}
return obj
}
var obj1=createMan('Tim',29)
var obj2=createMan('xiaod',32)
// obj1.showName()
// obj2.showName()
alert(obj1.showName==obj2.showName) //返回false 证明每次调用构造函数的时候他都会重新创建showName和showAge这两个方法 ，这不是我们想要的
</script>
</body>
</html>
构造函数等同于我们此时只做了初始化
我们还需要用new 来实例化我们的构造函数
# new 帮我们做了两件事
帮我们创建空白对象 var this = new Object()
帮我们返回经过加工过的对象 obj
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//工厂函数
//构造函数此时只是做了初始化工作
function createMan(name1,age1){ //构造函数
//添加原料
// var obj=new Object() //创建对象
//当使用new实例化的时候，其实系统帮我们做了这步
//var this=new Object()
//对我们的原料进行加工
//定义属性
this.name=name1
this.age=age1
//定义方法
this.showName=function(){
alert('我的名字'+this.name)
}
this.showAge=function(){
alert('我的年龄'+this.age)
}
//出厂
// return obj
}
//使用new进行实例化构造函数
//new帮我们做了两件事 1、创建原料var this=new Object() 2、return this
var obj1=new createMan('Tim',29)
var obj2=new createMan('xiaod',32)
obj1.showAge()
obj2.showAge()
alert(obj1.showAge==obj2.showAge)
//输出的还是false ，证明每次调用还是会重新生成了我们的定义的方法
</script>
</body>
</html>
原型可以避免公共方法的多次创建
protoype （原型，雏形） 这个英文在不同编程语言里面居然意思完全不一样。 在Java里面，原型属于一种设计模式，原型实例可以指定创建对象的种类，并且通过拷贝这些原型创建新的对象。不需要知道任何创建的细节，不调用构造函数。 属于—— 创建型。 因为 new产生的一个对象需要非常繁琐的过程（数据准备、访问权限等），原型模式性能比直接new一个对象性能高(在内存中进行二进制流拷贝)。 也就是说原型是为了创建多个相同类型对象的模板，很明显是多例。 在Java里面 singleton(单例) 有单例模式去实现。 而在 JavaScript 中 prototype 恰恰相反，它的作用是用来避免对象中的公共方法被的多次创建，也就是说是为了让对象中的公共方法变为单例而出现的。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//工厂函数
//构造函数此时只是做了初始化工作
function createMan(name1,age1){ //构造函数
//添加原料
//当使用new实例化的时候，其实系统帮我们做了这步
//var this=new Object()
//对我们的原料进行加工
//定义属性
this.name=name1
this.age=age1
//出厂
// return obj
}
//利用原型来添加共用的方法（行为)
createMan.prototype.showName=function(){
alert('我的名字'+this.name)
}
createMan.prototype.showAge=function(){
alert('我的年龄'+this.age)
}
//使用new进行实例化构造函数
//new帮我们做了两件事 1、创建原料var this=new Object() 2、return this
var obj1=new createMan('Tim',29)
var obj2=new createMan('xiaod',32)
// obj1.showAge()
// obj2.showAge()
alert(obj1.showAge==obj2.showAge) //true
</script>
</body>
</html>
BOM
什么是BOM
BOM（Browser Object Model）即浏览器对象模型，是一个与浏览器窗口进行交互的对象。
打开或关闭一个窗口
window.open()
window.close()
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onClick="window.open('12.1.close.html')">打开新页面</button>
<!-- <button onClick="openNewPage()">打开新页面</button> -->
<script type="text/javascript">
function openNewPage(){
var openPage=window.open()
openPage.document.write('你好，我是新打开的页面')
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onClick="window.close()">关闭页面</button>
</body>
</html>
BOM常用属性和系统对话框
# 获取设备及浏览器的类型型号
windows.navigator.userAgent
# 获取当前文档地址对象
windows.location
location.host 主机加端口号
location.hostname 主机
location.port 端口号
location.protocol 协议
location.pathname 路径
location.hash 片段标识符，可以用于保存网页状态
location.search 返回问号后的字段
location.href 可以用location.href='url'去打开页面
# 系统对话框
警告框：alert("内容")
选择框：confirm("提问的内容")
输入框：prompt()
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onClick="window.location.href='http://www.baidu.com'">跳转到官网</button>
<script type="text/javascript">
window.onload=function(){
//获取设备及浏览器的类型型号
console.log(window.navigator.userAgent)//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36
//获取当前文档地址对象
console.log(window.location) //Location
}
</script>
</body>
</html>
BOM常用事件
window.onload
windows.onscroll 滚动距离
谷歌浏览器 document.body.scrollTop
IE、火狐浏览器 document.documentElement.scrollTop
windows.onresize 可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="height:2000px;background:red;"></div>
<script type="text/javascript">
window.onload=function(){
//滚动事件
window.onscroll=function(){
//兼容ie 获取滚动距离
if(document.body.scrollTop){
console.log(document.body.scrollTop)
}else{
console.log(document.documentElement.scrollTop)
}
}
//监听可是窗口变化事件
window.onresize=function(){
console.log(document.documentElement.clientHeight)
}
}
</script>
</body>
</html>