js對象
- 使用特殊的屬性名,不能使用.方式操作
let obj={};
obj.name="zeng";
obj["123"]="hehe";
console.log(obj["name"],obj["123"]);//zeng hehe
console.log(obj[name],obj["123"],obj.name);//underfined hehe zeng
說明：[]內(nèi)部必須是字符串,內(nèi)部可以傳入字符串類型的變量更加靈活
- in 運算符
通過該運算符可以檢查一個對象中是否包含有指定的屬性，返回布爾值
函數(shù)
- 直接return其實返回的是underfined
- 自執(zhí)行函數(shù)
(function(){
console.log("自執(zhí)行函數(shù)")
})()
說明：匿名函數(shù)腌逢，如果外面不加()則{}會被當成代碼塊降淮，全面的function無法識別。
作用域
- 全局作用域
- 變量的聲明提前
- 函數(shù)的聲明會被提前搏讶，所以聲明式的函數(shù)可以在任地方使用
- 函數(shù)表達式佳鳖，不會被提前
test();//test
//函數(shù)式聲明
function test(){
console.log("test");
}
test1();//報錯
//函數(shù)表達式
var test1=function(){
console.log("test");
}
- 函數(shù)作用域：基本和全局作用域一致，只是在函數(shù)塊內(nèi)起作用
this
- 根據(jù)函數(shù)的調(diào)用方式不同媒惕，this會指向不同對象
- 以函數(shù)形式調(diào)用系吩，永遠this都是windows
- 以方法的形式調(diào)用時，this指向調(diào)用的對象
var name="呵呵";
function test(){
console.log(name,this.name,this);
//name如果函數(shù)內(nèi)部不存在就會去全局找妒蔚，但是this.name指向調(diào)用者
}
test();//呵呵 呵呵 Window {postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window, …}
var obj={
show:test,
name:"測試"
}
obj.show()//呵呵 測試 {show: ?, name: "測試"}
數(shù)組
- slice截取(切片)數(shù)組 得到截取的數(shù)組
返回從原數(shù)組中指定開始索引(包含)到結束索引(不包含)之間的項組成的新數(shù)組,原數(shù)組木變 穿挨，索引從0開始 - splice剪接數(shù)組 原數(shù)組變化 可以實現(xiàn)shift前刪除，pop后刪除,unshift前增加,同push后增加一樣的效果
- sort(回調(diào)函數(shù)) 回調(diào)函數(shù)返回值大于1則元素交換位置
- indexOf數(shù)組元素索引肴盏，并返回元素索引科盛，不存在返回-1,索引從0開始
- join數(shù)組轉成字符串，并返回字符串菜皂，原數(shù)組不變
- reverse 數(shù)組翻轉贞绵，并返回翻轉后的原數(shù)組，原數(shù)組翻轉了
- reverse 數(shù)組翻轉恍飘，并返回翻轉后的原數(shù)組榨崩，原數(shù)組翻轉了
arguments
- 是一個類數(shù)組對象，可以通過索引來操作數(shù)據(jù)章母，也可以獲取長度
- 所有實參都保存在arguments中
- arguments有個callee屬性母蛛，代表就是當前正在指向的函數(shù)對象
DOM
DOM查詢
- 通過document對象調(diào)用
- getElementById()
- getElementsByTagName() 通過標簽名獲取一組元素節(jié)點
- getElementsByName() 通過name屬性獲取一組元素節(jié)點對象
- 通過具體的元素節(jié)點調(diào)用(獲取元素節(jié)點的子節(jié)點)
- getElementsByTagName() 獲取當前節(jié)點的指定標簽名的后代節(jié)點
- childNodes屬性 當前節(jié)點的所以子節(jié)點
- firstChild屬性 當前節(jié)點的第一個子節(jié)點
- lastChild屬性 當前節(jié)點的最好一個子節(jié)點
- 獲取父節(jié)點和兄弟節(jié)點(通過具體節(jié)點調(diào)用)
- parentNode屬性 當前節(jié)點的父節(jié)點
- previousSibling屬性 當前節(jié)點的前一個兄弟節(jié)點
- nextSibling屬性 當前節(jié)點的后一個兄弟節(jié)點
- 剩余補充
- document.body 獲取body標簽
- document.documentElement 獲取html根標簽
- document.getElementsByClassName()
- document.querySelector(選擇器) 返回滿足條件的第一個
- document.querySelectorAll(選擇器) 返回所有滿足條件的
//頁面加載完畢才執(zhí)行
window.onload = function () {
let btn = document.getElementById("btn");
//綁定事件
btn.onclick = () => {
btn.innerText = btn.className;
btn.style.width=100+"px";
// console.log(btn.style);//這種方式只能讀取標簽的內(nèi)聯(lián)樣式
//獲取元素當前顯示的樣式
//只在IE上面有效
// console.log(btn.currentStyle)
//其他瀏覽器上面getComputedStyle,是window的方法,IE9以上支持
//參數(shù)一：要獲取樣式的元素
//參數(shù)二：可以傳遞一個偽元素，一般都傳遞null
console.log(getComputedStyle(btn,null)["width"])
}
}
其他相關的屬性
- 計算規(guī)則：內(nèi)容區(qū)+內(nèi)邊距
- clientHeight 返回元素可見高度(只讀)
- clientWidth 返回元素可見寬度(只讀)
- 計算規(guī)則：內(nèi)容區(qū)+內(nèi)邊距+邊框
offsetHeight 返回元素的高度(只讀)
offsetWidth 返回元素的寬度(只讀)
offsetParent 獲取當前元素的定位父元素(獲取的是一個對象,離當前元素最近的開啟了定位的祖先元素)
offsetLeft 返回元素的水平偏移位置
offsetTop 返回元素的垂直偏移位置
scrollHeight 返回元素整體高度
scrollWidth 返回元素整體寬度
scrollLeft 返回元素左邊緣與滾動條之間的距離
scrollTop 返回元素上邊緣與滾動條之間的距離
當scrollHeight-scrollTop=clientHeight說明垂直滾動條到底
事件對象(event)
當事件的響應函數(shù)被觸發(fā)時乳怎，瀏覽器每次都會將一個事件對象作為實參傳遞進響應函數(shù)溯祸。event對象包含該事件的所有信息。
- event.target 表示的是事件觸發(fā)的對象
let d=document.querySelector("div");
d.onmousemove=(event)=>{
console.log(event.offsetX);
}
事件冒泡
事件的向上傳導，當后代元素上的事件被觸發(fā)時焦辅，其祖先元素的相同事件也會被觸發(fā)。
- 阻止冒泡
- event.cancleBubble=true
- event.stopPropagation()
事件委托
<body>
<ul>
<li><a href="javascript:;" class="cl">1</a></li>
<li><a href="javascript:;" class="cl">2</a></li>
<li><a href="javascript:;" class="cl">3</a></li>
<li><a href="javascript:;" class="cl">4</a></li>
<li><a href="javascript:;" class="cl">5</a></li>
<li><a href="javascript:;" class="cl">6</a></li>
</ul>
</body>
</html>
<script>
let ul=document.querySelector("ul");
ul.onclick=function(event){
let tar=event.target;
if(tar.className==='cl'){
console.log(tar.innerText);
}
}
</script>
說明：li可能有多個椿胯，而且可能后期點擊按鈕添加筷登，則這
時候，如果每隔a標簽都是代碼里面設置onclick明顯不合理哩盲，這時候可以利用冒泡原理前方，在父元素上面設置監(jiān)聽點擊事件，但是本意只是a標簽能點擊廉油，可是此時li也可以點擊惠险；可以借用event.target獲取當前事件的標簽，然后通過類名等加以判斷抒线。
事件的傳播
- 捕獲階段
在捕獲階段時從最外層的祖先元素班巩，向目標元素進行事件的捕獲，但是默認此時不會觸發(fā)事件
- 目標階段
事件捕獲到目標元素嘶炭，捕獲結束開始在目標元素上觸發(fā)事件
- 冒泡階段
事件從目標元素向他的祖先元素傳遞抱慌，依次觸發(fā)祖先元素上的事件
1.png
事件綁定
let li=document.querySelector("li");
li.addEventListener("click",()=>{
alert("ceshi");
})
li.addEventListener("click",()=>{
alert("ceshi1");
})
參數(shù)一：事件的字符串，不要on眨猎，例如onclick只是click
參數(shù)二：回調(diào)函數(shù)
參數(shù)三：是否在捕獲階段觸發(fā)事件抑进，需要一個布爾值，默認false
說明：如果通過onclick類似方式綁定事件睡陪，只能綁定一個寺渗，最后一個生效。此時addEventListener可以多次綁定事件兰迫，而且都會執(zhí)行信殊。
補充：回調(diào)函數(shù)內(nèi)部this指向調(diào)用者，即li
BOM
- window:代表整個瀏覽器的窗口逮矛，同時也是網(wǎng)頁的全局對象
- Navigator:代表當前瀏覽器的信息鸡号，通過該對象可以識別不同的瀏覽器
- Location:代表瀏覽器的地址欄，可以獲取地址欄信息须鼎，或者操作瀏覽器跳轉頁面
location.reload(true) true代表刷新之后會清空緩存鲸伴，輸入數(shù)據(jù)都不會存在了，默認是false晋控，會保存
- History:代表瀏覽器歷史紀錄汞窗，可以操作歷史紀錄，由于隱私原因赡译，該對象不能獲取具體的歷史記錄仲吏，只能操作瀏覽器前后翻頁
- Screen:代表用戶的屏幕信息，通過該對象可以獲取到用戶的顯示器的相關信息
