lt;!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function req(){
var div=document.getElementById("div1");
document.getElementById("li1").innerHTML=(div.offsetTop)+"px";//div1距離屏幕頂部的距離
document.getElementById("li2").innerHTML=(div.offsetLeft)+"px";//div1距離屏幕左部的距離
document.getElementById("li3").innerHTML=(div.scrollTop)+"px";//div1縱向滾動條滾動的距離
document.getElementById("li4").innerHTML=(div.scrollLeft)+"px";//div1橫向滾動條滾動的距離
}
</script>
</head>
<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
<div style="width:60%;border-right:1px dashed red;float:left;">
<div style="float:left;">
<div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">
<div style="height:500px;width:400px">請調整橫豎滾動條后,點擊按鈕后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
</div>
<input type="button" value="點擊我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>
</div>
</div>
<div style="width:30%;float:left;">
<ul style="list-style-type: none; line-height:30px;">結果:
<li>offsetTop : <span id="li1"></span></li>
<li>offsetLeft : <span id="li2"></span></li>
<li> scrollTop : <span id="li3"></span></li>
<li>scrollLeft : <span id="li4"></span></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
、偏移量offset
offset是偏移、位移、補償的意思(取整數值四舍五入),表示元素的偏移量。
html和css代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
div {
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 100px;
position: relative;
}
span {
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
left: 120px;
top: 30px;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
JavaScript代碼
ebApi 思維導圖見文章底部
1. nodeType(節(jié)點類型)
2. nodeName(節(jié)點名字)
3. nodeValue(節(jié)點值)
元素節(jié)點就是標簽節(jié)點
屬性包括屬性名和屬性值
window.open(href); /*打開一個網頁*/
window.close(); /*關閉網頁*/
在計算機中 事件代表捕捉了用戶進行了什么操作 再給對應的事件處理
事件源 事件類型 事件處理函數
用戶操作的是什么元素 事件中的this就是事件的事件源(誰觸發(fā)這個事件那this就是誰)
用戶進行了什么操作
實現(xiàn)拖拽 要考慮元素是否有margin 移動的x和y?減去元素原有的margin 給元素添加鼠標按下事件 在按下事件里面給頁面添加鼠標移動事件 給元素注冊鼠標彈起事件=> 清除頁面鼠標移動事件
H5拖拽 需要為拖拽的元素添加 draggable="true" 屬性 拖拽元素添加
三參數
/*
事件名 不加on
事件處理函數
boolean值 是否事件捕捉
*/
el.addEventListener()
ie8 不支持 addEventListener 兩參數
/*
事件名 加on
事件處理函數
*/
el.attachEvent()
元素.on事件=處理函數 (添加事件 如果是同名事件,后面的事件處理函數會覆蓋前面的) 元素.addEventListener() (添加事件 不會覆蓋之前的同名事件)
用什么方式添加的事件就用什么方式移除事件
el.onclick=function(){};
// 移除
el.onclick=null;
el.addEventListener("click",fn1)
// 移除
el.removeEventListener("click",fn1)
el.attachEvent("onclick",f1)
// 移除
el.detachEvent("onclick",fn1)
用戶操作后要執(zhí)行的什么代碼
screen e.screenX 和 e.screenY 獲取的是點擊的位置相對于屏幕左上角的坐標
page e.pageX,e.pageY 獲得的是點擊的位置相對于頁面(文檔)左上角的坐標 有兼容性的問題,IE8不支持,自己計算 pageX=e.clientX + 頁面往左滾出去的距離 (scrollLeft) pageY=e.clientY + 頁面往上滾出去的距離 (scrollTop)
offset e.offsetX,e.offsetY 獲得是是點擊的位置相當于事件源的左上角的位置 ie屬性 有bug offsetX=e.clientX - 盒子到可視區(qū)域的left (el.getBoundingClientRect.left) offsetY=e.clientY - 盒子到可視區(qū)域的top (el.getBoundingClientRect.top)
this 和 e.currentTarget 是一樣的 當前調用的是誰的事件 那么this就是誰 e.currentTarget ie8 不支持=> 直接用this
e.target 獲取事件源(目標階段) 正在觸發(fā)事件的那個元素 ie8不支持=> e.target 兼容代碼 var target=e.target || e.srcElement
在事件里可以通過 e.eventPhase 來捕獲當前是哪個階段 捕獲=> 1 目標=> 2 冒泡=> 3
捕獲 目標 冒泡
一種現(xiàn)象 與冒泡階段相反 從window開始 依次一級一級往下調用子元素的同名事件,直到找到真正觸發(fā)事件的事件源 事件捕獲默認看不見 想要看到捕獲階段則需要通過 addEventListener來綁定事件,并且第三個參數傳true
找到真正觸發(fā)事件的那個元素 -> 事件源
一種現(xiàn)象 當元素事件觸發(fā)后 會從事件源開始依次一次一次往上調用父元素的同名事件,直到window 事件冒泡默認存在
好處:給父元素添加事件相當于給子元素添加了事件 -> 事件委托 -> e.target 帶來的影響(壞處):如果子元素和父元素有同名事件 并且業(yè)務邏輯相反 則會沖突影響
設置捕獲
先捕獲 從window開始 依次一級一級調用子元素的同名事件 -> 找到目標(真正觸發(fā)事件的元素) -> 從目標元素開始 依次一級一級調用父元素的同名事件 直到window
未設置捕獲
找到目標(真正觸發(fā)事件的元素) -> 從目標元素開始 依次一級一級調用父元素的同名事件 直到window
阻止事件冒泡和阻止事件捕獲 e.stopPropagation() ie8魔鬼不支持(ie8只有事件冒泡,沒有事件捕獲)=> e.cancelBubble=true
只能存儲字符串 查看本地存儲 瀏覽器F12->Application->Local || Session Storage->fille://
可以把數據存儲到本地(瀏覽器) 只要用戶不刪除 則會一直保存 每個域名都是獨立的保存數據 不同域名不能互相訪問 長久保存數據可以存儲到 localStorage
短暫存儲數據 可以多頁面?zhèn)髦?相當于localStorage會更安全 瀏覽器關閉后就不會保存了
給元素添加動畫定時器 可以將定時器id直接給元素 元素.timeId
每隔一段時間執(zhí)行一段代碼
/*
參數一: 要執(zhí)行的代碼 可以寫字符串 在字符串里面寫js代碼 或者寫函數
參數二: 間隔事件 單位是毫秒 1000毫秒=1秒
*/
window.setInterval()
一段時間后執(zhí)行一段代碼
/*
參數一: 要執(zhí)行的代碼 可以寫字符串 在字符串里面寫js代碼 或者寫函數
參數二: 延遲事件 單位是毫秒 1000毫秒=1秒
*/
window.setTimeout()
clearInterval(定時器id)
clearTimeout(延時器id)
將a標簽的href的路徑改為 javascript:void(0) || javascript:void(null) || 簡寫 javascript:
給a標簽添加點擊事件 在事件處理函數的最后 return false
阻止事件默認行為 e.preventDefault()
return和事件對象e阻止跳轉的區(qū)別 return后面的代碼不執(zhí)行 e.preventDefault()不會影響后面代碼執(zhí)行
先把大家恢復成默認,再讓自己特殊 tab切換
只能獲取行內樣式
只能取值 (number) 不能賦值 offsetWidth 和 offsetHeight 獲取包括padding和border和width||height
獲取盒子的最終寬度
獲取盒子的最終高度
獲取自身上外邊框到定位父級上內邊框的距離
獲取自身左外邊框到定位父級左內邊框的距離
scrollWidth 和 scrollHeight 獲取的包括了隱藏的部分 只能獲取(number)不能修改 scrollLeft 和 scrollTop 可以獲取也可以修改 想要滾動條滾動到最右變 直接賦值為 scrollWidth即可
獲取盒子內容的總寬度
獲取盒子內容的總高度
獲取內容上邊滾出去的距離
獲取內容左邊滾出去的距離
scrollTop和scrollLeft有兼容問題 兼容代碼
var scrollTop=window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
var scrollLeft=window.pageXOffset
|| document.documentElement.scrollLeft
|| document.body.scrollLeft
|| 0;
如果元素有滾動條 那么這個元素的可視寬度就是 整個盒子的寬度 - 滾動條的寬度
獲取可視區(qū)域的寬
獲取可視區(qū)域的高
獲取左邊框的寬度
獲取上邊看的寬度
如果沒有這個元素 則返回null 有則返回一個對象
獲取 id 只能通過document來獲取
document.getElementById("id")
如果沒有這個元素 則返回一個空集合[偽數組] document.getElementsByClassName('class')
ie8魔鬼有兼容問題 document.getElementsByTagName("div")
document.getElementsByName("name")
document
document.documentElement
document.head
document.body
區(qū)別
el.parentNode可以獲取到document el.parentElement不能獲取到document 因為document不是一個元素
父元素.appendChild("子元素")
父元素.removeChild("子元素")
父元素.insertBefore(插入的新元素,要在哪個元素前面插入)
父元素.replaceChild(新的元素,被替換的元素)
既可以操作自帶屬性,也可以操作自定義屬性
在自定義屬性前面加 data- 如果自定義屬性前面添加了 data- 那么這些自定義屬性都會保存到el.dataset '對象' 里面 想要取得屬性直接遍歷對象即可 取值時 data-會被去掉 并且如果后面還有- 會把后面的-也去掉 并把-后面的首字母大寫(駝峰命名法)
只能在body添加元素,并且會覆蓋之前頁面中的元素
創(chuàng)建一個標簽存在內存里面 再通過 父元素.appendChild(“創(chuàng)建出來的元素”) 渲染到頁面 appendChild細節(jié) 給父元素追加一個元素,添加在最后,如果此元素已經存在,則被移動到最后
為某元素添加內容,會覆蓋原來的內容 +=就只會追加不會覆蓋 每次innerHtml賦值(+=)都是重新渲染, 所以有可能會讓之前的元素丟失, 還會讓之前元素的事件丟失(事件委托可解決) 渲染耗性能,大量資源浪費 先拼接字符串 再循環(huán)完了后一次性追加到頁面中
樣式名 如果在css 有 "-" 的 應使用 駝峰命名法 background-color=> backgroundColor
el.classList 返回的是一個偽數組 保存的是元素上的所有類名
let flag=this.value=="隱藏" ? true : false divBox.style.display=flag ? "none" : "block" this.value=flag ? "顯示" : "隱藏" // 這里用來下一次 點擊再次toggle 所以需要與設置的flag相反設定對應的值
加上代表禁用 不加上代表啟動 js里面設置它為 true 代表禁用、false 代表啟用
innerHTML沒有兼容問題 既可以拿到文本也可以渲染標簽
innerText和textContent都是設置標簽里面的文本內容 將數據當成字符串輸出到頁面 不會渲染 innerText在老版火狐里面不支持 textContent在ie9以下都不支持
window.getComputedStyle(element)["width"]
window.getComputedStyle(element).width
返回的string屬性值 "100px"
/*ie8魔鬼專用*/
element.currentStyle['width']
element.getBoundingClientRect()
element.getBoundingClientRect().left
element.getBoundingClientRect().top
獲取鼠標位置相對于自身的x和y (offsetX和offsetY有bug) e.clientX - 盒子到可視區(qū)域的left e.clientY - 盒子到可視區(qū)域的top
若有感興趣的小伙伴,需要WebAPI思維導圖原圖的,關注我,私信回復獲取:WebAPI思維導圖原圖
作者:藍海00
轉載鏈接:https://www.jianshu.com/p/d3b815c8d914
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。