JS高级语法与JS选择器
生活随笔
收集整理的這篇文章主要介紹了
JS高级语法与JS选择器
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
元素（element)和節(jié)點(diǎn)(node)
childNode屬性和children屬性的區(qū)別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="parentDiv">
<!--注釋-->
<div></div>
</div>
<script>
console.log(document.getElementById('parentDiv').childNodes); //NodeList[5]
console.log(document.getElementById('parentDiv').children) ; //HTMLCollection[1]
</script>
</body>
</html>
childNodes屬性返回的是NodeList數(shù)組，是屬于節(jié)點(diǎn)（也包括元素）的屬性，而children屬性返回的是子元素，是屬于元素的屬性
而在Nodelist數(shù)組里面也有元素存在，證明了元素也是節(jié)點(diǎn)的一種，即元素節(jié)點(diǎn)。
W3C中的解釋是：
在 HTML DOM （文檔對(duì)象模型）中，每個(gè)部分都是節(jié)點(diǎn) 文檔本身是文檔節(jié)點(diǎn) 所有 HTML 元素是元素節(jié)點(diǎn) 所有 HTML 屬性是屬性節(jié)點(diǎn) HTML 元素內(nèi)的文本是文本節(jié)點(diǎn) （包括回車符，空格，空白字符也是屬于文本節(jié)點(diǎn)） 注釋是注釋節(jié)點(diǎn)
Element 對(duì)象可以擁有類型為元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)的子節(jié)點(diǎn)。
NodeList 對(duì)象表示節(jié)點(diǎn)列表，比如 HTML 元素的子節(jié)點(diǎn)集合。
元素也可以擁有屬性。屬性是屬性節(jié)點(diǎn)。
總結(jié)：元素是元素節(jié)點(diǎn)，是節(jié)點(diǎn)中的一種，但元素節(jié)點(diǎn)中可以包含很多的節(jié)點(diǎn)
nodeName（純大寫(xiě)） 屬性含有某個(gè)節(jié)點(diǎn)的名稱
元素節(jié)點(diǎn)的nodeName 是標(biāo)簽名稱 屬性節(jié)點(diǎn)的nodeName 是屬性名稱 文本節(jié)點(diǎn)的nodeName 永遠(yuǎn)是 #text 文檔節(jié)點(diǎn)的nodeName 永遠(yuǎn)是 #document
nodeValue 對(duì)于文本節(jié)點(diǎn)，nodeValue 屬性包含文本。 對(duì)于屬性節(jié)點(diǎn)，nodeValue 屬性包含屬性值
nodeValue 屬性對(duì)于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)是不可用的
nodeType 屬性可返回節(jié)點(diǎn)的類型
Element 元素 1 Attribute 屬性 2 Text 文本 3 CDATA Section CDATA斷 4 Entity Reference 實(shí)體參數(shù) 5 Entity 實(shí)體 6 Processing Instrucion 處理指令 7 Comment 注釋 8 Document 文檔 9 Document Type 文檔類型 10 Document Fragment 文檔片斷 11
添加和刪除節(jié)點(diǎn)（HTML 元素）
創(chuàng)建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)），然后向一個(gè)已存在的元素追加該元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<p id="p1">這是一個(gè)段落</p>
<p id="p2">這是另一個(gè)段落</p>
</div>
</body>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</html>
<!-- 為這段代碼創(chuàng)建新的 <p> 元素：
var para=document.createElement("p");
此時(shí)檢查頁(yè)面可以看到div里面已經(jīng)生成了<p>元素
如需向 <p> 元素添加文本，您必須首先創(chuàng)建文本節(jié)點(diǎn)。
這段代碼創(chuàng)建了一個(gè)文本節(jié)點(diǎn)：
var node=document.createTextNode("這是新段落。");
然后您必須向 <p> 元素追加這個(gè)文本節(jié)點(diǎn)：
para.appendChild(node);
最后您必須向一個(gè)已有的元素追加這個(gè)新元素。
這段代碼找到一個(gè)已有的元素：
var element=document.getElementById("div1");
這段代碼向這個(gè)已有的元素追加新元素：
element.appendChild(para); -->
刪除已有的 HTML 元素
如需刪除 HTML 元素，您必須首先獲得該元素的父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另一個(gè)段落。</p>
</div>
</body>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</html>
<!-- 例子解釋：
這個(gè) HTML 文檔含有擁有兩個(gè)子節(jié)點(diǎn)（兩個(gè) <p> 元素）的 <div> 元素：
<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另一個(gè)段落。</p>
</div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
從父元素中刪除子元素：
parent.removeChild(child);
提示：如果能夠在不引用父元素的情況下刪除某個(gè)元素，就太好了。
不過(guò)很遺憾。DOM 需要清楚您需要?jiǎng)h除的元素，以及它的父元素。
這是常用的解決方案：
找到您希望刪除的子元素，然后使用其 parentNode 屬性來(lái)找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child); -->
常用節(jié)點(diǎn)操作
1.節(jié)點(diǎn)查找
document.getElementById，document.getElementByTagName，document.getElementByName ，document.getElementByClassName
document.querySelector() 參數(shù)為選擇器
document.forms 選取頁(yè)面中的所有表單元素
2.增加節(jié)點(diǎn)
增加節(jié)點(diǎn)前必須先使用document.createElement()創(chuàng)建元素節(jié)點(diǎn)，參數(shù)為標(biāo)簽名
m.appendChild(n) 為m元素在末尾添加n節(jié)點(diǎn)
m.insertBefore(k,n) 在m元素的k節(jié)點(diǎn)前添加n節(jié)點(diǎn)
3.刪除節(jié)點(diǎn)
m.removeChild(n)刪除m元素中的n節(jié)點(diǎn)
m.replaceChild(k,n)用n節(jié)點(diǎn)取代m元素中的k節(jié)點(diǎn)
4.復(fù)制節(jié)點(diǎn)
m.cloneChild() 復(fù)制m節(jié)點(diǎn)，并將復(fù)制出來(lái)的節(jié)點(diǎn)作為返回值
參數(shù)為true時(shí)，則將m元素的后代元素也一并復(fù)制。否則，僅復(fù)制m元素本身
節(jié)點(diǎn)屬性操作
節(jié)點(diǎn)(自身)屬性:
attributes - 節(jié)點(diǎn)（元素）的 屬性節(jié)點(diǎn)
nodeType – 節(jié)點(diǎn)類型
nodeValue – 節(jié)點(diǎn)值
nodeName – 節(jié)點(diǎn)名稱
innerHTML - 節(jié)點(diǎn)（元素）的文本值
1.節(jié)點(diǎn)屬性值選取
m.屬性名 (：駝峰形式 ) m.className
m[“屬性名”] m.['className']
m.getAttribute(“屬性名”) ：加引號(hào)，html的形式 m.getAttribute("class")
2.節(jié)點(diǎn)屬性修改
前兩種選取方法時(shí)，直接賦值即可
m.setAttribute("屬性名"，“值”)
3.創(chuàng)建屬性節(jié)點(diǎn)并設(shè)置屬性值
var info_node=document.createAttribute("info");//創(chuàng)建
info_node.value='123'；//設(shè)置
sup1.setAttributeNode(info_node);//添加
4.復(fù)制節(jié)點(diǎn)
var body = document.querySelector('body');
true深拷貝,拷貝自身與內(nèi)容, false淺拷貝,只拷貝自身標(biāo)簽
var cl_body = body.cloneNode(true);
console.log(cl_body);
JS DOM節(jié)點(diǎn)（當(dāng)前標(biāo)簽和同級(jí)、父級(jí)、子級(jí)..之間的關(guān)系）
1. 通過(guò)頂層document節(jié)點(diǎn)獲取
1) document.getElementById(elementId) //根據(jù)id獲得
2) document.getElementsByName(elementName) //根據(jù)name獲得
3) document.getElementsByTagName(tagName) //根據(jù)標(biāo)簽名獲得
2、通過(guò)父節(jié)點(diǎn)獲取
1) parentObj.firstChild //獲得第一個(gè)子節(jié)點(diǎn)
2) parentObj.lastChild //獲得第二個(gè)子節(jié)點(diǎn)
3) parentObj.childNodes //獲取作為指定對(duì)象直接后代的HTML元素和TextNode對(duì)象的集合
4) parentObj.children //非標(biāo)準(zhǔn)dom集合，建議使用childNodes
5) parentObj.getElementsByTagName(tagName) //獲得該標(biāo)簽下標(biāo)簽名為tagName的所有標(biāo)簽
3、通過(guò)臨近節(jié)點(diǎn)獲取
1) neighbourNode.previousSibling //獲得同級(jí)前一個(gè)標(biāo)簽
2) neighbourNode.nextSibling //獲得同級(jí)后一個(gè)標(biāo)簽
4、通過(guò)子節(jié)點(diǎn)獲取
1) childNode.parentNode //獲得父標(biāo)簽
事件
onload：頁(yè)面加載完畢事件，只附屬于window對(duì)象 onclick：鼠標(biāo)點(diǎn)擊時(shí)間 onmouseover：鼠標(biāo)懸浮事件 onmouseout：鼠標(biāo)移開(kāi)事件
on事件綁定方式
document.onclick = function() {
console.log("文檔點(diǎn)擊");
}
on事件只能綁定一個(gè)方法，重復(fù)綁定保留最后一次綁定的方法
document.onclick = function() {
console.log("文檔點(diǎn)擊");
}
事件的移除
document.onclick = null;
非on事件綁定方式
document.addEventListener('click', function() {
console.log("點(diǎn)擊1");
})
document.addEventListener('click', function() {
console.log("點(diǎn)擊2");
})
非on事件可以同時(shí)綁定多個(gè)方法，被綁定的方法依次被執(zhí)行
addEventListener第三個(gè)參數(shù)(true|false)決定冒泡的方式
function fn () {}
document.addEventListener('click', fn);
事件的移除
document.removeEventListener('click', fn，false);
事件的三種綁定方式的思考
方法一:嵌入dom
把onclick綁定在標(biāo)簽上
HTML元素行間事件（也可以叫HTMl事件處理程序）,直接在html標(biāo)簽里添加事件。
缺點(diǎn)：html和js代碼緊密耦合
<input id="btn1" type="button" onclick="test();" />
方法二:直接綁定
onclick的js綁定辦法
//把一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩浴＃ㄟ@種方式也叫做Dom0級(jí)事件處理程序）
var btn1 = document.getElementById('btn1');
function abc() {
alert('abc');
}
btn1.onclick = abc; //當(dāng)點(diǎn)擊的時(shí)候執(zhí)行abc這個(gè)函數(shù)，等價(jià)于 btn1.onclick=function abc(){alert('abc');}
//btn1.onclick = null； //去掉綁定的事件
方法三:事件監(jiān)聽(tīng)
click的js綁定辦法(js的話推薦這種)
//通過(guò)“事件監(jiān)聽(tīng)”的方式來(lái)綁定事件（也叫Dom2級(jí)事件處理程序）
var btn2 = document.getElementById('btn2');
btn2.addEventListener('click', showMsg, false); //鼠標(biāo)單擊的時(shí)候調(diào)用showMes這個(gè)函數(shù)
function showMsg() {
alert("事件監(jiān)聽(tīng)");
}
//btn2.removeEventListener('click', showMsg, false); //去除綁定
方法一
最原始的寫(xiě)法：和html混合在一起寫(xiě)，缺點(diǎn)是代碼高冗余，且無(wú)法添加多個(gè)事件處理函數(shù)如上文對(duì)事件的舉例則為典型的**html事件處理程序*寫(xiě)法
方法二
dom0級(jí)：將html代碼和js代碼分離，且支持匿名函數(shù)，可以看到完美的改進(jìn)了1的冗余缺憾，所有的事件相關(guān)操作都在js中完成
方法三
dom2級(jí)：ie使用attachEventListener其他非ie使用addEventListener，可以支持綁定多個(gè)事件，瞧吧，又一個(gè)缺憾被完美解決了~，而且dom2級(jí)還可以自定義事件流，下一篇會(huì)分析事件流模型
dom3級(jí)：對(duì)事件進(jìn)行了更廣而全的分類，請(qǐng)自行查閱
實(shí)例運(yùn)用一
</head>
<body>
<div class="div"></div>
<div class="div"></div>
</body>
<script>
// js事件: 頁(yè)面標(biāo)簽在滿足某種條件下可以完成指定功能的這種過(guò)程, 成之為事件
// 某種條件: 如鼠標(biāo)點(diǎn)擊標(biāo)簽: 點(diǎn)擊事件 | 鼠標(biāo)雙擊標(biāo)簽: 雙擊事件 | 鍵盤(pán)按下: 鍵盤(pán)按下事件
// 指定功能: 就是開(kāi)發(fā)者根據(jù)實(shí)際需求完整相應(yīng)的功能實(shí)現(xiàn)
// 鉤子函數(shù): 就是滿足某種條件被系統(tǒng)回調(diào)的函數(shù)(完成指定功能)
// 點(diǎn)擊事件: 明確激活鉤子的條件 = 激活鉤子后改處理什么邏輯, 完成指定功能(函數(shù))
var div = document.querySelector(".div"); // 找到的是第一個(gè).div
div.onclick = function () {
// alert(123)
this.style.backgroundColor = "pink";
}
// 明確第一個(gè)及第二個(gè)
var divs = document.querySelectorAll('.div');
divs[1].ondblclick = function () {
divs[0].style.backgroundColor = "yellow";
}
</script>
</html>
實(shí)例運(yùn)用二
復(fù)習(xí)并延伸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復(fù)習(xí)預(yù)習(xí)</title>
<style>
[key='value'] {
color: #0f8209;
}
</style>
</head>
<body>
<div class="ele" alert="OK">div div div</div>
</body>
<script>
// 1.面向?qū)ο骿s
// ES5
// 普通的單一對(duì)象
var obj = {
// 普通對(duì)象的屬性
key: "value",
fn: function () {
console.log("普通對(duì)象的方法")
}
};
console.log(obj.key);
console.log(obj["key"]);
// 1.key的類型為字符串類型
// 結(jié)論:
// js支持的標(biāo)識(shí)符可以省略引號(hào), 反之不可以省略
// 不支持的標(biāo)識(shí)符訪問(wèn)方式: 不可以采用.語(yǔ)法,需要采用[]語(yǔ)法,eg:obj["background-color"]
var obj1 = {
"name": "obj1",
// key有時(shí)候會(huì)出現(xiàn)js不能直接支持的標(biāo)識(shí)符書(shū)寫(xiě)方式
// 需求: obj1用來(lái)描述頁(yè)面標(biāo)簽的各種顏色
color: "red",
// "color": "red",
"background-color": "yellow"
}
console.log(obj1.name);
console.log(obj1["name"]);
console.log(obj1.color);
// obj1.background = 12;
// color = 10;
console.log(obj1["background-color"]);
// 2. 對(duì)象可以任意添加或刪除屬性
var obj2 = {
name: "obj2"
};
console.log(obj2);
// 刪除屬性
delete obj2.name;
console.log(obj2);
// 添加屬性
obj2.age = 8;
console.log(obj2);
// 拓展: 獲取的頁(yè)面元素就是標(biāo)簽對(duì)象, 可以對(duì)其添加任意屬性
var ele = document.querySelector('.ele');
console.log(ele.info); // 直接使用無(wú)值, 原因ele并沒(méi)有添加該屬性
ele.info = "添加的屬性信息"; // 添加屬性
console.log(ele.info); // 添加屬性后就可以正常方式添加的屬性值
delete ele.info; // 刪除操作
console.log(ele.info); // 刪除后屬性又會(huì)消失
// 構(gòu)造函數(shù)
function Perple(name, age) {
this.name = name;
this.age = age;
this.fn = function () {
console.log("fn")
}
}
// 實(shí)例化對(duì)象
var p = new Perple("張三", 18);
p.fn();
// ES6
class Student {
constructor (name, age) {
this.name = name;
this.age = age;
}
fn () {
console.log("fn")
}
}
var s = new Student("張三", 18);
s.fn();
</script>
<script>
// getElementById只能由document調(diào)用
var ele = document.getElementsByClassName("ele")[0];
console.log(ele);
ele = document.querySelector(".ele");
console.log(ele);
ele = document.querySelectorAll(".ele")[0];
console.log(ele);
// 該添加屬性的方式只映射到j(luò)s代碼中
ele.index = 123;
console.log(ele.index);
// js如何操作元素(頁(yè)面標(biāo)簽)的全局屬性, 映射到html代碼中
ele = document.querySelector('[alert]'); // 通過(guò)全局屬性獲取元素
console.log(ele);
// 獲取全局屬性值
var info = ele.getAttribute('alert');
console.log(info);
// 修改全局屬性值
ele.setAttribute('alert', 'no ok');
// 添加全局屬性值(映射到html代碼中) => 結(jié)合CSS來(lái)控制頁(yè)面標(biāo)簽的樣式
ele.setAttribute('key', 'value');
</script>
</html>
事件參數(shù)event
存放事件信息的回調(diào)參數(shù)
在觸發(fā)DOM上某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象包含著所有事件有關(guān)的信息（導(dǎo)致事件的元素、事件的類型、與特定事件相關(guān)的信息）
所有瀏覽器都支持Event對(duì)象，但支持方式不同
IE中的事件對(duì)象：window.event
阻止事件冒泡 DOM中提供stopPropagation()方法，但I(xiàn)E不支持，使用event對(duì)象在事件函數(shù)中調(diào)用就行 IE中提供的是，cancelBubble屬性，默認(rèn)為false，當(dāng)它設(shè)置為true時(shí)，就是阻止事件冒泡，也是用event對(duì)象在事件函數(shù)中調(diào)用 jQuery中提供了stopPropagation()方法來(lái)停止事件冒泡，當(dāng)需要時(shí)，只需用用event對(duì)象來(lái)調(diào)用就行，即event.stopPropagation(); 默認(rèn)行為 阻止默認(rèn)行為 DOM中提供preventDefault()方法來(lái)取消事件默認(rèn)行為，但是只有當(dāng)cancelable屬性設(shè)置為true的事件，才可以使用preventDefault()來(lái)取消事件默認(rèn)行為，使用event對(duì)象在事件函數(shù)中調(diào)用就行 IE中提供的是returnValue屬性，默認(rèn)為true，當(dāng)它設(shè)置為false時(shí)，就是取消事件默認(rèn)行為，也是用event對(duì)象在事件函數(shù)中調(diào)用 jQuery中提供了preventDefault()方法來(lái)阻止元素的默認(rèn)行為，只需要用event對(duì)象來(lái)調(diào)用就好，即event.preventDefault() 如果想同時(shí)對(duì)事件對(duì)象停止冒泡和默認(rèn)行為，可以在事件處理函數(shù)中返回false。這是對(duì)事件對(duì)象同時(shí)調(diào)用stopPropagation()方法和preventDefault()方法的一種簡(jiǎn)寫(xiě)方式
事件注意點(diǎn)
1、event代表事件的狀態(tài)，例如觸發(fā)event對(duì)象的元素、鼠標(biāo)的位置及狀態(tài)、按下的鍵等等； 2、event對(duì)象只在事件發(fā)生的過(guò)程中才有效。 firefox里的event跟IE里的不同，IE里的是全局變量，隨時(shí)可用； firefox里的要用參數(shù)引導(dǎo)才能用，是運(yùn)行時(shí)的臨時(shí)變量 在IE/Opera中是window.event，在Firefox中是event； 而事件的對(duì)象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中兩者都可用
處理冒泡與默認(rèn)事件
事件的冒泡：父子都具有點(diǎn)擊事件，不處理的話，點(diǎn)擊子級(jí)也會(huì)出發(fā)父級(jí)的點(diǎn)擊事件
如果提供了事件對(duì)象，則這是一個(gè)非IE瀏覽器 if ( e && e.stopPropagation ) 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else 否則，我們需要使用IE的方式來(lái)取消事件冒泡
window.event.cancelBubble = true;
return false;
處理冒泡實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件對(duì)象</title>
<style>
body {
margin: 0;
}
.box {
background-color: pink;
}
.sup {
200px;
height: 200px;
background-color: red;
}
.sub {
100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">12345</div>
<div class="sup">
<div class="sub"></div>
</div>
<a >只想相應(yīng)點(diǎn)擊事件</a>
</body>
<script>
var box = document.querySelector('.box');
// 事件的鉤子函數(shù), 系統(tǒng)回調(diào)時(shí)傳遞了一個(gè)值, 該值為事件對(duì)象
box.onclick = function (ev) { // 回調(diào)函數(shù)
console.log(ev)
// 特殊按鍵 altKey | shiftKey | ctrlKey
console.log(ev.altKey)
// 鼠標(biāo)的點(diǎn)擊點(diǎn)
console.log(ev.clientX, ev.clientY)
}
</script>
<script>
var sup = document.querySelector('.sup');
var sub = document.querySelector('.sub');
// 事件默認(rèn)有冒泡, 子級(jí)相應(yīng)事件后,會(huì)將事件傳遞給父級(jí),如果父級(jí)有相同事件,也會(huì)被激活, 最終傳遞給document
sub.onclick = function (ev) {
console.log(ev);
// 取消冒泡, 當(dāng)自身處理事件后, 該事件就處理完畢, 結(jié)束, 不再向上傳遞
ev.cancelBubble = true;
console.log("子級(jí)被點(diǎn)擊了")
};
sup.onclick = function () {
console.log("父級(jí)被點(diǎn)擊了")
};
document.onclick = function () {
console.log("文檔被點(diǎn)擊了")
}
</script>
</html>
事件默認(rèn)行為:當(dāng)一個(gè)事件發(fā)生時(shí)瀏覽器自己會(huì)做的事情
如果提供了事件對(duì)象，則這是一個(gè)非IE瀏覽器 if ( e && e.preventDefault ) 阻止默認(rèn)瀏覽器動(dòng)作(W3C) e.preventDefault(); else IE中阻止函數(shù)器默認(rèn)動(dòng)作的方式 window.event.returnValue = false; return false; 既然return false 和 e.preventDefault()都是一樣的效果，那它們有區(qū)別嗎？當(dāng)然有 僅僅是在HTML事件屬性 和 DOM0級(jí)事件處理方法中 才能通過(guò)返回 return false 的形式組織事件宿主的默認(rèn)行為
處理默認(rèn)事件實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件對(duì)象</title>
<style>
body {
margin: 0;
}
.box {
background-color: pink;
}
.sup {
200px;
height: 200px;
background-color: red;
}
.sub {
100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">12345</div>
<div class="sup">
<div class="sub"></div>
</div>
<a >只想相應(yīng)點(diǎn)擊事件</a>
</body>
<script>
var box = document.querySelector('.box');
// 事件的鉤子函數(shù), 系統(tǒng)回調(diào)時(shí)傳遞了一個(gè)值, 該值為事件對(duì)象
box.onclick = function (ev) { // 回調(diào)函數(shù)
console.log(ev)
// 特殊按鍵 altKey | shiftKey | ctrlKey
console.log(ev.altKey)
// 鼠標(biāo)的點(diǎn)擊點(diǎn)
console.log(ev.clientX, ev.clientY)
}
</script>
<script>
// 默認(rèn)事件
var aBtn = document.querySelector('a');
aBtn.onclick = function (ev) {
ev.cancelBubble = true;
console.log("a被點(diǎn)擊了");
// 手動(dòng)轉(zhuǎn)跳頁(yè)面
open('https://www.oldboyedu.com', '_self');
// a標(biāo)簽?zāi)J(rèn)會(huì)完成轉(zhuǎn)跳, 如果取消默認(rèn)事件
return false;
}
</script>
</html>
再補(bǔ)充一些
默認(rèn)操作 具體指的是什么呢？
(1)把單擊事件處理程序注冊(cè)到一個(gè)錨元素，而不是一個(gè)外層的<div>上，那么就要面對(duì)另外一個(gè)問(wèn)題：當(dāng)用戶單擊鏈接時(shí)，瀏覽器會(huì)加載一個(gè)新頁(yè)面。
(2)當(dāng)用戶在編輯完表單后按下回車鍵時(shí)，會(huì)觸發(fā)表單的submit事件，在此事件發(fā)生后，表單提交才會(huì)真正發(fā)生。
這種行為與我們討論的事件處理程序不是同一個(gè)概念，它是單擊標(biāo)簽元素的默認(rèn)操作。
如果我們不希望執(zhí)行這種默認(rèn)操作，那么在事件對(duì)象上調(diào)用.stopPropagation()方法也無(wú)濟(jì)于事，因?yàn)槟J(rèn)操作不是在正常的事件傳播流中發(fā)生的
在這種情況下，處理方法有：
1、w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;
preventDefault它是事件對(duì)象(Event)的一個(gè)方法，作用是取消一個(gè)目標(biāo)元素的默認(rèn)行為。既然是說(shuō)默認(rèn)行為，當(dāng)然是元素必須有默認(rèn)行為才能被取消，如果元素本身就沒(méi)有默認(rèn)行為，調(diào)用當(dāng)然就無(wú)效了。什么元素有默認(rèn)行為呢？如鏈接<a>，提交按鈕<input type=”submit”>等。當(dāng)Event 對(duì)象的 cancelable為false時(shí)，表示沒(méi)有默認(rèn)行為，這時(shí)即使有默認(rèn)行為，調(diào)用preventDefault也是不會(huì)起作用的。
1 <a id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();//
}else{
window.event.returnValue = false;//IE
//注意：這個(gè)地方是無(wú)法用return false代替的
//return false只能取消元素
}
}
2、return false;
javascript的return false只會(huì)阻止默認(rèn)行為，而是用jQuery的話則既阻止默認(rèn)行為又防止對(duì)象冒泡
常見(jiàn)事件
鼠標(biāo)事件
var box = document.querySelector('.box');
1. 點(diǎn)擊事件
box.onclick = function () {
console.log("單擊");
};
2. 雙擊事件(應(yīng)用場(chǎng)景不廣)
box.ondblclick = function () {
console.log("雙擊");
};
3. 鼠標(biāo)右鍵
box.oncontextmenu = function () {
console.log("右鍵了");
return false;
};
4. 鼠標(biāo)懸浮 | 移動(dòng) | 按下 | 抬起 | 離開(kāi)
box.onmouseover = function () {
console.log("懸浮");
};
box.onmousemove = function () {
console.log("移動(dòng)");
};
box.onmousedown = function () {
console.log("按下");
};
box.onmouseup = function () {
console.log("抬起");
};
box.onmouseout = function () {
console.log("離開(kāi)");
}
事件參數(shù)ev
ev.clientX：點(diǎn)擊點(diǎn)X坐標(biāo)
ev.clientY：點(diǎn)擊點(diǎn)Y坐標(biāo)
over | out VS enter | leave
總結(jié): 1. 將子級(jí)與父級(jí)分開(kāi)考慮, 大家都有各自的懸浮離開(kāi)事件, 采用 over | out 組合 2. 將子級(jí)納入父級(jí)考慮范圍, 也就是只有父級(jí)去相應(yīng)懸浮離開(kāi)事件, 采用 enter | leave 組合 3. 單獨(dú)考慮一個(gè)盒子的懸浮離開(kāi)事件, 兩套均可以 特性 從父級(jí)移至子級(jí), 會(huì)觸發(fā)out事件, 緊接著觸發(fā)子級(jí)的over事件, 并可以冒泡給父級(jí) 從父級(jí)移至子級(jí), leave事件并不會(huì)觸發(fā), 它認(rèn)為子級(jí)是屬于父級(jí)的一部分, enter事件, 也不會(huì)再次觸發(fā) 懸浮子級(jí): sub over => sup over 支持冒泡 sup enter => sub enter 不支持冒泡
鍵盤(pán)事件
鍵盤(pán)事件
onkeydown：鍵盤(pán)按下會(huì)觸發(fā)，長(zhǎng)按持續(xù)觸發(fā)
onkeyup：鍵盤(pán)抬起
事件參數(shù)ev
ev.keyCode：按鍵編號(hào)
ev.altKey：alt特殊按鍵
ev.ctrlKey：ctrl特殊按鍵
ev.shiftKey：shift特殊按鍵
<head>
<meta charset="UTF-8">
<title>鍵盤(pán)事件</title>
<style>
.box {
100px;
height: 100px;
background: orange;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
// 鍵盤(pán)長(zhǎng)按會(huì)一直觸發(fā)按下事件
document.onkeydown = function (ev) {
console.log(ev);
// 按下的鍵盤(pán)編號(hào)
console.log("按下", ev.keyCode);
// console.log(ev.which);
}
document.onkeyup = function (ev) {
console.log("抬起", ev.keyCode);
}
// 左上右下: 37-40
var box = document.querySelector('.box');
document.onkeydown = function (ev) {
switch (ev.keyCode) {
case 37:
box.style.left = box.offsetLeft - 10 + 'px';
break;
case 38:
box.style.top = box.offsetTop - 10 + 'px';
break;
case 39:
box.style.left = box.offsetLeft + 10 + 'px';
break;
case 40:
box.style.top = box.offsetTop + 10 + 'px';
break;
}
}
</script>
</html>
表單事件
onfocus：獲取焦點(diǎn) onblur：失去焦點(diǎn) onselect：文本被選中 oninput：值改變 onchange：值改變，且需要在失去焦點(diǎn)后才能觸發(fā) onsubmit：表單默認(rèn)提交事件
文檔事件
文檔事件由window調(diào)用 onload：頁(yè)面加載完畢觸發(fā) onbeforeunload：頁(yè)面退出或刷新警告，需要設(shè)置回調(diào)函數(shù)返回值，返回值隨意
圖片事件
onerror：圖片加載失敗
頁(yè)面事件
onscroll：頁(yè)面滾動(dòng) onresize：頁(yè)面尺寸調(diào)整 window.scrollY：頁(yè)面下滾距離
文檔頁(yè)面事件運(yùn)用實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>其他事件</title>
<script>
// 當(dāng)頁(yè)面加載完畢之后再回調(diào)
window.onload = function () {
var box = document.querySelector('.box');
console.log(box);
}
// 頁(yè)面滾動(dòng)可以設(shè)置給 window | document
var isShow = false;
window.onscroll = function () {
console.log(window.scrollY);
if (window.scrollY >= 1200) {
if (!isShow) {
console.log("將返回Top按鈕顯示");
isShow = true;
}
} else {
if (isShow) {
isShow = false;
}
}
}
</script>
</head>
<body>
<div class="box"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
JS選擇器
getElement系列
通過(guò)id名獲取唯一滿足條件的頁(yè)面元素
document.getElementById('id名');
該方法只能由document調(diào)用
任何HTML元素可以有一個(gè)id屬性，在文檔中該值必須唯一
若瀏覽器中出現(xiàn)多個(gè)id名的情況，CSS樣式對(duì)所有該id名的元素都生效，但javascript腳本僅對(duì)第一個(gè)出現(xiàn)該id名的元素生效。
getElementById()該方法接收一個(gè)參數(shù)：要取得元素的id，若找到則返回該元素，若不存在則返回null
注意：document.getElementById方法的內(nèi)部實(shí)現(xiàn)需要用到this，這個(gè)this本來(lái)被期望指向document
跨瀏覽器兼容
1：在ie7中，使用getElementById()的時(shí)候，接收的參數(shù)id不區(qū)分大小寫(xiě)。
2：在表單元素中，如果表單設(shè)置有name屬性，其name屬性會(huì)被當(dāng)做id識(shí)別出來(lái)。
3:id是唯一的，但name屬性并不是唯一的。具有該名稱的隱式全局變量會(huì)引用一個(gè)類數(shù)組對(duì)象，包括所有該命名的元素
通過(guò)class名獲取所有滿足條件的頁(yè)面元素
document.getElementsByClassName('class名');
該方法可以由document及任意頁(yè)面元素對(duì)象調(diào)用
document.getElementsByClass（"class1
class2"）可以拿到同時(shí)擁有class1和class2的元素，中間用空格隔開(kāi)，不區(qū)分class1和class2的順序。
兼容性：IE8及其以下版本的瀏覽器未實(shí)現(xiàn)getElementsByClassName方法
返回值為HTMLCollection (一個(gè)類數(shù)組結(jié)果的對(duì)象，使用方式同數(shù)組)
沒(méi)有匹配到任何結(jié)果返回空HTMLCollection對(duì)象 ([])
通過(guò)name屬性獲取元素
getElementsByName（返回值是一個(gè)nodeList集合（區(qū)別于Array），可作用于Dom元素）
getElementsByName()方法接收一個(gè)參數(shù)，即要取得元素的name值。
document.getElementsByName("Name");Name為要獲取元素的name屬性值,這個(gè)方法一般適用于提交表單數(shù)據(jù),當(dāng)
元素為form、img、iframe、applet、embed、object的時(shí)候設(shè)置name屬性時(shí),會(huì)自動(dòng)在Document對(duì)象中創(chuàng)建以該
name屬性值命名的屬性。
所以可以通過(guò)document.domName引用相應(yīng)的dom對(duì)象。
在ie9中，getElementsByName()只對(duì)表單元素起作用。
IE9-瀏覽器中使用getElementsByName()方法也會(huì)返回id屬性匹配的元素。因此，不要將name和id屬性設(shè)置為相同的值。
通過(guò)tag名獲取所有滿足條件的頁(yè)面元素
document.getElementsByTagName('tag名');
該方法可以由document及任意頁(yè)面元素對(duì)象調(diào)用
返回值為HTMLCollection (一個(gè)類數(shù)組結(jié)果的對(duì)象，使用方式同數(shù)組)
沒(méi)有匹配到任何結(jié)果返回空HTMLCollection對(duì)象 ([])
可以使用方括號(hào)語(yǔ)法或item()方法來(lái)訪問(wèn)類數(shù)組對(duì)象中的項(xiàng)，length屬性表示對(duì)象中元素的數(shù)量。
[注意]通過(guò)getElementsByTagName()方法取得的類數(shù)組對(duì)象有一個(gè)namedItem()方法，可以通過(guò)元素的name屬性取得集合中的第一個(gè)值。safari和IE不支持該方法。document.getElementsByTagName（"*"）表示匹配文檔的所有元素
querySelect系列
獲取第一個(gè)匹配到的頁(yè)面元素
document.querySelector('css語(yǔ)法選擇器');
該方法可以由document及任意頁(yè)面對(duì)象調(diào)用
獲取所有匹配到的頁(yè)面元素
document.querySelectorAll('css語(yǔ)法選擇器');
該方法可以由document及任意頁(yè)面對(duì)象調(diào)用
返回值為NodeList (一個(gè)類數(shù)組結(jié)果的對(duì)象，使用方式同數(shù)組)
沒(méi)有匹配到任何結(jié)果返回空NodeList對(duì)象 ([])
id名
可以通過(guò)id名直接獲取對(duì)應(yīng)的頁(yè)面元素對(duì)象，但是不建議使用
js選擇器運(yùn)用實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js選擇器</title>
<style>
#d {
color: red;
}
</style>
</head>
<body id="bd">
<!--注釋-->
<div id="d" class="dd">我是ddd111</div>
<div id="d" class="dd">我是ddd222</div>
<div class="sup1">
<div id="div"></div>
</div>
<div class="sup2">
<div id="div"></div>
</div>
</body>
<script>
// 節(jié)點(diǎn)(了解): 在文檔(document)中出現(xiàn)的所有內(nèi)容都是document中的節(jié)點(diǎn)
// 節(jié)點(diǎn)(node): 標(biāo)簽節(jié)點(diǎn)(元素element) | 注釋節(jié)點(diǎn) | 文本節(jié)點(diǎn) | <!doctype>節(jié)點(diǎn)
console.log([bd]) // 文本 注釋 文本 標(biāo)簽 文本 標(biāo)簽 文本 標(biāo)簽 文本 標(biāo)簽 文本
</script>
<script>
// js選擇器: 將js與html建立起連接
// js中一般稱標(biāo)簽為頁(yè)面元素
// 1.直接通過(guò)id名進(jìn)行匹配
console.log(d); // 兩個(gè)都可以找到
// 2.getElement系列(最嚴(yán)謹(jǐn))
// 所有顯示在頁(yè)面中的內(nèi)容(展現(xiàn)給用戶看的), 都是屬于文檔(document)對(duì)象的內(nèi)容, 存放在文檔中
// console.log(document)
// 獲取文檔中的標(biāo)簽 => document對(duì)象通過(guò).語(yǔ)法去獲取具體的目標(biāo)標(biāo)簽元素
// ① id
var div = document.getElementById('d'); // 檢索得到頁(yè)面中出現(xiàn)的第一個(gè)滿足條件的目標(biāo)
console.log(">>>", div);
var body = document.getElementById("bd");
console.log(body);
// 注: getElementById該方法只能由document來(lái)調(diào)用
// 原因: 我們需要保證一個(gè)文檔中一個(gè)id只能出現(xiàn)一次, document檢索的就是文檔,
// 而某父級(jí)標(biāo)簽只能檢索自身標(biāo)簽內(nèi)部區(qū)域, document可以保證文檔中只能一個(gè)id
// 只出現(xiàn)一次,某父級(jí)標(biāo)簽只能保證自身內(nèi)部區(qū)域id不重復(fù),能不能保證與外界不重復(fù)?
// 不能, 所以從安全角度出發(fā), 獲取唯一對(duì)象的getElementById方法只能由能確定唯一id的
// 對(duì)象來(lái)調(diào)用, 能被document調(diào)用, 不能被sup來(lái)調(diào)用
// ② 類名
var divs = document.getElementsByClassName('dd');
console.log(divs);
// 兩個(gè)div在body之中, 上方已經(jīng)獲取了body, 那能否通過(guò)body來(lái)獲取body中的div
var divs1 = body.getElementsByClassName('dd');
console.log(divs1);
// ③ 標(biāo)簽名
var divs = document.getElementsByTagName('div');
console.log(divs)
console.log('--------------------------------------------------');
// 3.querySelector系列(最方便)
// 參數(shù): 就是css選擇器語(yǔ)法
// querySelector檢索第一個(gè)
var div = document.querySelector('body > .dd');
console.log(div);
// querySelectorAll檢索所有滿足結(jié)果
var divs = document.querySelectorAll('body > .dd');
console.log(divs);
var divs = body.querySelectorAll('.dd');
console.log(divs)
var divs = body.querySelectorAll('#d'); // 不嚴(yán)謹(jǐn)
console.log(divs)
</script>
</html>
選擇器分類
1. ID選擇器
使用ID選擇器時(shí)，需在前面添加“#”，區(qū)分大小寫(xiě)，語(yǔ)法如下：document.querySelector('#id'); //等同于document.getElementById('id')
2. 元素選擇器
元素選擇器通過(guò)指定的標(biāo)簽查詢?cè)兀藭r(shí)querySelectorAll等同于getElementsByTagName，語(yǔ)法如下：document.querySelectorAll('a'); //獲取頁(yè)面上的所有a元素并返回元素
3. 樣式類選擇器
使用元素的樣式類獲取一個(gè)或一類元素，樣式名字前使用“.”（英文句號(hào)）開(kāi)頭，語(yǔ)法如下：document.querySelectorAll('.btn'); //獲取所有樣式類中包含btn類名的元素
4. 分組選擇器
使用querySelectorAll不僅可以獲取一個(gè)或一類元素，還可以同時(shí)獲取其他類別元素，兩種類型之間使用逗號(hào)隔開(kāi)，語(yǔ)法如下：document.querySelectorAll('a,p');
//獲取頁(yè)面上所有a元素和p元素，并通過(guò)一個(gè)列表返回document.querySelectorAll('.btn,.txt'); //獲取頁(yè)面上所有包含btn和txt樣式類名的元素
5. 屬性選擇器
獲取頁(yè)面上包含指定屬性的元素，屬性名稱可以是元素原生屬性和用戶自定義屬性，語(yǔ)法如下：document.querySelectorAll('a[target="_blank"]');
//獲取頁(yè)面上所有target屬性為_(kāi)blank的a元素document.querySelectorAll('img[data-id]'); //獲取頁(yè)面上所有帶有自定義屬性data-id的img元素
6. 后代選擇器
主要用于選擇作為某元素后代的元素，規(guī)則左邊的選擇器一端包含兩個(gè)或多個(gè)用空格分隔的選擇器，如div a可以理解為查找所有被div包圍的所有a元素，語(yǔ)法如下：document.querySelectorAll('div a');
//獲取頁(yè)面上所有被div包含的a元素document.querySelectorAll('div .btn'); //獲取頁(yè)面上所有被div包含的帶有btn樣式類名的元素
7. 子元素選擇器
后代選擇器會(huì)將元素底下的所有相關(guān)元素都搜索出來(lái)，如果想進(jìn)一步縮小范圍，可以使用子元素選擇器，只會(huì)選擇某個(gè)元素的一級(jí)子元素，子元素用“>”（大于號(hào)）表示，代碼如下：
<html> <div id="first"> <div></div> <div></div> </div></html> <script> document.querySelectorAll('html>div'); //只返回一個(gè)id為first的div元素</script>
8. 相鄰兄弟選擇器（比較少用）
選擇緊接在另一個(gè)元素后的元素，而且兩者有相同的父元素，相鄰兄弟選擇器使用“+”（加號(hào)），代碼如下：
<div> <div></div> <div></div></div><p id="p1"></p><p id="p2"></p><script> document.querySelectorAll('div+p');
//只返回一個(gè)id為p1的p元素</script>
9. 偽類選擇器
“:first-child”表示選擇元素的第一個(gè)子元素，“:last-child”表示選擇元素的最后一個(gè)子元素，“:nth-child(n)”表示選擇元素的第n個(gè)子元素。“:first-child”的使用例子，代碼如下：
<div> <p id="p1"></p> <p id="p2"></p></div> <script> document.querySelectorAll('p:first-child'); //只返回一個(gè)id為p1的p元素</script>
閉包
function outer() {
var data = {}
function inner() {
return data;
}
return inner;
}
閉包目的：不允許提升變量作用域時(shí)，該函數(shù)的局部變量需要被其他函數(shù)使用
閉包本質(zhì)：函數(shù)的嵌套，內(nèi)層函數(shù)稱之為閉包
閉包的解決案例：①影響局部變量的生命周期，持久化局部變量；②解決變量污染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>閉包</title>
</head>
<body>
閉包
</body>
<script>
// 了解知識(shí)點(diǎn)
// 閉包: 局部的函數(shù)(被一個(gè)函數(shù)包裹的函數(shù))
// 為什么使用閉包:
// 1.一個(gè)函數(shù)要使用另一個(gè)函數(shù)的局部變量
// 2.閉包會(huì)持久化包裹自身的函數(shù)的局部變量
// 3.解決循環(huán)綁定
// 函數(shù)的嵌套定義
function outer() {
var num = 10;
function inner() {
// 1.在inner函數(shù)中,使用了outer的局部變量num
return num;
}
return inner;
}
var innerFn = outer();
// 2.借助閉包,將局部變量num的生命周期提升了
var num = innerFn();
console.log(num);
</script>
</html>
循環(huán)綁定
.html文件
<ul> <li>列表項(xiàng)</li> <li>列表項(xiàng)</li> <li>列表項(xiàng)</li> </ul>
.js文件
var lis = document.querySelector('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
// 打印列表項(xiàng)的索引
console.log(i);
}
}
會(huì)發(fā)生變量污染
解決方法
1 獲取局部作用域解決 2 閉包解決 3 對(duì)象屬性解決
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循環(huán)綁定</title>
</head>
<body>
<div class="box">0000000000000000001</div>
<div class="box">0000000000000000002</div>
<div class="box">0000000000000000003</div>
</body>
<script>
var divs = document.querySelectorAll(".box");
/* 存在污染
for (var i = 0; i < divs.length; i++) {
// i = 0 | 1 | 2 | 3
// 循環(huán)綁定
divs[i].onclick = function () {
console.log("***", i)
}
}
// i = 3
console.log(">>>", i);
*/
/* 利用塊級(jí)作用域解決
for (let i = 0; i < divs.length; i++) {
// {i=0 <= i} {i=1 <= i} {i=2 <= i}
// i = 3
// 循環(huán)綁定
divs[i].onclick = function () {
console.log("***", i)
}
} // for運(yùn)行結(jié)束, i=3會(huì)被銷毀
console.log(">>>", i)
*/
// 利用標(biāo)簽的屬性解決
/*
for (var i = 0; i < divs.length; i++) {
divs[i].index = i;
divs[i].onclick = function () {
// console.log("###", i)
console.log(this.index)
}
}
*/
// 利用閉包處理循環(huán)綁定
for (var i = 0; i < divs.length; i++) {
(function () {
var index = i;
divs[index].onclick = function () {
console.log("###", index)
}
})()
/*
(function (index) {
divs[index].onclick = function () {
console.log("###", index)
}
})(i)
*/
/*
(function (i) {
divs[i].onclick = function () {
console.log("###", i)
}
})(i)
*/
}
</script>
</html>
面向?qū)ο驤S
屬性與方法
var obj = {}; | var obj = new Object();
屬性
obj.prop = "";
方法
obj.func = function () {}
刪除屬性與方法
delete obj.prop delete obj.func
屬性和方法實(shí)際使用
對(duì)象: 特征與行為的結(jié)合體, 是一個(gè)具象的實(shí)體
// js對(duì)象語(yǔ)法
var obj = {
// 屬性
name: 'Zero',
// 方法
teach: function () {
console.log("教學(xué)");
}
};
// 對(duì)象使用屬性與方法, 采用.語(yǔ)法
console.log(obj.name);
obj.teach();
JS中中括號(hào)（[ ]）與 .
中括號(hào)運(yùn)算符總是能代替點(diǎn)運(yùn)算符。但點(diǎn)運(yùn)算符卻不一定能全部代替中括號(hào)運(yùn)算符 中括號(hào)運(yùn)算符可以用字符串變量的內(nèi)容作為屬性名。點(diǎn)運(yùn)算符不能 中括號(hào)運(yùn)算符可以用純數(shù)字為屬性名。點(diǎn)運(yùn)算符不能 中括號(hào)運(yùn)算符可以用js的關(guān)鍵字和保留字作為屬性名。點(diǎn)運(yùn)算符不能
下面的例子中，a.b表示對(duì)象a的屬性b，既可以設(shè)置也可以讀取
object[key]=>key為常量時(shí)，object[key]等價(jià)于object.key，例如：a.b == a['b']
特殊的，object[key] 中key為變量時(shí)，只能用中括號(hào)形式
var a = {};
// a.b = 1;
a['b'] = 1;
c = a.b;
// c = a['b'];
alert(c);
標(biāo)識(shí)符是否合法對(duì)兩種用法的影響
var obj = {};
// 為obj添加一個(gè)屬性name，name是合法的標(biāo)識(shí)符，即也可以通過(guò)obj.name方式來(lái)定義
obj['name'] = 'jack';
// 為obj添加一個(gè)屬性2a，2a不是合法的標(biāo)識(shí)符（不能以數(shù)字開(kāi)頭），不能通過(guò)obj.2a來(lái)定義
obj['2a'] = 'test';
var obj = {name:'jack'};
obj['2a'] = 'test';
obj['name']; // --> jack
obj['2a']; // --> test (不能通過(guò)obj.2a獲取)
總結(jié)：常量用點(diǎn)，變量就用中括號(hào)
運(yùn)算符左側(cè)應(yīng)當(dāng)是一個(gè)表達(dá)式，它返回一個(gè)對(duì)象。
對(duì)于點(diǎn)(.)來(lái)說(shuō)，右側(cè)必須是一個(gè)以屬性名稱命名的簡(jiǎn)單標(biāo)識(shí)符。
對(duì)于方括號(hào)([])來(lái)說(shuō)，方括號(hào)里必須是一個(gè)計(jì)算結(jié)果為字符串的表達(dá)式，這個(gè)字符串就是屬性的名字
當(dāng)通過(guò)點(diǎn)運(yùn)算符(.)方法對(duì)象屬性時(shí)，屬性名用一個(gè)標(biāo)識(shí)符來(lái)表示。標(biāo)識(shí)符必須直接出現(xiàn)在js程序中，它們不是數(shù)據(jù)類型，因此程序無(wú)法修改它們。
反過(guò)來(lái)講，當(dāng)通過(guò)[]來(lái)方式對(duì)象的屬性時(shí)，屬性名通過(guò)字符串表示。字符串是js的數(shù)據(jù)類型，在程序運(yùn)行時(shí)可以修改和創(chuàng)建它們
<script type="text/javascript">
var addr = "";
for(i=0;i<4;i++){
addr += cutomer["address" + i] + "
";
}
</script>
這段代碼讀取customer對(duì)象的address0,adddress1,address2,adddress3屬性，并將他們連接起來(lái)
類字典結(jié)構(gòu)使用
結(jié)構(gòu)
var dict = {name: "zero", age: 18}
拓展
var dict = {"my-name": "zero", fn: function () {}, fun () {}}
使用
dict.name | dict["my-name"] | dict.fn()
構(gòu)造函數(shù)（ES5）
// 構(gòu)造函數(shù): 聲明與普通函數(shù)一樣, 只是函數(shù)名采用大駝峰命名規(guī)則
function Person(name) { // 類似于python中的類一樣來(lái)使用
// 構(gòu)造函數(shù)內(nèi)部屬性方式不同于普通函數(shù)
this.name = name; // this代表Person構(gòu)造函數(shù)實(shí)例化出的所有具體對(duì)象中的某一個(gè)
this.teach = function () {
console.log(this.name + "正在教學(xué)");
}
}
// 如何使用構(gòu)造函數(shù)中的屬性與方法
// 1. 通過(guò)構(gòu)造函數(shù)實(shí)例化出具體對(duì)象
// 2. 通過(guò)對(duì)象.語(yǔ)法調(diào)用屬性與方法
var p1 = new Person("楊虎虎"); // name: 楊虎虎
var p2 = new Person("劉xx"); // name: 劉xx
console.log(p1.name);
console.log(p2.name);
p1.teach();
p2.teach();
為什么要用new？
new 會(huì)創(chuàng)建 pre 的對(duì)象，
但是沒(méi)有 new 的話就沒(méi)有沒(méi)有可返回的值或?qū)ο罅耍允? undefined。
如果不想new 新的對(duì)象的話，可以在 pre 的方法里 返回一個(gè)值或?qū)ο蟆?function pre(){
this.radius = Math.random();
return this.radius;
}
加 new 會(huì)把這個(gè)函數(shù)當(dāng)作是一個(gè)構(gòu)造器，返回一個(gè)對(duì)象。
不加的話，就是調(diào)用一個(gè)普通的函數(shù)，結(jié)果視函數(shù)返回值而定。
有new，就返回對(duì)象，不管函數(shù)返回值如何。
無(wú)new，就看函數(shù)返回值。
構(gòu)造函數(shù)最好返回 this 或者無(wú)返回值， 否則容易混淆。
類及繼承（ES6）
// ES6
// 引入了類
class Student { // 類, 可以實(shí)例化對(duì)象, 但實(shí)例化出的對(duì)象需要加以區(qū)分
// 需要構(gòu)造器(構(gòu)造函數(shù))來(lái)完成對(duì)象的聲明與初始化
// ES6規(guī)定方法的語(yǔ)法
constructor (name) {
// 屬性在構(gòu)造器中聲明并完成初始化
this.name = name;
}
// 類中規(guī)定普通方法
study () {
console.log(this.name + "正在學(xué)習(xí)");
}
// 類方法
static fn() {
console.log("我是類方法")
}
}
// 1.實(shí)例化類的對(duì)象
let stu1 = new Student("嘿嘿");
// 2.使用屬性與方法
console.log(stu1.name);
stu1.study();
let stu2 = new Student("嘻嘻");
console.log(stu2.name);
stu2.study();
Student.fn()
<script>
// 類方法
class Tool { // 功能類(工具類)中的方法都定義為類方法
static max (num1, num2) {
return num1 > num2 ? num1 : num2;
}
}
// 通過(guò)Tool類來(lái)求兩個(gè)數(shù)中的大值, 需要Tool類的對(duì)象出現(xiàn)嗎? 不需要 => 功能有類直接使用
console.log(Tool.max(666, 888));
// throw "自定義異常";
// console.log("上面如果出現(xiàn)了異常, 邏輯將會(huì)被強(qiáng)制停止");
// var num = 10 / 0;
// console.log(num)
</script>
總結(jié)
以上是生活随笔為你收集整理的JS高级语法与JS选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 怎么寄笔记本电脑到日本电脑如何寄件
- 下一篇： 教你一个电脑上上传图片的好方法电脑如何传