2.算数运算符
var a = 5,b=2
3.比较运算符
var x = 5;
4.特殊状况
字符串拼接+字符串运算 特殊状况。python中有拼接字符串中更简便的办法，其实在js中也有，你们能够百度引擎搜索es6模板字符串。（扩展）
var name = '伊拉克';
var am = '美军';
// 字符串拼接
var str = "2003年3月20日,"+name+"战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，"+am+"又一次取得的大规模压倒性军事胜利。"
var fullStr = str;
console.log(fullStr)
// ***** es6的模块字符串 tab键上面的反引号 `` 添加变量使用${变量名}*****
var str = `2003年3月20日,${name}战争爆发，以${am}为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，美军又一次取得的大规模压倒性军事胜利。`;
// 不能对字符串进行+运算 只能拼接
var a1 = '1';
var a2 = '2';
console.log(a1-a2) //12
var b1 = 'one';
var b2 = 'two';
// NaN. ==== not a number 是number类型
console.log(typeof(b1*b2))
5、数据类型转换
1,将数据类型转换成字符串类型:
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);
// 强制类型转换String(),toString()
var str1 = String(n1);
console.log(typeof str1);
var num = 234;
console.log(num.toString())
2,将字符串类型转换成数值类型:
var stringNum = '789.123wadjhkd';
var num2 = Number(stringNum);
console.log(num2)
// parseInt()能够解析一个字符串 而且返回一个整数
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));
3,任何数据类型均可以转换为boolean类型:
var b1 = '123';
var b2 = 0;
var b3 = -123
var b4 = Infinity;
var b5 = NaN;
var b6; //undefined
var b7 = null;
// 非0既真
console.log(Boolean(b7))
6、流程控制
1.if 、if-else：
var ji = 20;
if(ji>=20){
console.log('恭喜你，吃鸡成功，大吉大利')
}else{
console.log('很遗憾 下次继续努力')
if (true) {
//执行操做
}else if(true){
//知足条件执行
}else if(true){
//知足条件执行
}else{
//知足条件执行
}
if
2.与&&、或||:
//1.模拟 若是总分 >400 而且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
console.log('清华大学录入成功')
}else{
alert('高考失利')
}
//2.模拟 若是总分>400 或者你英语大于85 被复旦大学录入
//逻辑或 只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
alert('被复旦大学录入')
}else{
alert('高考又失利了')
}
View Code
3.switch:
var gameScore = 'better';
switch(gameScore){
//case表示一个条件 知足这个条件就会走进来 遇到break跳出。break终止循环。若是某个条件中不写 break，那么直到该程序遇到下一个break中止
case 'good':
console.log('玩的很好')
//break表示退出
break;
case 'better':
console.log('玩的老牛逼了')
break;
case 'best':
console.log('恭喜你 吃鸡成功')
break;
default:
console.log('很遗憾')
}
View Code
4.while循环:
循环三步走：
1.初始化循环变量;2.判断循环条件;3.更新循环变量
var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
console.log(i);
i = i+1; //更新循环条件
}
View Code
5.do_while:
//无论有没有知足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{
console.log(i)
i++;//更新循环条件
}while (i<10) //判断循环条件
View Code
6.for循环:
for(var i = 1;i<=10;i++){
console.log(i)
}
View Code
练习:
1,输出下面图形:
*
**
***
****
*****
******
代码：
for(var i=1;i<=6;i++){
for(var j=1;j<=i;j++){
document.write("*")；
}
document.write('<br>')；
}
2,
*
***
*****
*******
*********
***********
代码：
for(var i=1;i<=6;i++){ //行数
//控制咱们的空格数
for(var s=i;s<6;s++){
document.write(' ')
}
for(var j=1;j<=2*i-1;j++){
document.write('*')
}
document.write('<br>')
}
View Code
7、经常使用内置对象
数组Array：
1.数组的建立方式：
var colors = ['red','color','yellow'];
- 使用构造函数（后面会讲）的方式建立 使用new关键词对构造函数进行建立对象
var colors2 = new Array();
2.数组的赋值：
var arr = [];
//经过下标进行一一赋值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'
3.数组的经常使用方法：
3.1 数组的合并 concat()
var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)
3.2 join() 将数组中的元素使用指定的字符串链接起来，它会造成一个新的字符串
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//98|78|76|100|0
3.3 将数组转换成字符串 toString()
var score = [98,78,76,100,0];
//toString() 直接转换为字符串 每一个元素之间使用逗号隔开
var str = score.toString();
console.log(str);//98,78,76,100,0
3.4 slice(start,end); 返回数组的一段，左闭右开
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]
3.5 pop 移除数组的最后一个元素
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.pop();
console.log(newArr);//["张三", "李四"，"王文"]
3.6 push() 向数组最后添加一个元素
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.push('小马哥');
console.log(newArr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]
3.7 reverse() 翻转数组
var names = ['alex','xiaoma','tanhuang','angle'];
//4.反转数组
names.reverse();
console.log(names);
3.8 sort对数组排序
var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]
3.9 判断是否为数组：isArray()
布尔类型值 = Array.isArray(被检测的值) ;
4.字符串String：
字符串方法
4.1 chartAt() 返回指定索引的位置的字符
var str = 'alex';
var charset = str.charAt(1);
console.log(charset);//l
4.2 concat 返回字符串值，表示两个或多个字符串的拼接
var str1 = 'al';
var str2 = 'ex';
console.log(str1.concat(str2,str2));//alexex
4.3 replace(a,b) 将字符串a替换成字符串b
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755
4.4 indexof() 查找字符的下标，若是找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法同样
var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1
4.5 slice(start，end) 左闭右开 分割字符串
var str = '小马哥';
console.log(str.slice(1,2));//马
4.6 split('a',1) 以字符串a分割字符串，并返回新的数组。若是第二个参数没写，表示返回整个数组，若是定义了个数，则返回数组的最大长度
var str = '个人天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.split('a'));//["个人天呢,", "是嘛,你在说什么呢?", "哈哈哈"]
4.7 substr(statr,end) 左闭右开
var str = '个人天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.substr(0,4));//个人天呢
4.8 toLowerCase()转小写
var str = 'XIAOMAGE';
console.log(str.toLowerCase())；//xiaomage
4.9 toUpperCase()转大写
var str = 'xiaomage';
console.log(str.toUpperCase());
4.10 四舍五入
var newNum = num.toFixed(2)
console.log(newNum)
5.Date日期对象：
建立日期对象只有构造函数一种方式,使用new关键字：
//建立日期对象
var myDate=new Date();
//获取一个月中的某一天
console.log(myDate.getDate());
//返回本地时间
console.log(myDate().toLocalString());//2018/5/27 下午10:36:23
6.Math 内置对象
经常使用内置对象
6.1 Math.ceil() 向上取整，'天花板函数'
var x = 1.234;
//天花板函数 表示大于等于 x，而且与它最接近的整数是2
var a = Math.ceil(x);
console.log(a);//2
6.2 Math.floor 向下取整，'地板函数'
var x = 1.234;
// 小于等于 x，而且与它最接近的整数 1
var b = Math.floor(x);
console.log(b);//1
6.3 求两个数的最大值和最小值
//求 两个数的最大值 最小值
console.log(Math.max(2,5));//5
console.log(Math.min(2,5));//2
6.4 随机数 Math.random()
var ran = Math.random();
console.log(ran);[0,1)
8、函数
函数：就是将一些语句进行封装，而后经过调用的形式，执行这些语句。
函数的做用：
第一步：函数的定义：
函数定义的语法：
function 函数名字(){ }
解释以下：
第二步：函数的调用：
函数调用的语法： 函数名字();
函数的参数：形参和实参：
函数的参数包括形参和实参，要保证明际参数和形式参数的个数相同。
函数的返回值：例子：
console.log(sum(3, 4));
//函数：求和
function sum(a, b) {
return a + b;
}
9、伪数组 arguments
1,返回函数实参的个数：arguments.length
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
console.log(arguments);
console.log(fn.length); //获取形参的个数
console.log(arguments.length); //获取实参的个数
console.log("----------------");
}
（2）之因此说arguments是伪数组，是由于：arguments能够修改元素，但不能改变数组的长短。举例：
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b) {
arguments[0] = 99; //将实参的第一个数改成99
arguments.push(8); //此方法不经过，由于没法增长元素
}
View Code
清空数组的几种方式：
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：删除数组中全部项目
array.length = 0; //方式1：length属性能够赋值，在其它语言中length是只读
array = [];
10、关于DOM的事件操做：
事件的三要素：事件源、事件、事件驱动程序。
总结以下：
代码书写步骤以下：（重要）
<body>
<div id="box1"></div>
<script type="text/javascript">
// 一、获取事件源
var div = document.getElementById("box1");
// 二、绑定事件
div.onclick = function () {
// 三、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
代码
常见事件以下：
一、获取事件源的方式（DOM节点的获取）：
var div1 = document.getElementById("box1"); //方式一：经过id获取单个标签
var arr1 = document.getElementsByTagName("div"); //方式二：经过 标签名 得到 标签数组，因此有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：经过 类名 得到 标签数组，因此有s
获取事件源
二、绑定事件的方式（三种）：
方式一：直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
方式二：先单独定义函数，再绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
注意上方代码的注释。绑定的时候，是写fn，不是写fn()。fn表明的是整个函数，而fn()表明的是返回值。
方式三：行内绑定
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
V绑定事件的三种方式
三、事件驱动程序：
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
//点击鼠标时，本来粉色的div变大了，背景变红了
oDiv.onclick = function () {
oDiv.style.width = "200px"; //属性值要写引号
oDiv.style.height = "200px";
oDiv.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-Color
}
</script>
V事件驱动
onload事件
当页面加载（文本和图片）完毕的时候，触发onload事件。
举例：
<script type="text/javascript">
window.onload = function () {
console.log("111"); //等页面加载完毕时，打印字符串
}
</script>
有一点咱们要知道：js的加载是和html同步加载的。所以，若是使用元素在定义元素以前，容易报错。这个时候，onload事件就能派上用场了，咱们能够把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上全部元素加载完毕在执行js内容。因此，window.onload能够预防使用标签在定义标签以前。
事件案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.top-banner{
/*position: relative;*/
background-color: rgb(230, 15, 82);
}
.top-banner .w{
width: 1190px;
position: relative;
margin: 0 auto;
}
.top-banner .banner{
display: block;
width: 100%;
height: 80px;
background: url('./close.jpg') no-repeat center 0;
}
.top-banner .close{
position: absolute;
right: 0;
top:0;
text-decoration: none;
color: white;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="top-banner" id="topBanner">
<div class="w">
<a href="#" class="banner"></a>
<a href="#" class="close" id="closeBanner">x</a>
</div>
</div>
<script type="text/javascript">
// /需求：点击案例，隐藏盒子。
//思路：点击a连接，让top-banner这个盒子隐藏起来（加隐藏类名）。
window.onload = function(){
// /1.获取事件源和相关元素
var closeBanner = document.getElementById('closeBanner');
var topBanner = document.getElementById('topBanner');
//2.绑定事件
closeBanner.onclick = function(){
//3.书写事件驱动程序
//类控制
//topBanner.className += ' hide';//保留原类名，添加新类名
//topBanner.className = 'hide';
//替换旧类名
topBanner.style.display = 'none';
}
}
</script>
</body>
</html>
京东顶部广告栏
要求实现效果：当鼠标悬停在img上时，更换为另一张图片；鼠标离开时，还原为原本的图片。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload页面加载完毕之后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，更换为另外一张图片，也就是修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中当即出发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中当即出发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
V鼠标悬停切换背景
11、DOM介绍
DOM：文档对象模型，为文档提供告终构化表示，并定义了如何经过脚原本访问文档结构。目的就是为了让js操做html元素而制定的一个规范。
解析过程：HTML加载完毕，渲染引擎会在内存中把HTML文档生成一个DOM树，getElementById是获取DOM上的元素节点，而后操做的时候修改的是该元素的属性。
DOM树（一切都是节点）：
上图可知，在HTML当中，一切都是节点：（很是重要）
整个html文档就是一个文档节点。全部的节点都是Object。
DOM能够作什么：
找对象（元素节点,)； 2,设置元素的属性值；3，设置元素的样式；4，动态建立和删除元素；5，事件的触发响应：事件源、事件、事件的驱动程序。
DOM访问关系的获取：
DOM的节点并非孤立的，所以能够经过DOM节点之间的相对关系对它们进行访问。
JS中的父子兄访问关系：
这里咱们要重点知道parentNode和children这两个属性的用法。
获取父节点：调用者就是节点。一个节点只有一个父节点，调用方式就是
（1）nextSibling：
指的是下一个节点（包括标签、空文档和换行节点）
（2）nextElementSibling：
- 火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。
总结：为了获取下一个元素节点，咱们能够这样作：在IE678中用nextSibling，在火狐谷歌IE9+之后用nextElementSibling，因而，综合这两个属性，能够这样写：
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
previous的中文是: 前一个
（1）previousSibling：
（2）previousElementSibling：
- 火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）。
总结：为了获取前一个元素节点，咱们能够这样作：在IE678中用previousSibling，在火狐谷歌IE9+之后用previousElementSibling，因而，综合这两个属性，能够这样写：
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
三、补充：得到任意一个兄弟节点：
节点本身.parentNode.children[index]; //随意获得兄弟节点
获取单个的子节点：
一、第一个子节点 | 第一个子元素节点：
（1）firstChild：
（2）firstElementChild：
- 火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。
总结：为了获取第一个子元素节点，咱们能够这样作：在IE678中用firstChild，在火狐谷歌IE9+之后用firstElementChild，因而，综合这两个属性，能够这样写：
第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
二、最后一个子节点 | 最后一个子元素节点：
（1）lastChild：
（2）lastElementChild：
- 火狐、谷歌、IE9+版本：都指的是最后一个子元素节点（标签）。
总结：为了获取最后一个子元素节点，咱们能够这样作：在IE678中用lastChild，在火狐谷歌IE9+之后用lastElementChild，因而，综合这两个属性，能够这样写：
最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
获取全部的子节点：
（1）childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、全部属性、文本节点）。是W3C的亲儿子。
- 火狐 谷歌等高本版会把换行也看作是子节点。（了解）
用法：
子节点数组 = 父节点.childNodes; //获取全部节点。
（2）children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】
- 它只返回HTML节点，甚至不返回文本节点。
- 在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。
虽然不是标准的DOM属性，但它和innerHTML方法同样，获得了几乎全部浏览器的支持。
用法：（用的最多）
子节点数组 = 父节点.children; //获取全部节点。用的最多。
1.模态框案例：
需求： 打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并弹出一个弹出框，点击X的时候会关闭当前的模态框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
#box{
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
#content{
position: relative;
top: 150px;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: red;
background-color: #fff;
margin: auto;
}
#span1{
position: absolute;
background-color: red;
top: 0;
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<button id="btn">弹出</button>
</body>
<script type="text/javascript">
//获取dom元素 1.获取事件源
var oBtn = document.getElementById('btn');
//建立弹出模态框的相关DOM对象
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');
// 设置属性
oDiv.id = 'box';
oP.id = 'content'
oP.innerHTML = '模态框成功弹出'
oSpan.innerHTML = 'X';
oSpan.id = 'span1'
// 追加元素
oDiv.appendChild(oP);
oP.appendChild(oSpan);
// 点击弹出按钮 弹出模态框
oBtn.onclick = function(){
//动态的添加到body中一个div
this.parentNode.insertBefore(oDiv,oBtn)
}
// 点击X 关闭模态框
oSpan.onclick = function(){
// 移除oDiv元素
oDiv.parentNode.removeChild(oDiv)
}
</script>
</html>
代码
2.简易留言板：
<!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>
<h1>简易留言板</h1>
<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 class='close'>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>
代码
3.使用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>
代码解释：
鼠标悬停时，current栏变色，这里用到了排他思想：先把全部按钮的className设置为空，而后把我(this)这个按钮的className设置为current，就能够达到变色的效果。核心代码是：
//排他思想：先把全部按钮的className设置为空，而后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
代码
4.tab栏选项卡：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
}
ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
// //需求：鼠标放到上面的li上，li自己变色(添加类)，对应的p也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。
var tabli = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p')
for(var i = 0; i < tabli.length; i++){
// 绑定索引值（新增一个自定义属性：index属性）
tabli[i].index = i;
tabli[i].onclick = function(){
// 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j = 0; j < tabli.length; j++){
tabli[j].className = '';
tabContent[j].className = '';
}
this.className = 'active'
tabContent[this.index].className = 'active';//【重要代码】
}
}
}
</script>
</html>
代码
五、购物车案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 500px;
height: 400px;
margin: 100px auto;
background-color: rgba(255,255,255,0.4);
position: relative;
}
.car{
width: 150px;
height: 30px;
background-color: #fff;
padding-left: 30px;
position: absolute;
left: 130px;
top: 3px;
z-index: 3;
border: 1px solid green;
}
.shop{
width: 310px;
height: 70px;
background-color: #fff;
position: absolute;
top:33px;
left: 0;
display: none;
}
div.c{
border-bottom-width: 0;
}
div.t{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="car" id="myCar">个人购物车</div>
<div class="shop t" id="shop"></div>
</div>
<script type="text/javascript">
var myCar = document.getElementById('myCar');
var shop = document.getElementById('shop');
myCar.onmouseover = function(){
shop.style.display = 'block';
myCar.className +=' c';
}
myCar.onmouseout = function(){
shop.style.display = 'none';
myCar.removeAttribute('class');
myCar.className = 'car';
}
</script>
</body>
</html>
V代码
十3、js中的面向对象
建立对象的几种经常使用方式：
1.使用Object或对象字面量建立对象
2.工厂模式建立对象
3.构造函数模式建立对象
4.原型模式建立对象
1.使用Object或对象字面量建立对象：
JS中最基本建立对象的方式：
var student = new Object();
student.name = "easy";
student.age = "20";
这样，一个student对象就建立完毕，拥有2个属性name以及age，分别赋值为"easy"和20。若是你嫌这种方法有一种封装性不良的感受。来一个对象字面量方式建立对象。
var sutdent = {
name : "easy",
age : 20
};
这样看起来彷佛就完美了。可是立刻咱们就会发现一个十分尖锐的问题：当咱们要建立同类的student1，student2，…，studentn时，咱们不得不将以上的代码重复n次....
var sutdent1 = {
name : "easy1",
age : 20
};
var sutdent2 = {
name : "easy2",
age : 20
};
...
var sutdentn = {
name : "easyn",
age : 20
};
有个提问？能不能像工厂车间那样，有一个车床就不断生产出对象呢？咱们看”工厂模式”。
2.工厂模式建立对象：
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);
这样一来咱们就能够经过createStudent函数源源不断地”生产”对象了。看起来已经高枕无忧了，但贪婪的人类总有不知足于现状的天性：咱们不只但愿”产品”的生产能够像工厂车间通常源源不断，咱们还想知道生产的产品到底是哪种类型的。
好比说，咱们同时又定义了”生产”水果对象的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");
对于以上代码建立的对象v一、v2，咱们用instanceof操做符去检测，他们通通都是Object类型。咱们的固然不知足于此，咱们但愿v1是Student类型的，而v2是Fruit类型的。为了实现这个目标，咱们能够用自定义构造函数的方法来建立对象
3.构造函数模式建立对象：
在上面建立Object这样的原生对象的时候，咱们就使用过其构造函数：
在建立原生数组Array类型对象时也使用过其构造函数：
var arr = new Array(10); //构造一个初始长度为10的数组对象
在进行自定义构造函数建立对象以前，咱们首先了解一下构造函数和普通函数有什么区别。
一、实际上并不存在建立构造函数的特殊语法，其与普通函数惟一的区别在于调用方法。对于任意函数，使用new操做符调用，那么它就是构造函数；不使用new操做符调用，那么它就是普通函数。
二、按照惯例，咱们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分两者。例如上面的new Array()，new Object()。
三、使用new操做符调用构造函数时，会经历(1)建立一个新对象；(2)将构造函数做用域赋给新对象（使this指向该新对象）；(3)执行构造函数代码；(4)返回新对象；4个阶段。
ok，了解了构造函数和普通函数的区别以后，咱们使用构造函数将工厂模式的函数重写，并添加一个方法属性：
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)
};
}
这样咱们再分别建立Student和Fruit的对象：
var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");
这时咱们再来用instanceof操做符来检测以上对象类型就能够区分出Student以及Fruit了：
alert(v1 instanceof Student); //true
alert(v2 instanceof Student); //false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); //true 任何对象均继承自Object
alert(v2 instanceof Object); //true 任何对象均继承自Object
这样咱们就解决了工厂模式没法区分对象类型的尴尬。那么使用构造方法来建立对象是否已经完美了呢？使用构造器函数一般在js中咱们来建立对象。
咱们会发现Student和Fruit对象中共有一样的方法，当咱们进行调用的时候这无疑是内存的消耗。
咱们彻底能够在执行该函数的时候再这样作，办法是将对象方法移到构造函数外部：
function Student(name, age) {
this.name = name;
this.age = age;
this.alertName = alertName;
}
function alertName() {
alert(this.name);
}
var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);
在调用stu1.alertName()时，this对象才被绑定到stu1上。
咱们经过将alertName()函数定义为全局函数，这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数，解决了内存浪费的问题
可是，经过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。若是这样定义的全局函数多了，咱们想要将自定义对象封装的初衷便几乎没法实现了。更好的方案是经过原型对象模式来解决。
4.原型的模式建立对象：
原型链甚至原型继承，是整个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 两者共享同一函数
十4、定时器
在js中的定时器分两种：一、setTimeout() 二、setInterval()。
1.setTimeOut()：只在指定时间后执行一次
/定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
View Code
2.setInterval()：在指定时间为周期循环执行
/实时刷新 时间单位为毫秒
setInterval('refreshQuery()',8000);
/* 刷新查询 */
function refreshQuery(){
console.log('每8秒调一次')
}
View Code
对于这两个方法，须要注意的是若是要求在每隔一个固定的时间间隔后就精确地执行某动做，那么最好使用setInterval，而若是不想因为连续调用产生互相干扰的问题，尤为是每次函数的调用须要繁重的计算以及很长的处理时间，那么最好使用setTimeout。
十5、BOM
BOM：Browser Object Model，浏览器对象模型。
从上图也能够看出：
window对象：
-
window对象是JavaScript中的顶级对象。
-
全局变量、自定义函数也是window对象的属性和方法。
-
window对象下的属性和方法调用时，能够省略window。
BOM 的常见内置方法和内置对象：