1:js:
包含三部分:
ESMAScript:基础语法
Array()
索引 、length、push()、pop()
DOM:
获取DOM的三种方式:
(1)Id
(2)Class
(3)标签获取 TayName
BOM:
入口函数:
等待这文档,
html>
lang="en">
charset="UTF-8">
window.onload=function () {
alert(2)
}
// 有覆盖现象
window.onload=function () {
alert(3)
}
这里的var可以变量提升:
Var =i;
I = 0; \可以写成var i = 0;
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);
}
}
总结:
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:既复制节点本身,也复制其所有的子节点。
设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
我们就统一拿下面这个标签来举例:
美女图片" 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");
举例:
留言板:
html>
charset="UTF-8">
简易留言板
type="button" id="btn" value="留言"/>
结果:
使用js模拟选择器中的hover
html>
lang="en">
charset="UTF-8">
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: red;
}
按钮1
按钮2
按钮3
按钮4
按钮5
//需求:鼠标放到哪个button上,改button变成×××背景(添加类)
var btnArr = document.getElementsByTagName("button");
//绑定事件
for(var i=0;i
btnArr[i].onmouseover = function () {
//【重要】排他思想:先把所有按钮的className设置为空,然后把我(this)这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j
btnArr[j].className = "";
}
this.className = "current"; //【重要】核心代码
}
}
//鼠标离开current时,还原背景色
for(var i=0;i
btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时,就把按钮的背景色还原
this.className = "";
}
}
结果:
创建对象的几种常用方式
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
};
var person ={
name: '张三',
age : 18,
fav:function () {
alert(this.name)
}
};
console.log(person.fav())
使用构造函数的方式创建对象:
工厂模式创建对象
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");
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)
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()
html>
lang="en">
charset="UTF-8">
var a = 0;
var oDiv = document.getElementById('box')
setInterval(function () {
a++;
oDiv.style.marginLeft = a+'px'
console.log(a)
},10)
优化后的;有定时器:
html>
lang="en">
charset="UTF-8">
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)
}
数据异步机制:
不等待功能
setTimeout(function () {
alert(2);
console.log(2222);
},2000)
console.log(1111);
定时器:
setTimeout(function () {
window.open('http://www.baidu.com');
},2000);
setTimeout(function () {
window.open('http://www.baidu.com','_self');
},2000);