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 的常見內置方法和內置對象：