JavaScript
JavaScript是运行在客户端的脚本语言
1.js基础
浏览器执行JS简介
浏览器分成两部分:渲染引擎和JS引擎
-
渲染引擎∶用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
-
JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8
浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行.
JS的组成
1.ECMAScript
ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。
ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
2.DOM——文档对象模型
文档对象模型(Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接通过DO提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
3.BOM——浏览器对象模型
BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
JS的书写位置
行内、内嵌、外部
js的三种输入输出语句
alert(msg) //浏览器弹出警示框
console.log(mag) //浏览器控制台打印输入信息
prompt(info) //浏览器弹出输入框，用户可以输入
2.变量运算符
声明了没复制是undefind，未定义
- 变量
所有的变量都用var定义
变量名不可以用数字开头
数值，文本，图形，音频，视频
js的变量数据类型是只有程序运行的时候，根据等号右边的类型确定的
- 逻辑运算
&&//与 两个都为真
||//或 一个为真即为真
!//非 真即假，假即真
console.log(123&&456) 如果前面为真返回后面 前面为假返回表达式1
console.log(123||456) 如果前面为真返回前面 前面为假返回表达式2
- 比较运算符
=//赋值
==//等于（类型不一样，值一样，也为真）
===//绝对等于（值一样，类型也一样，才为TURE）
坚持不要使用==，最好使用===
NaN===NaN ,这个与所有的数值都不相等包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN
- 浮点数问题
console.log(1/3===(1-2/3))//结果F
尽量避免使用浮点数进行运算，存在精度问题！
作用域
作用域有全局作用域和局部作用域
在全局作用域下声明的是全局变量，在函数内直接使用没有声明的也是全局变量
严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 'use strict'
严格检查模式，预防JavaScript的随意性导致的一系类问题
-->
<script>
'use strict'
<!-- 默认为全局变量-->
let i=1;//局部变量都建议使用let定义
</script>
</head>
<body>
</body>
</html>
3 .数据类型
分为两大类简单性和复杂性
3.1五基本数据类型
typeof n //可以输出n的数据类型
控制台黑色就是字符型，蓝色数字型，深蓝布尔型，其余浅灰
-
Number数字型
-
number
js不区分小数和整数 number
数字0x开头表示16进制，0开头八进制 123//整数 123.1//浮点数 1.23e3//科学计数法 -99//负数 NaN// not a number不是一个数字 Infinity//超出一个数字 表示无限大 -Infinity//表示无限小 Number.MAX_VALUE最大值 Number.MIN_VALUE最小值 isNaN(n);//可以判断n是不是数字 -
-
Boolean布尔型
-
布尔值
ture 1 false 0
-
-
String字符串型
- 字符串
'abdc' "acdb" js推荐使用单引号，字符串里面含有单引号，外面用双引号，里面有单引号外面用单引号 -
Undefined
和数字相加结果NaN
-
Null
类型转换
转换为字符串型
n.toString(); //转为字符串
String(n);//转为字符串
n+'';//转为数值
parseFloat(string);
Number();
js(-*/)
转换为数字型
parseInt(string);//转为数值
parseFloat(string);//转浮点型
Number();//强制转换
'12'-0;||'12'*1||'12'/1
js(-*/)
转布尔型
代表空\否定的值，会转为false 0，'',NaN,null,undefined
别的都是true
运算符
+
-
*
/
% 取余
3.2 字符
1.正常的字符串我们使用，单引号或双引号包括 字符串不可变
2.注意转义字符\
\' 单引号
\" 双引号
\n 换行
\t tab缩进
\b 空格
\u4e2d //u### unicode字符
//Asc11字符
3.多行字符编写
//Tab键上面的`
'use strict';
var msg =
`Hello
world
你好呀！
世界
`
4.模板字符串
'use strict';
let name = 'youzi';
let age = 3;
let mas = `你好呀，${name}`
字符串长度
'use strict';
let name = 'youzi';
//在浏览器中打印字符串长度
//console.log(name.length)
大小写转换
console.log(mas.toUpperCase());//变大写
//注意这里是方法，不是属性了
console.log(mas.toLowerCase());//变小写
查找字符
console.log(mas.indexOf('t')); 从前往后找，第一个出现的
console.log(mas.lastIndexOf('t')); 从后往前找，最后一个出现的
获取指令的下标
字符串截取
//包含前面不包含后面
console.log(mas.substring(1)); //从第一个字符串截取到最后一个字符串
console.log(mas.substring(1，3)); //从第一个字符串截取到第二个字符串
str.substr(2,3);从第二个索引位置，取3个字符
返回指定位置的字符
str.CharAt(3);//获取指定位置的字符
字符串拼接
str.concat("red");
concat(str,str1);
字符串替换
str.replace('a','b');只会替换第一个字符
str.split(',');分隔符//字符转数组
3.3数组
Array可以包含任意的数据
var arr = new Array();
var arr = [1,2,3,4,5.6,null,'c'];
1.遍历数组
arr.length
三种遍历遍历
for(int i=0;i<arr.length;i++){
console.log(arr[i]);
}
var arr=[1,2,3,4,5,6,7,8,9,10];
arr.forEach(function (value){
console.log(value)
})
//另一种方法
var arr=[99,2,3,55,5,6,7,8,9,10];
for(var num in arr){
console.log(arr[num])
}
注意加入给数组长度赋值，数组长度就会发生变化，如果赋值过小元素就会丢失
2.indexOf（2）索引
通过下标索引
arr.indexOf(2) //从前向后找
3
lastIndexOf("2");//从后想前找
字符串"3"和数字3是不同的
3.slice() 截取
截取数组的一部分，返回一个新数组，类似于String中的substring
var arr = [1,2,3,4,5,null,"a"];
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vztdQmDC-1653619562350)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009124914941.png)]
4.push,pop追加删除
在队尾添加元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JPUPDPKP-1653619562351)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009145908035.png)]
删除队尾元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-032jstKy-1653619562352)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009150020489.png)]
5.unshift(),shift()
在前面加一个元素unshift()，shift()删除前面的元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wDwEXJ9U-1653619562352)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009150627621.png)]
6.排序
用arr.sort();
7.元素反转
arr.reverse();
8.arr.concat();
并没有改变数组，只是会返回一个新的数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CvXq9vor-1653619562353)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009151305373.png)]
9.连接符join();
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cbofl0aH-1653619562354)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009151403241.png)]
10.多维数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2eh960MW-1653619562355)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009151721634.png)]
11判断是否是数组
Array.isArray(arr);
arr instanceof Array;
3.4对象
自定义对象，内置对象，浏览器对象
创建对象
三种创建对象的方式：
第一种
var obj = {};
var person = {
name:"wangru",
age : 3,
email:"5211314@qq.com",
score:99
}
//多个属性之间用逗号隔开，最后一个不用加逗号
第二种
var obj = new Object();
第三种，利用构造函数 构造函数名字首字母要大写
function 构造函数名(){
this.属性 = 值；
this.方法 = function(){}
}
new 构造函数名();
function Persion(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
vae haha = new Persion(name,age,sex);
javascript中所有的键都是字符串，值是任意对象
对象赋值
person.name="wangru"
2.使用一个不纯在的对象属性，不会报错！！ undefind
person.haha
undefined
3.动态的删减，通过delete输出对象属性
delete person.name
4.动态增加
person.haha="haha"//就可以增加haha属性
5.判断一个属性值是否在对象中XXX in XXXX!
'age' in person
遍历对象
for(var k in obj){
console.log(k); //属性名
console.log(obj[k]); //属性值
}
方法也可以遍历出来
内置对象
js自带的对象，称为内置对象
常见的内置对象 可以用MDN或者W3C查血文档
https://developer.mozilla.org/zh-CN/
Math
不需要new，可以直接使用
Math.PI //圆周率
Math.max(2,3,9,1);//最大值
Math.min(2.3.99.1);//最小值
Math.abs(-1);//绝对值
Math.floor(-1.4);//向下取整
Math.random(); 0到1的随机小数
Date
var date = new Date();
date.getFullYear(); 得到当前日期年
date.getMounth();得到当前日期月 那个月 0到11
date.getDate();获取当天日期 几号
date.getDays();得到当前日期天 星期几 周日是0
date.getHours();得到当前日期时 那个小时
date.getMinutes();得到当前日期分 多少分钟
date.getSeconds();得到当前日期秒 多少秒
date.valueOf();//获得毫秒值
date.getTime();//获得毫秒值
var date = +new Date();//获得毫秒值
Date.now();//获得毫秒值 h5新增的
Array
String
JSON
var student = {
name:"youzi",
age:18,
sex:'女'
}
//对象转化为JSON字符串
var jsonstudent = JSON.stringify(student);
//JSON 字符串转化为对象
var youzii = JSON.parse(jsonstudent);
JSON和JS字符串的区别
var student = {
name:"youzi",
age:18,
sex:'女'
}//对象
var json = '{"name":"youzi","age":"3","sex":"女"}'
3.5Map和Set
var map = new Map();
map.set("wangru",100);
map.set("lucky",1);
map.set("sunny",5);//添加值
var name = map.get("lucky");//可以通过名字来获取成绩
console.log(name);
map.delete(lucky);//lucky 就没有了
//set可以去重
var set = new Set([3,1,1,1,1]);
console.log(set);// 结果3 1
set.delete(1);// 结果3
set.add(2);//增加一个元素
console.log(set.has(3))//是否包含某个元素
3.6 iterator
var arr=[99,88,77,66,55,44];
//打印的是数组的下标
for(let x in arr){
console.log(x)
}
//打印的是数组的值
for(let x of arr){
console.log(x)
}
var map = new Map;
map.set("luckiy",100);
map.set("youzi",120);
map.set("ningmeng",150);
for(let y of map){
console.log(y)
}
var set = new Set([5,6,7]);
for(let z of set){
console.log(z)
}
//set和map 一样
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hOQh5wMr-1653619562355)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201010144625976.png)]
简单数据类型和复杂数据类型
简单数据类型又叫值类型 放在栈里面
- Number
- String
- Boolean
- Undefined
- Null
复杂数据类型又叫引用类型 放在堆里面
如果一个对象没想好放啥，就给个null值
new出来的就是复杂数据类型
流程控制
顺序结构、分支结构、循环结构
if语句
var age=18;
if(age>=18){
console.log("已成年");
}else{
console.log("未成年");
}
var age=18;
if(age>=18){
console.log("已成年");
}else if(age<10){
console.log("小孩子");
}
三元表达式
条件表达式？ 表达式1 ： 表达式2
真返回表达式1的值，否则返回表达式2的值
sewitch语句
switch(表达式){
case value1:执行语句 break;
case value2:执行语句 break;
case value3:执行语句 break;
default:执行语句;
}
for循环
for(初始化变量;条件表达式;操作表达式){
循环体
}
初始化，条件表达式，循环体 操作表达式 条件表达式 循环体……
while循环
while(表达式){
循环体；
操作表达式；
}
dowhile循环
do{
循环体
}while(表达式)
4.函数
4.1函数的定义
定义方式一：
function 函数名（入参）{
函数体；
}
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return 代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果是undefined
定义方式二：
var abs = function(x){//通过abs就，但可以把结果赋值给abs通过abs
//就可以调用函数
if(x>=0){
return -x;
}
}
调用就是
abs(x);
运行结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZoQ8lGR-1653619562356)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201010152643265.png)]
JavaScript可以传任意个值，也可以不传值
1.如何规避不传值
'use strict'
function abs(x){
if(typeof x!="number")
throw 'Now a Number';//可以手动定义一个异常
if(x>=0){
return x;
}else{
return -x;
}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AHJ7CkxO-1653619562356)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201010152926457.png)]
arguments
2.如何避免传多个值
arguments 是JS免费赠送的一个关键词
arguments代表传递进来所有参数的一个伪数组
'use strict'
function abs(x){
if(typeof x!="number")
throw 'Now a Number';
console.log("x->",x);
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MtHLnjEf-1653619562357)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201010154005123.png)]
3.rest(新特性) 获取除了已经定义的所有参数
function fun(a,b){
console.log(a);
console.log(b);
for(let i=2;i<arguments.length;i++)
console.log(arguments[i]);
}
//两种方法等价
function fun(a,b,···rest){
console.log(a);
console.log(b);
console.log(rest);
}//rest必须参数只能写在最后面，必须用···标识
4.2方法
1.定义方法
方法就是把函数放在对象的里面，对象只有两个东西，方法和属性
var youzi = {
name:'youzi',
birth:9999,
//方法
age:function (){
let now = new Date().getFullYear();
return now-this.birth;
}
}
//调属性
youzi.name;
//调方法 一定要带括号
youzi.age();
function getAge(){
let now = new Date().getFullYear();
return now-this.birth;
}
var youzi = {
name:'youzi',
birth:1999,
//方法
age:getAge
}
//调属性
youzi.name;
//调方法 一定要带括号
youzi.age();//是正确的
getAge();//是错误的 this无法指向 this指的是youzi对象而getAge();属于window
apply,在JS中可以控制this 的指向
'use strict'
function getAge(){
let now = new Date().getFullYear();
return now-this.birth;
}
var youzi = {
name:'youzi',
birth:1999,
age:getAge
};
getAge.apply(youzi,[]);//代表this指向了youzi这个对象，不需要参数时参数为空
5.面向对象编程
5.1什么是面向对象
var student = {
name:"youzi",
age:18,
sex:'女',
run:function ()
{
console.log(this.name+" run……");
}
};
var xiaoming = {
name:"xiaoming"
};
xiaoming.__proto__=student;
class Student{
constructor(name){
this.name = name;
}
hello(){
alert(this.name+' hello')
}
}
var xiaoming = new Student("xiaoming");
class Student{
constructor(name){
this.name = name;
}
hello(){
alert(this.name+' hello')
}
}
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert( this.grade+" 我是小学生");
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new xiaoStudent("xiaong",100);
本质：查看对象原型
6.API和WebAPI
API是一些预先定义好的函数，API是给程序员提供的一种工具，以便更轻松的实现想要的功能
WebAPI是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
浏览器功能主要通过BOM实现
页面元素主要通过DOM实现
- API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
- WebAPI主要针对于浏览器提供接口，主要针对于浏览器做交互效果
- WebAPI一般都有输入和输出（函数的传参和返回值），WebAPI很多都是方法（函数）
7.操作DOM
什么是DOM
文档对象模型（Document Object Model，简介DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B4kqFrxB-1653619562357)(D:\下载\QQ下载\QQ图片20220426113522.png)]
1.获得DOM节点
浏览器网页就是一个Dom树形结构
要操作一个Dom节点,就必须先获得这个Dom树
<div id="father">
<h1>biaoti</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
</div>
<script> //写下面，因为文档从上往下加载
var h1= document.getElementsByTagName('h1');//标签
getElementsByTagName();可以返回带有指定标签名的对象集合
// 因为我们得到的是一个对象的集合，所以我们想要操作里面的元素需要遍历
//得到的元素对象是动态的
var dl =document.getElementById('p1');//id id是大小写敏感的字符串
console.log(d1);结果是 //<p id="p1">p1</p> 是一个对象
//ul和ol都有li怎么获取ol中的li
var ol = document.getElementsByTagName('ol');
ol.getElementsByTagName('li')
var children = father.children;//获取父节点下的所有子节点
//father.firstchild;
//father.lastchild;
//这是原生代码,之后会学别的
//h5新增的
var d2 =document.getElementsByClassName('p2')//class
//querySelector返回指定选择器的第一个指定对象
var haha = document.querySelector('.box');//类名
var haha = document.querySelector('#box');//id名
//返回指定选择器的所有元素对象集合
var haha = document.querySelectorAll('.box');
//获取body元素
document.body;
//获取html元素
document.documentElement;
2.更新节点
改变内容
<div id="id1">
111
</div>
<script>
var id1=document.getElementById('id1');
</script>
document.getElementById('id1');//获得
id1.innerText='123'//修改只改值 不识别标签，去掉空格和换行
id1.innerHTML='<strong>123</strong>'//可以写一些样式 保留空格和换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = 'id1'>123</div>
<script>
var id1=document.getElementById('id1');
id1.innerText='1234';
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iFvZjvt2-1653619562358)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201021140339584.png)]
改变属性
<body>
<button id="haha">haha</button>
<button id="luckily">luckily</button><br>
<image src="haha.png"> </image>
<script>
var haha = document.getElementById('haha');
var luckily = document.getElementById('luckily');
var img = document.querySelector('img');
haha.onclick = function{
img.src = "haha.png";
}
luckily.onclick = function{
img.src = "luckily.png";
}
</script>
</body>
通过类名修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.haha{
width: 100px;
height: 200px;
color: #000;
}
.ha{
width: 100px;
height: 200px;
color: rgb(165, 70, 70);
}
</style>
<body>
<div class = "haha">
111
</div>
<script>
var div = document.querySelector('div');
div.onclick = function(){
this.className = 'ha';
//this.value可以获取值
//this.value.length可以获取值的长度
}
</script>
</body>
</html>
自定义属性
自定义属性的目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中
h5规定自定义属性data-开头做为属性名并且赋值
**h5新增的获取自定义属性的方法div.dataset.index **
<div id="demo" index="1"> //index就是自定义属性
</div>
<script>
var div = document.querySelector('div');
element.getAttribute('id');//获取属性值，div自身带的
div.getAttribute('index');//获取自定义属性
div.setAttribute('index'，2);//修改自定义属性
</script>
3.操作表单
文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
……
<form action="post">
<p>
<span>用户名：</span> <input type="text" id="username" required>
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="men"> 男
<input type="radio" name="sex" value="women"> 女
</p>
<p><input type="submit"></p>
<script>
//得到输入框的值
var input_text = document.getElementById('username');
//修改输入框的值
input_text.value = '123';
</script>
想要按钮点一次就不能再点
var btn = querySelectoe('botton');
btn.onclick = function(){
btn.disabled = true;
}
//实现密码点一下可以看，再点一下看不了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
</div>
<input type="password" id = "password">
<button type="submit" id = "button">提交</button>
<script>
//var id1=document.getElementById('password');
//var btn=document.getElementById('button');
var div = document.getquerySelector('div');
var flag = 1;
button.onclick = function(){
console.log(flag);
if(flag===0){
password.type = 'text';
flag = 1;
}else{
password.type = 'password';
flag = 0;
}
}
div.onlick = function(){
this.style.width = '200px';
}
</script>
</body>
</html>
点击div盒子背景编红
div.onclick = function(){
this.style.backgroundColor = 'red';
}
4.节点操作
网页中的内容都是节点（标签、属性、文本、注释等）在DOM中node表示
一般来说，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
- 元素节点nodeType为1
- 属性节点nodeType为2
- 文本节点nodeType为3
我们实际开发过程中主要操作的是元素节点
节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
-
父节点
node.parentNode,最近的父节点
-
子节点
node.childNodes 所有节点，元素节点，文本节点
node.children 所有的子元素节点
node.firstChild 获取第一个节点
node.lastChild 获取最后一个节点
node.firstElementChild 获取第一个节点
node.lastElementChild 获取第一个节点
-
兄弟节点
node.nextSibling 下一个兄弟节点
node.nextElementSibling 下一个兄弟元素节点 //ie9以上才支持
next换成previous是上一个兄弟节点
创建节点
<script>
var li = document.createElement('li');//创建一个li元素节点
//创建完之后需要添加节点
var ul = document.querySelector('ul')
ul.appendChild(li)//后面添加
ul.insertBefore(添加元素，在那个前面添加)//在某个元素的前面添加
</script>
innerHTML = '<a href="#"></a>'
document.write() //是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面全部重绘
单个的话，下面两个没有区别，创建很多个的时候上面的采用拼接字符串比较慢采用数组的更快
innerHTML
document.createElement() 效率稍微低一点，但是结构清晰
删除节点
删除节点的步骤，先获得父节点，然后删除自己
<div id="father">
<h1 id="h1"></h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);
</script>
//另一种方法，但是是动态的
<div id="father">
<h1 id="h1">h1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var father = document.getElementById('father');
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U1aLupM4-1653619562358)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201021142152044.png)]
插入节点
我们获得摸个DOM节点后，假设这个节点为空，我们可以通过innerHTML就可以增加一个元素，但是如果本身就有元素，就会被覆盖掉
一般我们会用追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="eat">零食</h1>
<div id="list">
<p id="aa">大口吃肉</p>
<p id="bb">每日坚果</p>
<p id="cc">牛奶组合</p>
</div>
<script>
var eat = document.getElementById('eat');
var list = document.getElementById('list');
list.appendChild(eat);
</script>
</body>
</html>
//操作的后的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="eat">零食</h1>
<div id="list">
<p id="aa">大口吃肉</p>
<p id="bb">每日坚果</p>
<p id="cc">牛奶组合</p>
</div>
<script>
var eat = document.getElementById('eat');
var list = document.getElementById('list');
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PLEWTEwF-1653619562359)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201021143833536.png)]
创建一个新标签
<h1 id="eat">零食</h1>
<div id="list">
<p id="aa">大口吃肉</p>
<p id="bb">每日坚果</p>
<p id="cc">牛奶组合</p>
</div>
<script>
var eat = document.getElementById('eat');
var list = document.getElementById('list');
var xin = document.createElement('p');
xin.id = 'xin';
xin.innerText = "我爱吃零食";
list.appendChild(xin);
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1aHFbTzs-1653619562359)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201021144346474.png)]
//创建一个标签
var mySCript = document.createElement('script');
mySCript.setAttribute('type','text/javascript');
list.appendChild(mySCript);
<h1 id="eat">零食</h1>
<div id="list">
<p id="aa">大口吃肉</p>
<p id="bb">每日坚果</p>
<p id="cc">牛奶组合</p>
</div>
<script>
var bb = document.getElementById('bb');
var list = document.getElementById('list');
var xin = document.createElement('p');
xin.id = 'xin';
xin.innerText = "我爱吃零食";
list.insertBefore(xin,bb);
//把xin节点插到bb前面
复制节点
node.cloneNode();//克隆
如果里面不写值，或者false，则是浅拷贝，只赋值标签，不赋值值
true，赋值标签和内容 深拷贝
重点核心
文档对象模型（Document Object Model，简介DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C已经定义了一系列DOM接口，通过这些接口DOM接口可以改变网页的内容、结构和样式。
- 对于js，为了能够使用js操作HTML，js就有了一套自己的dom编程接口
- 对于HTML，dom使得html形成一颗dom树，包含文档、元素、节点
创建
1.document.write();
2.innerHTML
3.createElement();
增
1.appendChild
2.insertBefore
删
removeChild
改
主要修改dom的元素属性，dom元素的内容、属性,表单的值等
1.修改元素属性: src、href、title等
2．修改普通元素内容:innerHTML、innerText
3．修改表单元素: value、type、disabled等
4．修改元素样式: style、className
查
主要获取查询dom的元素
1. DOM提供的API方法: getElementByld、getElementsByTagName古老用法不太推荐
2.H5提供的新方法: querySelector、querySelectorAll提倡
3．利用节点操作获取元素∶父(parentNode)、子(children)、兄(previousElementSibling.
nextElementSibling)提倡
8.事件
事件的三要素
-
事件源
事件被触发的对象 谁 一般按钮
-
事件类型
如何触发的，什么事件 比如鼠标点击触发（onclick），鼠标经过，还是鼠标键盘按下
-
事件处理程序
通过一个函数赋值的方式完成
<body>
<botton id = "btn">haha</botton>
<script>
var btn = document.getElementById('btn'); //事件源
//事件类型
btn.onclick = fouction(){
alert('haha');
}
</script>
</body>
执行事件的步骤
- 获取事件源
- 注册时间（绑定事件）
- 添加事件处理程序
常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
mouseenter和mouseover的区别
- mouseover经过自身或触发，经过子盒子也会触发，因为它或冒泡
- mouseenter经过自身才会触发
事件高级
注册事件
给元素添加事件称为注册事件或者绑定事件
注册事件的两种方式：传统方式和方法监听注册方式
传统的注册方式
利用on开头的事件onclick
<button onclick= "alert(hi~)”></button>
btn.onclick = function(){}
特点∶注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>传统点击事件</button>
<button>方法监听注册事件</button>
<script>
var btns = document.querySelectorAll('button');
btns[0].onclick = function(){
alert("传统点击事件");
}
</script>
</body>
</html>
方法监听注册方式
w3c标准推荐方式
addEventListener)它是一个方法
IE9之前的IE不支持此方法，可使用attachEvent0代替特点:同一个元素同一个事件可以注册多个监听器
会先触发第一个，接着第二个等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>传统点击事件</button>
<button>方法监听注册事件</button>
<script>
var btns = document.querySelectorAll('button');
btns[0].onclick = function(){
alert("传统点击事件");
}
//方法监听注册事件
btns[1].addEventListener('click',function(){
alert("方法监听注册事件");
})
</script>
</body>
</html>
删除事件
<script>
var btns = document.querySelectorAll('button');
btns[0].onclick = function(){
alert("传统点击事件");
btns[0].onclick = null;//删除绑定的事件
}
//方法监听注册事件
btns[1].addEventListener('click',fn)
function fn(){
alert("方法监听注册事件");
}
btns[1].removeEventListener('click',fn)//移除
</script>
DOM事件流
事件流描述的是从页面中接收时间的顺序
事件发生时会在元素节点间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流的三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
事件冒泡:IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。
事件捕获∶网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程
我们实际开发中更关注事件冒泡
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TsrdXG0h-1653619562360)(file:///C:\Users\mi\Documents\Tencent Files\3359514063\Image\C2C\EDD300F07B85DD53F0D900F4716E9935.jpg)]
-
js代码只能执行捕获或者冒泡其中的一个阶段
-
onclick和attachEvent只能得到冒泡阶段
<body>
<div class="father">
<div class="son">
son
</div>
</div>
<script>
var son = document.querySelector(".son");
var father = document.querySelector(".father");
//第三个参数是处于什么阶段，true是冒泡阶段
// document--body--father--son
son.addEventListener('click',function(){
alert("true");
},true)
father.addEventListener('click',function(){
alert("father");
},true)
</script>
</body>
<body>
<div class="father">
<div class="son">
son
</div>
</div>
<script>
var son = document.querySelector(".son");
var father = document.querySelector(".father");
//第三个参数是处于什么阶段，true是事件捕获阶段
// document--body--father--son
//第三个参数不写或者false就是处于冒泡阶段，先执行儿子再执行父亲 顺序与上相反
son.addEventListener('click',function(){
alert("true");
},false)
father.addEventListener('click',function(){
alert("father");
},false)
</script>
</body>
有些事件没有冒泡
- onblur
- onfocus
- onmouseenter
- onmousleave
事件对象
//event就是一个事件对象 跟事件相关的一系列信息，会存在这个里面
//有了事件，才会存在事件对象
//系统会自动给我们创建，不需要我们传递参数
son.onclick = function(event){
}
father.addEventListener('click',function(){
alert("father");
})
//事件对象可以自己命名 例如 event e evt等
//事件对象也有兼容性问题，ie678 通过window.event
事件对象常见的属性和方法
var div = document.querySelector('div');
div.addEventListener('click',function(e){
console.log(e.target);//返回的是触发事件的元素
console.log(this)//this返回的是绑定事件的对象
})
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
console.log(e.target);//返回的是触发事件的元素 li,点击的元素
console.log(this)//this返回的是绑定事件的对象 ul，绑定的元素
})
//ie 678里面使用 e.srcElement
兼容性写法就是
var target = e.target || e.srcElement;//实际开发一般不考虑
和this有一个分厂相似的属性，e.currentTarget//e.currentTarget有兼容行问题，一般不用
e.type,返回事件类型，是点击还是经过什么的
//阻止默认的行为
e.preventDefault(); 就可以阻止跳转什么的
低版本浏览器使用 e.returnValue
//利用return false 也可以，还没有兼容性问题，就是后面的代码不会执行，只有传统的注册方式才可以用
防止事件冒泡
在事件中添加
e.stopPropagation();//有兼容性问题
e.cancelBubble = true;//低版本的浏览器
事件委托
事件委托的原理：
不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点
事件委托最大的好处是只操作一次DOM，提高了程序的性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click',function(){
alert('haha');
})
</script>
</body>
</html>
常用的鼠标事件
1.禁止鼠标右键
contextmenu
//网页右击不弹出东西，禁用右键菜单
document.addEventListener('contextmenu',function(){
e.preventDefault();
})
//禁止选中文字
selectstart
document.addEventListener('selectstart',function(){
e.preventDefault();
})
鼠标事件对象
MouseEvent
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent.
鼠标事件对象 说明
e.clientX 返回鼠标相对于浏览器窗口可视区的×坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pagex 返回鼠标相对于文档页面的×坐标IE9+支持
e.pageY 返回鼠标相对于文档页面的Y坐标IE9+支持
e.screenX 返回鼠标相对于电脑屏幕的×坐标
e.screenY 返回鼠标相对于电脑屏幕的Y坐标
一般用page
常用的键盘事件
事件除了使用鼠标触发，还可以使用键盘触发。
键盘事件 触发条件
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键被按下时触发 会一直触发
onkeypress 某个键盘按键被按下时触发 但是它不识别功能键比如ctrl shift 箭头等
//先执行down，再执行 press 最后up
//document.addEventListener用这个时不需要加on
键盘事件对象
键盘事件对象属性 说明
keyCode 返回该键的ASCI值
注意:onkeydown和onkeyup 不区分字母大小写，onkeypress区分字母大小写。
心
在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键(包括功能键)Keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCIl值
9.操作BOM对象（重点）
javascript和浏览器的关系？
javascript的诞生就是为了能够让他在浏览器中运行！
BOM ( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
DOM
- 文档对象模型
- DOM就是把 [文档」当做一个【对象】来看待
- DOM 的顶级对象是document
- DOM主要学 习的是操作页面元素
- DOM 是W3C标准规范
BOM
- 浏览器对象模型
- 把「浏览器」当做一个「对象」来看待
- BOM的顶级对象是window
- BOM 学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
BOM比DOM更大，包含DOM
BOM构成
- window 是浏览器的顶级对象
- document
- location
- navgation
- screen
- history
window具有双重角色
-
它是js访问浏览器窗口的一个接口
-
它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法，调用的时候可以省略window。
-
注意window下的一个特殊属性window.name
1.BOM：浏览器对象模型
1.页面加载事件
//这样会等页加载完在执行这个，js代码就可以放在页面的任何地方了
//window.onload传统的注册方式只能写一次，如果有多个，以最后一个为准
window.onload = function(){
}
//页面加载完才会触发的
window.addEventListener('load',function(){
})//使用这个没有限制
//DOMContentLoaded事件触发，仅当DOM加载完成，不包括样式表、图片、flash等等。ie9以上才支持
//如果页面的图片很多的话，从用户访问到onload触发可能需要很长的时间，交互效果就不能实现，必然不能影响用户体验，此时用DOMContentLoaded事件比较合适
document.addEventListener('DOMContentLoaded',function(){
})
2.调整窗口大小事件
window.addEventListener('resize',function(){
})
window.innerHeight 窗口的高度
940
window.innerWidth 窗口的宽度
374
window.outerHeight
1028
window.outerWidth
945
//内部宽度，高度随调整窗口大小改变
3.定时器
window.setTimeout(调用函数，[延迟的毫秒数])；//setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
window在调用的时候可以省略
setTimeout(function(){},2);//2是毫秒值，可以省略，不写默认为0
setTimeout这个调用函数我们也称为回调函数callback
停止定时器
window.clearTimeout(定时器的名字)；//window可以省略
//setInterval() 定时器 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
setInterval() 每隔多少秒就会执行一次，setTimeout只调用一次
clearInterval()//清除定时器
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 5;
btn.addEventListener('click',function(){
btn.disabled = true;
var timer = setInterval(function(){
if(time<=0){
btn.disabled = false;
btn.innerHTML='发送';
clearInterval(timer);
time = 5;
}else{
btn.innerHTML='还剩'+time+'秒';
time--;
}
},1000)
})
</script>
</body>
</html>
2.js执行队列
JS是单线程，也就是说同一个事件只能做一件事情
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚
本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对
某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加，之后再删除。
单线程就意味着，所有的任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS执行时间过长，这样就会造成页面的渲染不连贯。
同步和异步
为了解决这个问题,利用多核CPU的计算能力, HTML5提出Web Worker标准,允许JavaScript脚本创
建多个线程。于是, JS中出现了同步和异步。
-
同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做
法:我们要烧水煮饭,等水开了( 10分钟之后) , 再去切菜,炒菜。 -
异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做
饭的异步做法,我们在烧水的同时,利用这10分钟，去切菜,炒菜。 -
区别，执行顺序不同
同步任务：都在主线程上执行，形成一个执行栈
异步任务：JS的异步是通过回调函数实现的
一般来说，异步任务有以下三类：
- 普通事件：click，resize；
- 资源加载：load、error等
- 定时器，包括setInterval、setTimeout等
异步任务相关回调函数添加到任务队列中（任务队列也称消息队列）
js执行机制
- 先执行栈中的同步任务
- 异步任务（回调函数）放入任务队列中
- 先执行同步任务（主车道），再执行异步任务（应急车道）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ctCwTIEg-1653619562360)(file:///C:\Users\mi\Documents\Tencent Files\3359514063\Image\C2C\2EE35F1A1E5FECEE4434639677E7CE00.jpg)]
3.Navigator,封装了浏览器信息
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent ,该属性可以返回由客
户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转
- 可以知道用的哪个浏览器信息，可以通过这个判断，pc端，还得移动端
window.Navigator
ƒ Navigator() { [native code] }
navigator.appCodeName
"Mozilla"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36"
大多数时候，我们不会使用navigator对象，因为会被认为修改不建议使用这些属性来判断和编写代码
4.location（重要）
window对象给我们提供了一个location属性用于获取或设置窗体URL，并且用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也成为了location对象
location代表当前页面的URL信息
URL：统一资源定位符
reload刷新网页
URL的一般语法格式为:
protocol: //host [:port]/path/ [?query] # fragment
http: //www. itcast . cn/ index. html ?name- -andy&age =18#link
组成 说明
protocol 通信协议常用的http,ftp,maito等
host 注机(域名) www.itheima.com
port 端口号可选，省略时使用方案的默认端口如http的默认端口为80
path 路径由零或多个/符号隔开的字符串，-般用来表示主机上的一个目录或文件地址
query 参数以键值对的形式，通过&符号分隔开来
fragment 片段#后面内容常见于链接锚点
location对象的属性
location对象属性 返回值
location.href 获取或者设置整个URL //重点
location. host 返回主机(域名) www.itheima.com
location.port 返回端口号如果未写返回空字符串
location.pathname 返回路径
location. search 返回参数 //重点
location. hash 返回片段#后面内容常见于链接锚点
location中的常见方法
location.assign('http://www.baidu.com'); //记录浏览历史，所以可以实现后退功能 重定向
location.replace('http://www.baidu.com');//替换当前页面，因为不记录历史，所以不能后退
location.reload('http://www.baidu.com') ;//重新加载页面，相当于刷新按钮或者f5，如果参数为true强制刷新ctrl+F5
5.document
document代表当前页面,HTML DOM文档树
document.title//代表当前页面的题目
document.title = "youzi"//可以改变页面的标题
获取具体的文档树节点
<dl id ="yy">
<dt>hh</dt>
<dt>mm</dt>
<dt>dd</dt>
<dt>kk</dt>
</dl>
<script>
var dl =document.getElementById('yy');
</script>
6.history,不建议使用
代表浏览器的历史纪录
history.back();后退
history.forward();前进
history.go(参数) 前进后退功能，如果是1 前进1个页面，-1后退一个
PC端网页特效
元素偏移量offset系列
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小(宽度高度)
- 注意:返回的数值都不带单位
offset系列常用属性:
offset系列属性 作用
element.offsetParent 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight 返回自身包括padding.边框、内容区的高度，返回数值不带单位
offset和style的区别
offset
- offset 可以得到任意样式表中的样式值
- offset 系列获得的数值是没有单位的
- offsetWidth 包含padding+ border +width
- offsetWidth 等属性是只读属性,只能获取不能赋值
- 所以,我们想要获取元素大小位置,用offset更合适
style
- style只能得到行内样式表中的样式值
- style.width获得的是带有单位的字符串
- style.width获得不包含padding和border的值
- style.width是可读写属性,可以获取也可以赋值
- 所以,我们想要给元素更改值,则需要用style改变
元素可视区client系列
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列
的相关属性可以动态的得到该元素的边框大小、元素大小等。
//client系列属性 作用
//element.lientTop 返回元素上边框的大小
//element.clientLeft 返回元素左边框的大小
//element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
//element.clientHeight 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位
立即执行函数
立即执行的函数做大的作用就是，独立创建了一个作用域，都是局部变量，执行完就立马释放了，也不会有命名冲突的情况
不需要调用立马执行
(function(){})() 后面小括号，可以传形参
(function(){}(形参))
元素scroll系列
scroll翻译过来就是滚动，我们使用scroll系列相关属性动态得到该元素的大小、滚动距离。
| scroll系列属性 | 作用 |
|---|---|
| element.scrolTop | 返回被卷去的上侧距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |
| element.scrollWidth | 返回自身实际宽度，不含边框，返回数值不带单位 |
| element.scrollHeigth | 返回自身实际高度，不含边框，返回数值不带单位 |
三大系列总结
- offset系列经常用于获取元素位置
- client经常用于获取元素大小
- scroll经常用于获取滚动距离
- 注意页面滚动的距离通过window.pageXOffset获得
动画函数
动画实现原理
- 通过定时器setlnterval（）不断移动盒子位置
实现步骤：
- 获取当前盒子
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加上一个结束定时器条件
- 注意此元素要添加一个定位，才能使element.style.left
- 盒子一定要加定位否则没有效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
position: absolute;
width: 100px;
height: 100px;
/* left: 100px; */
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
var timer = setInterval(function(){
if(div.offsetLeft >= 500){
clearInterval(timer);
// return; 这个也可以
}
div.style.left = div.offsetLeft + 10 + 'px';
},30)
</script>
</body>
</html>
动画函数的封装
function haha(obj,terget){
obj.timer = setInterval(function(){
clearInterval(timer); //防止多次调用定时器，出现速度越来越快
if(obj.offsetLeft >= terget){
clearInterval(timer);
// return; 这个也可以
}
obj.style.left = obj.offsetLeft + 10 + 'px';
},30)
}
缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下
- 核心算法：（目标值-现在位置）/10做为每次移动的距离步长
- 停止条件是：让当前盒子位置等于目标位置就停止定时器
function haha(obj,terget){
obj.timer = setInterval(function(){
clearInterval(timer); //防止多次调用定时器，出现速度越来越快
if(obj.offsetLeft == terget){
clearInterval(timer);
// return; 这个也可以
}
//步长
var step = (target-offsetLeft)/10;会存在精度问题
obj.style.left = obj.offsetLeft + step + 'px';
},30)
}
回调函数：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
移动端网页特效
触屏事件描述
移动端浏览器兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用JS书写效果，但是移动端也有自己独特的地方。比如触摸事件。
touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触摸笔）对屏幕或者触控板操作。常见的触屏事件如下：
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |
触摸事件对象（TouchEvent）
TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少等等。
touchstart、touchmove、touchend三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表：
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸平面的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changedTouches | 手指状态发生了改变的列表，从无到有，从有到无变化 |
移动端移动元素
1.touchstart、touchmove、touchend可以实现拖动元素
2.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY
3.移动端拖动的原理：手指移动中，计算手指移动的距离
4.手指移动的距离：手指滑动中的位置减去，手指开始触摸的位置
拖动元素三部曲：
- 触摸元素
- 移动手指
- 离开手指
注意：手指移动会触发屏幕滚动所以这里要阻止默认的屏幕滚动e.preventDefault();
click延时解决方案
移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放页面
-
禁止缩放
<meta name="viewport" content="user-scalable=no"> -
利用touch事件自己封装这个事件解决300ms延迟
原理是：
- 当我们触摸屏幕，记录这个事件
- 手指离开，用离开的时间减去触摸时间
- 如果时间小于150ms，并没有滑动屏幕，那我们定义为点击
-
fastclick插件的使用
Swiper插件
可以用他做轮播图
本地存储
本地存储的特性
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大，sessionStorage约5M、localStorage约20M
- 只能存储字符串，可以将JSON.stringify()编码后存储
sessionStorage
sessionStorage生命周期：关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用
存储数据
sessionStorage.setltem(key,value)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空数据</button>
<script>
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
// 存储数据
set.addEventListener('click',function(){
var value = ipt.value;
sessionStorage.setItem('uname',value);
})
// 得到数据
get.addEventListener('click',function(){
var value = sessionStorage.getItem('uname');
alert(value);
})
</script>
</body>
</html>
localStorag
- 生命周期永久有效，除非手动删除否则关闭也页面也会存在
- 可以多个窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
localStorage.setItem(key,value);//存储数据
localStorage.getItem(key);//得到数据
localStorage.removeItem(key);//删除数据
localStorage.clear();//删除所有
JQuery
jQuery概述
JavaScript库
仓库：可以把很多东西放在这个创库里面。找东西只需要到仓库里面找到就可以了
JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show、比如获取元素等。
简单理解就是一个JS文件，里面对我们元素js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能。
比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
常见的JavaScript库
- jQuery
- Prototype
- YUI
- Dojo
- ExtJS
- 移动端zepto
这些都是对原生JavaScript的封装，内部都是用JavaScript实现的，我们主要学习的是jQuery。
jQuery的概念
jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write less，Do More”，即提倡写更少的代码，做更多的事。
jQuery封装了JavaScript常用的功能和代码，优化DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质：就是学习调用这些函数（方法）
jQuery出现的目的是加快前段人员开发的速度，我们可以非常方便的调用和使用它，从而提升开发效率
jQuery的优点
- 轻量级。核心文件才几十kb，不会影响页面加载的速度
- 跨浏览器兼容。基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持，大大简化了DOM操作
- 支持插件扩展开发。有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等
- 免费开源
jQuery的使用
1.使用
- 创建jquery/jquery.min.js，把jquery代码粘贴进去
- 引入文件
- 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery/jquery.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<script>
$(function(){
$('div').hide();
});
</script>
<div></div>
</body>
</html>
2.入口函数
$(function(){
$('div').hide();
});
3.jQuery的顶级对象$
是 j Q u e r y 的 别 称 ， 在 代 码 中 可 以 使 用 j Q u e r y 代 替 是jQuery的别称，在代码中可以使用jQuery代替 是jQuery的别称，在代码中可以使用jQuery代替,但一般为了方便，通常都直接用$
是 j Q u e r y 的 顶 级 对 象 , 相 当 于 原 生 J a v a S c r i p t 中 的 w i n d o w 。 把 元 素 利 用 是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用 是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用包装成jQuery对象，就可以调用jQuery的方法。
4.jQuery对象和DOM对象
jQuery对象：用jQuery的方式获取过来的对象是jQuery对象。本质：通过$把DOM元素进行了包装
DOM对象，用js原生的方法获取的对象
jQuery对象只能使用jQuery方法
jQuery对象和DOM对象相互转换
- 原生js对象比jQuery对象大
- DOM对象转换为jQuery对象：$(DOM对象)
- jQuery对象转换为DOM对象：
- $(‘div’)[index]
- $(‘div’).get(index)
jQuery常用API
jQuery选择器
1.jQuery选择器
$(“选择器”)//里面的选择器和css基本一样
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“”#id"") | 获取指定ID的元素 |
| 全选选择器 | $(“*”) | 匹配所有元素 |
| 类选择器 | $(“.class”) | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”") | 选取多个元素 |
| 交集选择器 | $(““li.current””) | 交集元素 |
2.jQuery层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”); | 使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
3.jQuery隐式表达式
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
$("div").css("background","pink");//设置背景颜色
4.jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $("li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取最后一个li元素 |
| :eq(index) | $(“li:eq(2)") | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $(“li:odd”) | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(“li:even”) | 获取到的li元素中，选择索引号为偶数的元素 |
5.jQuery筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $("“li”).parent(); | 查找父级 |
| children(selector) | $(ul").children(“li”) | 相当于$(“u1>1i”)，最近—级(亲儿子) |
| find(selector) | $(“ul”).find("“li”); | 相当于$(“ul li”"),后代选择器 |
| siblings(selector) | $(“”.first"").siblings(“li”); | 查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(“”.first").nextAll() | 查找当前元素之后所有的同辈元素 |
| prevtAl1([expr]) | $(“.last”").prevAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $( 'div " ).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $("“li”).eq(2); | 相当于$(“li:eq(2)”") ,index从O开始 |
jQuery排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../css/jquery/jquery.min.js"></script>
</head>
<body>
<button>提交</button>
<button>提交</button>
<button>提交</button>
<button>提交</button>
<button>提交</button>
<button>提交</button>
<script>
$(function(){
$("button").click(function(){
$(this).css("background","pink");
$(this).siblings("button").css("background","");
});
})
</script>
</body>
</html>
jQuery链式编程
$(this).css("background","pink");
$(this).siblings("button").css("background","");
//链式编程写法
$(this).css("background","pink").siblings("button").css("background","");
jQuery样式操作
-
如果只写了属性名，没有写属性值，会返回属性值
$(this).css("background"); -
有值和属性名
//必须用逗号分隔，属性名必须加引号，属性值如果是属性可以不加单位和引号 $(this).css("background","pink"); -
参数可以是对象的形式
$(this).css({ width: 120px; height: 35px; backgroundColor: "red";//复和属性要用驼峰命名，属性值不是数字需要用引号引起来 }); -
添加类（不影响原来的类名）
.current{ width: 120px; height: 35px; } $("div").click(function(){ $(this).addClass("current");//添加类名 $(this).removeClass("current");//删除类名 $(this).toggleClass("current");//切换类名，点一下有，再点一下无 })
jQuery效果
显示隐藏
show([speed,easing,fn]);
hide([speed,easing,fn]);
toggle([speed,easing,fn]);//切换
参数都可以省略，一般都不加参数
speed：显示隐藏的速度
easing：用来指定效果，默认swing，可用参数linear
fn回调函数，在动画完成时执行的函数
滑动
slideDown([speed,easing,fn]); //下拉
slideUp([speed,easing,fn]); //上拉
slideToggle([speed,easing,fn]); //切换
事件切换
hover（[over],out）
$("div").hover(function(){},function(){})//第一个函数是鼠标经过，第二个是鼠标离开
//只写一个的话，鼠标经过和鼠标离开都会触发
动画停止排队
在动画前面加上stop();
淡入淡出效果
$("div").fadeIn(1000);//毫秒 淡入
$("div").fadeOut(1000);//毫秒 淡出
$("div").fadeToggle(1000);//毫秒 切换
$("div").fadeTo(1000，0.5);//毫秒 到某个状态，两个参数都要写
jQuery属性操作
设置获取元素固有的属性值
prop("属性")；
$("a").prop("href");
$("a").prop("title","我们都挺好");
设置获取自定义属性值
$("a").attr("data-index");
$("a").attr("index","7");
数据缓存data（）
这个里面的数据是存在内存里面
data（）方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。
jQuery内容文本值
- 获取设置元素内容 html（）
- 获取设置元素文本内容 text（）
- 获取设置表单值 val（）
jQuery元素操作
jQuery遍历对象
$("div").each(funcation(index,domEle){
XXX;
})//domEle是DOM对象
$.each($("div"),function(i,ele){
})//可以遍历任何元素
创建、添加、删除元素
//创建元素
var li = $("<li>我是后来创建的</li>");
//添加元素
//内部添加
$("ul").prepend(li);//内部添加并且放到内容的最前面 父子关系
//外部添加
var div = $("<div>haha</div>")
$(".test").before(div); 兄弟关系
//删除元素
element.remove()//删除匹配的元素（本身）
element.empty()//删除匹配的元素集合中所有的子节点
element.html("")//清空匹配的元素内容
jQuery尺寸、位置
jQuery尺寸
| 语法 | 用法 |
|---|---|
| width(） / height() | 取得匹配元素宽度和高度值只算width / height |
| innerWidth() / innerHieght() | 取得匹配元素宽度和高度值包含 padding |
| outerWidth() / outerHeight() | 取得匹配元素宽度和高度值包含padding 、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值包含padding 、 border、margin |
jQuery位置
位置主要有三个：offset（）、position（）、scrollTop（）/scrollLeft()
offset()设置或获取元素偏移
- offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
- 该方法有2个属性left、top。offset().top 用于获取距离文顶部的距离，offset()。left获取距离文档左侧的距离
position（）获取元素偏移
这个方法只能获取，不能设置偏移
scrollTop（）/scrollLeft()被卷去的头部
带有动画的返回顶部，可以用动画
jQuery事件
1.jQuery事件注册
单个事件注册：$(‘div’).click(function(){事件处理程序})
2.jQuery事件处理
//事件处理on()绑定事件：element.on(events, [selector], fn))
//可以绑定多个事件，当事件处理程序相同时可以“mouseover mouseout”
$("div").on("mouseover mouseout",funcution(){
XXX;
})
//给父元素绑定事件，里面可以是子元素触发
//可以实现事件委托(委派)，$(“ul”).on(‘click’,‘li’,func{})
//后来动态创建出来的元素可以用on来给它绑定事件，传统的方法不行
//on可以给动态创建的元素绑定事件
//事件处理off()解绑事件：off()接触所有事件； off(“click”,‘li’)接触此事件委托
$("div").off();//解绑div身上的所有事件
//只触发一次的事件，可以用one()
//自动触发事件：element.click(); element.trigger(“click”); element.triggerHandle(“click”) 不会触发元素的默认行为，前两种会触发元素的默认行为
3.jQuery事件对象
事件对象的产生：element.on(events, [selector], function(event) {})
阻止默认行为：event.preventDefault() 或 return false
阻止冒泡：event.stopPropagation()
jQuery其他方法
1.jQuery对象拷贝
语法：$.extend ([deep], target, object1, [objectN])； deep如果为true则为深拷贝，默认false为浅拷贝，把被拷贝对象的复杂数据类型地址拷贝给目标对象，修改目标对象会影响被拷贝对象
- 浅拷贝就是把拷贝对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
- 深拷贝：完全克隆对象，而不是地址，改变对象，不会影响被拷贝对象。
2.多库共存
和其他库冲突：使用jQuery；让jQuery释放对$的控制权
- 把jQuery中的所有$符号可以用jQuery代替
- 或者自己定义符号 var haha = . n o C o n f l i c t ( ) ; 然 后 就 可 以 用 h a h a 代 替 .noConflict(); 然后就可以用haha代替 .noConflict();然后就可以用haha代替符号
jQuery插件
这些插件是基于jQuery完成的，必须引入jQuery文件才可以使用
jQuery插件库：(http://www.jq22.com/);
jQuery之家：(http://www.htmleaf.com/)
-
瀑布流：
-
懒加载：必须在DOM元素(图片)后面引入懒加载插件
-
全局滚动：http://www.dowebok.com/demo/2014/77/ 中文翻译网站
-
bootstrap JS插件：
https://v4.bootcss.com/docs/components/alerts/
bootstrap框架也是依赖于jQuery开发的
-
ToDoList案例
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header{
position: relative;
background-color: black;
color: white;
height: 40px;
}
label{
position: absolute;
top: 20%;
left: 30%;
}
#title{
position: absolute;
left: 50%;
top: 20%;
width: 30%;
/* 点击输入是文本框的内容不变 */
outline: none;
}
</style>
</head>
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo">
</section>
</header>
<section>
<h2>正在进行<span id = "todocount"></span></h2>
<ol id = "todolist" class = "demo-box">
</ol>
</section>
<section>
<h2>已经完成<span id = "donecount"></span></h2>
<ol id = "donelist" ></ol>
</section>
<script>
var todolist = [{
title: 'haha',
done: 'false'
},{
title: 'haha1',
done: 'true'
}];
//localStorage.setItem("todo",todolist);
//本地存储只能存储字符串格式，把数组对象转换为字符串格式 JSON.stringify()
localStorage.setItem("todo",JSON.stringify(todolist));
//获取数据得到的是字符串要转换为数组形式
//JSON.parse();
var data = localStorage.getItem("todo");
data = JSON.parse(data);
</script>
</body>
</html>
$(function(){
load();
$("#title").on("keydown",function(event){
if(event.keyCode===13){
//先读取本地数据
var local = getData();
//存储新加的数据
local.push({title: $(this).val(), done: false});
//存储进去
saveData(local);
console.log(local);
}
})
//读取本地数据函数
function getData(){
var data = localStorage.getItem("todolist");
if(data !== null){
return JSON.parse(data);
}else{
return [];
}
}
//存储数据
function saveData(todolist){
localStorage.setItem("todolist",JSON.stringify(todolist));
}
//渲染数据
function load(){
var data = getData();
//遍历数据 遍历之前需要先清空元素
$("#todolist").empty();
$.each(data,function(i,n){
$("#todolist").prepend("<li><input type='checkbox'> <p>"+n.title+"</p> <a href='#' id="+i+"></a></li>");
})
}
//删除操作 ，先获取数据，然后再进行删除
data.splice(index,1); 从index开始删除，删一个
//删除完要再保存一下
数据可视化
数据可视化
- 数据可视化的主要目的：借助图形化手段，清晰有效地传达与沟通信息
- 数据可视化可以把数据从冰冷的数字转换为图形，揭示蕴含在数据中的规律和道理
数据可视化的使用场景
- 通用报表
- 移动端图表
- 大屏可视化
- 图分析
- 地理可视化
常见的数据可视化库
- D3.js 目前Web端评价最高的JavaScript可视化工具（入手难）
- ECharts.js 百度出品的一个开源JavaScript数据可视化库
- Highcharts.js 国外的前段数据可视化，非商用免费，被许多国外大公司所使用
- AntV 蚂蚁金服全新一代数据可视化解决方案
- 等等
Highcharts.js和ECharts.js 就像是Office和WPS的关系
ECharts
ECharts简介
ECharts是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome, Firefox，Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网：https://echarts.apache.org/zh/index.html
ECharts能满足绝大多数可视化图标实现，使用方便，功能强大，是实现数据可视化的最优选择之一
ECharts的基本使用
ECharts使用五步曲
- 下载并引入echarts.js文件
- 准备一个具有大小的DOM容器
- 初始化echarts实例对象
- 指定配置项和数据（option）
- 将配置项设置给echarts实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<script src="js/echart.min.js"></script>
</head>
<body>
<div class="box"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.querySelector('.box'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
边框图片
为了实现丰富多彩的边框效果，在css3中，新增了border-image属性，这个属性允许指定一幅图像作为元素的边框
边框图片的使用语法（重要）
| 属性 | 描述 |
|---|---|
| border-image-source | 用在边框的图片的路径 |
| border-image-slice | 图片边框向内偏移（裁剪尺寸，一定不加单位，上右下左顺序） |
| border-image-width | 图片边框的宽度（需要加单位）（不是边框的宽度是边框图片的宽度）不会挤压文字 |
| border-image-repeat | 图片边框是否应平铺（repeat）、铺满（round）或拉伸（stretch）默认拉伸 |
})
//读取本地数据函数
function getData(){
var data = localStorage.getItem("todolist");
if(data !== null){
return JSON.parse(data);
}else{
return [];
}
}
//存储数据
function saveData(todolist){
localStorage.setItem("todolist",JSON.stringify(todolist));
}
//渲染数据
function load(){
var data = getData();
//遍历数据 遍历之前需要先清空元素
$("#todolist").empty();
$.each(data,function(i,n){
$("#todolist").prepend("<li><input type='checkbox'> <p>"+n.title+"</p> <a href='#' id="+i+"></a></li>");
})
}
//删除操作 ，先获取数据，然后再进行删除
data.splice(index,1); 从index开始删除，删一个
//删除完要再保存一下
# 数据可视化
### 数据可视化
- 数据可视化的主要目的：借助图形化手段，清晰有效地传达与沟通信息
- 数据可视化可以把数据从冰冷的数字转换为图形，揭示蕴含在数据中的规律和道理
#### 数据可视化的使用场景
- 通用报表
- 移动端图表
- 大屏可视化
- 图分析
- 地理可视化
#### 常见的数据可视化库
- D3.js 目前Web端评价最高的JavaScript可视化工具（入手难）
- **ECharts.js 百度出品的一个开源JavaScript数据可视化库**
- **Highcharts.js 国外的前段数据可视化，非商用免费，被许多国外大公司所使用**
- AntV 蚂蚁金服全新一代数据可视化解决方案
- 等等
**Highcharts.js和ECharts.js 就像是Office和WPS的关系**
### ECharts
#### ECharts简介
ECharts是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome, Firefox，Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网：https://echarts.apache.org/zh/index.html
**ECharts能满足绝大多数可视化图标实现，使用方便，功能强大，是实现数据可视化的最优选择之一**
#### ECharts的基本使用
##### ECharts使用五步曲
- 下载并引入echarts.js文件
- 准备一个具有大小的DOM容器
- 初始化echarts实例对象
- 指定配置项和数据（option）
- 将配置项设置给echarts实例对象
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<script src="js/echart.min.js"></script>
</head>
<body>
<div class="box"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.querySelector('.box'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
边框图片
为了实现丰富多彩的边框效果，在css3中，新增了border-image属性，这个属性允许指定一幅图像作为元素的边框
边框图片的使用语法（重要）
| 属性 | 描述 |
|---|---|
| border-image-source | 用在边框的图片的路径 |
| border-image-slice | 图片边框向内偏移（裁剪尺寸，一定不加单位，上右下左顺序） |
| border-image-width | 图片边框的宽度（需要加单位）（不是边框的宽度是边框图片的宽度）不会挤压文字 |
| border-image-repeat | 图片边框是否应平铺（repeat）、铺满（round）或拉伸（stretch）默认拉伸 |
7305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
