對象的概念javascript
對象分類[3種]： ECMScript(JS本身的對象)， BOM(瀏覽器對象) DOM(文檔對象，操做HTML的) html
11種內置對象: Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object java
注意： JavaScript中除了Null和undefined之外，其他均爲對象node
ECMScript對象
Object對象：ECMAScript 中的全部對象都由這個對象繼承而來；Object 對象中的全部屬性和方法都會出如今其餘對象中python
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對象sql
建立數組：
// 建立方式一： 直接建立數組
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對象shell
// 建立方式一 [推薦]
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>
做用域，做用域鏈
- 做用域鏈在函數被解釋的過程當中已經建立（函數作爲做用域）
- 提早聲明
############### 一、JavaScript中以函數作爲做用域 ##############
############### 二、JavaScript函數在被調用以前（解釋器解釋過程當中）做用域鏈已經存在 ##############
############### 三、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