JavaScript學習---JavaScript深入學習
阿新 • • 發佈：2018-07-29
時間差 類型 返回 應用 技術 節點類 none abs 裏的
對象的概念
對象分類[3種]： ECMScript(JS自己的對象)， BOM(瀏覽器對象) DOM(文檔對象，操作HTML的)
11種內置對象: Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object
註意： JavaScript中除了Null和undefined以外，其余均為對象
ECMScript對象
Object對象：ECMAScript 中的所有對象都由這個對象繼承而來；Object 對象中的所有屬性和方法都會出現在其他對象中
ToString() : 返回對象的原始字符串表示。 ValueOf() : 返回最適合該對象的原始值。對於許多對象，該方法返回的值都與 ToString() 的返回值相同。
String對象
創建字符串：
方式一： var m = ‘hello world‘ //調用字符串的對象屬性或方法時自動創建對象，用完就丟棄
方式二： var n = new String(‘hello world‘) //new 創建了一個String對象 n,全局有效
alert(n)
註意： 方式一在調用字符串對象或方法的時候自動創建對象，用完就丟
方式二采用new創建字符串對象str1，全局有效
字符串方法：
var str1="hello World";
// 字符屬性
document.write(str1.length); // 字符長度：11
// 字符切割
document.write(str1.substr(1,6)) // ello w, 包括空格，這裏的數字是數組下標[0-10]
// 循環打印
//for(i in str1){ alert(i+‘-------->‘+str1[i]) }
// 編排方法
document.write(str1.italics()); // 設定了<I>斜體字</I>
document.write(str1.bold()); // 設定了<B>字體加粗</B>
document.write(str1.anchor(‘hhh‘)); // 設定了一個<a name=‘hhh‘>標簽</a>
// 大小寫轉換
document.write(str1.toUpperCase()) // 大寫 HELLO WORLD
document.write(str1.toLowerCase()) // 小寫 hello world
//獲取指定位置的字符
document.write(str1.charAt(0)) // 打印 :h
// 取回字符編碼
document.write(str1.charCodeAt(3)) // 返回ASCII 108
// 找到指定字符串的位置，找不到報 -1
console.log(str1.indexOf(‘l‘)) // 2
console.log(str1.lastIndexOf(‘l‘)) // 9
// match匹配符合的查詢標準，返回一個數組
document.write(str1.match(‘l‘)[0]) // 返回一個匹配所有的屬組
// search匹配符合的查詢標準，返回下標
document.write(str1.search(‘h‘)) // 返回h的下標： 0
// 字符串的替換
document.write(str1.replace(‘ll‘,‘XX‘)) //heXXo World
// 字符串的拼接
document.write(str1.concat(‘2017‘)) //hello World2017
// 字符串的切割
console.log(str1.split(‘l‘)) //返回一個數組 ["he", "", "o Wor", "d"]
// 字符串截取
console.log(str1.substring(2,7)) //llo W 左閉右開型
console.log(str1.substr(2,5)) //llo W 取出5個值，從下標2開始Array對象
創建數組：
// 創建方式一： 直接創建數組
var arr=[1, 2, 3, 4, 5];
// 創建方式二： 利用Array創建，參數可以是任何類型，也可以指定長度
//new Array(); // 創建數組時允許指定元素個數也可以不指定元素個數。
//new Array(size);//if 1個參數且為數字,即代表size,not content
//Array數組是可變長度的
var arr1 = new Array(); //不指定元素個數，自己指定元素內容
arr1[0]=‘hello‘;
arr1[1]=‘world‘
document.write(arr1.length) // 2
document.write(arr1) // hello world
var arr2=new Array(1, 2, 3, 4); //初始化函數的時候直接函數賦值，指定函數內容
document.write(arr2); //打印： 1, 2, 3, 4
document.write(arr2.length); // 4
var arr3 = new Array(2) //初始化函數的時候指定了函數的長度
arr3[0]=‘hello3‘;
arr3[1]=‘world3‘;
arr3[5]=‘2018‘; // 雖然已結超過了指定的長度，但是JS是可變長度的，現開辟了6個空間
document.write(arr3.length) // 6
創建二維數組：
// 創建方式一： 直接二維創建數組,數組中創建數組即可
var arr=[1, 2,[3, 4, 5]];
document.write(arr.length) // 長度3
document.write(arr[2][1]) // 4
// 創建方式二：利用Array函數
var c = new Array(3);
for (var i=0; i<c.length; i++){
c[i] = new Array(2);
}
c[0][0]=‘hello‘;
c[0][1]=‘world‘;
document.write(c[0][0]) //hello
document.write(c[0][1]) //world
數組對象的屬性：
join方法：將數組中的字符串拼接成一個字符串【註意JS是在數組內提供join，Py是字符串的join方法】
var s = [‘hello‘,‘world‘, ‘2018‘].join(‘---‘);
document.write(s); // hello---world---2018
棧操作[先進後出] pop/push 操作隊列尾部
var arr = [1, 4, 5];
arr.push(6); // 將數據壓入數組尾
document.write(arr); // 1,4,5,6
arr.pop(); // 取出數據
document.write(arr); // 1, 4, 5
棧操作[先進後出] shift/unshift 操作隊列的頭部,類似隊列[Queue]的的操作FIFO
var arr1 = [1, 4, 5];
arr1.shift(); //取出數據1
document.write(arr1); // 4,5
arr1.unshift(4) //頭部插入數字4
arr1.unshift(9) //頭部插入數字9
document.write(arr1) //9, 4, 4, 5
數組排序-- reverse: 反轉
var s = [1, 2, 5, 6,0]
document.write(s.reverse()) // 0,6,5,2,1
數組排序-- sort :將數組轉換成字符串,比較的是ASCII值的大小
var s = [1, 2, 5, 6,10]
document.write(s.sort()) // 0,10,1,2,5,6
數組排序[高級用法]-- sort內部有一個可以傳遞一個自定義的函數，根據返回值來進行排序 :將數組轉換成字符串,比較的是ASCII值的大小
var s = [1, 2, 5, 6,10]
document.write(s.sort(mysort)) // 1,2,5,6,10
function mysort(a,b) {
// return a-b //高級用法,也可以實現功能
if(a>b){
return 1
}else if(a<b){
return -1
}else {
return 0
}
concat: 數組拼接，不影響原來的屬組值
var s = [1, 2, 5, 6,0]
s.concat(1,2,3)
console.log(s)
console.log(s.concat(1,2,3))
concat: 數組拼接，不影響原來的屬組值
var s = [1, 2, 5, 6,0]
console.log(s.toString()) // 返回字符串類型
JS中數組的特性
//java中數組的特性, 規定是什麽類型的數組,就只能裝什麽類型.只有一種類型.
//js中的數組特性1: js中的數組可以裝任意類型,沒有任何限制.
//js中的數組特性2: js中的數組,長度是隨著下標變化的.用到多長就有多長.Function對象
// 創建方式一 [推薦]
function fun() {
alert(1,2,3)
}
fun() //調用函數
說明：
可以使用變量、常量或表達式作為函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
// 創建方式二，利用Function對象，註意是大寫；參數必須用引號，類似Java構造方法
var fun2 = new Function ("a", "b", "alert(a+b)");
fun2(1,3)
alert(fun2.length) // 打印參數的個數
說明： Function 類可以表示開發者定義的任何函數。
// 創建方式三， 匿名函數,將函數賦值給了變量fun3
var fun3 = function(){
alert(‘hello world‘)
}
fun3()
// 自執行函數, 類似於匿名函數的應用,節省空間，方便執行
(function (arg) {
console.log(arg)
})(‘hello world‘)
註意：js的函數加載執行與python不同，它是整體加載完才會執行，所以執行函數放在函數聲明上面或下面都可以
--------------------------------------------------------------------------------------------
例子說明：
例一；
function f() {
var b = 4; // b被定義為局部變量
b=3; // 局部變量b被重新賦值為3
}
alert(b) // 函數f()未被執行，且b是局部變量，所以報錯
例二：同Python
function a(a,b) {
alert(a+b)
}
var a=1
var b=2
a(a,b) / /函數名也是一個變量，所以這裏報錯了
例三：JS強大的容錯機制
function f(a,b) {
return a+b
}
var ret;
ret = f(3,2)
alert(ret)
var ret2;
ret2 = f(3,2,5) // JS強大的容錯機制,可以傳遞多個參數不報錯，但是內容還是5
alert(ret2)
alert(f.length)
例四: 函數的屬性和方法
function func1(a,b) {
return a+b
}
func1(1,2);
alert(func1.length); // 2
alert(func1(1,3)) // 4
alert(void(func1(1,2))) // undefined
說明：Function 對象也有與所有對象共享的 valueOf() 方法和 toString() 方法。
運算符void()作用：攔截方法的返回值
例五： arguments參數，返回頁面一個數組，裏面包含了傳遞給頁面的所有參數
function f() {
alert(arguments.length)//傳遞的參數的個數為 3
console.log(arguments) //Arguments(3) [3, 2, 5, callee: ?, Symbol(Symbol.iterator): ?]
var ret = 0
for (var i=0; i<arguments.length;i++){
ret += arguments[i] //取出數組的內容，進行累加操作
}
console.log(ret)
}
f(3,2,5)
例六：自己添加參數的限制操作
function f() {
if(arguments.length != 3){
throw Error("params error......")
}
}
f(3,2,5,5)
typeof: 只能判斷基本的數據類型
instanceof: 判斷對象是否屬於某個類
var s="hello"; var i=8; // typeof 只能判斷基本數據類型; alert(typeof (s)); // string alert(typeof (i)); // number var n=new Number(2); //實例化了一個Number類，產生了對象n alert(typeof (n)); //判斷結果是Object，顯然typeof判斷不了實例化的 alert( n instanceof String); //false alert( n instanceof Number); //true
Date對象
//創建Date對象，默認是當前時間 var date = new Date() alert(date) // Tue Jan 09 2018 18:57:41 GMT+0800 (中國標準時間) alert(date.toLocaleDateString()) //2018/1/9 alert(date.toLocaleString()) //2018/1/9 下午6:58:31 //創建Date對象，且指定特定的時間 var date1 = new Date(‘2017-12-31 18:00‘) alert(date1) // Sun Dec 31 2017 18:00:00 GMT+0800 (中國標準時間) alert(date1.toLocaleString()) //2017/12/31 下午6:00:00 // 創建Date對象,這裏設置了5秒 var date2 = new Date(5000) document.write(date2.toLocaleString()) // 1970/1/1 上午8:00:05, 因為東八區，所以時間+8的基礎上+5秒時間 document.write(date2.toUTCString()) // Thu, 01 Jan 1970 00:00:05 GMT 從Unix誕生的時間開始添加5秒時間
DATE的屬性 --獲取時間和日期
var date = new Date() // 默認初始化當前時間 date.getFullYear() // 獲取年份 date.getMonth() // 獲取月份, 月份範圍 [0-11] date.getDate() // 獲取天數 date.getDay() // 獲取星期數 星期範圍 [0-6] date.getHours() // 獲取小時 date.getMinutes() // 獲取分組 date.getSeconds() // 獲取秒數 date.getMilliseconds() // 獲取毫數
Date的屬性 -- 時間和日期的轉換
var date = new Date() // 返回本地時間與GMT的時間差，以分鐘為單位 date.getTimezoneOffset() // 480 = 8 * 60 // 返回國際標準時間字符串 alert(date.toUTCString()) //Tue, 09 Jan 2017 11:28:20 GMT // 返回本地格式時間字符串 alert(date.toLocaleString()) // 2017/1/9 下午7:31:07 // 返回累計毫秒數(從1970/1/1午夜到本地時間) alert(Date.parse(date)) // 1515497367000
正則表達式：
創建正則對象 // 創建正則對象 var re = new RegExp(‘\d+‘, ‘g‘) // 主要有2種模式，g：global, i:ignore alert(re.test(‘hello123world‘)) // alert只有2個結果，true和false // 創建正則對象2: 類似shell裏面的sed的使用 var re2 = /\d+/g alert(re2.test(‘hello123world‘))
String 中與正則結合的4個方法 var str = "hello world"; alert(str.match(/o/g)); // 查找字符串中 復合正則的 內容.返回一個數組 alert(str.search(/h/g)); // 0 查找字符串中符合正則表達式的內容位置，只返回第一個匹配的結果 alert(str.split(/o/g)); // 按照正則表達式對字符串進行切割. 返回數組; alert(str.replace(/o/g, "s")); // hells wsrld 對字符串按照正則進行替換.
Math對象：內置對象，可直接使用
// 取出(0-1)的隨機數 alert(Math.random()) //0.6496779923745719, 取值範圍： // 取出近似值，四舍五入的原則 alert(Math.round(2.8)) // 3 // 返回[0-100]的一個隨機數 alert(Math.round(Math.random()*100)) //返回冪值 alert(Math.pow(2,3)) // 8 //返回最大最小值 alert(Math.max(12,3)) // 12 alert(Math.min(12,3)) // 3 // 返回絕對值 alert(Math.abs(-11)) // 11
BOM對象：Js可以跟瀏覽器對號
BOM（瀏覽器對象模型），可以對瀏覽器窗口進行訪問和操作。使用 BOM，開發者可以移動窗口、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。
Window對象方法
所有瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不需要創建對象,直接使用即可.
交互模式： alert(), confirm(), prompt()，open(),close()
// 顯示帶有一段消息和一個確認按鈕的警告框。
alert(‘僅僅顯示一個告警‘);
//顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
var ret = confirm(‘確定要離開頁面嗎？‘); // 如果選擇確定按鈕，則返回true,否則返回false
// 顯示可提示用戶輸入的對話框。
var ret2 =prompt(‘請輸入用戶名和密碼？‘); // 如果輸入了信息，則返回輸入的內容，否則返回null
//open方法 打開和一個新的窗口 並 進入指定網址.參數1 : 網址.
//調用方式1
open("http://www.baidu.com");
//參數1 什麽都不填 就是打開一個新窗口. 參數2.填入新窗口的名字(一般可以不填). 參數3: 新打開窗口的參數.
open(‘‘,‘‘,‘width=200,resizable=no,height=100‘); // 新打開一個寬為200 高為100的窗口
//close方法 將當前文檔窗口關閉.
定時器實例：綜合setTimeout, setInterval的學習使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getTimd() {
var date_obj= new Date();
var year=date_obj.getFullYear();
var month=date_obj.getMonth()+1;
var day=date_obj.getDate();
var hour=date_obj.getHours();
var minute=date_obj.getMinutes();
var seconds=date_obj.getSeconds();
var week=date_obj.getDay();
return year+"年"+f(month)+"月"+f(day)+"日"+" "+f(hour)+": "+f(minute)+" :"+f(seconds)+" "+ num_week(week)
}
function f(num) {
if(num < 10){
return ‘0‘+ num;
}
return num;
}
function num_week(n) {
week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
return week[n]
}
function start() {
var stime = getTimd();
var ret = document.getElementById(‘clock‘);
ret.value = stime;
}
var ID; // 定時器的唯一標示
function interner_start() {
if(ID == undefined){ //防止多次點擊生成多個ID
start()
// 返回定時器的ID號碼，定時器的唯一標示
ID = setInterval(start,1000) // 傳入函數名即可，每間隔1秒執行一次
console.log(‘創建ID‘,ID);
}
}
function interner_stop() {
clearInterval(ID); // 傳入定時的ID名即可
console.log(‘清除ID‘,ID);
ID = undefined
}
function timeOut() {
alert(‘welcome to hhh System‘);
}
// timeOut的聯系
function hhh() {
var setTimeOutID = setTimeout(timeOut, 3000) // 只執行一次
// clearTimeout(setTimeOutID) 取消定時
}
</script>
</head>
<body>
<input type="text" value="請點擊開始..." style="width: 220px;" id="clock">
<input type="button" value="Begin" onclick="interner_start()">
<input type="button" value="End" onclick="interner_stop()">
<input type="button" value="TimeOut" onclick="hhh()">
</body>
</html>
history對象
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。
History 對象方法 back() 加載 history 列表中的前一個 URL。 forward() 加載 history 列表中的下一個 URL。 go() 加載 history 列表中的某個具體頁面。 length 返回瀏覽器歷史列表中的 URL 數量。
location對象
Location 對象包含有關當前 URL 的信息。
Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。
Location 對象方法
location.assign(URL)
location.reload()
location.replace(newURL) //註意與assign的區別
<input type="button" value="baidu" onclick="location.replace(‘https://www.baidu.com‘)">
<input type="button" value="reload" onclick="location.reload()">
<input type="button" value="href" onclick="location.href=‘https://www.baidu.com‘">
<input type="button" value="assign" onclick="location.assign(‘https://www.baidu.com‘, 4)">
DOM對象(DHTML)
根據W3C, DOM被分為 3 個不同的部分：
核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
-- XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法
HTML DOM - 針對 HTML 文檔的標準模型
-- HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法
Dom節點：
根據 HTML DOM 標準，HTML 文檔中的所有內容都是節點(NODE)：
整個文檔是一個文檔節點(document對象)
每個 HTML 元素是元素節點(element 對象)
HTML 元素內的文本是文本節點(text對象)
每個 HTML 屬性是屬性節點(attribute對象)
註釋是註釋節點(comment對象)
節點(自身)屬性:
attributes - 節點（元素）的屬性節點
nodeType – 節點類型
nodeValue – 節點值
nodeName – 節點名稱
innerHTML - 節點（元素）的文本值[元素的內容]
導航屬性:
parentNode - 節點（元素）的父節點 (推薦)
firstChild – 節點下第一個子元素
lastChild – 節點下最後一個子元素
childNodes - 節點（元素）的子節點
自身屬性和導航屬性的使用【不推薦】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div>hello </div>
<p> world </p>
</div>
<script>
var ele=document.getElementById("div1"); //根據ID獲取子節點元素
//自身屬性
console.log(ele.nodeName); // DIV
console.log(ele.nodeType); // 1
console.log(ele.nodeValue); // null
// 以下為導航屬性
var ele2=ele.firstChild; // 這裏獲取的是第一個子節點,非第一個子節點元素
alert(ele2.nodeName); // text -->因為有換行符，空格縮進等內容
var ele3=ele.lastChild; // 這裏獲取的是最後一個子節點,非最後一個子節點元素
alert(ele3.nodeName); // text -->因為有換行符，空格縮進等內容
var ele4=ele.childNodes;
alert(ele4.length); // 5， 除了div,p標簽外，還有3個text子節點
var ele5=ele.parentNode; // 獲取父節點
alert(ele5.nodeName); // BODY
<script>
</body>
</html>
自身屬性和導航屬性【推薦】
parentElement // 父節點標簽元素
children // 所有子標簽
firstElementChild // 第一個子標簽元素
lastElementChild // 最後一個子標簽元素
nextElementtSibling // 下一個兄弟標簽元素
previousElementSibling // 上一個兄弟標簽元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div>hello </div>
<p> world </p>
</div>
<a id="baidu" href="https://www.baidu.com"></a>
<script>
// 推薦方式,這些屬性是為了對文檔樹進行導航;
var ele=document.getElementById("div1"); // 根據ID獲取子節點元素
var ele_son=ele.firstElementChild; // 獲取子節點第一個元素
alert(ele_son.nodeName); // DIV, 獲取元素的名稱
var last_son=ele.lastElementChild; // 獲取子節點最後一個元素
alert(last_son.nodeName); // P, 獲取元素的名稱
var ele_sons=ele.children; // 獲取所有子元素,返回一個數組
alert(ele_sons.length); // 2, [DIV + P]
alert(ele_sons[0]); // [object HTMLDivElement]
// 打印子節點內容
for (var i=0;i<ele_sons.length;i++){
console.log(ele_sons[i])
}
var sib=ele.nextElementSibling; // 獲取下一個子節點
alert(sib.nodeName); // A
</script>
</body>
</html>
訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素：
頁面查找[全局查找] + 局部查找
頁面查找[全局查找]：
通過使用 getElementById() 方法
通過使用 getElementsByTagName() 方法
通過使用 getElementsByClassName() 方法
通過使用 getElementsByName() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div class="div2">hello </div>
<p class="div3"> world </p>
<div class="div4" name="hello"> world3 </div>
</div>
<script>
/*----------------------------根據全局查找內容---------------------------------------*/
// ID是唯一的，所以是Element，只取到一個值
var div1 = document.getElementById(‘div1‘);
console.log(div1);
// class是不唯一的，所以是Elements,返回一個數組
var div2 = document.getElementsByClassName("div2")[0]; // 註意是雙引號
console.log(div2);
alert(div2.innerHTML); // hello, 返回標簽的文本內容
alert(div2.nextElementSibling); // [object HTMLParagraphElement]
// Tag是不唯一的，所以是Elements,返回一個數組
var div3 = document.getElementsByTagName("p"); // 返回一個數組
console.log(div3[0].innerHTML); // world
// 通過Name
var me = document.getElementsByName("hello");
console.log(me); // NodeList [div.div4]
console.log(me[0].innerHTML) // world3
</script>
</body>
</html>
局部查找：
不能通過使用 getElementById() 方法 ，因為ID本來就是唯一的
不能通過使用 getElementsByName() 方法
通過使用 getElementsByTagName() 方法
通過使用 getElementsByClassName() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div class="div2">hello </div>
<div class="div3">
<p class="div4"> world </p>
<p id="id1">黃沙百戰穿金甲</p>
</div>
<p>2017</p>
</div>
<script>
/*----------------------------根據局部查找內容---------------------------------------*/
// 通過ClassName局部查找,返回一個數組
var me = document.getElementsByClassName("div3")[0]; //原本返回一個數組，這裏取第一個
var inner = me.getElementsByClassName("div4")[0]; //原本返回一個數組，這裏取第一個
console.log(inner.innerHTML) // world
// 通過ClassName局部查找,返回一個數組
var me0 = document.getElementsByClassName("div3")[0]; //原本返回一個數組，這裏取第一個
var inner0 = me0.getElementsByTagName("p");
console.log(inner0.length) // 2, 取出div3標簽下面的p標簽的個數
// 不支持通過getElementById局部查找,因為ID本來就是唯一的，不需要局部去取
var me1 = document.getElementsByClassName("div3")[0]; //原本返回一個數組，這裏取第一個
var inner1 = me1.getElementById("id1"); // 報錯，me1.getElementById is not a function,全局唯一，所以不能局部去取
console.log(inner1.innerHTML)
// 不支持通過getElementsByName局部查找[不常用]
var me2 = document.getElementsByName("id2"); //原本返回一個數組，這裏取第一個
var inner2 = me2.getElementsByName("id1")[0]; // 報錯，me2.getElementsByName is not a function
console.log(inner2.innerHTML)
</script>
</body>
</html>
HTML DOM Event(事件)
HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素獲得焦點。 //練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並松開。 onkeyup 某個鍵盤按鍵被松開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
輸入框實例：涉及ondblclick , onclick, onfocus, onblur,onsubmit 確認按鈕被點擊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p ondblclick=‘alert("666")‘>雙機顯示666</p>
<p onclick=‘alert("123")‘>單機顯示123</p>
請輸入:<input id="kw" name="inputStr" type="text" value="請輸入" onfocus="fun1()" onblur="fun2()"/>
<script>
var kw;
function fun1() {
kw = document.getElementById("kw");
kw.value=‘ ‘;
}
function fun2() {
var kw = document.getElementById("kw");
if(kw.value.trim().length==0){ // 利用trim去除空格
kw.value=‘請輸入 ‘
}
}
</script>
</body>
</html>
onchange():域的內容被改變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select onchange="fun1()">
<option>陜西</option>
<option>山西</option>
<option>河西</option>
</select>
<script>
function fun1() {
alert(‘hello‘)
}
</script>
</body>
</html>
onkeydown/onkeyup/onkeypress(): 按鍵的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--這裏表示按下press1後，按任意一個鍵盤就會顯示-->
<input type="button" value="press1" onkeydown="fun1(event)" onkeyup="fun0()">
<!--這裏表示按下press2後，長按任意一個鍵盤就會顯示-->
<input type="button" value="press2" onkeypress="fun2(event)">
<script>
function fun1(e) {
console.log(‘up‘)
}
function fun1(e) {
alert(e.keyCode)
}
function fun2(e) {
alert(‘hello world 2017‘)
}
</script>
</body>
</html>
onload() 一張頁面或一幅圖像完成加載。
onload 屬性開發中 只給 body元素加.
這個屬性的觸發 標誌著 頁面內容被加載完成.
應用場景: 當有些事情我們希望頁面加載完立刻執行,那麽可以使用該事件屬性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 方法一：
function fun1() {
var obj = document.getElementById(‘hello‘);
alert(obj.nodeName)
}
// 方法二[推薦]：此時不需要給body添加onload屬性了
// 一個窗口代表一個頁面，一個頁面加載完後執行後面這個
window.onload=function () {
var obj = document.getElementById(‘hello‘);
alert(obj.nodeName)
}
</script>
</head>
<!--整個文檔加載完後實現fun1()函數
如果不加函數的情況下在script裏面執行alert會報錯，因為文檔還沒加載完,找不到屬性-->
<body onload="fun1()">
<p id="hello">hello</p>
</body>
</html>
mouse屬性：鼠標操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>div { width: 300px; height: 100px; background-color: yellowgreen; } </style>
<script>
function down() {console.log(‘down‘); }
function over() {console.log(‘over‘); }
function move() {console.log(‘move‘); }
function out() {console.log(‘out‘) ; }
</script>
</head>
<body>
<div onmousedown="down()" onmousemove="move()" onmouseover="over()" onmouseout="out()">
hello world
</div>
</body>
</html>
綁定事件的2種方式：
-- 元素標簽內添加onclice()方法;
-- 通過elements找到元素對象後，執行onclick(),方便HTML和JS的代碼解耦，保證代碼的同一性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--綁定事件方法一： onclick="func()"-->
<p id="hello" onclick=‘alert("hello world")‘>黃沙百戰穿金甲</p>
<!--綁定事件方法二【推薦:JS和HTML代碼解耦】： 通過elements找到元素對象後執行onclick函數-->
<p id="world">不破樓蘭終不還</p>
<script>
var obj = document.getElementById("world");
obj.onclick = function () {
alert("hello world")
}
</script>
</body>
</html>
onsubmit():
是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.
表單取消的2種方式：
1.event.preventDefault
2.return false取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--取消form代碼提交方式一：通過event來取消表單的提交-->
<form onsubmit="check(event)">
<label for="username">用戶名 <input type="text" id = "username" name="username"></label>
<label for="submitt"><input type="submit" id = "submitt" name="password"></label>
</form><hr/>
<!--取消form代碼提交方式二：通過給瀏覽器返回false來取消表單提交-->
<form id="form1" onsubmit="return check2()"> <!--註意返回給瀏覽器一個false值來取消提交-->
<label for="username1">用戶名1<input type="text" id = "username1" name="username"></label>
<label for="submitt1"><input type="submit" id = "submitt1" name="password"></label>
</form><hr>
<script>
function check(event) {
event.preventDefault()// 取消表單內容的提交
}
function check2() {
alert("hello world");
return false;
}
}
</script>
</body>
</html>
event: 對象的狀態
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.
事件傳播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{ width: 300px; height: 200px; background-color: #84a42b; }
#div2{ height: 100px; width: 100px; background-color: rebeccapurple; }
</style>
</head>
<body>
<div id="div1" onclick="alert(‘div1‘)">
<div id="div2" onclick="func1(event)"></div>
</div>
<script>
function func1(e) {
alert(‘div2‘);
// 取消事件的延時擴展,否則點擊div2區域後,先後打印 div2 -> div1
e.stopPropagation(); // 取消事件的延伸，只打印div2
}
</script>
</body>
</html>
node的CURD：
增刪改查
增:
1.createElement(name)創建元素
2.appendChild();將元素添加
刪:
1.獲得要刪除的元素
2.獲得它的父元素
3.使用removeChild()方法刪除
改:
第一種方式:使用上面增和刪結合完成修改
第二種方式:
使用setAttribute();方法修改屬性
使用innerHTML屬性修改元素的內容
查: 使用之前介紹的方法.
修改 HTML DOM
1. 改變 HTML 內容
改變元素內容的最簡答的方法是使用 innerHTML ，innerText。
2. 改變 HTML 屬性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
3. 創建新的 HTML 元素
createElement(name)
4. 刪除已有的 HTML 元素
elementNode.removeChild(node)
5. 改變 CSS 樣式
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> #div1{ width: 300px; height: auto; background-color: #ffff5d; }</style>
<script>
num = 2016;
// document添加子屬性
function add() {
var fat = document.getElementById(‘div1‘);
var son = document.createElement(‘p‘);
son.innerHTML=‘<b style="color: blue">"hello world "</b>‘ + num; <!--這裏的innerHTML會解析html元素-->
// son.innerText=‘<b>"hello world "</b>‘ + num; <!--這裏的innerText只會添加文本元素-->
num++;
fat.appendChild(son);
}
// document刪除子屬性
function del() {
var fat = document.getElementById(‘div1‘);
last_son = fat.lastChild;
fat.removeChild(last_son);
num=2016;
}
</script>
</head>
<body>
<div id="div1">
<input type="button" value="add" onclick="add()">
<input type="button" value="del" onclick="del()">
</div>
</body>
</html>
改變 HTML 屬性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1"> hello world 2018</div>
<input type="button" id="add" value="add">
</body>
<script>
var father = document.getElementById("add");
father.onclick=function () {
var div2 = document.getElementById("div1");
var son = document.createElement("img");
// 動態導入
// son.setAttribute("src", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515685636654&di=990da250dc772bf9ec91749630fcb14f&imgtype=0&src=http%3A%2F%2Fmingxing.wubaiyi.com%2Fuploads%2Fallimg%2F111018%2F1HG2LX-0.jpg");
// 靜態導入
son.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515685636654&di=990da250dc772bf9ec91749630fcb14f&imgtype=0&src=http%3A%2F%2Fmingxing.wubaiyi.com%2Fuploads%2Fallimg%2F111018%2F1HG2LX-0.jpg"
div2.appendChild(son);
}
</script>
</html>
關於class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{ width: 300px; height: auto; background-color: #ffff5d;}
.bigger { font-size: 50px; color: blue;}
.small { font-size: 23px; color: #bc2fff;}
</style>
<script>
function big() {
var fath = document.getElementById(‘div1‘);
fath.classList.add("bigger")
}
function small() {
var fath = document.getElementById(‘div1‘);
fath.classList.remove("bigger")
fath.classList.add("small")
}
</script>
</head>
<body>
<div id="div1"> hello world 2018 </div>
<input type="button" value="A+" onclick="big()">
<input type="button" value="A-" onclick="small()">
</body>
</html>
偽協議：取消a標簽自身的功能
<a href="javascript:show()">百度</a> //執行show()方法
this代指著當前的一個標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--此時的瀏覽器頁面不作跳轉了,作用類似於onlick()-->
<a href="#XXX">百度</a> <!--瀏覽器url欄會多一個#XXX-->
<a href="javascript:show()">百度</a> <!--執行show()函數，返回顯示666-->
<a href="javascript:void(0)">百度2</a> <!--點擊不跳轉，不執行任何函數，不接收任何返回值-->
</body>
<script>
function show() {
return "666";
}
</script>
</html>
作用域
【更多參考】http://www.cnblogs.com/wupeiqi/p/5649402.html
1. if while等控制語句並沒有自己作用域；而函數是有自己的作用域的；
2.JS和JAVA一樣，會在函數加載完成後去執行代碼，所以變量名，函數名相同的會覆蓋
註意：Py是加載一行，執行一行代碼
<script>
//--------------------------------------- 作用域 ---------------------------------------
if(1==true) {s = 100;} console.log(s); // 100
//function f(){var ss=99;} console.log(ss); // 報錯，局部變量，ss is not defined
//function ff(){var sss=98;} ff(); console.log(sss); // 報錯，函數執行了，但是sss是局部變量; sss is not defined
function fff(){ssss=97;} console.log(ssss); // 報錯，函數未執行,全局變量未加載；ssss is not defined
function ffff(){sssss=96;} ffff(); console.log(sssss); // 96 全局變量
</script>
作用域，作用域鏈
- 作用域鏈在函數被解釋的過程中已經創建（函數做為作用域）
- 提前聲明
############### 1、JavaScript中以函數做為作用域 ##############
############### 2、JavaScript函數在被調用之前（解釋器解釋過程中）作用域鏈已經存在 ##############
############### 3、JavaScript 聲明提前 ##############
<script>
xo = ‘alex‘;
function f1(){
var xo = ‘eric‘;
function f2(){
console.log(xo);
}
var xo = ‘666‘;
return f2
}
var xxxxx = f1()
xxxxx() // 666
function func(){
var ox;
console.log(ox); // undefined
}
function func(){
// 作用域提前，已經提前解釋了var ox;
console.log(ox); // undefined
var ox = ‘alex‘;
}
func()
</script>
思考題：
<script>
for (var i=1; i<=9; i++) {
setTimeout( function timer(){
console.log( i );
},1000 ); //1秒後執行timer()函數，但是for循環是瞬間完成的，快速執行下次i++了
}
</script> // 執行了9次循環，但是console打印的時候需要1秒，for已經執行完成循環
// 此時的i執行了i++,值為10了，所以結果Wie： 9個10 JavaScript學習---JavaScript深入學習