JavaScript是运行在客户端的脚本语言
浏览器分成两部分:渲染引擎和JS引擎
渲染引擎∶用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit
JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行.
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。
ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接通过DO提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
BOM(Browser Object Model,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
行内、内嵌、外部
alert(msg) //浏览器弹出警示框
console.log(mag) //浏览器控制台打印输入信息
prompt(info) //浏览器弹出输入框,用户可以输入
声明了没复制是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>
分为两大类简单性和复杂性
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
+
-
*
/
% 取余
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(',');分隔符//字符转数组
Array可以包含任意的数据
var arr = new Array();
var arr = [1,2,3,4,5.6,null,'c'];
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])
}
注意加入给数组长度赋值,数组长度就会发生变化,如果赋值过小元素就会丢失
通过下标索引
arr.indexOf(2) //从前向后找
3
lastIndexOf("2");//从后想前找
字符串"3"和数字3是不同的
截取数组的一部分,返回一个新数组,类似于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)]
在队尾添加元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]
在前面加一个元素unshift(),shift()删除前面的元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wDwEXJ9U-1653619562352)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009150627621.png)]
用arr.sort();
arr.reverse();
并没有改变数组,只是会返回一个新的数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CvXq9vor-1653619562353)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009151305373.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cbofl0aH-1653619562354)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009151403241.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2eh960MW-1653619562355)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20201009151721634.png)]
Array.isArray(arr);
arr instanceof Array;
自定义对象,内置对象,浏览器对象
三种创建对象的方式:
第一种
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/
不需要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的随机小数
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新增的
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":"女"}'
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))//是否包含某个元素
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)]
简单数据类型又叫值类型 放在栈里面
复杂数据类型又叫引用类型 放在堆里面
如果一个对象没想好放啥,就给个null值
new出来的就是复杂数据类型
顺序结构、分支结构、循环结构
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的值
switch(表达式){
case value1:执行语句 break;
case value2:执行语句 break;
case value3:执行语句 break;
default:执行语句;
}
for(初始化变量;条件表达式;操作表达式){
循环体
}
初始化,条件表达式,循环体 操作表达式 条件表达式 循环体……
while(表达式){
循环体;
操作表达式;
}
do{
循环体
}while(表达式)
定义方式一:
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必须参数只能写在最后面,必须用···标识
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这个对象,不需要参数时参数为空
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);
本质:查看对象原型
API是一些预先定义好的函数,API是给程序员提供的一种工具,以便更轻松的实现想要的功能
WebAPI是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
浏览器功能主要通过BOM实现
页面元素主要通过DOM实现
文档对象模型(Document Object Model,简介DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B4kqFrxB-1653619562357)(D:\下载\QQ下载\QQ图片20220426113522.png)]
浏览器网页就是一个Dom树形结构
要操作一个Dom节点,就必须先获得这个Dom树
<div id="father">
<h1>biaotih1>
<p id="p1">p1p>
<p class="p2">p2p>
<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">p1p> 是一个对象
//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;
<div id="id1">
111
div>
<script>
var id1=document.getElementById('id1');
script>
document.getElementById('id1');//获得
id1.innerText='123'//修改只改值 不识别标签,去掉空格和换行
id1.innerHTML='<strong>123strong>'//可以写一些样式 保留空格和换行
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0" >
<title>Documenttitle>
head>
<body>
<div id = 'id1'>123div>
<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">hahabutton>
<button id="luckily">luckilybutton><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>Documenttitle>
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>
文本框 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=, initial-scale=1.0" >
<title>Documenttitle>
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';
}
网页中的内容都是节点(标签、属性、文本、注释等)在DOM中node表示
一般来说,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性
我们实际开发过程中主要操作的是元素节点
利用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">p1p>
<p class="p2">p2p>
div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);
script>
//另一种方法,但是是动态的
<div id="father">
<h1 id="h1">h1h1>
<p id="p1">p1p>
<p class="p2">p2p>
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>Titletitle>
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>Titletitle>
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接口可以改变网页的内容、结构和样式。
创建
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)提倡
事件源
事件被触发的对象 谁 一般按钮
事件类型
如何触发的,什么事件 比如鼠标点击触发(onclick),鼠标经过,还是鼠标键盘按下
事件处理程序
通过一个函数赋值的方式完成
<body>
<botton id = "btn">hahabotton>
<script>
var btn = document.getElementById('btn'); //事件源
//事件类型
btn.onclick = fouction(){
alert('haha');
}
script>
body>
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
mouseenter和mouseover的区别
给元素添加事件称为注册事件或者绑定事件
注册事件的两种方式:传统方式和方法监听注册方式
传统的注册方式
利用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>Documenttitle>
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>Documenttitle>
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事件流的三个阶段
事件冒泡: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>
有些事件没有冒泡
//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>Documenttitle>
head>
<body>
<ul>
<li>hahali>
<li>hahali>
<li>hahali>
<li>hahali>
<li>hahali>
<li>hahali>
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值
javascript和浏览器的关系?
javascript的诞生就是为了能够让他在浏览器中运行!
BOM ( Browser Object Model )即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
DOM
BOM
BOM比DOM更大,包含DOM
BOM构成
window具有双重角色
它是js访问浏览器窗口的一个接口
它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法,调用的时候可以省略window。
注意window下的一个特殊属性window.name
//这样会等页加载完在执行这个,js代码就可以放在页面的任何地方了
//window.onload传统的注册方式只能写一次,如果有多个,以最后一个为准
window.onload = function(){
}
//页面加载完才会触发的
window.addEventListener('load',function(){
})//使用这个没有限制
//DOMContentLoaded事件触发,仅当DOM加载完成,不包括样式表、图片、flash等等。ie9以上才支持
//如果页面的图片很多的话,从用户访问到onload触发可能需要很长的时间,交互效果就不能实现,必然不能影响用户体验,此时用DOMContentLoaded事件比较合适
document.addEventListener('DOMContentLoaded',function(){
})
window.addEventListener('resize',function(){
})
window.innerHeight 窗口的高度
940
window.innerWidth 窗口的宽度
374
window.outerHeight
1028
window.outerWidth
945
//内部宽度,高度随调整窗口大小改变
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>
JS是单线程,也就是说同一个事件只能做一件事情
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚
本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对
某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
单线程就意味着,所有的任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行时间过长,这样就会造成页面的渲染不连贯。
为了解决这个问题,利用多核CPU的计算能力, HTML5提出Web Worker标准,允许JavaScript脚本创
建多个线程。于是, JS中出现了同步和异步。
同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做
法:我们要烧水煮饭,等水开了( 10分钟之后) , 再去切菜,炒菜。
异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做
饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
区别,执行顺序不同
同步任务:都在主线程上执行,形成一个执行栈
异步任务:JS的异步是通过回调函数实现的
一般来说,异步任务有以下三类:
异步任务相关回调函数添加到任务队列中(任务队列也称消息队列)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ctCwTIEg-1653619562360)(file:///C:\Users\mi\Documents\Tencent Files\3359514063\Image\C2C\2EE35F1A1E5FECEE4434639677E7CE00.jpg)]
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent ,该属性可以返回由客
户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转
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对象,因为会被认为修改不建议使用这些属性来判断和编写代码
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
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>
代表浏览器的历史纪录
history.back();后退
history.forward();前进
history.go(参数) 前进后退功能,如果是1 前进1个页面,-1后退一个
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等。
offset系列常用属性:
offset系列属性 作用
element.offsetParent 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括padding、边框、内容区的宽度,返回数值不带单位
element.offsetHeight 返回自身包括padding.边框、内容区的高度,返回数值不带单位
offset
style
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列
的相关属性可以动态的得到该元素的边框大小、元素大小等。
//client系列属性 作用
//element.lientTop 返回元素上边框的大小
//element.clientLeft 返回元素左边框的大小
//element.clientWidth 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位
//element.clientHeight 返回自身包括padding、内容区的高度,不含边框,返回数值不带单位
立即执行的函数做大的作用就是,独立创建了一个作用域,都是局部变量,执行完就立马释放了,也不会有命名冲突的情况
不需要调用立马执行
(function(){})() 后面小括号,可以传形参
(function(){}(形参))
scroll翻译过来就是滚动,我们使用scroll系列相关属性动态得到该元素的大小、滚动距离。
scroll系列属性 | 作用 |
---|---|
element.scrolTop | 返回被卷去的上侧距离,返回数值不带单位 |
element.scrollLeft | 返回被卷去的左侧距离,返回数值不带单位 |
element.scrollWidth | 返回自身实际宽度,不含边框,返回数值不带单位 |
element.scrollHeigth | 返回自身实际高度,不含边框,返回数值不带单位 |
实现步骤:
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>Documenttitle>
<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)
}
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
思路:
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是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少等等。
touchstart、touchmove、touchend三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表:
触摸列表 | 说明 |
---|---|
touches | 正在触摸平面的所有手指的一个列表 |
targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
changedTouches | 手指状态发生了改变的列表,从无到有,从有到无变化 |
1.touchstart、touchmove、touchend可以实现拖动元素
2.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY
3.移动端拖动的原理:手指移动中,计算手指移动的距离
4.手指移动的距离:手指滑动中的位置减去,手指开始触摸的位置
拖动元素三部曲:
注意:手指移动会触发屏幕滚动所以这里要阻止默认的屏幕滚动e.preventDefault();
移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放页面
禁止缩放
<meta name="viewport" content="user-scalable=no">
利用touch事件自己封装这个事件解决300ms延迟
原理是:
fastclick插件的使用
可以用他做轮播图
本地存储的特性
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>Documenttitle>
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>
localStorage.setItem(key,value);//存储数据
localStorage.getItem(key);//得到数据
localStorage.removeItem(key);//删除数据
localStorage.clear();//删除所有
仓库:可以把很多东西放在这个创库里面。找东西只需要到仓库里面找到就可以了
JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show、比如获取元素等。
简单理解就是一个JS文件,里面对我们元素js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能。
比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。
常见的JavaScript库
这些都是对原生JavaScript的封装,内部都是用JavaScript实现的,我们主要学习的是jQuery。
jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是“write less,Do More”,即提倡写更少的代码,做更多的事。
jQuery封装了JavaScript常用的功能和代码,优化DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)
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>Documenttitle>
<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>
$(function(){
$('div').hide();
});
是 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的方法。
jQuery对象:用jQuery的方式获取过来的对象是jQuery对象。本质:通过$把DOM元素进行了包装
DOM对象,用js原生的方法获取的对象
jQuery对象只能使用jQuery方法
jQuery对象和DOM对象相互转换
$(“选择器”)//里面的选择器和css基本一样
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(“”#id"") | 获取指定ID的元素 |
全选选择器 | $(“*”) | 匹配所有元素 |
类选择器 | $(“.class”) | 获取同一类class的元素 |
标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”") | 选取多个元素 |
交集选择器 | $(““li.current””) | 交集元素 |
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(“ul>li”); | 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代
$("div").css("background","pink");//设置背景颜色
语法 | 用法 | 描述 |
---|---|---|
: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元素中,选择索引号为偶数的元素 |
语法 | 用法 | 说明 |
---|---|---|
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开始 |
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>Documenttitle>
<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>
$(this).css("background","pink");
$(this).siblings("button").css("background","");
//链式编程写法
$(this).css("background","pink").siblings("button").css("background","");
如果只写了属性名,没有写属性值,会返回属性值
$(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");//切换类名,点一下有,再点一下无
})
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);//毫秒 到某个状态,两个参数都要写
prop("属性");
$("a").prop("href");
$("a").prop("title","我们都挺好");
$("a").attr("data-index");
$("a").attr("index","7");
这个里面的数据是存在内存里面
data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构,一旦页面刷新,之前存放的数据都将被移除。
$("div").each(funcation(index,domEle){
XXX;
})//domEle是DOM对象
$.each($("div"),function(i,ele){
})//可以遍历任何元素
//创建元素
var li = $("我是后来创建的 ");
//添加元素
//内部添加
$("ul").prepend(li);//内部添加并且放到内容的最前面 父子关系
//外部添加
var div = $("haha")
$(".test").before(div); 兄弟关系
//删除元素
element.remove()//删除匹配的元素(本身)
element.empty()//删除匹配的元素集合中所有的子节点
element.html("")//清空匹配的元素内容
语法 | 用法 |
---|---|
width() / height() | 取得匹配元素宽度和高度值只算width / height |
innerWidth() / innerHieght() | 取得匹配元素宽度和高度值包含 padding |
outerWidth() / outerHeight() | 取得匹配元素宽度和高度值包含padding 、border |
outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值包含padding 、 border、margin |
位置主要有三个:offset()、position()、scrollTop()/scrollLeft()
这个方法只能获取,不能设置偏移
带有动画的返回顶部,可以用动画
单个事件注册:$(‘div’).click(function(){事件处理程序})
//事件处理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”) 不会触发元素的默认行为,前两种会触发元素的默认行为
事件对象的产生:element.on(events, [selector], function(event) {})
阻止默认行为:event.preventDefault() 或 return false
阻止冒泡:event.stopPropagation()
语法:$.extend ([deep], target, object1, [objectN]); deep如果为true则为深拷贝,默认false为浅拷贝,把被拷贝对象的复杂数据类型地址拷贝给目标对象,修改目标对象会影响被拷贝对象
和其他库冲突:使用jQuery;让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>Documenttitle>
<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">ToDoListlabel>
<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(" "+n.title+"
+i+"> ");
})
}
//删除操作 ,先获取数据,然后再进行删除
data.splice(index,1); 从index开始删除,删一个
//删除完要再保存一下
Highcharts.js和ECharts.js 就像是Office和WPS的关系
ECharts是一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome, Firefox,Safari等),底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
官网:https://echarts.apache.org/zh/index.html
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>Documenttitle>
<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(" "+n.title+"
");
})
}
//删除操作 ,先获取数据,然后再进行删除
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
Document
为了实现丰富多彩的边框效果,在css3中,新增了border-image属性,这个属性允许指定一幅图像作为元素的边框
边框图片的使用语法(重要)
属性 | 描述 |
---|---|
border-image-source | 用在边框的图片的路径 |
border-image-slice | 图片边框向内偏移(裁剪尺寸,一定不加单位,上右下左顺序) |
border-image-width | 图片边框的宽度(需要加单位)(不是边框的宽度是边框图片的宽度)不会挤压文字 |
border-image-repeat | 图片边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)默认拉伸 |