BOM DOM
BOM
概述：
BOM 瀏覽器對(duì)象模型，對(duì)于路由的底層就是bom
六大對(duì)象
window 全局對(duì)象
location 地址欄（url）*
history 歷史頁(yè)面 *
document 文檔對(duì)象
navigator 導(dǎo)航（獲取瀏覽器對(duì)應(yīng)的信息）
screen 屏幕對(duì)象 （獲取對(duì)應(yīng)的寬高 適配兼容）
frames 框架的布局
DOM
概述：
DOM 文檔對(duì)象模型 他是用于操作對(duì)應(yīng)的html文檔（增刪改查）
dom樹(shù)分為
元素節(jié)點(diǎn) （所有的標(biāo)簽都是屬于元素節(jié)點(diǎn)）
屬性節(jié)點(diǎn) （所有標(biāo)簽里面的屬性都是屬性節(jié)點(diǎn)）
文本節(jié)點(diǎn) （所有顯示的文本都是文本節(jié)點(diǎn)）
元素節(jié)點(diǎn)的操作
元素節(jié)點(diǎn)的獲取
獲取元素的方法
document對(duì)象加對(duì)應(yīng)的方法來(lái)獲取元素
getElementByID 根據(jù)id選擇器獲?。ㄔ兀?/p>
getElementsByClassName 根據(jù)class名字獲取 （返回一個(gè)元素?cái)?shù)組 他是一個(gè)偽數(shù)組 （除了具備對(duì)應(yīng)
的下標(biāo) 和length屬性其他方法都不具備））
getElementsByTagName 根據(jù)標(biāo)簽名獲取 （返回偽數(shù)組 htmlcollection）
getElementsByName 根據(jù)name屬性獲取 （返回偽數(shù)組）
querySelector 根據(jù)選擇器獲取（他會(huì)獲取找到第一個(gè)元素）
querySelectorall 根據(jù)選擇器獲取所有匹配的元素 （返回偽數(shù)組 nodeList）獲取body和head的屬性
獲取body document.body 屬性
獲取head document.head 屬性
元素所具備的屬性（賦值就是對(duì)應(yīng)的設(shè)置 反之就是獲?。?/p>
id 獲取對(duì)應(yīng)的id （設(shè)置）
className 獲取對(duì)應(yīng)的class名字
style 獲取樣式 （設(shè)置）
tagName 獲取標(biāo)簽名
title 獲取title屬性
innerHtml 獲取顯示的內(nèi)容 （設(shè)置顯示的內(nèi)容 包含html代碼）
innerText 獲取顯示的文本 （設(shè)置顯示的文本 不包含html代碼）
所有的表單元素都具備的屬性 value
節(jié)點(diǎn)的區(qū)分（屬性）
nodeType 節(jié)點(diǎn)的類(lèi)型
nodeName 節(jié)點(diǎn)名字
nodeValue 節(jié)點(diǎn)值
獲取子節(jié)點(diǎn)
childNodes（獲取所有的子元素節(jié)點(diǎn)及文本節(jié)點(diǎn)（包含空格和換行符））
children （獲取所有的子元素節(jié)點(diǎn)） *
parentNode 獲取對(duì)應(yīng)的父節(jié)點(diǎn)
removeChild 移出子節(jié)點(diǎn)
Math的方法（靜態(tài)方法）
abs 絕對(duì)值
random 隨機(jī)數(shù)
pow 冪次方
sqrt 開(kāi)平方
max 最大值
min 最小值
ceil 向上取整floor 向下取整
round 四舍五入
屬性
PI 圓周率
E 科學(xué)計(jì)數(shù)法
屬性節(jié)點(diǎn)的相關(guān)的內(nèi)容（針對(duì)元素節(jié)點(diǎn)）
獲取所有的屬性節(jié)點(diǎn) attributes 返回一個(gè)偽數(shù)組（element）
NamedNodeMap里面的方法
getNamedItem 獲取對(duì)應(yīng)屬性節(jié)點(diǎn)
setNamedItem 設(shè)置對(duì)應(yīng)的屬性節(jié)點(diǎn)
removeNamedItem 移除對(duì)應(yīng)的屬性節(jié)點(diǎn)
關(guān)于屬性操作的方法（操作任意屬性）
getAttribute 獲取屬性值
setAttribute 設(shè)置屬性
removeAttribute 移除屬性
var box = document.getElementById("box")
//所有元素都具備的屬性 attributes 獲取所有里面所有的屬性節(jié)點(diǎn) 返回的是一個(gè)偽數(shù)組
namedNodeMap
//map key-value形式的偽數(shù)組 object
console.log(box.attributes);
console.log(box.attributes.length);
//通過(guò)下標(biāo)來(lái)獲取對(duì)應(yīng)的屬性節(jié)點(diǎn)
var id = box.attributes[0]
//通過(guò)key來(lái)獲取對(duì)應(yīng)的節(jié)點(diǎn)(屬性名)
console.log(box.attributes['id']);//node對(duì)象
console.log(id);//node對(duì)象
// 節(jié)點(diǎn)的幾個(gè)屬性 nodeType nodeValue nodeName
console.log(id.nodeType); //2
console.log(id.nodeValue); //box
console.log(id.nodeName); //id節(jié)點(diǎn)的操作
元素節(jié)點(diǎn)的創(chuàng)建 createElement
屬性節(jié)點(diǎn)的創(chuàng)建 createAttribute
文本節(jié)點(diǎn)的創(chuàng)建 createTextNode
增刪改的方法
appendChild 添加到后面
insertBefore 添加到前面
remove 移除自身的所有內(nèi)容
removeChild 移除對(duì)應(yīng)的子節(jié)點(diǎn)
replaceChild 替換對(duì)應(yīng)的子節(jié)點(diǎn)
replaceChildren 替換里面的所有內(nèi)容
var div = document.querySelector("div")
//屬性操作的三個(gè)方法
// 查詢(xún) 獲取 getAttribute(屬性名)
var value = div.getAttribute("title") //返回屬性值
console.log(value);
// 刪除 delete 全刪 remove 刪內(nèi)容不刪日志 removeAttribute(屬性名)
div.removeAttribute("title")
// 添加 添加重復(fù)就是修改 setAttribute(屬性名,屬性值)
div.setAttribute("class","box")
div.setAttribute("class","innerBox")
//創(chuàng)建元素節(jié)點(diǎn) 返回的是一個(gè)元素節(jié)點(diǎn) createElement(標(biāo)簽名)
var newEle = document.createElement("div")
var newEle1 = document.createElement("div")
//創(chuàng)建屬性節(jié)點(diǎn) createAttribute(屬性名)
var attr = document.createAttribute("class")
//設(shè)置屬性值
attr.value = "box"
//創(chuàng)建文本節(jié)點(diǎn) 傳的是顯示的內(nèi)容 createTextNode(對(duì)應(yīng)的文本)
var text = document.createTextNode("hello world")
//添加子節(jié)點(diǎn) add append
newEle.setAttributeNode(attr) //設(shè)置屬性節(jié)點(diǎn) setAttribute
newEle.appendChild(text) //添加文本節(jié)點(diǎn) innerText
var span = document.createElement("span")
var a = document.createElement("a")
var span1 = document.createElement("span")
newEle.appendChild(span)
// appendChild 追加到后面 insertBefore appendChild 元素已經(jīng)添加是不會(huì)再次添加
newEle.insertBefore(span1,text)
document.body.appendChild(newEle) //添加元素節(jié)點(diǎn)
//刪除節(jié)點(diǎn) 直接刪除對(duì)應(yīng)的節(jié)點(diǎn)
document.body.appendChild(newEle1)
newEle1.remove() //把自己所有的都刪除 包含里面的內(nèi)容和自己
//刪除子節(jié)點(diǎn) removeChild(傳入的是被刪除的節(jié)點(diǎn))
newEle.removeChild(span1)
//修改的方法 replace replaceChildren替換所有的 replaceChild(新的節(jié)點(diǎn),原本的子節(jié)點(diǎn)) 替
換對(duì)應(yīng)的節(jié)點(diǎn)節(jié)點(diǎn)克隆的方法
cloneNode
節(jié)點(diǎn)之間的關(guān)系
父子關(guān)系（屬性）
childNodes 獲取所有的子節(jié)點(diǎn)（文本節(jié)點(diǎn)及元素節(jié)點(diǎn)）
children 獲取所有的子元素節(jié)點(diǎn)
parentNode 父節(jié)點(diǎn)
parentElement 父元素
兄弟關(guān)系（屬性）
previousSibling 前一個(gè)節(jié)點(diǎn)
previousElementSibling 前一個(gè)元素節(jié)點(diǎn)
nextSibling 后一個(gè)節(jié)點(diǎn)
nextElementSibling 后一個(gè)元素節(jié)點(diǎn)
firstChild 第一個(gè)節(jié)點(diǎn)
lastChild 最后一個(gè)
newEle.replaceChild(a,span)
newEle.replaceChildren(a) //不常用的
var div = document.querySelector("div")
// deep 是否深入 里面的內(nèi)容是否全部克隆包含事件
//如果deep是false 那么只能克隆當(dāng)前的元素 默認(rèn)為false
var clone = div.cloneNode() //節(jié)點(diǎn)克隆 返回的是克隆的元素
document.body.appendChild(clone)
//獲取子節(jié)點(diǎn)
var div = document.querySelector("div")
//得到所有的子節(jié)點(diǎn)
var childs = div.childNodes //返回nodeList
console.log(childs);
//返回所有的子元素節(jié)點(diǎn)
console.log(div.children);
//獲取第一個(gè)子元素 空文本
console.log(childs[0].parentNode);//得到父節(jié)點(diǎn) （節(jié)點(diǎn)）
//獲取對(duì)應(yīng)的父元素節(jié)點(diǎn)
console.log(childs[0].parentElement); //得到父元素（元素節(jié)點(diǎn)）
//獲取前一個(gè)節(jié)點(diǎn)
var b = document.querySelector("b")
console.log(b.previousSibling); //前一個(gè)節(jié)點(diǎn)
console.log(b.nextSibling); //后一個(gè)節(jié)點(diǎn)
console.log(b.previousElementSibling); //前一個(gè)元素節(jié)點(diǎn)
console.log(b.nextElementSibling); //后一個(gè)元素節(jié)點(diǎn)
console.log(document.querySelector("div").firstChild); //獲取第一個(gè)子節(jié)點(diǎn)
console.log(document.querySelector("div").lastChild);//獲取最后一個(gè)子節(jié)點(diǎn)this
this關(guān)鍵詞表示自己 指向當(dāng)前的調(diào)用者
//獲取所有的按鈕
var btns = document.querySelectorAll("button")
//for循環(huán)遍歷
for (var i=0;i<btns.length;i++) {//var 聲明的是偽全局作用域
//拿到對(duì)應(yīng)的元素添加點(diǎn)擊事件
btns[i].onclick = function(){ //事件是異步
// console.log(i);
// btns[i] 顯示為undefined 原因是這個(gè)地方i為5
//this會(huì)指向你點(diǎn)的按鈕
// console.log(this); this指向當(dāng)前調(diào)用的元素
console.log(this.innerText);
}
}
setTimeout(function(){
console.log(this);
},100) //window 對(duì)象 setTimeout屬于window對(duì)象的
console.log(i);
事件上
事件概述
用戶(hù)在瀏覽器上觸發(fā)一個(gè)操作 瀏覽器上會(huì)執(zhí)行相關(guān)的函數(shù)進(jìn)行處理 這個(gè)稱(chēng)為事件
示例：用戶(hù)點(diǎn)擊注冊(cè)按鈕 瀏覽器會(huì)完成注冊(cè)的操作
事件的倆種模式
內(nèi)聯(lián)模式
腳本模式 *
事件劃分
事件的執(zhí)行者 元素
事件名 on開(kāi)頭+對(duì)應(yīng)的名字
事件處理函數(shù) function
事件的分類(lèi)
鼠標(biāo)事件 （mouse）
點(diǎn)擊的事件
click
dblcilck
mousedown
mouseup
移進(jìn)
mouseenter
<!-- 內(nèi)聯(lián)的模式 -->
<button onclick="alert(123)">123</button>
<!-- 腳本模式 -->
<!-- 采用對(duì)應(yīng)的分離 將對(duì)應(yīng)的事件的處理函數(shù)進(jìn)行分離 -->
<button onclick="handlerClick()">123</button>
<script>
function handlerClick(){
alert(123)
}
</script>
//執(zhí)行者 事件名
document.onclick = function(){
//處理函數(shù)
}mouseover （子元素也會(huì)觸發(fā)）
移出
mouseleave
mouseout （子元素也會(huì)觸發(fā)）
移動(dòng)
mousemove
鍵盤(pán)事件 （key）
keyup 彈起
keydown 按下
keypress （字符鍵才觸發(fā) 按下）
HTML事件
load 加載事件
unload 卸載
select 選擇
change 修改
blur 失去焦點(diǎn)
focus 獲取焦點(diǎn)
input 輸入內(nèi)容
scroll 滾動(dòng)
submit 提交
reset 重置
window.onkeydown = function(){
console.log("鍵盤(pán)按下");
}
window.onkeyup = function(){
console.log("鍵盤(pán)彈起");
}
//字符鍵觸發(fā)的 只有按字符的時(shí)候才能觸發(fā) tab ctrl
window.onkeypress = function(){
console.log("字符按下");
}
//窗口加載
window.onload = function(){
console.log("加載");
}
window.onunload = function(){
console.log("卸載");
}
//html元素的一些事件
// 表單元素所有的函數(shù)都具備一個(gè)參數(shù) arguments（所有傳遞參數(shù) 他是數(shù)組）
處理函數(shù)也同樣是函數(shù) 同樣存在這個(gè)arguments
通過(guò)我們的比對(duì)我們發(fā)現(xiàn)這個(gè)arguments里面只有一個(gè)參數(shù) 這個(gè)參數(shù)是一個(gè)event對(duì)象（事件源對(duì)象）
由于我們的arguments[0]是或者對(duì)應(yīng)的arguments數(shù)組里面的第一個(gè)參數(shù)（第一個(gè)形參 所以我們可以
在對(duì)應(yīng)的處理函數(shù)中直接聲明一個(gè)形參來(lái)接收我們arguments里面的數(shù)據(jù)）
event 事件源對(duì)象 （window里面的）
// 獲取焦點(diǎn)事件
document.querySelector("input").onfocus = function(){
console.log("獲取焦點(diǎn)");
// focus方法可以直接獲取焦點(diǎn)
document.querySelector("input:nth-child(2)").focus()
}
// 失去焦點(diǎn)事件
document.querySelector("input").onblur = function(){
console.log("失去焦點(diǎn)");
}
document.querySelector("#context").onselect = function(){
console.log("選擇了");
}
// 修改數(shù)據(jù) 修改數(shù)據(jù) 失去焦點(diǎn)
document.querySelector("input:nth-child(2)").onchange = function(){
console.log("修改數(shù)據(jù)了");
}
//vue 雙向綁定的原理實(shí)現(xiàn)
document.querySelector("input:nth-child(2)").oninput = function(){
console.log("輸入數(shù)據(jù)");
}
// 表單元素 form
document.querySelector("form").onsubmit = function(){
console.log("數(shù)據(jù)提交了");
}
//重置事件 form
document.querySelector("form").onreset = function(){
console.log("數(shù)據(jù)重置了");
}
//scroll 滾動(dòng)欄 滾動(dòng)事件 任何具備滾動(dòng)欄都可以添加
window.onscroll = function(){ //回到頂部
console.log("滾動(dòng)了");
}
setTimeout(function(){
//操作滾動(dòng)欄滾動(dòng) x 軸 y 軸
window.scrollTo(0,0)
},5000)
document.querySelector("button").onclick = function(e){
//e其實(shí)就是我們對(duì)應(yīng)的arguments[0] 所以這個(gè)e就是我們的event對(duì)象
// 建議形參的寫(xiě)法為 e或event
//兼容寫(xiě)法
e = e || window.event //兼容寫(xiě)法
console.log(e.altKey);
}event對(duì)象里面的屬性
位置相關(guān)屬性
offsetX 鼠標(biāo)離當(dāng)前元素的X距離
offsetY 鼠標(biāo)離當(dāng)前元素的Y距離
clientX 鼠標(biāo)離網(wǎng)頁(yè)最左的距離 （不包含不可見(jiàn)部分）
clientY 鼠標(biāo)離網(wǎng)頁(yè)最頂部的距離 （不包含不可見(jiàn)部分）
pageX 鼠標(biāo)離網(wǎng)頁(yè)最左的距離 （包含不可見(jiàn)部分）
pageY 鼠標(biāo)離網(wǎng)頁(yè)最頂部的距離 （包含不可見(jiàn)部分）
screenX 鼠標(biāo)離屏幕最左部的距離
screenY 鼠標(biāo)離屏幕最頂部的距離
按鍵相關(guān)屬性
//event中的屬性
//位置屬性
console.log(e.x);//當(dāng)前鼠標(biāo)離對(duì)應(yīng)的最頂部的距離（不包含滾動(dòng)欄的距離）不包含不可見(jiàn)距離
console.log(e.y);
console.log(e.clientX);
console.log(e.clientY);
console.log(e.offsetX);//對(duì)應(yīng)在div里面的鼠標(biāo)位置X
console.log(e.offsetY);//對(duì)應(yīng)在div里面的鼠標(biāo)位置Y
console.log(e.pageX);//當(dāng)前鼠標(biāo)離對(duì)應(yīng)的最頂部的距離（包含滾動(dòng)欄的距離） 包含不可見(jiàn)距離
console.log(e.pageY);
console.log(e.layerX);//在定位的時(shí)候基于自己 不定位的時(shí)候基于最頂部距離 包含不可見(jiàn)距離
console.log(e.layerY);
console.log(e.screenX);//離屏幕最坐標(biāo)的X距離
console.log(e.screenY);//離屏幕最上面的y距離ctrlKey
altKey
shiftKey
button （只針對(duì)于點(diǎn)擊事件）
左鍵是0 中間為1 右鍵為2
type 事件觸發(fā)類(lèi)型
target 當(dāng)前觸發(fā)事件的對(duì)象
currentTarget 當(dāng)前加事件的對(duì)象
鍵盤(pán)的輸入的相關(guān)屬性
key 獲取對(duì)應(yīng)的按下的鍵
keyCode 獲取按下的鍵的ascii碼
charCode 獲取keypress事件中按鍵的ascii碼
事件委托機(jī)制
將原本元素需要做的事件 交給他的父元素
1.加事件給對(duì)應(yīng)的父元素
2.在父元素的事件中進(jìn)行判斷 e.target
//三個(gè)按鍵是否按下(長(zhǎng)按) 先按下再操作 布爾類(lèi)型的值
console.log(e.ctrlKey); //是否按下ctrl
console.log(e.shiftKey);//是否按下shift
console.log(e.altKey);//是否按下alt
window.onkeydown = function(e){
//兼容 ie
e = e || window.event
//key 獲取對(duì)應(yīng)的按下的鍵
console.log(e.key);//兼容問(wèn)題
//keyCode 獲取對(duì)應(yīng)按下鍵的ascii碼
console.log(e.keyCode); //不管是大寫(xiě)還是小寫(xiě)獲取的都是大寫(xiě)的ascii碼
}
//只支持字符
window.onkeypress = function(e){
console.log(e.keyCode);
//將ascii轉(zhuǎn)為對(duì)應(yīng)的字符串
console.log(String.fromCharCode(e.keyCode));
//只在onkeypress 里面才有用 也返回是ascii碼
console.log(e.charCode);
}
//事件委托 （里面有多個(gè)相同的元素需要同樣的事件）
//獲取父元素 利用的父元素的事件及對(duì)應(yīng)的e.target進(jìn)行判斷 當(dāng)前你操作的元素是哪一個(gè)
document.querySelector("ul").onclick = function(e){
e = e || window.event
//獲取當(dāng)前操作的元素 liif(e.target.nodeName == "LI"){
//操作
//排他思想
for(var j=0;j<this.children.length;j++){
this.children[j].style.backgroundColor = ""
}
e.target.style.backgroundColor = "red"
}
}
事件下
事件的倆個(gè)行為
事件冒泡
從里到外冒泡 里面有一個(gè)按鈕添加了點(diǎn)擊事件 外面有個(gè)盒子也添加了點(diǎn)擊事件 在你觸發(fā)對(duì)應(yīng)的按鈕的
點(diǎn)擊的時(shí)候 同時(shí)他會(huì)自動(dòng)調(diào)用對(duì)應(yīng)盒子的點(diǎn)擊事件 而這個(gè)機(jī)制就叫做事件冒泡
事件捕獲
直接進(jìn)行捕獲處理
阻止事件冒泡
e.stoppropagation() *
e.cancelBubble = true (兼容ie的寫(xiě)法)
兼容寫(xiě)法
阻止默認(rèn)行為
概述：元素自身?yè)碛械囊恍┬袨?/p>
form的submit按鈕會(huì)自動(dòng)提交 然后跳轉(zhuǎn)頁(yè)面
a標(biāo)簽 直接默認(rèn)跳轉(zhuǎn)頁(yè)面
鼠標(biāo)右鍵點(diǎn)擊 會(huì)出現(xiàn)菜單欄
.....
document.querySelector("div").onclick = function(){
console.log("大盒子被點(diǎn)擊了");
}
document.querySelector("button").onclick = function(e){
e = e || window.event
// // 阻止事件冒泡
// e.stopPropagation() //適用大多數(shù)的瀏覽器 *
// //兼容ie 取消冒泡
// e.cancelBubble = true
//兼容寫(xiě)法
if(e.stopPropagation){
e.stopPropagation()
}else{
e.cancelBubble = true
}
//三目運(yùn)算寫(xiě)法
e.stopPropagation?e.stopPropagation():e.cancelBubble = true
console.log("按鈕被點(diǎn)擊了");
}
e.stopPropagation?e.stopPropagation():e.cancelBubble = true阻止a標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)的行為
e.preventDefault() 適用所有符合w3c規(guī)則的瀏覽器 *
e.returnValue = false 適用ie瀏覽器 同樣適用于高版本瀏覽器（可能會(huì)被廢棄）
return false //都適用
右鍵菜單欄事件
拖拽
思路
1.鼠標(biāo)按下 mousedown （獲取點(diǎn)擊在元素上的位置）
2.鼠標(biāo)移動(dòng) mousemove （獲取在文檔上移動(dòng)的位置 控制對(duì)應(yīng)的元素移動(dòng)）
3.鼠標(biāo)彈起 mouseup （將彈起事件和移動(dòng)事件清除）
實(shí)現(xiàn)代碼
<a ).onclick = function(e){
e = e || window.event
//阻止a標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)的行為
// e.preventDefault() //阻止默認(rèn)行為 *
//ie瀏覽器兼容
// e.returnValue = false //阻止默認(rèn)行為 returnValue 同樣適用于高版本瀏覽器（可能會(huì)
被廢棄）
console.log("a標(biāo)簽被點(diǎn)擊了");
return false //阻止默認(rèn)行為 一般寫(xiě)在最后
}
</script>
document.oncontextmenu
<!-- 在body里面拖拽 位置會(huì)改變 拖拽的元素需要定位 -->
<div></div>
<script>
//1.獲取div元素
var div = document.querySelector("div")
//2.需要給div的元素添加鼠標(biāo)按下事件（獲取按下在元素里面的位置）
div.onmousedown = function(e){
e = e || window.event
//需要對(duì)應(yīng)的鼠標(biāo)在盒子里的位置 offsetX offsetY
var currentX = e.offsetX
var currentY = e.offsetY
//3.在按下事件里面添加移動(dòng)事件 （獲取移動(dòng)的位置） 新的位置-鼠標(biāo)在盒子里面點(diǎn)擊的位置
document.onmousemove = function(e){
e = e || window.event
var targetX = e.pageX - currentX //移動(dòng)的距離
var targetY = e.pageY - currentY //移動(dòng)的距離
//控制對(duì)應(yīng)的元素移動(dòng)
div.style.left = targetX + "px"
div.style.top = targetY + "px"
}區(qū)間拖拽
思路
1.給元素添加按下事件 （獲取元素的父盒子的位置 在網(wǎng)頁(yè)上的位置 獲取對(duì)應(yīng)的鼠標(biāo)在元素里面的位
置）
2.在按下事件里面添加移動(dòng)事件（父元素添加） （獲取當(dāng)前鼠標(biāo)在父盒子里面的位置 - 對(duì)應(yīng)的鼠標(biāo)在元
素的位置 設(shè)置對(duì)應(yīng)的位置 ）
3.在彈起事件里面取消對(duì)應(yīng)的移動(dòng)事件以及彈起事件
代碼
//4.在按下事件里面添加彈起事件 取消倆個(gè)事件
document.onmouseup = function(){
document.onmousemove = document.onmouseup = false
}
}
</script>
<div class="box">
<div class="moveBox"></div>
</div>
<script>
//1.獲取元素 大盒子和移動(dòng)的盒子
var box = document.querySelector(".box")
var moveBox = document.querySelector(".moveBox")
//2.給小盒子加鼠標(biāo)按下事件 記錄對(duì)應(yīng)的鼠標(biāo)在小盒子的位置 記錄大盒子的位置
//鼠標(biāo)在大盒子里面的位置其實(shí)就是 當(dāng)前的鼠標(biāo)在頁(yè)面上的位置（page） - 大盒子離頁(yè)面的距離
（offset家族）
//當(dāng)前的鼠標(biāo)在頁(yè)面上的位置（pageX） - 大盒子離頁(yè)面的距離(offsetLeft)
//當(dāng)前的鼠標(biāo)在頁(yè)面上的位置（pageY） - 大盒子離頁(yè)面的距離(offsetTop)
moveBox.onmousedown = function(e){
e = e || window.event
var currentX = e.offsetX //鼠標(biāo)在小盒子里面的位置
var currentY = e.offsetY
//3.按下事件里面給大盒子添加移動(dòng)事件
//（得到鼠標(biāo)在大盒子里面的位置 - 鼠標(biāo)在小盒子里面的位置 控制對(duì)應(yīng)的移動(dòng)）
box.onmousemove = function(e){
e = e || window.event
// var targetX = e.offsetX - currentX
// var targetY = e.offsetY - currentY
var targetX = e.pageX - this.offsetLeft - currentX
var targetY = e.pageY - this.offsetTop - currentY
//最大的移動(dòng)區(qū)間就是 父元素的寬度-子元素的寬度
var maxX = this.offsetWidth - moveBox.offsetWidth
var maxY = this.offsetHeight - moveBox.offsetHeight
//邊界判斷
// 如果當(dāng)前定位的位置小于0就讓他等于0
if(targetX<0){
targetX = 0
}
if(targetY<0){
targetY = 0
}
//如果當(dāng)前移動(dòng)的距離大于我們最大的距離就讓他等于這個(gè)距離公式
鼠標(biāo)在大盒子里面的位置其實(shí)就是 = 當(dāng)前的鼠標(biāo)在頁(yè)面上的位置（page） - 大盒子離頁(yè)面的距離
（offset家族）
移動(dòng)的位置 = 得到鼠標(biāo)在大盒子里面的位置 - 鼠標(biāo)在小盒子里面的位置
最大的移動(dòng)區(qū)間 = 父元素的寬(高)度 - 子元素的寬(高)度
offset家族
offset家族是獲取對(duì)應(yīng)的偏移的位置 他有奶便是娘 （他的父元素誰(shuí)加了定位他就基于誰(shuí) 否則基于
body）
offsetParent 偏移的父元素（選擇離他最近加了定位的父元素）
offsetLeft 左偏移
offsetTop 上偏移
offsetWidth 偏移元素的寬度
offsetHeight 偏移元素的高度
獲取樣式
window.getComputedStyle() *
element.currentStyle (兼容ie8以下的瀏覽器)
事件監(jiān)聽(tīng)器
if(targetX>maxX){
targetX = maxX
}
if(targetY>maxY){
targetY = maxY
}
//控制小盒子的位置
moveBox.style.left = targetX + "px"
moveBox.style.top = targetY + "px"
}
//4.取消對(duì)應(yīng)的大盒子的移動(dòng)事件 以及大盒子的彈起事件
box.onmouseup = function(){
box.onmouseup = box.onmousemove = false
}
}
</script>
//獲取樣式 獲取所有的地方的樣式 給定都是默認(rèn)值 使用window對(duì)象
console.log(window.getComputedStyle($("h1")).backgroundImage);//返回的是一個(gè)樣式對(duì)
象 里面包含所有的樣式
// 兼容ie 都是屬性 直譯 元素對(duì)象
console.log($("h1").currentStyle);
// 兼容寫(xiě)法 獲取樣式對(duì)象
function getStyle(element){
return window.getComputedStyle?
window.getComputedStyle(element):element.currentStyle
}
1.采用了觀察者模式（observer）
2.同一個(gè)事件可以有多個(gè)處理函數(shù)
3.在添加事件的時(shí)候?qū)?yīng)的處理函數(shù)不能是匿名函數(shù)（不然是不能被移除的）
添加事件監(jiān)聽(tīng) addEventListener
addEventListener(監(jiān)聽(tīng)事件名,處理函數(shù),冒泡false 還是捕獲 true)
移除事件監(jiān)聽(tīng) removeEventListener
removeEventListener(事件名,處理函數(shù))
封裝的兼容方法
var btn = document.querySelector("button")
function hanlder(){
console.log("123");
}
//添加監(jiān)聽(tīng) 同一個(gè)事件可以有多個(gè)處理函數(shù)
btn.addEventListener('click',hanlder,false)
btn.addEventListener('click',function(){
console.log("456");
},false) //是否捕獲
//移除事件監(jiān)聽(tīng) 函數(shù)的指向不一樣 開(kāi)辟倆個(gè)內(nèi)存空間 地址是不一樣 移除不了
//移除對(duì)應(yīng)的事件名中某個(gè)匹配處理函數(shù)
btn.removeEventListener('click',hanlder)
//兼容 ie8以下
// btn.attachEvent("onclick",fn) 添加
// btn.detachEvent("onclick",fn) 移除
//事件監(jiān)聽(tīng)器的兼容
//添加事件的元素 事件類(lèi)型 處理函數(shù)
function addEvent(element,type,fn){
element.addEventListener?
element.addEventListener(type,fn):element.attachEvent(`on${type}`,fn)
}
function removeEvent(element,type,fn){
element.removeEventListener?
element.removeEventListener(type,fn):element.detachEvent(`on${type}`,fn)
}
Cookie
http（網(wǎng)絡(luò)傳輸協(xié)議）https（安全）
特點(diǎn)：
無(wú)狀態(tài) （不知道訪問(wèn)者是誰(shuí)）
無(wú)連接 （連接完成后會(huì)斷開(kāi)）
長(zhǎng)連接/短連接 （key-alive屬性來(lái)指定的）
既然我們的http協(xié)議是無(wú)狀態(tài)的 那么我們?cè)趺磪^(qū)分對(duì)應(yīng)的訪問(wèn)者（孕育而出了一個(gè)sessionID 來(lái)做區(qū)
分）
他訪問(wèn)了我 我給你一個(gè)對(duì)應(yīng)的sessionID 他訪問(wèn)了我我同樣給他一個(gè)sessionID （這個(gè)時(shí)候我們就可以
通過(guò)這個(gè)sessionID來(lái)做區(qū)分）
這個(gè)sessionID是怎么給到你的呢？
他是通過(guò)在訪問(wèn)的時(shí)候 給你分發(fā)一個(gè)sessionID 保存到你的機(jī)器上 （存在于你的瀏覽器上 cookie）
sessionID是依賴(lài)于cookie進(jìn)行存儲(chǔ)的
cookie會(huì)隨請(qǐng)求一起過(guò)去
這個(gè)時(shí)候我們的http的無(wú)狀態(tài)就解決了
cookie
剛才在上面我們已經(jīng)知道了對(duì)應(yīng)的cookie是存儲(chǔ)對(duì)應(yīng)的sessionID 那么是不是就證明了我們的cookie是
一個(gè)容器的（這個(gè)容器的大小只有4k） 是一個(gè)容器我們就有對(duì)應(yīng)的增刪改查的方法
cookie里面是什么樣
對(duì)應(yīng)的屬性有
鍵=值 （名字=值）
expires 過(guò)期時(shí)間（關(guān)閉瀏覽器失效）*
path 訪問(wèn)路徑（指定對(duì)應(yīng)的路徑攜帶cookie）
domain 跨域 （可以跨域的域名）
secure 安全
URI編碼和解碼
encodeURIComponent 編碼
decodeURIComponent 解碼
增刪改查
添加 直接賦值
//name是對(duì)應(yīng)的cookie的名字 key=value expires 過(guò)期日期 path 訪問(wèn)路徑（才攜帶cookie）
domain 跨域操作 secure 安全獲取 采用讀取字符串的形式
刪除 設(shè)置過(guò)期時(shí)間
修改 重新設(shè)置就是修改
cookie的特性
1.為了解決http無(wú)狀態(tài)的問(wèn)題
2.存儲(chǔ)只有4k左右
3.他是存儲(chǔ)在瀏覽器上
4.他會(huì)隨請(qǐng)求攜帶
5.他可以被偽造和修改（不安全）
cookie和localStorage的區(qū)別
localStorage容量大于cookie
localStorage存儲(chǔ)的位置和cookie不是一個(gè)地方
localStorage對(duì)應(yīng)的不會(huì)隨請(qǐng)求攜帶（本地緩存）
cookie 在后續(xù)的框架中也會(huì)使用 但是他使用的是對(duì)應(yīng)的庫(kù)（cookie.js）
https://www.mianshigee.com/project/cookie-js/
localStorage的方法
getItem(key) 獲取元素
setItem(key,value) 設(shè)置元素
removeItem(key) 移除元素
JSON
JSON是一種數(shù)據(jù)格式（json字符串） 他通用我們對(duì)應(yīng)的網(wǎng)絡(luò)傳輸（xml）他是一種數(shù)據(jù)格式 而在對(duì)應(yīng)
的JavaScript他是一種數(shù)據(jù)類(lèi)型
json倆種顯示方式
對(duì)象 {} .key
數(shù)組 [] 使用下標(biāo)
document.cookie = "key=value;"
console.log(document.cookie.split(";")[0].split("=")[1]) //拿到value值
document.cookie = "key=value;expires="+new Date()
document.cookie = "key=hello;"反序列化操作 (將字符串變成對(duì)象)
JSON.parse() *
eval()
序列化操作 （將對(duì)象變成json格式的字符串）
JSON.stringify() *
localstorage和cookie存儲(chǔ)的格式（字符串）以后再存儲(chǔ)數(shù)據(jù)的時(shí)候直接存儲(chǔ)json格式字符串 取出的
時(shí)候利用反序列化轉(zhuǎn)為對(duì)象
var jsonObj = {}
var jsonArray =[]
正則
正則表達(dá)式是什么
正則表達(dá)式是用于字符串匹配的 （四個(gè)支持正則的方法 search 查找 下標(biāo) macth 查找 數(shù)組 split 切割
replace 替換）
正則表達(dá)式對(duì)象聲明
1.new關(guān)鍵詞聲明
2.字符模板 聲明 （*）
g 全局搜索
i 忽略大小寫(xiě)
正則對(duì)象的方法
exec 執(zhí)行方法 他返回對(duì)應(yīng)的執(zhí)行對(duì)象數(shù)組 （沒(méi)有匹配的返回null）
test 判斷是否匹配 （boolean 匹配為true 不匹配為false）
正則表達(dá)式的使用
^ 開(kāi)頭
$ 結(jié)尾
[] 表示其中一個(gè)元素
{} 表示對(duì)應(yīng)的個(gè)數(shù) （相當(dāng)于重復(fù)寫(xiě)n次）
var regx = new RegExp("a")
var regex = /a/gi
var regx = /^[abcdef]$/ //表示其中一個(gè)元素 a | b | c | d | e | f
var str = "a"
var str1 = "b"
var str2 = "c"
var str3 = "abc"
console.log(regx.test(str));//true
console.log(regx.test(str1));//true
console.log(regx.test(str2));//true
console.log(regx.test(str3));//false
var regx = /^[abc]{2}$/ //倆個(gè)元素
var regx1 = /^[abc]{2,3}$/ //倆個(gè)到三個(gè)
var regx2 = /^[abc]{2,}$/ //倆個(gè)或倆個(gè)以上
var str = "accc"
var str1 = "bc"
var str2 = "cb"
var str3 = "abc"() 分組 集成到一起
字母的表示
[A-Za-z]
數(shù)字的表示
[0-9]
\d 表示數(shù)字
\D 表示非數(shù)字
空白字符
\s 表示空白字符 空格回車(chē)制表符等
\S 表示非空白字符串
所有的字母數(shù)字加下劃線(xiàn) \w
\W 不是字母數(shù)字下滑線(xiàn)
console.log(regx.test(str));//false
console.log(regx.test(str1));//true
console.log(regx.test(str2));//true
console.log(regx.test(str3));//false
console.log(regx1.test(str));//false
console.log(regx1.test(str1));//true
console.log(regx1.test(str2));//true
console.log(regx1.test(str3));//true
console.log(regx2.test(str));//true
var regx = /^([ab][cd]){2}$/ //acac adad bcbc bdbd
var str = "abcd"
var str1 = "bbcc"
var str2 = "ab"
var str3 = "ad"
console.log(regx.test(str));//false
console.log(regx.test(str1));//false
console.log(regx.test(str2));//false
console.log(regx.test(str3));//false
//字母的表現(xiàn) ascii碼進(jìn)行排序
var regx10 = /^[A-z]$/ //匹配大寫(xiě)的字母和小寫(xiě)的字母 另外包含對(duì)應(yīng)的字符
var regx10 = /^[A-Za-z]$/ //匹配大寫(xiě)的字母和小寫(xiě)的字母
var regx11 = /^[0-9]$/ //匹配0-9的數(shù)字
// \d 小寫(xiě)表示這個(gè)東西 \D 大寫(xiě)表示不是這個(gè)東西
var regx11 = /^\d$/ //匹配0-9的數(shù)字
var regx12 = /^\D$/ //不是數(shù)字的內(nèi)容
var regx16 = /\w/. 表示所有的內(nèi)容
修飾符
+ 一個(gè)到多個(gè)相當(dāng)于 {1,}
? 零個(gè)到一個(gè) 相當(dāng)于 {0,1}
* 零個(gè)到多個(gè)相當(dāng)于 {0,}
注意事項(xiàng)：點(diǎn)號(hào)在對(duì)應(yīng)的[]中顯示為. 而不是所有的內(nèi)容 在對(duì)應(yīng)的{} 后面不能直接接修飾符 如果要接先
要分組括起來(lái)
中文匹配的正則
[\u4e00-\u9fa5]
針對(duì)于上面的修飾符我們要將他變成對(duì)應(yīng)的字符 轉(zhuǎn)義符號(hào) \
需要轉(zhuǎn)義的內(nèi)容 [] () {} . + ? / ^ $
捕獲性分組 及 非捕獲性分組 ?: 非捕獲性 體現(xiàn)到對(duì)應(yīng)的數(shù)組 exec執(zhí)行完的數(shù)組里面（默認(rèn)會(huì)捕獲）
var regx15 = /./
// 匹配 (.) 使用\來(lái)進(jìn)行轉(zhuǎn)義
// 需要轉(zhuǎn)義的內(nèi)容 [] () {} . + ? / ^ $ ..
var regx = /\(\.\)/
console.log(regx.test("(.)"));//true
console.log(regx.test("a"));//false
var pattern = /(\d+)(?:[a-z])/; //一個(gè)或多個(gè)數(shù)字,和一個(gè)a-z的字母
var str = "123abc";
console.log(pattern.exec(str)); //"123a,123,a" //如果沒(méi)有加上?: 就有a 加上了就沒(méi)有了
