1：js：
包含三部分：
ESMAScript：基础语法
Array（）
索引 、length、push（）、pop（）
DOM：
获取DOM的三种方式：
（1）Id
（2）Class
（3）标签获取 TayName
BOM：
入口函数：
等待这文档，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box"></div>
<script>
window.onload=function () {
alert(2)
}
// 有覆盖现象
window.onload=function () {
alert(3)
}
</script>
</body>
</html>
这里的var可以变量提升：
Var =i;
I = 0; \可以写成var i = 0；
<script>
window.onload=function () {
alert(2)
}
var oBoxs = document.getElementsByClassName('box');
console.log(oBoxs);
for (var i = 0;i < oBoxs.length; i++){
oBoxs[i].onclick = function () {
console.log(i);
console.log(this);
console.log(this.innerText);
}
}
</script>
总结：
Var 声明的变量 存在变量提升
Let声明的变量 是块级作用域
Const 声明的是常量 一旦声明变量 不可改变
DOM的创建和添加：
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM可以做什么
找对象（元素节点）
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序
操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
创建节点
格式如下：
新的标签(元素节点) = document.createElement("标签名");
比如，如果我们想创建一个li标签，或者是创建一个不存在的adbc标签，可以这样做：
<script type="text/javascript">
var a1 = document.createElement("li"); //创建一个li标签
var a2 = document.createElement("adbc"); //创建一个不存在的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);</script>
插入节点
插入节点有两种方式，它们的含义是不同的。
方式1：
父节点.appendChild(新的子节点);
解释：父节点的最后插入一个新的子节点。
方式2：
父节点.insertBefore(新的子节点,作为参考的子节点);
解释：
· 在参考节点前插入一个新的节点。
· 如果参考节点为null，那么他将在父节点最后插入一个子节点。
删除节点
格式如下：
父节点.removeChild(子节点);
解释：用父节点删除子节点。必须要指定是删除哪个子节点。
如果我想删除自己这个节点，可以这么做：
node1.parentNode.removeChild(node1);
复制节点（克隆节点）
格式如下：
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true);
括号里带不带参数，效果是不同的。解释如下：
不带参数/带参数false：只复制节点本身，不复制子节点。
带参数true：既复制节点本身，也复制其所有的子节点。
设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
我们就统一拿下面这个标签来举例：
<img src="images/1.jpg" title="美女图片" alt="地铁一瞥" id="a1">
下面分别介绍。
1、获取节点的属性值
方式1：
元素节点.属性;
元素节点[属性];
举例：（获取节点的属性值）
<body><img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src);
console.log(myNode.className); //注意，是className，不是class console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]); //注意，是className，不是class console.log(myNode["title"]);</script></body>
方式2：（推荐）
素节点.getAttribute("属性名称");
例子：
console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class")); //注意是class，不是className
console.log(myNode.getAttribute("title"));
删除节点的属性
格式：
元素节点.removeAttribute(属性名);
举例：（删除节点的属性）
myNode.removeAttribute("class");
myNode.removeAttribute("id");
举例：
留言板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.close{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
background-color: rgba(0,0,0,.1);
margin-left: 20px;
}
</style>
</head>
<body>
<h2>简易留言板</h2>
<div id="box">
<!--<ul>
</ul>-->
</div>
<textarea id="msg"></textarea>
<input type="button" id="btn" value="留言"/>
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript">
// 0 将ul标签添加到div#box标签中
var oUl = document.createElement('ul');
var oBox = document.getElementById('box');
oBox.appendChild(oUl);
var oBtn = document.getElementById('btn');
var oMsg = document.getElementById('msg')
// 控制留言的总数量
var count = 0;
oBtn.onclick = function(){
// 点击留言按钮事件操作
// 1.创建li标签
var oLi = document.createElement('li');
//2.设置内容
oLi.innerHTML = oMsg.value + "<span>X</span>"
// 3.如果想在插入的第一个li获取的前面继续添加li标签
//3.1获取li标签
var olis = document.getElementsByTagName('li');
//3.2 如果是第一次添加的li标签，则直接添加到ul的后面
if(olis.length == 0){
oUl.appendChild(oLi);
count++;
}else{
// 3.3 如果不是第一次添加的li标签，则插入到第一个li标签的前面
oUl.insertBefore(oLi,olis[0]);
count++;
}
// 4.添加完成之后 清空textarea的值
oMsg.value = '';
// 5.点击X的时候删除当前的一条数据
//5.1先获取所有的X
var oSpans = document.getElementsByTagName('span');
// 5.2for循环 对所有的X添加点击事件
for(var i = 0; i< oSpans.length; i++){
oSpans[i].onclick = function(){
// 5.3 移除当前的li标签
oUl.removeChild(this.parentNode)
count--;
}
}
}
function sum(){
alert('一共发布了'+count+'条留言');
}
</script>
</html>
结果：
使用js模拟选择器中的hover
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//需求：鼠标放到哪个button上，改button变成×××背景（添加类）
var btnArr = document.getElementsByTagName("button");
//绑定事件
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseover = function () {
//【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current"; //【重要】核心代码
}
}
//鼠标离开current时，还原背景色
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
this.className = "";
}
}
</script>
</body>
</html>
结果：
创建对象的几种常用方式
1.使用Object或对象字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象
使用Object或对象字面量创建对象
JS中最基本创建对象的方式：
var student = new Object();
student.name = "easy";
student.age = "20";
当我们要创建同类的student1，student2，…，studentn时，我们不得不将以上的代码重复n次....
var sutdent1 = {
name : "easy1",
age : 20
};
var sutdent2 = {
name : "easy2",
age : 20
};
...
var sutdentn = {
name : "easyn",
age : 20
};
<script>
var person ={
name: '张三',
age : 18,
fav:function () {
alert(this.name)
}
};
console.log(person.fav())
</script>
使用构造函数的方式创建对象：
工厂模式创建对象
JS中没有类的概念，那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用，同时可以给出特定接口来初始化对象
function createStudent(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);
同时又定义了”生产”水果对象的createFruit()函数：
function createFruit(name, color) {
var obj = new Object();
obj.name = name;
obj.color = color;
return obj;
}
var v1 = createStudent("easy1", 20);
var v2 = createFruit("apple", "green");
<script>
function Student(name,age) {
this.name = name;
this.age = age;
this.alertName = function () {
alert(this.name)
}
}
function Fruit(name,color) {
this.name = name;
this.color = color;
this.alertName = function () {
alert(this.name)
}
}
所有的类都集成object
var s = new Student('张三',17)
var f = new Fruit('哈哈','green')
console.log(s instanceof Student)
console.log(f instanceof Fruit)
</script>
Python和js的对比：
Es6中的函数可以写成箭头函数
举例对比：
在js中prototype原型，是每个对象的父类
原型的模式创建对象
原型链甚至原型继承，是整个JS中最难的一部分也是最不好理解的一部分，在这里由于我们课程定位的原因，如果对js有兴趣的同学，可以去查阅一下相关JS原型的一些知识点。更加有助于你以后前端JS的面试。
function Student() {
this.name = 'easy';
this.age = 20;
}
Student.prototype.alertName = function(){
alert(this.name);
};
var stu1 = new Student();var stu2 = new Student();
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
Es6中的文件引入：
Import aaa from xxx
前端三大工具：
Grunt
Glup
Webpack
作用：
文件压缩、打包
定时器：
在js中的定时器分两种：1、setTimeout() 2、setInterval()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = box style="width: 100px;height: 100px;background-color: red;">
</div>
<script>
var a = 0;
var oDiv = document.getElementById('box')
setInterval(function () {
a++;
oDiv.style.marginLeft = a+'px'
console.log(a)
},10)
</script>
</body>
</html>
优化后的；有定时器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = box style="width: 100px;height: 100px;background-color: red;">
</div>
<button id = 'btn'>停止</button>
<script>
var a =0;
function $(id) {
return document.getElementById(id);
}
var oDiv = document.getElementById('box');
var oBtn = document.getElementById('btn');
var c = setInterval(function () {
a +=3;
$('box').style.marginLeft = a+'px';
console.log(a);
},50)
$('btn').onclick = function () {
clearInterval(c)
}
</script>
</body>
</html>
数据异步机制：
不等待功能
setTimeout(function () {
alert(2);
console.log(2222);
},2000)
console.log(1111);
定时器：
<body>
<script>
setTimeout(function () {
window.open('http://www.baidu.com');
},2000);
</script>
</body>
<script>
setTimeout(function () {
window.open('http://www.baidu.com','_self');
},2000);
</script>
</body>
自动刷新：
全局刷新：可以测试使用
<script>
console.log(1111)
setTimeout(function () {
window.location.reload();
},2000);
</script>
局部刷新：
必须使用ajax技术
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload = function (argument) {
console.log(1111)
setTimeout(function () {
console.log(window.navigator)
},2000);
}
</script>
</body>
</html>
jQuery安装使用：
安装jQuery：
使用jquery
1）先引入jquery
2）入口函数 function（）{}
3）Js对象和jquery对象的转换 js => jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--先引入包-->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
console.log($)
// 文档加载完成之后
$(document).ready(function () {
alert(2)
});
$(document).ready(function () {
alert(23)
});
</script>
</body>
</html>
不会出现js的覆盖现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<!--先引入包-->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
$('.box').click(function () {
$('.box').css('backgroundColor','yellow')
})
})
</script>
</body>
</html>
点击一下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<!--先引入包-->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
$('.box').click(function () {
// $('.box').css('backgroundColor','yellow')
$('.box').css({
'background-color':'green',
'width':'300px'
})
})
})
</script>
</body>
</html>
Jquery 选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="list2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
console.log($('.box').find('ul.list2,ul.list'));
})
</script>
</body>
</html>
效果：
$(function () {
console.log($('.box').children('ul.list2,ul.list'));
})
Find是获取的子孙后代 、 children获取的是亲儿子
Jquery动画效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
display: none;
width: 100px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<button id="btn">显示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
$('#btn').click(function(event) {
$('.box').show();
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
display: none;
width: 100px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<button id="btn">显示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
var isShow = true;
$('#btn').click(function(event) {
if (isShow){
$('.box').show();
isShow = false
$(this).text('隐藏');
}else {
$('.box').hide();
isShow = true;
$(this).text('显示');
}
})
})
</script>
</body>
</html>
可以加上时间：
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
var isShow = true;
$('#btn').click(function(event) {
if (isShow){
$('.box').show(3000);
isShow = false
$(this).text('隐藏');
}else {
$('.box').hide(3000);
isShow = true;
$(this).text('显示');
}
})
})
</script>
防止出现延迟现象，都是快速的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
display: none;
width: 100px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<button id="btn">显示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
var isShow = true;
$('#btn').click(function(event) {
$('.box').stop().toggle('slow');
})
})
</script>
</body>
</html>
卷帘门效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
display: none;
width: 100px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<button id="btn">显示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
var isShow = true;
$('#btn').click(function(event) {
$('.box').slideUp(300,function () {
})
$('.box').slideDown(300,function () {
})
})
})
</script>
</body>
</html>
淡入淡出：效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
display: none;
width: 100px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<button id="btn">显示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
var isShow = true;
$('#btn').click(function(event) {
$('.box').fadeToggle(1000,function () {
})
})
})
</script>
</body>
</html>
自定义动画：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
}
.wrap li {
background-color: green;
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
//入口函数
$(document).ready(function () {
//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
var jqli = $(".wrap>ul>li");
//绑定事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
});
//绑定事件(移开隐藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">二级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">三级菜单1</a>
<ul>
<li><a href="javascript:void(0);">三级菜单2</a></li>
<li><a href="javascript:void(0);">三级菜单3</a></li>
<li><a href="javascript:void(0);">三级菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
};
//自定义动画
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("动画执行完毕！");
});
});
})
})
</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>
Jquery 的属性操作：
attr()
设置属性值或者 返回被选元素的属性值
attr（）属性的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="wrap" id="'box" title="123">
</div>
<script>
$(document).ready(function () {
console.log( $('.wrap').attr('id'));
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.wrap{
background-color: red;
}
.wrap2{
background-color: yellow;
}
</style>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="wrap" id="'box" title="123">
</div>
<script>
$(document).ready(function () {
console.log( $('.wrap').attr('id'));
console.log( $('.wrap').attr('class'));
$('.wrap').attr('class','wrap2')
});
</script>
</body>
</html>
直接将红色的盒子给覆盖了颜色成×××：
removeAttr()
移除属性
//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');
//删除多个属性
$('#box').removeAttr('name class');
什么时候使用attr()，什么时候使用prop()？
1.是有true,false两个属性使用prop();
2.其他则使用attr();
addClass（添加多个类名）
为每个匹配的元素添加指定的类名。
$('div').addClass("box");//追加一个类名到原有的类名
还可以为匹配的元素添加多个类名
$('div').addClass("box box2");//追加多个类名
removeClass
从所有匹配的元素中删除全部或者指定的类。
移除指定的类（一个或多个）
$('div').removeClass('box')；
移除全部的类
$('div').removeClass();
可以通过添加删除类名，来实现元素的显示隐藏
代码如下：
var tag = false;
$('span').click(function(){
if(tag){
$('span').removeClass('active')
tag=false;
}else{
$('span').addClass('active')
tag=true;
}
})
val
获取值：
val()用于表单控件中获取值，比如input textarea select等等
设置值：
$('input').val('设置了表单控件中的值')；
