第 3 章 前端基礎之JavaScript
1、JavaScript概述javascript
一、javascripts的歷史html
- 1992年Nombas開發出C-minus-minus（C--）的嵌入式腳本語言（最初綁定在CEnvi軟件中），後將其更名ScriptEase.（客戶端執行的語言）。
- Netscape（網景）接收Nombas的理念，（Brendan Eich）在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言，Sun和Netscape共同完成，後更名叫JavaScript。
- 微軟隨後模仿在其IE 3.0的產品中搭載了一個JavaScript的克隆版叫JScript。
- 爲了統一三家，ECMA（歐洲計算機制造協會）定義了ECMA-262規範，國際標準化組織及國際電工委員會（ISO/IEC）也採納ECMAScript做爲標準（ISO/IEC-16262）。今後，web瀏覽器就開始努力（雖然有着不一樣的程度的成功和雖敗）將ECMAScript做爲JavaScript實現的基礎。Ecmascript是規範。
二、ECMAScriptjava
儘管ECMAScript是一個重要的標準，但它並非JavaScript惟一的部分，固然，也不是惟一被標準化的部分，實際上，一個完整的JavaScript實現是由一下3個不一樣部分組成的：node
- 核心（ECMAScript）。
- 文檔對象模型（DOM） Document object model（整合js，CSS，html）。
- 瀏覽器對象模型（BOM） Broswer object model （整合js和瀏覽器）。
- JavaScript在開發中絕大多數狀況是基於對象的，也是面向對象的。
簡單地說，ECMAScript描述瞭如下內容：python
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 運算符
- 對象（封裝 繼承 多態）基於對象的語言，使用對象。
2、JavaScript的基礎jquery
一、JS的引入方式web
1 直接編寫 <script> alert('hello yuan') </script> 2 導入文件 <script src="hello.js"></script>
二、js的變量、常量和標識符面試
1）、js的變量數組
x=5
y=6
z=x+y
在代數中，咱們使用字母（好比x）來保存值（好比 5），經過上面的表達式z=x+y，咱們可以計算出z的值爲11.在JavaScript中，這些字母被稱爲變量。瀏覽器
那麼如何在js中定義使用變量呢?
1.1）、聲明變量時不用聲明變量類型，所有使用var關鍵字；
var a;a=3;
1.2）、一行能夠聲明多個變量，而且能夠是不一樣類型
var name="yuan", age=20, job="lecturer";
1.3）、聲明變量時 能夠不用var，若是不用var 那麼它是全局變量
1.4）、變量命名，首字符只能是字母，下劃線，$美圓符 三選一，餘下的字符能夠是下劃線，美圓符號或任何字母或數字字符且分大小寫，x與x是兩個變量。
Camel 標記法
首字母是小寫的，接下來的字母都以大寫字符開頭。例如：
var myTestValue = 0, mySecondValue = "hi";
Pascal 標記法
首字母是大寫的，接下來的字母都以大寫字符開頭。例如：
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利類型標記法
在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，以下所示「
Var iMyTestValue = 0, sMySecondValue = "hi";
命名規範
二、常量和標識符
常量：直接在程序中出現的數據值
標識符：
- 由不以數字開頭的字母、數字、下劃線(_)、美圓符號($)組成。
- 經常使用於表示函數、變量等的名稱。
- 例如：_abc,$abc,abc,abc123是標識符，而1abc不是。
- JavaScript語言中表明特定含義的詞稱爲保留字，不容許程序再定義爲標識符。
三、js的數據類型
/*
number ----- 數值
boolean ----- 布爾值
string ----- 字符串
undefined ----- undefined
null ----- null
*
1）、數字類型（number）
- 不區分整型數值和浮點型數值；
- 全部數字都採用64位浮點格式存儲，至關於java和C語言中的double格式；
- 能表示的最大值是±1.7976931348623157 × 10308
- 能表示的最小值是±5 × 10 - 324
整數：
在JavaScript中10進制的整數由數字的序列組成。
精確表達的範圍是-9007199254740992 （-253）到9007199254740992（253）
超出範圍的整數，精確度將受影響
浮點數：
使用小數點記錄數據
例如：3.4,5.6
使用指數記錄數據
例如：4.3e23 = 4.3 × 1023
16進制和8進制數的表達：
16進制數據前面加上0x，八進制前面加0；16進制數是由0-9，A-F等16個字符組成，8進制數由0-7等8個數字組成。
16進制和8進制與2進制的換算：
2進制: 1111 0011 1101 0100 <-----> 16進制:0xF3D4 <-----> 10進制:62420 2進制: 1 111 001 111 010 100 <-----> 8進制:0171724
2）、字符串類型（string）
是由Unicode字符、數字、標點符號組成的序列，字符串常量首尾由單引號或雙引號括起，JavaScript中沒有字符類型，經常使用特殊字符在字符串中的表達；
字符串部分特殊字符必須加上右劃線\，經常使用的轉義字符：
\n ：換行
\' ：單引號
\'' ：雙引號
\\ ：右劃線
3）、布爾類型（boolean）
Boolean類型僅有兩個值：true和false，也表明1和0，實際運算中true=1，false=0.
布爾值也能夠看做on/off、yes/no、1/0對應true/false
Boolean值主要用於JavaScript的控制語句，例如：
if (x==1){
y=y+1;
}else{
y=y-1;
}
4）、Null & Undefined類型
undefined類型
undefined類型只有一個值，即undefined，當聲明的變量未初始化時，該變量的默認值是undefined。
當函數無明確返回值時，返回的也是值「undefined」；
Null類型
另外一種只有一個值的類型是Null，它只有一個專用值null，即它的字面值，值undefined其實是從值null派生來的，所以ECMAScript把它們定義爲相等的。
儘管這兩個值相等，但它們的含義不一樣，undefined是聲明瞭變量但未對其初始化時賦予該變量的值，null則用於表示還沒有存在的對象（在討論typeof運算符時，簡單地介紹過這一點）。若是函數或方法要返回的是對象，那麼找不到對象時，返回的一般是null。
四、運算符
算術運算符： + - * / % ++ -- 比較運算符： > >= < <= != == === !== 邏輯運算符： && || ！ 賦值運算符： = += -= *= /= 字符串運算符： + 鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算
1）、算術運算符
注意1：自加自減
假如x=2，那麼x++表達式執行後的值爲3，x--表達式執行後的值爲1，i++相對於i=i+1,i--至關於i=i-1，遞增和遞減運算符能夠放在變量前也能夠放在變量後：--i.
var i=10;
console.log(i++);
console.log(i);
console.log(++i);
console.log(i);
console.log(i--);
console.log(--i);
注意2：單元運算符
- 除了能夠表示減號還能夠表示負號 例如：x=-y
+ 除了能夠表示加法運算還能夠用於字符串的鏈接 例如："abc"+"def"="abcdef"
js不一樣於 一門python，是一門弱類型語言
靜態類型語言
一種在編譯期間就肯定數據類型的語言。大多數靜態類型語言是經過要求在使用任一變量以前聲明其數據類型來保證這一點的。Java 和 C 是靜態類型語言。
動態類型語言
一種在運行期間纔去肯定數據類型的語言，與靜態類型相反。VBScript 和 Python 是動態類型的，由於它們肯定一個變量的類型是在您第一次給它賦值的時候。
強類型語言
一種老是強制類型定義的語言。Java 和 Python 是強制類型定義的。您有一個整數，若是不明確地進行轉換 ，不能將把它當成一個字符串去應用。
弱類型語言
一種類型能夠被忽略的語言，與強類型相反。JS 是弱類型的。在JS中，能夠將字符串 '12' 和整數 3 進行鏈接獲得字符串'123'，而後能夠把它當作整數 123 ，全部這些都不須要任何的顯示轉換。
因此說 Python 既是動態類型語言 (由於它不使用顯示數據類型聲明)，又是強類型語言 (由於只要一個變量得到了一個數據類型，它實際上就一直是這個類型了)。
注意3：NaN
var d="yuan"; d=+d; alert(d);//NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會獲得一個NaN數據 alert(typeof(d));//Number //NaN特色: var n=NaN; alert(n>3); alert(n<3); alert(n==3); alert(n==NaN); alert(n!=NaN);//NaN參與的全部的運算都是false,除了!=
2）、比較運算符
> >= < <= != == === !==
用於控制語句時：
if (2>1){ // 3 0 false null undefined ［］
console.log("條件成立!")
}
等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所作 的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。
console.log(2==2);
console.log(2=="2");
console.log(2==="2");
console.log(2!=="2");
注意1：
var bResult = "Blue" < "alpha"; alert(bResult); //輸出 true 在上面的例子中，字符串 "Blue" 小於 "alpha"，由於字母 B 的字符代碼是 66，字母 a 的字符代碼是 97。 比較數字和字符串 另外一種棘手的情況發生在比較兩個字符串形式的數字時，好比： var bResult = "25" < "3"; alert(bResult); //輸出 "true" 上面這段代碼比較的是字符串 "25" 和 "3"。兩個運算數都是字符串，因此比較的是它們的字符代碼（"2" 的字符代碼是 50，"3" 的字符代碼是 51）。 不過，若是把某個運算數該爲數字，那麼結果就有趣了： var bResult = "25" < 3; alert(bResult); //輸出 "false" 這裏，字符串 "25" 將被轉換成數字 25，而後與數字 3 進行比較，結果不出所料。 總結： 比較運算符兩側若是一個是數字類型,一個是其餘類型,會將其類型轉換成數字類型. 比較運算符兩側若是都是字符串類型,比較的是最高位的asc碼,若是最高位相等,繼續取第二位比較.
注意2：
等性運算符：執行類型轉換的規則以下：
若是一個運算數是 Boolean 值，在檢查相等性以前，把它轉換成數字值。false 轉換成 0，true 爲 1。
若是一個運算數是字符串，另外一個是數字，在檢查相等性以前，要嘗試把字符串轉換成數字。
若是一個運算數是對象，另外一個是字符串，在檢查相等性以前，要嘗試把對象轉換成字符串。
若是一個運算數是對象，另外一個是數字，在檢查相等性以前，要嘗試把對象轉換成數字。
在比較時，該運算符還遵照下列規則：
值 null 和 undefined 相等。
在檢查相等性時，不能把 null 和 undefined 轉換成其餘值。
若是某個運算數是 NaN，等號將返回 false，非等號將返回 true。
若是兩個運算數都是對象，那麼比較的是它們的引用值。若是兩個運算數指向同一對象，那麼等號返回 true，不然兩個運算數不等。
3）、邏輯運算符
if (2>1 && [1,2]){
console.log("條件與")
}
// 思考返回內容?
console.log(1 && 3);
console.log(0 && 3);
console.log(0 || 3);
console.log(2 || 3);
五、流程控制
- 順序結構（從上向下順序執行）
- 分支結構
- 循環結構
1）、順序結構
<script> console.log(「星期一」); console.log(「星期二」); console.log(「星期三」); </script>
2）、分支結構
if-else結構：
if (表達式){
語句１;
......
} else{
語句２;
.....
}
功能說明：若是表達式的值爲true則執行語句1，不然執行語句2
示例：
var score=window.prompt("您的分數:");
if (score>90){
ret="優秀";
}else if (score>80){
ret="良";
}else if (score>60){
ret="及格";
}else {
ret = "不及格";
}
alert(ret);
switch-case結構
switch基本格式
switch (表達式) {
case 值1:語句1;break;
case 值2:語句2;break;
case 值3:語句3;break;
default:語句4;
}
示例：
switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定義";
}
switch比else if 結構更加簡潔清晰，使程序可讀性更強，效率更高。
3）、循環結構
for 循環：
語法規則：
for(初始表達式;條件表達式;自增或自減)
{
執行語句
……
}
功能說明：實現條件循環，當條件成立時，執行語句1，不然跳出循環體。
for循環的另外一種形式：
for( 變量 in 數組或對象)
{
執行語句
……
}
while循環：
語法規則：
while (條件){
語句1；
...
}
功能說明：運行功能和for相似，當條件成立循環執行語句花括號{}內的語句，不然跳出循環，一樣支持continue與break語句。
示例：
var i=1; while (i<=7) { document.write("<H"+i+">hello</H "+i+"> "); document.write("<br>"); i++; } //循環輸出H1到H7的字體大小
4）、異常處理
try {
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
// 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變量，用來指向Error對象或者其餘拋出的對象
}
finally {
//不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}
注：主動拋出異常 throw Error（xxxxx"）
3、JavaScript的對象
簡介：
在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的。
<script language="javascript"> var aa=Number.MAX_VALUE; //利用數字對象獲取可表示最大數 var bb=new String("hello JavaScript"); //建立字符串對象 var cc=new Date(); //建立日期對象 var dd=new Array("星期一","星期二","星期三","星期四"); //數組對象 </script>
一、String對象
1）、字符串對象建立
字符串建立（兩種方式）
① 變量 = 「字符串」
② 字符串對象名稱 = new string （字符串）
var str1="hello world";
var str1= new String("hello word");
2）、字符串對象的屬性和函數
x.length －－－－獲取字符串的長度
x.toLowerCase() －－－－轉爲小寫
x.toUpperCase() －－－－轉爲大寫
x.trim() －－－－去除字符串兩邊空格
－－－－字符串查詢方法
x.charAt(index) －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index爲要獲取的字符索引
x.indexOf(findstr,index)－－－－查詢字符串位置
x.lastIndexOf(findstr)
x.match(regexp) －－－－match返回匹配字符串的數組，若是沒有匹配則返回null
x.search(regexp) －－－－search返回匹配字符串的首字符位置索引
示例：
var str1="welcome to the world of JS!";
var str2=str1.match("world");
var str3=str1.search("world");
alert(str2[0]); // 結果爲"world"
alert(str3); // 結果爲15
－－－－子字符串處理方法
x.substr(start, length) －－－－start表示開始位置，length表示截取長度
x.substring(start, end) －－－－end是結束位置
x.slice(start, end) －－－－切片操做字符串
示例：
var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1);
alert(str2); //結果爲"cd"
alert(str3); //結果爲"efgh"
alert(str4); //結果爲"cdefg"
alert(str5); //結果爲"fg"
x.replace(findstr,tostr) －－－－ 字符串替換
x.split(); －－－－分割字符串
var str1="一,二,三,四,五,六,日";
var strArray=str1.split(",");
alert(strArray[1]);//結果爲"二"
x.concat(addstr) －－－－ 拼接字符串
二、Array對象
1）、數組建立
建立數組的三種方式：
建立方式1:
var arrname = [元素0,元素1,….]; // var arr=[1,2,3];
建立方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);
建立方式3:
var arrname = new Array(長度);
// 初始化數組對象:
var cnweek=new Array(7);
cnweek[0]="星期日";
cnweek[1]="星期一";
...
cnweek[6]="星期六";
建立二數組：
var cnweek=new Array(7); for (var i=0;i<=6;i++){ cnweek[i]=new Array(2); } cnweek[0][0]="星期日"; cnweek[0][1]="Sunday"; cnweek[1][0]="星期一"; cnweek[1][1]="Monday"; ... cnweek[6][0]="星期六"; cnweek[6][1]="Saturday";
2）、數組對象的屬性和方法
join方法：
x.join(bystr) －－－－將數組元素拼接成字符串
var arr1=[1, 2, 3, 4, 5, 6, 7];
var str1=arr1.join("-");
alert(str1); //結果爲"1-2-3-4-5-6-7"
concat方法：
x.concat(value,...) －－－－
var a = [1,2,3];
var b=a.concat(4,5) ;
alert(a.toString()); //返回結果爲1,2,3
alert(b.toString()); //返回結果爲1,2,3,4,5
數組排序-reverse sort：
//x.reverse() //x.sort() var arr1=[32, 12, 111, 444]; //var arr1=["a","d","f","c"]; arr1.reverse(); //顛倒數組元素 alert(arr1.toString()); //結果爲444,111,12,32 arr1.sort(); //排序數組元素 alert(arr1.toString()); //結果爲111,12,32,444 //------------------------------ arr=[1,5,2,100]; //arr.sort(); //alert(arr); //若是就想按着數字比較呢? function intSort(a,b){ if (a>b){ return 1;//-1 } else if(a<b){ return -1;//1 } else { return 0 } } arr.sort(intSort); alert(arr); function IntSort(a,b){ return a-b; }
數組切片操做：
//x.slice(start, end)
//
//使用註解
//
//x表明數組對象
//start表示開始位置索引
//end是結束位置下一數組元素索引編號
//第一個數組元素索引爲0
//start、end可爲負數，-1表明最後一個數組元素
//end省略則至關於從start位置截取之後全部數組元素
var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);
alert(arr2.toString());
//結果爲"c,d"
alert(arr3.toString());
//結果爲"e,f,g,h"
alert(arr4.toString());
//結果爲"c,d,e,f,g"
刪除子數組：
//x. splice(start, deleteCount, value, ...)
//使用註解
//x表明數組對象
//splice的主要用途是對數組指定位置進行刪除和插入
//start表示開始位置索引
//deleteCount刪除數組元素的個數
//value表示在刪除位置插入的數組元素
//value參數能夠省略
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString());//a變爲 [1,4,5,6,7,8]
a.splice(1,1);
alert(a.toString());//a變爲[1,5,6,7,8]
a.splice(1,0,2,3);
alert(a.toString());//a變爲[1,2,3,5,6,7,8]
數組的push和pop：
//push pop這兩個方法模擬的是一個棧操做
//x.push(value, ...) 壓棧
//x.pop() 彈棧
//使用註解
//
//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//push是將value值添加到數組x的結尾
//pop是將數組x的最後一個元素刪除
var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//結果爲"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//結果爲"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//結果爲"1,2,3,4,5"
數組的shift和unshift：
//x.unshift(value,...)
//x.shift()
//使用註解
//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//unshift是將value值插入到數組x的開始
//shift是將數組x的第一個元素刪除
var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1); //結果爲"4,5,1,2,3"
arr1. unshift([6,7]);
alert(arr1); //結果爲"6,7,4,5,1,2,3"
arr1.shift();
alert(arr1); //結果爲"4,5,1,2,3"
總結js的數組特性：
// js中數組的特性
//java中數組的特性, 規定是什麼類型的數組,就只能裝什麼類型.只有一種類型.
//js中的數組特性1: js中的數組能夠裝任意類型,沒有任何限制.
//js中的數組特性2: js中的數組,長度是隨着下標變化的.用到多長就有多長.
var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')];
/* alert(arr5.length);//8
arr5[10] = "hahaha";
alert(arr5.length); //11
alert(arr5[9]);// undefined */
三、Date對象
1）、建立Date對象
//方法1：不指定參數
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：參數爲日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：參數爲毫秒數
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());
//方法4：參數爲年月日小時分鐘秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒並不直接顯示
2）、Date對象的方法一獲取日期和時間
獲取日期和時間
getDate() 獲取日
getDay () 獲取星期
getMonth () 獲取月（0-11）
getFullYear () 獲取完全年份
getYear () 獲取年
getHours () 獲取小時
getMinutes () 獲取分鐘
getSeconds () 獲取秒
getMilliseconds () 獲取毫秒
getTime () 返回累計毫秒數(從1970/1/1午夜)
實例練習：
function getCurrentDate(){ //1. 建立Date對象 var date = new Date(); //沒有填入任何參數那麼就是當前時間 //2. 得到當前年份 var year = date.getFullYear(); //3. 得到當前月份 js中月份是從0到11. var month = date.getMonth()+1; //4. 得到當前日 var day = date.getDate(); //5. 得到當前小時 var hour = date.getHours(); //6. 得到當前分鐘 var min = date.getMinutes(); //7. 得到當前秒 var sec = date.getSeconds(); //8. 得到當前星期 var week = date.getDay(); //沒有getWeek // 2014年06月18日 15:40:30 星期三 return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week); } alert(getCurrentDate()); //解決 自動補齊成兩位數字的方法 function changeNum(num){ if(num < 10){ return "0"+num; }else{ return num; } } //將數字 0~6 轉換成 星期日到星期六 function parseWeek(week){ var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; // 0 1 2 3 ............. return arr[week]; }
3）、Date對象的方法一設置日期和時間
//設置日期和時間 //setDate(day_of_month) 設置日 //setMonth (month) 設置月 //setFullYear (year) 設置年 //setHours (hour) 設置小時 //setMinutes (minute) 設置分鐘 //setSeconds (second) 設置秒 //setMillliseconds (ms) 設置毫秒(0-999) //setTime (allms) 設置累計毫秒(從1970/1/1午夜) var x=new Date(); x.setFullYear (1997); //設置年1997 x.setMonth(7); //設置月7 x.setDate(1); //設置日1 x.setHours(5); //設置小時5 x.setMinutes(12); //設置分鐘12 x.setSeconds(54); //設置秒54 x.setMilliseconds(230); //設置毫秒230 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日5點12分54秒 x.setTime(870409430000); //設置累計毫秒數 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日12點23分50秒
4）、Date對象的方法一日期和時間的轉換
日期和時間的轉換:
getTimezoneOffset():8個時區×15度×4分/度=480;
返回本地時間與GMT的時間差，以分鐘爲單位
toUTCString()
返回國際標準時間字符串
toLocalString()
返回本地格式時間字符串
Date.parse(x)
返回累計毫秒數(從1970/1/1午夜到本地時間)
Date.UTC(x)
返回累計毫秒數(從1970/1/1午夜到國際時間)
四、Math對象
//該對象中的屬性方法 和數學有關.
abs(x) 返回數的絕對值。
exp(x) 返回 e 的指數。
floor(x)對數進行下舍入。
log(x) 返回數的天然對數（底爲e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次冪。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四捨五入爲最接近的整數。
sin(x) 返回數的正弦。
sqrt(x) 返回數的平方根。
tan(x) 返回角的正切。
//方法練習:
//alert(Math.random()); // 得到隨機數 0~1 不包括1.
//alert(Math.round(1.5)); // 四捨五入
//練習：獲取1-100的隨機整數，包括1和100
//var num=Math.random();
//num=num*10;
//num=Math.round(num);
//alert(num)
//============max min=========================
/* alert(Math.max(1,2));// 2
alert(Math.min(1,2));// 1 */
//-------------pow--------------------------------
alert(Math.pow(2,4));// pow 計算參數1 的參數2 次方.
五、Function 對象 （重點）
1）、函數的定義
function 函數名 (參數){
<br> 函數體;
return 返回值;
}
功能說明：
可使用變量、常量或表達式做爲函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function類能夠表示開發者定義的任何函數
用Function類直接建立函數的語法以下：
var 函數名 = new Function("參數1","參數n","function_body");
雖然因爲字符串的關係，第二種形式寫起來有些困難，但有助於理解函數只不過是一種引用類型，它們的行爲與用Function類明確建立的函數行爲是相同的。
示例：
function func1(name){
alert('hello'+name);
return 8
}
ret=func1("yuan");
alert(ret);
var func2=new Function("name","alert(\"hello\"+name);")
func2("egon")
注意：js的函數加載執行與python不一樣，它是總體加載完纔會執行，因此執行函數放在函數聲明上面或下面均可以：
<script> //f(); --->OK function f(){ console.log("hello") } f() //----->OK </script>
2）、Function 對象的屬性
如前所述，函數屬於引用類型，因此它們也有屬性和方法。
好比，ECMAScript定義的屬性length聲明瞭函數指望的參數個數。
alert(func1.length)
3）、Function 的調用
function func1(a,b){
alert(a+b);
}
func1(1,2); //3
func1(1,2,3);//3
func1(1); //NaN
func1(); //NaN
//只要函數名寫對便可,參數怎麼填都不報錯.
-------------------面試題-----------
function a(a,b){
alert(a+b);
}
var a=1;
var b=2;
a(a,b)
4）、函數的內置對象arguments
function add(a,b){
console.log(a+b);//3
console.log(arguments.length);//2
console.log(arguments);//[1,2]
}
add(1,2)
------------------arguments的用處1 ------------------
function nxAdd(){
var result=0;
for (var num in arguments){
result+=arguments[num]
}
alert(result)
}
nxAdd(1,2,3,4,5)
// ------------------arguments的用處2 ------------------
function f(a,b,c){
if (arguments.length!=3){
throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
}
else {
alert("success!")
}
}
f(1,2,3,4,5)
5）、匿名函數
// 匿名函數
var func = function(arg){
return "tony";
}
// 匿名函數的應用
(function(){
alert("tony");
} )()
(function(arg){
console.log(arg);
})('123')
4、BOM 對象
window 對象
全部瀏覽器都支持window對象。
概念上講，一個html文檔對應一個window對象。
功能上講：控制瀏覽器窗口的。
使用上講：window對象不須要建立對象，直接使用便可。
一、window對象方法
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt() 顯示可提示用戶輸入的對話框。
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close() 關閉瀏覽器窗口。
setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
setTimeout() 在指定的毫秒數後調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
scrollTo() 把內容滾動到指定的座標。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // BOM對象下的window對象 // alert confirm prompt // 提示功能 // window.alert(123); // // 確認功能 // var ret=window.confirm(123); // if(ret){ // // } // else { // // } // console.log(ret); // 輸入功能 // var ret=window.prompt(123); // console.log(ret) // 瀏覽器的定時器功能 function foo() { console.log("OK"); } var ID=setInterval(foo,1000); // 取消定時器 clearInterval(ID) </script> </head> <body>
二、 方法使用
1）、 alert 、confirm、prompt以及open函數
//----------alert confirm prompt----------------------------
//alert('aaa');
/* var result = confirm("您肯定要刪除嗎?");
alert(result); */
//prompt 參數1 : 提示信息. 參數2:輸入框的默認值. 返回值是用戶輸入的內容.
// var result = prompt("請輸入一個數字!","haha");
// alert(result);
方法講解:
//open方法 打開和一個新的窗口 並 進入指定網址.參數1 : 網址.
//調用方式1
//open("http://www.baidu.com");
//參數1 什麼都不填 就是打開一個新窗口. 參數2.填入新窗口的名字(通常能夠不填). 參數3: 新打開窗口的參數.
open('','','width=200,resizable=no,height=100'); // 新打開一個寬爲200 高爲100的窗口
//close方法 將當前文檔窗口關閉.
//close();
示例：
var num = Math.round(Math.random()*100); function acceptInput(){ //2.讓用戶輸入(prompt) 並接受 用戶輸入結果 var userNum = prompt("請輸入一個0~100之間的數字!","0"); //3.將用戶輸入的值與 隨機數進行比較 if(isNaN(+userNum)){ //用戶輸入的無效(重複2,3步驟) alert("請輸入有效數字!"); acceptInput(); } else if(userNum > num){ //大了==> 提示用戶大了,讓用戶從新輸入(重複2,3步驟) alert("您輸入的大了!"); acceptInput(); }else if(userNum < num){ //小了==> 提示用戶小了,讓用戶從新輸入(重複2,3步驟) alert("您輸入的小了!"); acceptInput(); }else{ //答對了==>提示用戶答對了 , 詢問用戶是否繼續遊戲(confirm). var result = confirm("恭喜您!答對了,是否繼續遊戲?"); if(result){ //是 ==> 重複123步驟. num = Math.round(Math.random()*100); acceptInput(); }else{ //否==> 關閉窗口(close方法). close(); } } }
2）、setInterval、clearInterval
setInterval（）方法會不停地調用函數，直到clearInterval（）被調用或窗口被關閉，由setInterval()返回的ID值可用做clearInterval()方法的參數。
語法：<br> setInterval(code,millisec) 其中，code爲要調用的函數或要執行的代碼串。millisec週期性執行或調用 code 之間的時間間隔，以毫秒計。
示例：
<input id="ID1" type="text" onclick="begin()"> <button onclick="end()">中止</button> <script> function showTime(){ var nowd2=new Date().toLocaleString(); var temp=document.getElementById("ID1"); temp.value=nowd2; } var ID; function begin(){ if (ID==undefined){ showTime(); ID=setInterval(showTime,1000); } } function end(){ clearInterval(ID); ID=undefined; } </script>
5、DOM 對象
一、什麼是HTML DOM
- HTML Document Object Model （文檔對象模型）
- HTML DOM 定義了訪問和操做HTML文檔的標準方法。
- HTML DOM 把HTML文檔呈現爲帶有元素，屬性和文本的樹結構（節點樹）
2）、DOM樹
畫dom樹是爲了展現文檔中各個對象之間的關係，用於對象的導航。
二、DOM節點
1）、節點類型
HTML文檔中的每一個成分都是一個節點。
DOM是這樣規定的：
整個文檔是一個文檔節點
每一個HTML標籤是一個元素節點
包含在HTML元素中的文本是文本節點
每個HTML屬性是一個屬性節點
其中，document與element節點是重點。
2）、節點關係
節點樹中的節點彼此擁有層級關係。
父（parent），子（child）和同袍（sibling）等術語用於描述這些關係，父節點擁有子節點，同級的子節點被稱爲同袍（兄弟或姐妹）。
- 在節點數中，頂端節點被稱爲根（root）。
- 每一個節點都有父節點、除了根（它沒有父節點）。
- 一個節點可擁有任意數量的子。
- 同袍是擁有相同父節點的節點。
下面的圖片展現了節點樹的一部分，以及節點之間的關係：
訪問HTML元素（節點），訪問HTML元素等同於訪問節點，咱們可以以不一樣的方式來訪問HTML元素。
3）、節點查找
直接查找節點
document.getElementById(「idname」)
document.getElementsByTagName(「tagname」)
document.getElementsByName(「name」)
document.getElementsByClassName(「name」)
<div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); ////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length) </script> 局部查找
注意：設計到尋找元素，注意<script>標籤的位置！
導航節點屬性
'''
parentElement // 父節點標籤元素
children // 全部子標籤
firstElementChild // 第一個子標籤元素
lastElementChild // 最後一個子標籤元素
nextElementtSibling // 下一個兄弟標籤元素
previousElementSibling // 上一個兄弟標籤元素
'''
注意，js中沒有辦法找到全部的兄弟標籤！
4）、節點操做
建立節點：
createElement(標籤名) ：建立一個指定名稱的元素。
例：val tag=document.createElement("input");
tag.setAttribute('type','text');
添加節點：
追加一個子節點（做爲最後的子節點）
somenode.appendChild(newnode)
把增長的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點);
刪除節點：
removeChild()：得到要刪除的元素，經過父元素調用刪除
替換節點：
somenode.replaceChild(newnode, 某個節點);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ height: 2000px; } .shade{ position: fixed; top:0; bottom: 0; left:0; right: 0; background-color: darkgrey; opacity: 0.4; } .model{ position: fixed; top:100px; left: 300px; width: 400px; height: 250px; background-color: white; } .hide{ display: none; } </style> <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div class="back"> <button class="show">添加學員</button> <table border="1"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>班級</th> <th>操做</th> </tr> </thead> <tbody id="tbody"> <tr> <td>謝文明</td> <td>23</td> <td>18</td> <td> <button class="edit">編輯</button> <button class="del">刪除</button> </td> </tr> <tr class="t1"> <td>丫丫</td> <td>18</td> <td>18</td> <td class="yangben"> <button class="edit">編輯</button> <button class="del">刪除</button> </td> </tr> </tbody> </table> </div> <div class="shade hide"></div> <div class="model hide"> <form action=""> <p>姓名<input type="text" class="item"></p> <p>年齡<input type="text" class="item"></p> <p>班級<input type="text" class="item"></p> <p> <input type="button" value="提交" class="addBtn"> <input type="button" value="取消" class="cancel"> </p> </form> </div> <script> function foo() { ele_shade.classList.add("hide"); ele_model.classList.add("hide") } // model對話框 var ele=document.getElementsByClassName("show")[0]; var ele_cancel=document.getElementsByClassName("cancel")[0]; var ele_shade=document.getElementsByClassName("shade")[0]; var ele_model=document.getElementsByClassName("model")[0]; ele.onclick=function () { ele_shade.classList.remove("hide"); ele_model.classList.remove("hide") }; ele_shade.onclick=function () { foo() }; // 刪除 var eles_del=document.getElementsByClassName("del"); var ele_tbody=document.getElementById("tbody"); for (var i=0;i<eles_del.length;i++){ eles_del[i].onclick=function () { // 父節點.removeChild(子節點) console.log(this.parentElement.parentElement); // 父節點 : ele_tbody // 子節點 : this.parentElement.parentElement ele_tbody.removeChild(this.parentElement.parentElement); } }; // 添加事件 var ele_add=document.getElementsByClassName("addBtn")[0]; ele_add.onclick=function () { var eles_input=ele_model.getElementsByClassName("item"); // var ele_tr=document.createElement("tr"); // <tr></tr> // for(var i=0;i<eles_input.length;i++){ // // eles_input[i].value // // var ele_td=document.createElement("td"); // <td></td> // ele_td.innerHTML=eles_input[i].value; // <td></td> // // ele_tr.appendChild(ele_td) // // } // // // // var ele_td_yangben=document.getElementsByClassName("yangben")[0].cloneNode(true) // console.log(ele_td_yangben); // // ele_tr.appendChild(ele_td_yangben); // console.log(ele_tr); // 思路2： var arr=[]; for(var i=0;i<eles_input.length;i++){ arr.push(eles_input[i].value) } console.log(arr); console.log(ele_tbody.innerHTML); s='<tr class="t1"> <td>丫丫</td> <td>18</td> <td>18</td> <td class="yangben"> <button class="edit">編輯</button> <button class="del">刪除</button> </td></tr>' ele_tbody.appendChild(s); // foo();// 隱藏模態對話框 }; </script> </body> </html>
5）、節點屬性操做：
- 獲取文本節點的值：innerText innerHTML。
- attribute操做
elementNode.setAttribute(name,value) elementNode.getAttribute(屬性名) <-------------->elementNode.屬性名(DHTML) elementNode.removeAttribute(「屬性名」);
- value獲取當前選中的value值
一、input
二、select （selectedIndex）
三、testarea
- innerHTML給節點添加html代碼：
該方法不是w3c的標準，可是主流瀏覽器支持
tag.innerHTML = 「<p>要顯示內容</p>」；
- 關於class的操做：
elementNode.className
elementNode.classList.add
elementNode.classList.remove
- 改變CSS樣式：
<p id="p2">Hello world!</p> document.getElementById("p2").style.color="blue"; .style.fontSize=48px
三、DOM Event（事件）
1）、事件類型
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onfocus 元素得到焦點。 練習：輸入框
onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。
onmouseleave 鼠標從元素離開
onselect 文本被選中。
onsubmit 確認按鈕被點擊。
2）、綁定事件方式
方式1：
<div id="div" onclick="foo(this)">點我呀</div> <script> function foo(self){ // 形參不能是this; console.log("點你大爺!"); console.log(self); } </script>
方式2：
<p id="abc">試一試!</p> <script> var ele=document.getElementById("abc"); ele.onclick=function(){ console.log("ok"); console.log(this); // this直接用 }; </script>
3）、事件介紹
1. onload：
onload屬性開發中只給body元素加，這個屬性的觸發標誌着頁面內容被加載完成，應用場景：當有些事情咱們但願頁面加載完馬上執行，那麼可使用該事件屬性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* window.onload=function(){ var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; }; */ function fun() { var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; } </script> </head> <body onload="fun()"> <p id="ppp">hello p</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function () { var ele=document.getElementsByClassName("c1")[0]; alert(ele) } ; </script> </head> <body> <div class="c1">DIV</div> </body> </html>
2. onsubmit：
當表單在提交時觸發，該屬性也只能給form元素使用，應用場景：在表單提交前驗證用戶輸入是否正確，若是驗證失敗，在該方法中咱們應該阻止表單的提交。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ //阻止表單提交方式1(). //onsubmit 命名的事件函數,能夠接受返回值. 其中返回false表示攔截表單提交.其餘爲放行. var ele=document.getElementById("form"); ele.onsubmit=function(event) { // alert("驗證失敗 表單不會提交!"); // return false; // 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動做。 alert("驗證失敗 表單不會提交!"); event.preventDefault(); } }; </script> </head> <body> <form id="form"> <input type="text"/> <input type="submit" value="點我!" /> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="form"> <p>用戶名<input type="text" name="user"></p> <input type="submit"> </form> <script> var ele_form=document.getElementById("form"); ele_form.onsubmit=function (e) { var inp=document.getElementsByName("user")[0]; var username=inp.value; alert(username); if (username.length>12 || username.length<5) { // 阻止默認事件 //return false; // 阻止默認事件 e.preventDefault() } } </script> </body> </html>
3. 事件傳播：
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;"> <div id="abc_2" style="border:1px solid red;width:200px;height:200px;"> </div> </div> <script type="text/javascript"> document.getElementById("abc_1").onclick=function(){ alert('111'); }; document.getElementById("abc_2").onclick=function(event){ alert('222'); event.stopPropagation(); //阻止事件向外層div傳播. } </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 200px; height: 200px; background-color: #2459a2; } .inner{ width: 100px; height: 100px; background-color: goldenrod; } </style> </head> <body> <div class="outer"> <div class="inner"> </div> </div> <script> var outer=document.getElementsByClassName("outer")[0]; var inner=document.getElementsByClassName("inner")[0]; outer.onclick=function (e) { alert(1234) }; inner.onclick=function (e2) { alert(888); // 阻止事件傳播 e2.stopPropagation() } </script> </body> </html>
4. onselect：
<input type="text"> <script> var ele=document.getElementsByTagName("input")[0]; ele.onselect=function(){ alert(123); } </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="pro" id="s1"> <option>請選擇省份</option> <option value="111">河北省</option> <option value="222">河南省</option> <option value="333">東北省</option> </select> <select name="pro" id="c1"> <option>請選擇城市</option> </select> <textarea id="t1"> </textarea> <script> var ele_select=document.getElementById("s1"); ele_select.onchange=function () { console.log(ele_select.value) } </script> </body> </html>
地方的反
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="pro" id="s1"> <option>請選擇省份</option> <option value="111">河北省</option> <option value="222">河南省</option> <option value="333">東北省</option> </select> <select name="pro" id="c1"> <option>請選擇城市</option> </select> <textarea id="t1"> </textarea> <script> var ele_select=document.getElementById("s1"); ele_select.onchange=function () { console.log(ele_select.value) } </script> </body> </html
5. onchange：
<select name="" id=""> <option value="">111</option> <option value="">222</option> <option value="">333</option> </select> <script> var ele=document.getElementsByTagName("select")[0]; ele.onchange=function(){ alert(123); } </script>
hyhj
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="pro" id="s1"> <option>請選擇省份</option> <option value="111">河北省</option> <option value="222">河南省</option> <option value="333">東北省</option> </select> <select name="pro" id="c1"> <option>請選擇城市</option> </select> <textarea id="t1"> </textarea> <script> var ele_select=document.getElementById("s1"); ele_select.onchange=function () { console.log(ele_select.value) } </script> </body> </html>
6. onkeydown：
Event對象：Event對象表明事件的狀態，好比事件在其中發生的元素，鍵盤按鍵的狀態，鼠標的位置。鼠標按鈕的狀態。
事件一般與函數結合使用，函數不會在事件發生前被執行，event對象在事件發生時系統已經建立好了，而且會在事件函數被調用時給事件函數，咱們得到僅僅須要接收一下便可，好比onkeydown，咱們想知道哪一個鍵被按下了，須要問下event對象的屬性，這裏就是KeyCode。
<input type="text" id="t1"/> <script type="text/javascript"> var ele=document.getElementById("t1"); ele.onkeydown=function(e){ e=e||window.event; var keynum=e.keyCode; var keychar=String.fromCharCode(keynum); alert(keynum+'----->'+keychar); }; </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="inp"> <script> var ele=document.getElementById("inp"); ele.onselect=function () { alert(123) }; // ele.onkeydown=function (e) { // e 事件對象： 存的是與觸發事件相關的具體信息 // console.log(e.keyCode); // // if(e.keyCode==13){ // alert(123) // } // } </script> </body> </html>
7. onmouseout與onmouseleave事件的區別：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ width: 300px; } #title{ cursor: pointer; background: #ccc; } #list{ display: none; background:#fff; } #list div{ line-height: 50px; } #list .item1{ background-color: green; } #list .item2{ background-color: rebeccapurple; } #list .item3{ background-color: lemonchiffon; } </style> </head> <body> <p>先看下使用mouseout的效果:</p> <div id="container"> <div id="title">使用了mouseout事件↓</div> <div id="list"> <div class="item1">第一行</div> <div class="item2">第二行</div> <div class="item3">第三行</div> </div> </div> <script> // 1.不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。 // 2.只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。 var container=document.getElementById("container"); var title=document.getElementById("title"); var list=document.getElementById("list"); title.onmouseover=function(){ list.style.display="block"; }; container.onmouseleave=function(){ // 改成mouseout試一下 list.style.display="none"; }; /* 由於mouseout事件是會冒泡的，也就是onmouseout事件可能被同時綁定到了container的子元素title和list 上，因此鼠標移出每一個子元素時也都會觸發咱們的list.style.display="none"; */ /* 思考: if: list.onmouseout=function(){ list.style.display="none"; }; 爲何移出第一行時,整個list會被隱藏? 實際上是一樣的道理,onmouseout事件被同時綁定到list和它的三個子元素item上,因此離開任何一個 子元素一樣會觸發list.style.display="none"; */ </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 200px; height: 200px; background-color: darkgreen; } </style> </head> <body> <div class="c1"></div> <script> var ele=document.getElementsByClassName("c1")[0] // 鼠標懸浮觸發事件 ele.onmouseover=function () { console.log(1111) }; // 鼠標離開區域觸發事件 ele.onmouseleave=function () { console.log(777) } </script> </body> </html>
6、示例練習
一、左側菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .left{ width: 20%; height: 500px; float: left; background-color: wheat; } .right{ float: left; width: 80%; height: 500px; background-color: lightgray; } .title{ text-align: center; line-height: 40px; background-color: #0e90d2; color: white; } .item{ padding: 10px; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="left"> <div class="item"> <div class="title">菜單一</div> <ul class="con"> <li>111</li> <li>111</li> <li>111</li> </ul> </div> <div class="item"> <div class="title">菜單二</div> <ul class="con hide"> <li>222</li> <li>222</li> <li>222</li> </ul> </div> <div class="item"> <div class="title">菜單三</div> <ul class="con hide"> <li>333</li> <li>333</li> <li>333</li> </ul> </div> </div> <div class="right"></div> </div> <script> var eles_title=document.getElementsByClassName("title"); for (var i=0;i<eles_title.length;i++){ eles_title[i].onclick=function(){ this.nextElementSibling.classList.remove("hide"); for(var j=0;j<eles_title.length;j++){ if (eles_title[j]!=this){ eles_title[j].nextElementSibling.classList.add("hide") } } } } </script> </body> </html>
二、搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function Focus(){ var input=document.getElementById("ID1"); if (input.value=="請輸入用戶名"){ input.value=""; } } function Blurs(){ var ele=document.getElementById("ID1"); var val=ele.value; if(!val.trim()){ ele.value="請輸入用戶名"; } } </script> </head> <body> <input id="ID1" type="text" value="請輸入用戶名" onblur="Blurs()" onfocus="Focus()"> </body> </html>
三、模擬對話框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ background-color: white; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: grey; opacity: 0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: wheat; } </style> </head> <body> <div class="back"> <input class="c" type="button" value="click"> </div> <div class="shade hide handles"></div> <div class="models hide handles"> <input class="c" type="button" value="cancel"> </div> <script> var eles=document.getElementsByClassName("c"); var handles=document.getElementsByClassName("handles"); for(var i=0;i<eles.length;i++){ eles[i].onclick=function(){ if(this.value=="click"){ for(var j=0;j<handles.length;j++){ handles[j].classList.remove("hide"); } } else { for(var j=0;j<handles.length;j++){ handles[j].classList.add("hide"); } } } } </script> </body> </html>
四、表格案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="select_all">全選</button> <button class="select_reverse">反選</button> <button class="cancel">取消</button> <hr> <table class="server_table" border="2px" cellspacing="2px"> <tr> <td><input type="checkbox" class="item"></td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>333</td> <td>333</td> <td>333</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>444</td> <td>444</td> <td>444</td> </tr> </table> <script> /* var ele_all=document.getElementsByClassName("select_all")[0]; var ele_reverse=document.getElementsByClassName("select_reverse")[0]; var ele_cancel=document.getElementsByClassName("cancel")[0]; var input_arr=document.getElementsByClassName("item"); ele_all.onclick=function(){ for(var i=0;i<input_arr.length;i++){ console.log(input_arr[i]); var input=input_arr[i]; input.checked=true; } }; ele_cancel.onclick=function(){ for(var i=0;i<input_arr.length;i++){ console.log(input_arr[i]); var input=input_arr[i]; input.checked=false; } }; ele_reverse.onclick=function(){ for(var i=0;i<input_arr.length;i++){ console.log(input_arr[i]); var input=input_arr[i]; if(input.checked){ input.checked=false; } else{ input.checked=true; } } }; */ var input_arr=document.getElementsByClassName("item"); var button_arr=document.getElementsByTagName("button"); for(var i=0;i<button_arr.length;i++){ button_arr[i].onclick=function(){ for (var j=0;j<input_arr.length;j++){ var inp=input_arr[j] if(this.innerText=="全選"){ console.log("ok"); inp.checked=true; } else if(this.innerText=="取消"){ inp.checked=false; } else { if(inp.checked){ inp.checked=false; }else { inp.checked=true; } } } } } </script> </body> </html>
五、select移動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ margin: 0 auto; background-color: darkgray; width: 80%; height: 600px;margin-top: 30px; word-spacing: -5px; } #left{ display: inline-block; width: 100px ; height: 140px; background-color: wheat; text-align: center; } #choice{ display: inline-block; height: 140px; background-color: darkolivegreen; vertical-align: top; padding:0 5px; } #choice button{ margin-top: 20px; } #right{ display: inline-block; width: 100px ; height: 140px; background-color: wheat; text-align: center; line-height: 140px; } </style> </head> <body> <div class="outer"> <select multiple="multiple" size="5" id="left"> <option>紅樓夢</option> <option>西遊記</option> <option>水滸傳</option> <option>JinPingMei</option> <option>三國演義</option> </select> <span id="choice"> <button id="choose_move"> > </button><br> <button id="all_move"> >> </button> </span> <select multiple="multiple" size="10" id="right"> <option>放風箏的人</option> </select> </div> <script> var choose_move=document.getElementById("choose_move"); var all_move=document.getElementById("all_move"); var right=document.getElementById("right"); var left=document.getElementById("left"); var options=left.options; choose_move.onclick=function(){ for (var i=0; i<options.length;i++){ var option=options[i]; if(option.selected==true){ // var news=option.cloneNode(true); // console.log(news); right.appendChild(option); i--; } } }; all_move.onclick=function(){ for (var i=0; i<options.length;i++){ var option=options[i]; right.appendChild(option); i--; }; }; /* var buttons=document.getElementsByTagName("button"); for(var i=0;i<buttons.length;i++) { buttons[i].onclick = function () { for (var i = 0; i < options.length; i++) { var option = options[i]; if (this.innerText == ">") { if (option.selected == true) { // var news=option.cloneNode(true); // console.log(news); right.appendChild(option); i--; } } else { right.appendChild(option); i--; } } }; } */ </script> </body> </html>
六、二級聯動
<select id="province"> <option>請選擇省:</option> </select> <select id="city"> <option>請選擇市:</option> </select> <script> data={"河北省":["廊坊","邯鄲"],"北京":["朝陽區","海淀區"]}; var p=document.getElementById("province"); var c=document.getElementById("city"); for(var i in data){ var option_pro=document.createElement("option"); option_pro.innerHTML=i; p.appendChild(option_pro); } p.onchange=function(){ pro=(this.options[this.selectedIndex]).innerHTML; citys=data[pro]; c.options.length=0; for (var i in citys){ var option_city=document.createElement("option"); option_city.innerHTML=citys[i]; c.appendChild(option_city); } } </script>
七、跑馬燈與tab切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} body{ font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif; } h3{ text-align: center; color:darkcyan; margin-top: 30px; letter-spacing: 5px; } .box{ width: 1000px; margin:50px auto 0px; } #title{ line-height: 40px; background-color: rgb(247,247,247); font-size: 16px; font-weight: bold; color: rgb(102,102,102); } #title span{ float: left; width: 166px; text-align: center; } #title span:hover{ /*color: black;*/ cursor: pointer; } #content{ margin-top: 20px; } #content li{ width: 1050px; display: none; background-color: rgb(247,247,247); } #content li div{ width: 156px; margin-right: 14px; float: left; text-align: center; } #content li div a{ font-size: 14px; color: black; line-height: 14px; /* float: left;*/ display: inline-block; margin-top: 10px; } #content li a:hover{ color: #B70606; } #content li div span{ font-size: 16px; line-height: 16px; /*float: left;*/ display: block; color: rgb(102,102,102); margin-top: 10px; } #content img{ float: left; width: 155px; height: 250px; } #title .select{ background-color: #2459a2; color: white; border-radius: 10%; } #content .show{ display: block; } .show span{ color: red!important; font-size: 30px; } </style> </head> <body> <h3 id="wel">京東商城歡迎您</h3> <!-- direction="right up down left" --> <!-- behavior：滾動方式(包括3個值：scroll、slide、alternate) --> <!-- 說明：scroll：循環滾動，默認效果；slide：只滾動一次就中止；alternate：來回交替進行滾動。 --> <!-- scrollamount="5" 滾動速度 --> <marquee behavior="scroll" direction="right">歡迎您苑昊先生</marquee> <script> function test(){ var mywel = document.getElementById("wel"); var content = mywel.innerText; var f_content = content.charAt(0); var l_content = content.substring(1,content.length); var new_content = l_content + f_content; mywel.innerText = new_content; } // setInterval("test();", 500); </script> <div class="box"> <p id="title"> <span class="select">家用電器</span> <span>傢俱</span> <span>汽車</span> <span>食品</span> <span>女鞋</span> <span>醫療保健</span> </p> <ul id="content"> <li class="show"> <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容聲(Ronshen)冰箱</a><span>價格:5600</span></div> <div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣機"><a href="#">海爾洗衣機</a><span>價格:5400</span></div> <div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="電飯煲"><a href="#">福庫(CUCKOO)電飯煲</a><span>價格:3999</span></div> <div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能電視"><a href="#">三星智能電視</a><span>價格:8999</span></div> <div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="淨水器"><a href="#">淨水器</a><span>價格:1300</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空氣淨化器"><a href="#">空氣淨化器</a><span>價格:5300</span></div> </li> <li> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> </li> <li> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> </li> <li> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> </li> <li> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> </li> <li> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> </li> </ul> </div> <script> var title=document.getElementById('title'); var content=document.getElementById('content'); var category=title.getElementsByTagName('span'); var item=content.getElementsByTagName('li'); for (var i = 0; i < category.length; i++) { category[i].index=i; category[i].onclick=function(){ for (var j = 0; j < category.length; j++) { category[j].className=''; item[j].className=''; } this.className='select'; item[this.index].className='show'; } } </script> </body> </html>
7、jQuery
詳細地址：http://www.cnblogs.com/fanglingen/articles/7739584.html
相關文章
- 1. 前端 | 3. JavaScript基礎
- 2. 前端 之 JavaScript基礎
- 3. 前端基礎之JavaScript
- 4. 前端基礎之javaScript
- 5. 前端基礎之Javascript
- 6. 前端基礎JavaScript
- 7. 前端 -- JavaScript基礎
- 8. 前端基礎---JavaScript
- 9. 前端基礎-Javascript
- 10. 前端第三篇---前端基礎之JavaScript
- 更多相關文章...
- • R 基礎運算 - R 語言教程
- • R 語言基礎 - R 語言教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章