版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/qq287151402/article/details/56682270
一 javascript基礎
1 javascript 的簡介
* 是基於對象和事件驅動的語言，應用於客戶端。
- 基於對象：
** 提供好了很多對象，可以直接拿過來使用
- 事件驅動：
** html 做網站靜態效果，javascript 動態效果
- 客戶端：專門指的是瀏覽器
* 特點：
（1） 交互性（信息的動態交互）
（2） 安全性（不可以直接訪問本地硬盤）
（3） 跨平臺性（只要是可以解析 js 的瀏覽器都可以執行，和平臺無關）
* javascript 和 java 的區別：（雷鋒和雷鋒塔）
（1） javascript 是基於對象，java 面向對象
（2） javascript 是弱類型語言，java 是強類型語言
- 比如 java 裏面不可以 int i = “10”;
- js: var i = 10; var m = “10”;都可以
（3） javascript 只需解析就可以執行，而 java 需要先編譯成字節碼文件，
再執行。
* javascript 的組成
三部分組成：
（1）ECMAScript
a) ECMA: 歐洲計算機協會
b) 由 ECMA 組織制定 js 的語法、語句……
（2）BOM
a) browser object model ：瀏覽器對象模型
（3）DOM
a) document object model ：文檔對象模型
2 js 和 html 的結合方式（兩種）
第一種：
- 使用一個標籤<script type=”text/javascript”> js 代碼; </script>
第二種：
- 使用 script 標籤，引入一個外部的 js 文件
*** 創建一個 js 文件，寫 js 代碼，然後導入
- <script type=”text/javascript” src=”1.js”></script>
** 使用第二種方式的時候，就不要在 script 標籤裏寫代碼了，不會執行。
3 js 的原始類型和聲明變量
** java 的基本數據類型 byte short int long float double char boolean
** 定義變量 都使用關鍵字 var
** js 的原始類型（五個）
- string：字符串
*** var str = “abc”;
- number: 數字類型
***var m=123;
- boolean: true 和 false
*** var flag = true;
- null
*** var date = new Date();
*** 獲取對象的引用，null 表示對象引用爲空，所有對象的引用
也是 object
- undefined
*** 定義一個變量，沒有賦值
*** var aa;
** typeof(); 查看當前變量的數據類型
4 js 的語句
- java 裏的語句：
** if 判斷
** switch 語句
** 循環 for while do-while
- js 裏面的這些語句
** if 判斷語句
條件如果直接寫=號，那就是賦值操作。
** switch 語句
與 java 中的一樣。
** for 循環也和 java 中的一樣，但要注意定義變量時使用 var，不要
寫成 java 的 int。
** i++ ++i 和 java 裏面一樣
5 js 的運算符
** 運算符和 java 裏一樣
** js 裏面不區分整數和小數
var j = 123;
Alert(j/1000*1000);
在 java 裏得到結果是 0；在 js 裏得到結果是 123.
** 字符串的相加和相減的操作
var str = “123”;
** 如果相加的時候，做的是字符串連接
** 如果相減，做的事相減的運算
* 提示 NaN：表示不是一個數字
** boolean 類型也可以操作
***如果設置成 true，相當於這個值是 1
***如果設置成 false，相當於這個值是 0
** ==和===區別
** 做判斷
** ==比較的只是值
** === 比較的是值和類型
** 引入知識
直接向頁面輸出的語句（可以把內容顯示在頁面上）
* document.write(“aaa”);
document.write(“<hr/>”);
** 可以向頁面輸出變量，固定值和 html 代碼
6 js 的數組
* 定義方式（三種）
第一種： var arr = [1,2,3] ; var arr = [1,”4”,true] ;
第二種： 使用內置對象 Array 對象
var arr1 =new Array(5) ;//定義一個數組，長度是 5
arr1[0] = “1”;
第三種： 使用內置對象 Array
var arr2 = new Array(3,4,5) ; //定義一個數組，元素是 3，4，5
* length：獲取數組長度
* 數組可以存放不同數據類型的數據
7 js 的函數
*在 js 裏面定義函數（方法）有三種方式
** 第一種方式：
*** 使用到一個關鍵字 function
*** function 方法名（參數列表）{
方法體；
返回值可有可無（根據實際需要）
}
** 使用第一種方式創建函數：
function test(){
alert(“qqq”);
}
//調用方法
//test();
//定義一個有參數的方法 實現兩個數相加
function add1(a,b){
var sum = a+b;
alert(sum);
}
//add1(2,3);
//有返回值的效果
function add2(a,b,c){
var sum1 = a+b+c;
return sum1;
}
alert( add2(3,4,5) );
** 第二種方式：
*** 匿名函數
var add = function(參數列表){
方法體和返回值;
}
** 第二種方式創建函數：
var add3 = function(m,n){
alert(m+n);
}
//調用方法
add3(5,6);
** 第三種方式：（用的少，瞭解）
*** 動態函數
*** 使用到 js 裏面的一個內置對象 Function
var add = new Function (“參數列表”,”方法體和返回值”);
8 js 的全局變量和局部變量
全局變量：在 script 標籤裏面定義一個變量，這個變量在頁面中 js 部分
都可以使用
- 可以在方法外部使用，在方法內部使用，在另一個 script 標籤使用
局部變量：在方法內部定義一個變量，只能在方法內部使用
9 script 標籤放置的位置
建議把 script 標籤放到</body>後面
10 js 的 String 對象
** 創建 String 對象
***var str = “abc”;
** 方法和屬性（詳見 w3school）
***屬性 length: 字符串長度
***方法
（1）與 html 相關的方法
- bold():加粗
- fontcolor():設置字符串顏色
- fontsize():設置字體的大小
- link():將字符串顯示成超鏈接
*** str4.link(“hello.html”)
- sub() sup():下標和上標
（2）與 java 相似的方法
- concat() : 連接字符串
- charAt() :返回指定位置的字符串。字符位置不存在，返
回空字符串
- indexOf() :返回字符串位置。字符不存在，返回-1
- split() : 切分字符串，成數組
- replace(): 替換字符串
- substr():從第幾位開始，向後截取幾位
- substring()：從第幾位開始，到第幾位結束，包左不包
右
11 js 的 Array 對象
** 方法（常用）
- concat()：數組的連接
- join() : 根據指定的字符分割數組。如 document.write( arr.join(“-”) );
- push() : 向數組末尾添加元素，返回數組的新的長度（如果添加一
個數組，那麼被添加的整個數組會被看作一個元素）
- pop() : 刪除最後一個元素，並返回刪除的那個元素
- reverse() : 顛倒數組中的元素的順序
12 js 的 Date 對象
** 在 java 裏面獲取當前時間
Date date = new Date();
//格式化
//toLocaleString(); 直接格式化爲中式表示法。
** js 裏面獲取當前時間
var date = new Date() ;
//轉換成習慣格式
Document.write( date.toLocaleString() );
**獲取當前年：getFullYear()
**獲取當前月：getMonth()
***返回的是 0-11 月，如果得到精確的值，加 1
*** var date1 = date.getMonth()+1;
**獲取當前的星期：getDay()
***返回的是 0-6.
***外國人，把星期日作爲一週的第一天，星期日返回的是 0，
而星期一
到星期六，返回的是 1-6
**獲取當前的日：getDate()
***返回當前的天 1-31
**獲取當前的小時：getHours()
**獲取當前的分鐘：getMinutes()
**獲取當前的秒：getSeconds()
**獲取毫秒數：getTime()
***返回的是 1970.01.01 至今的毫秒數
***應用場景：
***使用毫秒數處理緩存的結果
13 js 的 Math 對象
**數學的運算
**裏面的都是靜態方法，可以直接使用 Math.方法()
** ceil(x):向上舍入（進一法）
** floor(x):向下舍入
** round(x):四捨五入
** random():得到隨機數（僞隨機數）
- 得到 0-9 的隨機數
Math.random()*10
Math.floor(Math.random()*10)
14 js 的全局函數
* 由於不屬於任何一個對象，直接寫名稱使用。（要執行的內容寫在括號
裏面）
** eval() : 執行 js 代碼（如果字符串是一個 js 代碼，使用此方法直接執
行，也就是說，此方法會自動識別字符串裏的 js 方法並執行了）
*** var str = “alert(‘1234’);”;
alert(str);//輸出：alert(‘1234’);
eval(str);//輸出：1234
** encodeURI() :對字符進行編碼
decodeURI() :對字符進行解碼
encodeURIComponent() 和 decodeURIComponent() 跟上面倆功能一
樣，只是少了幾個不編碼字符。
** isNaN() : 判斷當前字符串是否是數字（NaN 的意思是：不是數字）
-- var str2 = “aaaa”;
alert( isNaN(str2) );
*** 如果是數字，返回 false
*** 如果不是數字，返回 true
** parseInt() : 類型轉換
*** var str3 = “123”;
document.write( parseInt(str3)+1 );//輸出：124
15 js
的函數的重載
** js 的重載是否存在？ 不存在
** 調用最後一個方法
** 把傳遞的參數保存到了 arguments 數組裏面
** js 裏面是否存在重載？（面試題目）
（1）js 裏面不存在重載。
（2）但是可以通過其他方式模擬重載的效果（通過 arguments
數組來實現）
*** function add(){
if(arguments.length==2){
return arguments[0]+arguments[1];
}
}
alert( add(1,2) );輸出 3
第二章 javascript的 bom對象
** bom：browser object model 瀏覽器對象模型
** 有哪些對象？
*** navigator: 獲取客戶機的信息（瀏覽器的信息）
- navigator.appName
- document.write(navigator.appName);//輸出：瀏覽器的名字
*** screen：獲取屏幕信息
- document.write(screen.width);//輸出寬度
document.write(screen.height);//輸出高度
*** location：請求 url 地址
- href 屬性
*** 獲取到請求的 url 地址
- document.write( location.href );
*** 設置 url 地址
- 頁面上安置一個按鈕，按鈕上綁定一個事件，當我點
擊這個按鈕，頁面可以跳轉到另外一個界面
- location.href = “hello.html”; //這是 function 裏的方法體
*** <input type=”button” value=”跳轉” onclick=” href1(); ”/>
- 鼠標點擊事件 onclick = “js 的方法; ”
*** history ：請求的 url 的歷史記錄
- 到訪問的上一個頁面
history.back() ;
history.go(-1) ;
- 到訪問的下一個頁面
history.forward() ;
history.go(1) ;
****window:
* 窗口對象
* 頂層對象（所有的 bom 對象都是在 window 裏面操作的）
** 方法
- window.alert() : 頁面彈出一個框，顯示內容
** 簡寫 alert()
- confirm() : 確認框
- var flag = window.confirm(“顯示的內容”);//返回 boolean
類型
- prompt() : 輸入的對話框
- window.prompt( “顯示的內容” , ”輸入框裏的默認值” ) ;
- open() : 打開一個新的窗口
** open(“打開的新窗口的 url 地址”, ” ”,”窗口特徵，比如
寬高”)
- 創建一個按鈕，點擊這個按鈕，打開一個新的窗口
- window.open(“hello.html”, “ “ ,”width=200,height=100”);
- close() : 關閉窗口（瀏覽器兼容性比較差）
- window.close();
- 做定時器
** setInterval ( “js 代碼”, 毫秒數)
- window.setInterval (“alert(‘123’);” , 3000);
//表示每三秒，執行一次 alert 方法
** setTimeout(“js 代碼”, 毫秒數)
- 表示在毫秒數之後執行，但是隻會執行一次
** clearInteval() : 清除 setInterval 設置的定時器
var id1 = setInterval (“alert(‘123’);”,3000);//通過setInterval
會有個返回值
clearInterval (id1);//清除它
** clearTimeout() : 清除 setTimeout 設置的定時器
var id2 = setTimeout (“alert(‘abc’),4000);
clearTimeout (id2);
第三章 javascript的 dom對象
* dom: document object model 文檔對象模型
** 文檔：超文本文檔（超文本標記文檔）html 、xml
** 對象：提供了屬性和方法
** 模型：使用屬性和方法操作超文本標記型文檔
*** 可以使用 js 裏面的 dom 裏面提供的對象，使用這些對象的
屬性和方法，對標記型文檔進行操作
*** 要對標記型文檔進行操作，首先需要對標記型文檔裏面的所
以內容封裝成對象
-- 需要把 html 裏面的標籤、屬性、文本內容都封裝成對象
*** 再解析標記型文檔，解析過程如下
根據 html 的層級結構，在內存中分配一個樹形結構，需要
把 html 中的每部分封裝成對象：
- document 對象：整個文檔
- element 對象：標籤對象
- 屬性對象
- 文本對象
-- Node 節點對象：這個對象是這些對象的父對象
*** 如果在對象裏面找不到想要的方法，就去 Node 對象裏找
** DOM 模型歷史：
DOM level 1：將 html 文檔封裝成對象。
DOM level 2：在 level 1 的基礎上添加新功能，如對事件和 css 樣
式的支持。
DOM level 3：支持 xml1.0 的一些新特性。
*DHTML：是很多技術的簡稱
** html：封裝數據
** css：屬性值設置樣式
** dom：操作 html 文檔（標記型文檔）
**javascript：專門指的是 js 的語法語句（ECMAScript）
1 document 對象
* 表示整個的文檔
** 常用方法
*** write()方法：
（1）向頁面輸出變量（值）
（2）向頁面輸出 html 代碼
*** getElementById() ;
- 通過 id 得到元素（標籤）
- //使用 getElementById 得到 input 標籤
var input1 = document.getElementById(“nameid”);//傳遞的參數是標籤裏
面的 id 值
//得到 input 裏面的 value 值
alert( input1.name ); // 標籤對象.屬性名稱
//向 input 裏面設置一個值 value
Input1.value = “bbb”;
*** getElementsByName()
- 通過標籤的 name 的屬性值得到標籤
- 返回的是一個集合（數組）
- //使用 getElementsByName 得到標籤
var inputs = document.getElementsByName(“name1”);//傳遞的參數是標籤裏
的 name 值
//alert(inputs.length);
//遍歷數組
for(var i = 0;i<inputs.length;i++){ //通過遍歷數組，得到每個標籤裏面的具體值
var input1 = inputs[i]; //每次循環得到 input 對象，賦值到 input1 裏面
alert(input1.value); //得到每個 input 標籤裏面的 value 值
}
*** getElementsByTagName(“標籤名稱”)
- 通過標籤名稱得到元素
- // 演示 getElementsByName
var inputs1 = document.getElementsByTagName(“input”); //傳遞的參數是
標籤名稱
// alert(inputs1.length);
//遍歷數組，得到每個 input 標籤
for(var m=0;m<inputs1.length;m++){
//得到每個 input 標籤
var input1 = inputs1(m);
//得到 value 值
alert(input1.value);
}
2 document 相關案例的補充方法：
document.createElement(“標籤名”) 創建相應標籤
document.createTextNode(“文本內容”) 創建文本
要添加的.appendChild(被添加的對象) 添加子對象
3 元素對象（element 對象）
** 要操作 element 對象，首先必須要獲取到 element
- 使用 document 裏面相應的方法獲取
** 方法
*** 獲取屬性裏面的值
getAttribute(“屬性名稱”)
- var input1 = document.getElementById(“inputid”);
//alert(input1.value);
alert(input1.getAttribute(“value”));//此方法的優點在於，通過
雙引號，可以獲取關鍵字的值。
*** 設置屬性的值
nput1.setAttribute(“class”,”haha”);//前面是屬性名，後面是要
設的值（也可以寫成前面事件、後面方法）
*** 刪除屬性
input1.removeAttribute(“name”);
** 不能刪除 value
** 想要獲取標籤下面的子標籤
** 使用屬性 childNodes，但是這個屬性兼容性很差
** 獲 得 標 籤 下 面 子 標 籤 的 唯 一 有 效 方 法 ， 使 用
getElementByTagName 方法
//獲取 ul 下面的子標籤
//var lis = ulll.childNodes;
//alert( lis.length );
var lis = ulll.getElementsByTagName(“li”);
alert(lis.length);
4 Node 對象屬性
* nodeName
* nodeType
* nodeValue
* 使用 dom 解析 html 時候，需要 html 裏面的標籤，屬性和文本都封裝
成對象
* 標籤節點對應的值
nodeType: 1
nodeName：大寫標籤名稱 比如 SPAN
nodeValue:null
* 屬性節點對應的值
nodeType:2
nodeName: 屬性名稱
nodeValue: 屬性的值
* 文本節點對應的值
nodeType: 3
nodeName: #text
nodeValue: 文本內容
5 Node 對象屬性
* 父節點
- 如 ul 是 li 的父節點
- parentNode 得到父節點
* 子節點
- 如 li 是 ul 的子節點
- childNodes: 得到所有子節點，但是兼容性很差
- firstChild: 獲取第一個子節點
-//得到 ul
var ul1 = document.getElementById( “ulid” ) ;
//第一個子節點
var li1 = ul1.firstChild;
- lastChild: 獲取最後一個子節點
* 同輩節點
- nextSibling: 返回一個給定節點的下一個兄弟節點
- previousSiling: 返回一個給定節點的上一個兄弟節點
6 操作 DOM 節點樹
* 插入節點
** appendChild()
- 添加子節點到末尾
- 特點：類似於剪切粘貼的效果
** insertBefore( newNode, oldNode )
- 在某個節點之前插入一個新的節點
- 通過父節點插入
// 如 ul.insertBefore( li2,li3);
- 兩個參數
* 要插入的節點
* 在誰之前插入
- 插入一個節點，節點不存在，創建（標準的固定模式）
1、創建標籤
2、創建文本
3、把文本添加到標籤下面
// 沒有 insertAfter()方法
* 刪除節點
** removeChild()
- 通過父節點刪除，不能自己刪除自己
// 如 ul.removeChild( li2 );
* 替換節點
** replaceChild( newNode, oldNode )
- 不能自己替換自己，通過父節點替換（跟插入的操作相似）
- 兩個參數
** 第一個參數：新的節點（替換成的節點）
** 第二個參數：舊的節點（被替換的節點）
* cloneNode( boolean) : 複製節點
- 複製完後還是通過父節點去 appendChild()添加
- 如 var ul2 = ul1.cloneNote( true );
7 innerHTML 屬性
- 這個屬性不是 dom 的組成部分，但是大多數瀏覽器都支持
第一個作用：獲取文本內容
*** //獲取 span 標籤
var span1 = document.getElementById( “sid” );
alert( span1.innerHTML );
第二個作用：向標籤裏面設置內容（可以是 html 代碼）
*** //向 div 裏面設置內容<h1>AAA</h1>
//獲取到 div
var div1 = document.getElementById( “div1” );
//設置內容
div1.innerHTML = “<h1>AAA</h1>”;
*** 練習 ：向 div 裏添加一個表格
var tab = “<table>”;
tab += “</table>”;
//相當於 var tab = “<table></table>”;
div1.innerHTML = tab;
8 案例中的知識點：
* 複選框被選中： id.checked = true; （否則 false）
* 省市聯動：
*創建一個頁面，有兩個下拉選擇框
*在第一個下拉框裏面有一個事件：改變事件 onchange 事件
-方法 add(this.value);表示當前改變的 option 裏面的 value 值
寫這道題得到的教訓：
（不知爲何，這個 add 方法要加數字才行，如 add1(),不然顯示參數
錯誤）
（js 代碼要寫一層 alert 一層，不然寫完再調試有錯會累死人的）
（每層得到的值都要 var 一個新變量去接收，不然會出錯，自己還
看不出來）
*創建一個二維數組，存儲數據
* 每個數組中第一個元素是國家名稱，後面的元素是國家裏面的
城市
/* 1、遍歷二維數組
2、得到也是一個數組（國家對應關係）
3、拿到數組中的第一個值和傳遞過來的值作比較
4、如果相同，獲取到第一個值後面的元素
5、得到 city 的 select
6、添加過去（使用）appendChild 方法
- 創建 option（三步） */
注意：由於每次都要向 city 裏面添加 option，第二次添加，
會追加。
所以每次添加前，判斷一下 city 裏面是否有 option，如果有，
刪除
9 表單提交方式
* 使用 submit 提交
<form>
……
<input type=”submit”/>
</form>
* 使用 button 提交表單
- 代碼
//實現提交方法
function form1() {
//獲取 form
var form1 = document.getElementById( “form1” );
//設置 action
form1.action = “hello.html”;
//提交 form 表單
form1.submit();
}
* 使用超鏈接提交
- 代碼
<a href = “hello.html ? username = 123456”>使用超鏈接提交</a>
（問號後面是要提交的信息）
* onclick : 鼠標點擊事件
onchange :改變內容（一般和 select 一起使用）
onfocus:得到焦點
onblur:失去焦點
（比如 input 的文本輸入，設置這兩個方法，點擊輸入框，value=””，文
本框清空，點別的地方，value=”默認文字” ,文本框恢復顯示默認文本）
注意點：
1
js 中 的 方法 也 可以用 href 調用 ， 比如做 圖 片 輪播 案 例時， 出 現 ：
href=”javascript:chang(1)”
2
找父節點的小方法：
例如
var obj ;
obj.parentNode.removeChild( obj );
此外想獲取某些標籤都不需要用 id,
例如直接寫 document.body
3
這個字符串拼接時的引號是一大問題：
雙引號裏面是一般是單引號（這裏面可以再寫雙引號）
或者 \” 內容\” （然後內容裏再單引號，再往裏則雙引號）。
例如: onclick = \” 方法名( ‘ 字符串 ”+變量值+ ” ‘ ) \”
總之，要想在字符串裏拼入數值，引號得加到數值變色才行。
我覺得，在多層引號的情況下，一般都是單引號裏面是字符串，雙引號
裏面是數值