====DOM===========================================================================
=DAY-01=====================================
正課:
1. 什么是DOM
2. *DOM Tree
3. *查詢: 4種
1. 什么是DOM: Document Object Model
? 什么是:
? ? 專門操作網頁內容的統(tǒng)一的API標準——W3C
? 為什么:
? 早期的DOM時木有標準，存在嚴重的兼容性問題
DOM就是為了統(tǒng)一操作網頁內容的API標準
用DOM操作網頁內容，幾乎100%兼容所有瀏覽器
? 何時:
? 只要操作網頁內容，都用DOM
原生JS：只需要瀏覽器，不需要下載第三方軟件，就可以操作
? ECMAScript(核心語法)
+DOM(操作網頁內容)
+BOM(操作瀏覽器窗口)
? 如何:
2.? DOM Tree:
什么是:
在內存中，存儲網頁中所有內容的樹型結構
為什么:
? 樹型結構最好的展現(xiàn)層次關系結構，且可無限向下延伸。
何時:
? 當瀏覽器讀到網頁內容時，就會自動在內存中創(chuàng)建樹形結構
只要存儲不確定層級深度的上下級關系，都用樹型結構
如何:
自動創(chuàng)建，自動維護
1. 當瀏覽器讀取到HTML文檔時，開始創(chuàng)建
2. 首先創(chuàng)建根節(jié)點document
document對象是整棵DOM樹的樹根
所有網頁內容，都是document節(jié)點的后代節(jié)點
3. 依次讀取網頁中每個元素，屬性，文本
網頁中每項內容(元素，屬性，文本)都是DOM樹上的一個節(jié)點對象。
節(jié)點對象: 所有節(jié)點都是node類型的節(jié)點對象
三大屬性:
1、nodeType: 節(jié)點類型
? 何時: 只要鑒別節(jié)點的類型時
值是一個整數(shù),包括:
document? 9
element? ? 1
attribute? 2
text? ? ? 3
問題: 只判斷是否為元素，無法細致區(qū)分元素的標簽名
2、nodeName: 節(jié)點名稱
何時: 只要進一步區(qū)分元素的名稱時
包括:
document? #document
element? ? 全大寫的標簽名***12個記這一個就夠了
attribute? 屬性名
text? ? ? #text
3、nodeValue: 表示節(jié)點的值——了解
? 何時使用：幾乎不用
document? null
elem? ? ? null
attr? ? ? 屬性值
text? ? ? 文本內容
DOM: *查詢，修改，添加，刪除，事件綁定
所有DOM操作，都遵循4步
1、查找觸發(fā)事件的元素
2、綁定事件處理函數(shù)
3、查找要修改的元素
4、修改其內容
3. 查找: 4種: ***
1.VIP 不需要查找就可直接獲得元素:
document.documentElement? -->html
document.head? ? ? ? ? ? -->head
document.body? ? ? ? ? ? -->body
document.forms[i(下標)/id/name] -->form
2. 按節(jié)點間關系查找:
什么是:
DOM樹中任何節(jié)點都不是孤立的。
一個節(jié)點和父級，子級，兄弟之間都建立了聯(lián)系
何時:
如果已經獲得一個節(jié)點，找周圍附近的有關系的節(jié)點時
如何: 2大類關系:
節(jié)點樹: 包含所有網頁內容(元素，文字)的完整樹結構
1. 父子關系:
elem.parentNode? ? ? 獲得elem的父節(jié)點
返回值: 唯一的一個父節(jié)點對象
elem.childNodes? ? ? 獲得elem的所有*直接*子節(jié)點
返回值: 所有直接子節(jié)點組成的類數(shù)組對象
elem.firstChild? ? ? 獲得elem下的第一個子節(jié)點
elem.lastChild? ? ? 獲得elem下的最后一個子節(jié)點
2. 兄弟關系:
elem.previousSibling 獲得elem的前一個兄弟節(jié)點
elem.nextSibling? ? 獲得elem的后一個兄弟節(jié)點
問題:
受看不見的空字符的干擾
一切文本都是節(jié)點對象，包括看不見的空字符，
也是節(jié)點對象(tab，空格，換行)
解決: 元素樹
元素樹: 僅包含元素節(jié)點的樹結構
優(yōu): 不受看不見的空字符的干擾
1. 父子關系:
elem.parentElement? ? ? 獲得elem的父元素
? ? .parentNode? ? ? ? ? 父元素只會是元素
elem.children? ? ? ? ? ? 獲得elem的所有*直接*子元素
返回值: 所有直接子元素組成的類數(shù)組對象
elem.firstElementChild? 獲得elem下的第一個子元素
elem.lastElementChild? ? 獲得elem下的最后一個子元素
2. 兄弟關系:
elem.previousElementSibling 獲得elem的前一個兄弟元素
elem.nextElementSibling? ? 獲得elem的后一個兄弟元素
元素樹不是一顆新樹，只是節(jié)點樹的一個子級
問題: 1. IE9+
2. 遍歷指定父節(jié)點下的所有后代節(jié)點: ——鄙視
問題: children和childNodes只能查找直接子節(jié)點，無法查找更深層次!
解決: 遞歸遍歷:
如何: 2步:
1. 先定義函數(shù)，僅遍歷直接子節(jié)點
2. 對每個直接子節(jié)點，調用和父元素完全相同的方法
算法: 深度優(yōu)先遍歷:
什么是:
每次同時碰到子元素和兄弟元素時，總是優(yōu)先遍歷子元素。
所有子元素遍歷完，才返回遍歷兄弟。
問題: children和childNodes返回動態(tài)集合
什么是: 不實際存儲數(shù)據(jù)，每次訪問集合，都重新查找DOM樹.
優(yōu): 首次查找，不需要返回完整數(shù)據(jù)，效率高!
缺: 反復訪問集合，導致反復查找DOM樹，效率低!
錯誤: for(var i=0;i<children.length;i++)
解決: 遍歷時，提前緩存length
正確: for(var i=0,len=children.length;i<len;i++)
問題: 遞歸效率低，避免使用
解決: 用循環(huán)代替:
節(jié)點迭代器: NodeIterator:
什么是:
可按深度優(yōu)先遍歷的順序，依次遍歷下一個節(jié)點的對象
如何: 2步:
1. 用父元素創(chuàng)建節(jié)點迭代器對象:
var iterator=document.createNodeIterator(
? ? parent,NodeFilter.SHOW_ELEMENT(遍歷元素節(jié)點),null,false
開始位置 .SHOW_ALL(遍歷所有節(jié)點)
);
2. 循環(huán)調用Iterator迭代器的nextNode()方法：獲取下一個節(jié)點對象
nextNode()2件事:
1. 返回當前節(jié)點，
2. 跳到下一個節(jié)點
如果沒有后續(xù)節(jié)點，返回null
do{
var node=iterator.nextNode();
if(node)//if(node!=null)
console.log(node.nodeName);
else
break;
}while(true)
3. 按HTML查找: 4種:
1. 按id查找:?
var elem=document.getElementById("id");
? 強調: 只能用document調用！
? 返回值：
返回一個元素(id重復時，返回第一個)
找不到時，返回null
2. 按標簽名(tag name)查找:
var elems=parent.getElementsByTagName("標簽名");
? 強調:
? ? 1. 可在任意父元素上調用！
2. 不僅找直接子元素，且查找所有后代中的元素
? 返回值：
返回包含多個元素的動態(tài)集合(類數(shù)組對象)
找不到，返回length為0的空集合
3. 按name屬性查找:(表單常用這個)
var elems=document.getElementsByName("name");
強調: 只能用document調用
? ? ? ? 返回值：
返回包含多個元素的動態(tài)集合(類數(shù)組對象)
找不到，返回length為0的空集合
4. 按class屬性查找:
var elems=parent.getElementsByClassName("class");
返回值：
返回包含多個元素的動態(tài)集合(類數(shù)組對象)
找不到，返回length為0的空集合
? 強調:
? 1. 可在任意父元素上調用！
2. 不僅找直接子元素，且在查找所有后代
3. 如果一個元素同時被多個class修飾時,只要其中一個class匹配，就可找到該元素
問題: 每次只能按一種條件查找，當查找條件復雜時，步驟就非常繁瑣。
解決: 用選擇器查找
4. 按照選擇器查找:
? 為什么：
按HTML查找，每次只能按一個條件查找
如果查找條件復雜時，步驟會很繁瑣
何時：
? 只要查找條件復雜時，都用選擇器查找
1. 僅查找一個元素:
? var elem=parent.querySelector("選擇器");
返回值：一個元素對象，沒找到，返回null
2. 查找多個元素:
? var elems=parent.querySelectorAll("選擇器");
返回值:
? 包含所有符合條件元素的非動態(tài)集合
? 如果找不到，返回length為0的空集合?
非動態(tài)集合: 實際存儲完整數(shù)據(jù)，即使反復訪問集合，也不會反復查找DOM樹
強調：
1. 可在任何父元素上調用
2. 不僅查找直接，切查找所有后續(xù)元素
3. 受制于瀏覽器的兼容性限制
鄙視：getElementsByTagName? VS? querySelectorAll
? 返回值：
? html-->動態(tài)集合for(var len=xxx.length)
選擇器查找-->非動態(tài)集合
? 首次查找：
前者塊，后者慢
易用性：
總結：如果只要一個條件就可獲得想要的
=DAY-02======================================================================
4. 修改: 3種:
1. 內容: 3種:
1. 獲取或修改元素的HTML代碼片段內容:(代碼)
elem.innerHTML
2. 獲取或修改元素的純文本內容(網頁顯示的)
elem.textContent vs innerHTML:
? ? 1. 去掉內嵌標簽
2. 將轉移字符翻譯為原文
說明：兼容性
3. 獲取或修改表單元素的值
elem.value
2. 屬性:
1. HTML標準屬性: HTML中規(guī)定的值，值為字符串類型的
2種:
1. 核心DOM:
? 支持操作一切結構化文檔(html和xml)的統(tǒng)一API
優(yōu)點: 萬能！幾乎可以做任何事情
缺點：繁瑣！
(屬性節(jié)點都保存在elem的attributes集合中
var node=elem.attributes["屬性名"];
var value=node.nodeValue;)-這句他沒講
獲取: var value=elem.getAttribute("屬性名")
修改: elem.setAttribute("屬性名","值")
判斷有沒有: var bool=elem.hasAttribute("屬性名") 有-true
移除: elem.removeAttribute("屬性名")
2. HTML DOM:
? 專門操作HTML文檔的簡化版DOM API
特點: 簡潔, 不是萬能！
原理: HTML DOM將所有HTML標準屬性，已經提前預定義在了元素對象上，默認值為""
如何:
獲取:? ? ? var value=elem.屬性名
修改:? ? ? elem.屬性名=值
判斷有沒有: elem.屬性名!==""? 有true
移除:? ? ? elem.屬性名=""
? 特例: class屬性:obj.class類型名=> .className樣式類名
核心DOM: 可直接使用class
HTML DOM: 必須換為.className => 就是HTML中的class
因為js的對象中已經提前有一個內部屬性class，用來記錄對象創(chuàng)建時的類型名
2. 狀態(tài)屬性: disabled? selected? ? checked
特點: 值是bool類型
? 不能用核心DOM操作,因為核心DOM只能操作字符串類型
? 只能用HTML DOM? 打. 操作
都有對應的選擇器：? :check :
3. 自定義擴展屬性:
什么是: 自定義的，不在HTML標準范圍內的屬性
為什么:
id的問題: 唯一！
class的問題: 不穩(wěn)定，可能隨時人為或被程序修改
何時:
? ? 1、只要標識多個元素，且不希望受個數(shù)和樣式修改影響
2、代替id,elem,class選擇器，用于選中觸發(fā)事件的元素
3、保存自定義的業(yè)務數(shù)據(jù)
總結: 今后，只要給元素添加行為時，查找元素都用自定義擴展屬性
如何:
1.html中定義:<ANY data-屬性名="值"...
? 說明：data- 只是擴展屬性的前綴標志，并不是屬性名的一部分
選擇器：[data-屬性名=值]
2. 獲取或設置: 2種:
? HTML DOM無法操作自定義擴展屬性，
因為自定義擴展屬性，無法提前預定義在DOM元素上
1. 核心DOM
2. HTML5:
elem.dataset.屬性名
說明：dataset會收集所有data-XX前綴的擴展屬性
? ? 訪問時，僅憑elem.dataset.XX就可以
3. 樣式: 2種:
1. 內聯(lián)樣式:
用style設置的css屬性，默認出現(xiàn)在內聯(lián)樣式中
特點: 優(yōu)先級最高, 僅當前元素獨有
修改:
1. 僅修改一個內聯(lián)樣式
elem.style.css屬性名=值
強調: 所有css屬性名要去橫線變駝峰
比如: z-index => zIndex
font-size=> fontSize
background-position=>backgroundPosition
2. 批量替換內聯(lián)樣式:
elem.style.cssText="...";
獲取:
錯誤: elem.style.css屬性
style僅表示內聯(lián)樣式，elem.style只能獲得內聯(lián)延時，無法獲得外部樣式，丟樣式
解決: 獲得計算后的樣式:
什么是: 最終應用到當前元素上的所有樣式的合集
為什么: 一個元素的完整樣式，可能來源自多個地方
何時: 只要獲取樣式，都要獲得計算后的完整樣式！
如何: 2步:
1. 獲得計算后的完整style對象
var style=getComputedStyle(elem);
2. 獲得style中的css屬性值;
var value=style.css屬性;
強調: 計算后的樣式style是只讀的，不能修改！
2. 修改樣式表中的樣式: ——了解
1. 獲得樣式表對象:sheet
var sheet=document.styleSheets[i];
2. 獲得要修改的屬性所在的cssRule(樣式表對象中的一套規(guī)則:（一對兒{}中的內容)
var rule=sheet.cssRules[i];
說明: 如果是keyframes 繼續(xù)獲得
繼續(xù): var sub_rule=rule.cssRules[i]
3. 修改樣式:
rule.style.css屬性=值
問題: 一句話只能修改一個css屬性值
解決: 今后都是用class來批量修改元素的樣式
? 所有DOM操作，都遵循4步
? 1、查找觸發(fā)事件的元素
2、綁定事件處理函數(shù)
3、查找要修改的元素
4、修改其內容
=DAY03========================================================
5. 添加和刪除:
3步:
1. 創(chuàng)建空元素:
var elem=document.createElement("標簽名");
ex:
var a=document.createElement("a");
<a></a>
2. 設置關鍵屬性:
a.;
a.innerHTML="go to tmooc";
<a href=" http://tmooc.cn "> go to tmooc </a>
3. 將新元素添加到DOM樹
3種:
指定父元素末尾追加: parent.appendChild(a)
在當前子元素前插入: parent.insertBefore(a, child) 將a插入到child之前
替換現(xiàn)有子元素: parent.replaceChild(a, child) 用a替換child
DOM優(yōu)化:
盡量減少操作DOM樹的次數(shù)
為什么:
每次操作DOM樹都會導致重新layout和paint
什么是layout?
網頁的加載原理:
html -> DOM Tree
↓
Render Tree-> ***layout***? ? ->? paint
↑? ? ? 計算每個元素的
css -> COM? ? ? ? 絕對布局位置
只要修改DOM樹, 包括: 修改樣式,修改位置,添加刪除元素
都會導致重新layout ——>效率低
解決:
1. 如果同時添加父元素和子元素時，
都要先在內存中將所有子元素，添加到父元素中，
最后，再將父元素，一次性添加到DOM樹。
? ? ? 2. 如果父元素已經在樹上，要同時添加多個平級子元素時:
? 先將多個子元素添加到文檔片段中，再將文檔片段一次性添加到DOM樹中
? ? ? 文檔片段:
? ? ? ? 什么是: 內存中，臨時存儲一棵dom子樹片段的存儲空間(虛擬父元素對象)
? ? ? ? 何時: 只要同時添加多個平級子元素時
? ? ? ? 如何: 3步:
? ? ? ? ? 1. 創(chuàng)建文檔片段對象
? ? ? ? ? ? var frag=document.createDocumentFragment();
? ? ? ? ? 2. 先將子元素添加到文檔片段中
? ? ? ? ? ? frag.appendChild(child)
? ? ? ? ? 3. 將文檔片段一次性添加到DOM樹指定父元素下
? ? ? ? ? ? parent.appendChild(frag)
? ? ? ? ? 強調: frag將子元素送到dom樹后，自動釋放
刪除：
parent.removeChild(child)
child.parentNode.removeChild(child);
2. HTML DOM常用對象:
什么是:
對常用的元素，提供了簡化版的API
優(yōu): 簡化
缺: 不是萬能
Image: 創(chuàng)建:? var img=new Image();
Select:
屬性:
.value 當前選中項有value屬性時，會返回option的value
如果選中項沒有value屬性，則用內容代替
.selectedIndex 快速獲得當前選中項的下標位置
.options: 獲得select下所有option元素對象的集合
.options.length 獲得select下option個數(shù)
.length => .options.length
固定套路: 清空所有option
sel.innerHTML="";(包打天下)
sel.length=0; =>sel.options.length=0;清除所有option
方法: add(option) 代替 appendChild(option)
問題:? .add不支持frag(文檔片段)
.remove(i) 移除i位置的option
%、Option:***
創(chuàng)建: var opt=new Option(text,value);
屬性: .index? .text? ? .value
%、table:管著行分組:
創(chuàng)建:
var thead=table.createTHead();
var tbody=table.createTBody();
var tfoot=table.createTFoot();
刪除:
table.deleteTHead();
table.deleteTFoot();
獲取:
tabel.tHead? table.tFoot? table.tBodies[i]
%、行分組:管著行:
創(chuàng)建: var tr=行分組.insertRow(i)
? ? ? 在i位置插入一個新行，原i為位置的行 向后擠壓
固定套路:
1.在開頭插入一行: 行分組.insertRow(0)
2. 在結尾追加一行: 行分組.insertRow()
刪除: 行分組.deleteRow(i)刪除i位置的行
強調: 主語是行分組時，i要求是在行分組內的相對下標位置
問題：行分組內的相對下標無法自動獲取
解決：table.deleteRow(tr.rowIndex)
? tr.rowIndex可自動獲得當前tr相對于整個表格的下標位置
table.deleteRow(i) i剛好需要相對于整個表格的下標位置
獲取: 行分組.rows? 獲得行分組內所有行的集合
%、行:管著格:
創(chuàng)建: var td=tr.insertCell(i)
固定套路: 末尾追加: tr.insertCell()
強調：只能創(chuàng)建td不能創(chuàng)建th
刪除: tr.deleteCell(i)
獲取: tr.cells
form:
獲取: var form=document.forms[i/id/name];
屬性: form.elements 獲得表單中所有表單元素的集合
強調: 表單元素包括: input? select? textarea? button
form.elements.length 獲得表單中表單元素的個數(shù)
form.length==> form.elements.length
固定套路: 獲得結尾的按鈕:
var btn=form.elements[form.length-1]
方法: form.submit() //手動提交表單
表單元素:
獲取: var elem= form.elements[i/id/name]
如果表單元素有name屬性，則: form.name屬性值
方法: elem.focus() 讓當前表單獲得焦點?
elem.blur()讓當前元素失去焦點
=====================================================
BOM: Browser Object Model
什么是:
專門操作瀏覽器窗口或軟件的API
沒有標準!
window: 2個角色:
1. 代替ES中的GLOBAL充當全局作用域對象
2. 封裝保存所有內置，全局的API和對象(像alert 啊等)
包括：history，location，document，navigator，screen，event
(屬性: 文檔顯示區(qū)大小: 瀏覽器窗口中專門顯示網頁的區(qū)域
/*window.*/innerWidth,
/*window.*/innerHeight 沒講)
功能: 打開和關閉窗口:
打開窗口: window.open("url","target")
4種:
1. 在當前窗口打開，可后退
HTML: <a href="url" target="_self">
js: open("url","_self ")
2. 在當前窗口打開，不可后退
js: location.replace("新url")
用新的url代替history中當前地址
3. 在新窗口打開，可打開多個
HTML: <a href="url" target="_blank">
js: open("url","_blank ")
4. 在新窗口打開，只能打開一個
HTML: <a href="url" target="自定義的窗口名">
js:open("url","自定義的窗口名")
原理: 其實，每個窗口都有一個唯一的name屬性
瀏覽器規(guī)定，同一時刻，同名窗口只能打開一個
后打開的會覆蓋先打開的
target屬性就是在為新窗口指定name名稱
預定義name:
_self 自動使用當前窗口自己的name打開新窗口
_blank 不指定窗口名, 每打開一個窗口，瀏覽器會自動隨機生成內部窗口名
關閉窗口: /*window.*/close();
history: 保存當前窗口打開后，成功訪問過的url的歷史記錄棧
不允許修改history內容!
只能三個操作: history.go(n);
前進 history.go(1)
后退 history.go(-1),? history.go(-2)，
刷新 history.go(0)
location:
什么是: 保存當前窗口正在打開的url地址的對象
屬性:
.href: 獲取或設置完整的url地址
.protocol: 協(xié)議
.host: 主機名+端口號
.hostname: 主機名
.port: 端口號
.pathname: 相對路徑
.search: ?xxx=xxx&xx=xx查詢字符串參數(shù)
.hash: 錨點地址
鄙視: 將search轉化為對象形式:
方法:
1. 在當前窗口打開新連接，可后退:
location.assign("url") => location.href="url"=>location="url"
2. 在當前窗口打開，不可后退:
location.replace("新url")
3. 刷新:
1、普通刷新: 優(yōu)先從緩存中獲取資源，緩存沒有或過期，才去服務器找新的。
f5
history.go(0)
location.reload()
2、強制刷新: 無論有沒有緩存，都強制從服務器獲取新資源！
location.reload(true)
4. navigator:
什么是: 封裝瀏覽器配置信息的對象
何時: 只要讀取瀏覽器配置信息時
如何:
1. 判斷瀏覽器是否啟用了cookie
什么是: 客戶端本地持久存儲一個數(shù)據(jù)小文件
為什么: 程序內存中的所有數(shù)據(jù)(變量、數(shù)組、對象)都是臨時存儲的
何時: 只要希望在客戶端持久保存用戶私密數(shù)據(jù)時
如何判斷是否啟用cookie:
var bool=navigator.cookieEnabled
設置: 設置->高級->隱私->內容設置->查看和禁用cookie
2. 判斷是否安裝插件:
什么是: 保存當前瀏覽器安裝插件的集合
什么是插件：為瀏覽器添加新功能的小軟件
如何判斷插件是否安裝:
navigator.plugins["插件名"]!==undefined
3. 判斷當前瀏覽器名稱和版本號——鄙視
navigator.userAgent: 保存瀏覽器名稱，版本和內核信息的字符串
何時: 只要判斷瀏覽器名稱和版本時就用
? 5. ***定時器: 2種:
1. 周期性定時器:
什么是: 讓程序每隔一端時間間隔，自動反復執(zhí)行一項任務
何時: 只要讓程序按照指定的時間間隔反復執(zhí)行一項任務
——動畫！
如何: 3步:
1. 定義任務函數(shù): 變化一次的函數(shù)
function task(){...}
2. 將任務函數(shù)放入定時器中反復執(zhí)行:
var timer=setInterval(task,ms)
啟動定時器，讓定時器每隔ms毫秒，自動反復執(zhí)行task函數(shù)
其中: timer 指當前定時器唯一的序號
專門用于停止定時器之值
3. 停止定時器:? clearInterval(timer)
2種: 1. 定時器自動停止:
在任務函數(shù)中，設定臨界值
一旦達到臨界值，就自動調用clearInterval
2. 手動停止定時器
2. 一次性定時器:
一次性: 讓程序先等待一段時間，再延遲執(zhí)行一項任務
執(zhí)行后，自動停止
何時: 只讓程序延遲執(zhí)行一項任務，且不需要反復執(zhí)行時
如何: 3步:
1. 任務函數(shù):
2. 啟動定時器: timer=setTimeout(任務函數(shù),ms)
? 其中: ms指延遲的毫秒數(shù)
3. 停止定時器: clearTimeout(timer)
? 在執(zhí)行前，停止等待，不再執(zhí)行任務
3.定時器原理：
setTimeout 和 setInterval只是將任務函數(shù)，保存到定時器中，
? ? ? 必須等到主程序所有語句執(zhí)行完，才能執(zhí)行！
鄙視: 定時器中的任務函數(shù)，必須等到主程序所有語句執(zhí)行完，才能執(zhí)行！
? 1.var a=10;
? function fun(){
? a++;
? }
? setTimeout(fun,0);
setInterval
? //fun無論等待多長時間都必須到最后才執(zhí)行
? console.log(a);//10
2.for(var i=0;i<3;i++){
? setTimeout(()=>console.log(i),0);
}//3 3 3
6. ***event: ——DOM
什么是:
用戶手動觸發(fā)的或瀏覽器自動觸發(fā)的? 頁面內容狀態(tài)的改變。
事件處理函數(shù):
當事件發(fā)生時，自動調用執(zhí)行的函數(shù)
所有事件處理函數(shù)：
this->elem 當前觸發(fā)事件的.前的元素
何時：
? ? 今后只要希望觸發(fā)事件時，自動執(zhí)行一項任務，就要提前綁定事件處理函數(shù)
綁定事件處理函數(shù): 3種:
1. 在HTML中綁定事件處理函數(shù):? (組件開發(fā)中常用)
? html:<ANY? ... on事件名="js語句/js函數(shù)調用" ...>
js:function 函數(shù)(){...}
問題:
1. 不便于集中管理事件
2. 不便于靈活重用
總之: 不符合內容與行為分離的原則
2. 在js中，用賦值方式綁定:
? elem.on事件名=function(){
? this->elem 當前觸發(fā)事件的.前的元素
? }
? 問題:
? 是用=賦值的方式給事件屬性賦值的，后賦值的處理函數(shù)會覆蓋先賦值的
(賦值是替換原函數(shù)。每個事件只能綁定一個處理函數(shù))
3. 在js中，為元素添加事件監(jiān)聽對象:
? elem.addEventListener("事件名",handler)
? 優(yōu):
一個事件，可同時添加多個處理函數(shù)
可隨時添加和移除
? 如何移除:移除處理函數(shù)時，必須找到原處理函數(shù)對象
? elem.removeEventListener("事件名",原h(huán)andler);
? 強調:
如果一個處理函數(shù)，可能被移除，
則綁定時，就必須用有名的函數(shù)。不能用匿名函數(shù)。
事件模型: 當事件觸發(fā)后，發(fā)生的一系列行為過程——鄙視
DOM標準認為: 點在內層元素上，也等效于點在外層元素上了
3個階段:
1. 捕獲: 由外向內記錄各級父元素上綁定的處理函數(shù)
捕獲階段只記錄處理函數(shù)，不執(zhí)行！
2. 目標觸發(fā):
目標元素: 最初實際觸發(fā)事件的元素
優(yōu)先觸發(fā)內層目標元素上的事件處理函數(shù)
3. 冒泡: 由內向外，按捕獲階段順序的反向，依次觸發(fā)各級父元素上的事件處理函數(shù)
事件對象:e
什么是:
事件發(fā)生時，自動創(chuàng)建的記錄事件信息的并提供修改事件默認行為的API對象
何時:
1、只要獲得事件的信息
2、修改事件的默認行為
如何:
創(chuàng)建: 自動創(chuàng)建
獲取: 事件對象e默認總是作為處理函數(shù)的第一個參數(shù)，自動傳入。
API:
1、取消冒泡: e.stopPropagation();
2、利用冒泡:
優(yōu)化: 盡量減少事件監(jiān)聽的個數(shù)
為什么: 瀏覽器觸發(fā)事件處理函數(shù)，是用遍歷方式查找處理函數(shù)并執(zhí)行。
遍歷的效率取決于遍歷次數(shù)。
何時: 只要多個平級子元素，要綁定相同事件時
如何: 只要在父元素上綁定依次處理函數(shù)，所有子元素自動共用！
2大難題:
1. 獲取目標元素:
錯誤: this->指向父元素
正確: e.target->始終保存著最初觸發(fā)事件的目標元素
且不隨冒泡而改變！
2.判斷e.target是否是想要的:
手段：nodeName, 元素名, class屬性, 內容...
阻止事件(默認行為):
什么是：
當事件處理函數(shù)過程中，可取消事件的觸發(fā)
何時:
1、默認行為不是想要的，就要阻止
? ? ? ? ? ? 2、出錯時，不想繼續(xù)執(zhí)行下去了
如何: e.preventDefault();
三個典型:
1. <a href="#xxx"
默認: 跳到錨點，在url結尾增加#xxx
2. 阻止表單自動提交！
自定義表單提交: 2種:
1. <input type=button? js: form.submit()
2. <input type=submit
=>form.onsubmit(): e.preventDefault()
3. HTML5中做拖拽效果時
必須阻止瀏覽器默認的拖拽行為
=DAY04==============================================================
正課:
1. 定時器:
一次性:
2. *navigator:
3. ***event
1. 定時器:
一次性: 讓程序先等待一段時間，再延遲執(zhí)行一項任務
執(zhí)行后，自動停止
何時: 只要讓程序延遲執(zhí)行一項任務，且不需要反復執(zhí)行時
如何: 3步:
1. 任務函數(shù):
2. 啟動定時器: timer=setTimeout(任務函數(shù),ms)
其中: ms指延遲的毫秒數(shù)
3. 停止定時器: clearTimeout(timer)
在執(zhí)行前，停止等待，不再執(zhí)行任務
鄙視: 定時器中的任務函數(shù)，必須等到主程序所有語句執(zhí)行完，才能執(zhí)行！
var a=10;
function fun(){
a++;
}
setTimeout(fun,0);
//fun無論等待多長時間都必須到最后才執(zhí)行
console.log(a);//10
2. navigator:
什么是: 封裝瀏覽器配置信息的對象
何時: 只要讀取瀏覽器配置信息時
如何:
1. 判斷是否啟用cookie
什么是: 客戶端持久存儲用戶私密信息的小文件
為什么: 內存中的數(shù)據(jù)都是臨時的
何時: 只要在客戶端持久保存數(shù)據(jù)時
如何判斷是否啟用cookie:
var bool=navigator.cookieEnabled
設置: 設置->高級->隱私->內容設置->查看和禁用cookie
2. 判斷是否安裝插件:
什么是: 為瀏覽器添加新功能的小軟件
如何判斷插件是否安裝:
navigator.plugins["插件名"]!==undefined
3. 判斷當前瀏覽器名稱和版本號——鄙視
navigator.userAgent: 保存瀏覽器名稱，版本，內核信息的字符串
何時: 只要判斷瀏覽器名稱和版本時
3. ***event: ——DOM
什么是: 用戶手動觸發(fā)的，或瀏覽器自動觸發(fā)的頁面狀態(tài)的改變。
事件處理函數(shù): 當事件發(fā)生時，自動執(zhí)行的函數(shù)
綁定事件處理函數(shù): 3種:
1. 在HTML中綁定事件處理函數(shù):
<ANY? ... on事件名="js語句" ...>
問題: 1. 不便于集中管理事件
2. 不便于靈活重用
總之: 不符合內容與行為分離的原則
2. 在js中，用賦值方式綁定:
ANY.on事件名=function(){
this->ANY 當前觸發(fā)事件的.前的元素
}
問題: 賦值是替換原函數(shù)。每個事件只能綁定一個處理函數(shù)
3. 在js中，為元素添加事件監(jiān)聽對象:
ANY.addEventListener("事件名",handler)
優(yōu): 一個事件，可同時添加多個處理函數(shù)
可隨時添加和移除
如何移除:
ANY.removeEventListener("事件名",原h(huán)andler);
問題: 如果一個處理函數(shù)，可能被移除，則綁定時，就必須用有名的函數(shù)。不能用匿名函數(shù)。
事件模型: 當事件發(fā)生時，瀏覽器觸發(fā)事件的過程——鄙視
DOM標準認為: 點在內層元素上，也等效于點在外層元素上了
3個階段:
1. 捕獲: 由外向內記錄各級父元素綁定的處理函數(shù)
捕獲階段只記錄處理函數(shù)，不執(zhí)行
2. 目標觸發(fā):
目標元素: 最初實際觸發(fā)事件的元素
優(yōu)先觸發(fā)目標元素上的處理函數(shù)
3. 冒泡: 由內向外，按捕獲階段順序的反向，依次觸發(fā)父元素上的處理函數(shù)
事件對象:e
什么是: 事件發(fā)生時，自動創(chuàng)建的記錄事件信息的對象
何時: 只要獲得事件的信息，或修改事件的默認行為
如何:
創(chuàng)建: 自動創(chuàng)建
獲取: 事件對象e總是作為處理函數(shù)的第一個參數(shù)，自動傳入。
API:
取消冒泡: e.stopPropagation();
利用冒泡:
優(yōu)化: 減少事件監(jiān)聽的個數(shù)
為什么: 瀏覽器觸發(fā)事件處理函數(shù)，是用遍歷方式找打處理函數(shù)并執(zhí)行。
何時: 只要多個平級子元素，要綁定相同事件時
如何: 只要在父元素上綁定依次處理函數(shù)，所有子元素自動共用！
2大難題:
1. 獲取目標元素:
錯誤: this->父元素
正確: e.target->記錄了最初觸發(fā)事件的元素
且不隨冒泡而改變！
2. 鑒別e.target是否是想要的:
元素名,? class屬性
阻止默認行為:
何時: 只要一個元素的事件中，帶有默認行為，且默認行為不是想要的，就要阻止
如何: e.preventDefault();
三個典型:
1. <a href="#xxx"
默認: 跳到錨點，在url結尾增加#xxx
2. 阻止表單自動提交！
自定義表單提交: 2種:
1. <input type=button? js: form.submit()
2. <input type=submit
=>form.onsubmit(): e.preventDefault()
3. HTML5中做拖拽效果時
必須阻止瀏覽器默認的拖拽行為
=================================================================
正課:
1. ***event
鼠標坐標
頁面滾動
項目:
詳情頁: 放大鏡效果
首頁樓層滾動:
1. ***event
? 鼠標坐標: 3對兒:
? 1、相對于屏幕左上角:
e.screenX, e.screenY;
? 2、相對于文檔顯示區(qū)左上角:
e.clientX, e.clientY
? 3、相對于當前元素左上角:
e.offsetX, e.offsetY
如何選擇: 和主角的活動范圍保持一致！
? 頁面滾動:
? 事件: window.onscroll
? 屬性：滾動距離: scrollTop=
1、document.body.scrollTop
2、document.documentElement.scrollTop
? 自定義控制滾動:
? 1、寫死了的位置
window.scrollTo(x方向的位置(通常為0),y方向的位置)
2、滴加
window.scrollBy(x方向的位置(通常為0),y方向的位置)
====JQUERY===========================================================================
==============================
正課:
1. 修改:
用class批量修改樣式
2. 添加，刪除，替換，克隆
3. 事件綁定
1. 修改:
用class批量修改樣式:
1. 為元素追加一個class:? $(...).addClass("class名")
2. 為元素移除一個class:? $(...).removeClass("class名")
3. 判斷是否包含一個class: $(...).hasClass("class名")
4. 為元素切換一個class: $(...).toggleClass("class名")
if($(...).hasClass("class名"))
$(...).removeClass("class名")
else
$(...).addClass("class名")
補: .index()
2種:
1. var i=$("selector").index(jq對象/DOM對象)
查找右邊的jq對象或DOM對象，在左邊的結果集合中的下標位置
2. 如果在同一個父元素下找某個子元素的位置
var i=$("child").index();
2. 添加,刪除,替換,克隆:
添加: 2步:
1. 用$()創(chuàng)建一個新元素: var $新元素=$("html片段")
2. 將新元素添加到dom樹:
$("parent").append($新元素)
.prepend($新元素)
$("child").before($新元素)
.after($新元素)
可以更簡化: $("parent").append/prepend("html片段")
$("child").before/after("HTML片段")
刪除: $(...).remove();
補: .is("selector") 判斷當前元素是否符合selector的條件
替換: $("selector").replaceWith(jq對象|DOM對象)
克隆: var $clone_elem=$(...).clone();
強調: 默認淺克隆: 僅克隆樣式和屬性, 不可隆行為
深克隆: 即克隆樣式和屬性，又克隆行為
$(...).clone(true)
3. 事件綁定:
鄙視: jQuery中共有幾種事件綁定方式，區(qū)別:
DOM: .addEventListener("事件名",handler)
.removeEventListener(...)
jq:
1. $("target").bind/unbind("事件名",handler)
同addEventListener()
? .unbind三種重載:
.unbind("事件名",handler) 移除當前元素上，指定事件上的名為handler的處理函數(shù)。
.unbind("事件名") 移除當前元素上，指定事件上的所有處理函數(shù)
.unbind() 移除當前元素上，所有事件的監(jiān)聽
2. $("target").one("事件名",handle) 同bind
區(qū)別: 只觸發(fā)一次，觸發(fā)后，自動解綁
3. .live/die("事件名",handle)——已廢棄
原理: 將所有事件集中綁定在頂級document上
4. $("parent").delegate("selector","事件名",handler)
原理: 簡化利用冒泡:
1. 獲得目標元素: this->e.target
2. 篩選目標元素: 第一個參數(shù): "selector"
只有滿足"selector"要求的元素，才能觸發(fā)事件
鄙視: .bind vs .delegate: 3點
1. .bind直接幫在目標元素上
.delegate 幫在父元素上
2. 監(jiān)聽個數(shù): .bind 監(jiān)聽個數(shù)多——每個目標元素都添加
.delegate 監(jiān)聽個數(shù)少——只給父元素添加一個
3. 新增子元素自動獲得事件處理函數(shù):
.bind 只能對現(xiàn)有元素添加事件監(jiān)聽
新增元素無法自動獲得監(jiān)聽
.delegate 只要父元素下的元素，無論現(xiàn)有，還是新增，都能自動獲得父元素上統(tǒng)一的事件監(jiān)聽
5. .on/off:
1. 代替bind: .on("事件名",handler) 同bind
2. 代替delegate: .on("事件名","selector",handler)同delegate
6. .事件名:
強調: 僅對常用的事件提供了終極簡化
? js 和css并行執(zhí)行
? transition沒顯示
? 放到window.onload=function(){頁面內容加載完成后在執(zhí)行的}中
4、頁面加載后執(zhí)行: 2種:
1. DOMContentLoaded: DOM內容加載完，就可提前執(zhí)行
DOM內容僅包括: html和js
提前觸發(fā)
何時: 只要不依賴于css和圖片的所有操作都可在DOM內容加載后，提前綁定觸發(fā)
比如: 事件綁定
jq: $(document).ready(()=>{//就等于DOMContentLoaded
? //DOM內容加載后，就可提前執(zhí)行的操作
//比如: 事件綁定
})
簡化: $().ready(()=>{
更簡化: $(()=>{...})
其實: 寫在body結尾的script中的代碼默認就是DOM內容加載后自動執(zhí)行
2. window.onload 在所有頁面內容加載完成后自動觸發(fā)
window.onload=function(){...}
問題：使用賦值的方式，多個的話，后面的會覆蓋前面的
? ? $(window).load(function(){})
包括: html,css,js,圖片
何時: 如果必須依賴css或圖片的操作
鄙視：jQuery中$的原理：
查找，創(chuàng)建新元素，封裝(DOM封裝為jQuery對象那個)，DOM加載后自動執(zhí)行
是jQuery類型的工廠函數(shù)，用于創(chuàng)建jQuery類型的子對象
有四種重載：
? 1、選擇器作為參數(shù)：現(xiàn)有選擇器查找DOM元素，在封裝進jQuery中
jQuery對象其實就是一個類數(shù)組對象
為了加快(speed up)查找速度，
? 如果只給 #id 則自動優(yōu)先調用 getElementById
? ? ? ? tag? ? ? ? ? ? ? ? ? ? ? ? ? ? TagName
.class? ? ? ? ? ? ? ? ? ? ? ? Classname
其余復雜選擇器都調用querySelectorAll
2、DOM對象作為參數(shù)：將DOM元素封裝為jQuery對象
DOM不是jQuery類型的子對象，無法直接使用jQuery簡化版本的API
需要先封裝，在使用
3、html代碼片段作為參數(shù)：創(chuàng)建新的DOM元素對象
4、回調函數(shù)作為參數(shù)：自動在DOM內容加載后，提前出該函數(shù)，
是一種事件綁定
鼠標事件:
1、mouseover? mouseout
進出子元素，會頻繁觸發(fā)父元素的處理函數(shù)
2、mouseenter? mouseleave
進出子元素，不再頻繁觸發(fā)父元素的處理函數(shù)------效率高
簡寫: 如果同時綁定鼠標進入和移出事件時，可簡寫為hover
$().hover(
? fun(){...}, //給mouseenter進，不觸發(fā)父元素
fun(){...}? //給mouseleave出，不觸發(fā)父元素
)
更簡化:
如果兩個處理函數(shù)，可用toggle統(tǒng)一為一個處理函數(shù)
? ? 則只需要傳一個參數(shù)即可
模擬觸發(fā):
雖然沒有觸發(fā)事件，但是依然可用程序模擬執(zhí)行元素的事件處理函數(shù)
如何:? $(...).trigger("事件名")
其實可以更簡單: $(...).事件名()
? ? ? 4_trigger.html
總結: jQuery簡化了DOM五大操作:
查找, 修改, 添加, 刪除, 事件綁定
=====================================================
正課:
1. 動畫:
2. 類數(shù)組對象:
3. 插件:
css不是CPU解析的，是GPU(顯卡)解析的，GPU做繪圖效率更高
1. 動畫:
簡單動畫: 3種固定動畫效果
1. 顯示隱藏:? .show()? .hide()? .toggle()? 記這個吧
默認:
不帶參數(shù)，默認用display實現(xiàn)瞬間顯示隱藏，不支持動畫效果
帶時間(ms)參數(shù), 才有動畫效果
總結: 通常都是用不帶參數(shù)的方法，代替display,簡化代碼
2. 上滑下滑: .slideUp(ms)? .slideDown(ms)? .slideToggle(ms)
3. 淡入淡出: .fadeIn(ms)? ? .fadeOut(ms)? ? .fadeToggle(ms);
問題:
? ? 1. 用js定時器實現(xiàn)動畫效果，效率不如css的transition
2. 效果是在jQuery庫中寫死的，不便于維護
萬能動畫: 可自定義動畫要修改的css屬性
$(...).animate({
css屬性: 目標值,
css屬性: 目標值,
... : ...
},ms,callback)
問題:
? 僅支持單個數(shù)值的css屬性值
不支持顏色 不支持C3變換
? ? 優(yōu)點：
可隨意停止
$(...).動畫API(ms,callback)
jQuery動畫API的最后一個參數(shù)是一個回調函數(shù)：
在動畫播放后自動執(zhí)行。callback專門用于在動畫播放后執(zhí)行善后處理。
回調函數(shù)中: this->正在播放動畫的DOM元素
強調: 想用this，就不能用箭頭函數(shù)
并發(fā)和排隊:
排隊: 對同一個元素調用的多個動畫API，是排隊執(zhí)行。
原理: 動畫API并不是啟動動畫。僅是將動畫加入一個隊列中順序執(zhí)行。
并發(fā): 在一個animate函數(shù)內，修改的多個css屬性，是同時變化。
2. 類數(shù)組對象操作: 4個:
1. [i] => .get(i) 返回的是DOM元素
2. .length => .size()
3. .forEach =>
.each(function(i當前位置,elem當前DOM元素){? this->當前DOM元素 })
鄙視：$.each(obj,fun)? vs? $(...).each(fun)
? 1.存儲位置：
? $.each() 直接存儲在構造函數(shù)上
$(...).each 存儲在jQuery類型的原型對象中
2.調用方法
? $.each() obj可以是任何類數(shù)組對象
$(...).each 必須是jQuery對象
4. .indexOf => $(全部).index($要查找的元素)
如果在同一個父元素內查找直接子元素 $(要查找的元素).index()
3.定義jQuery全局函數(shù)
? jQuery.fn.自定義函數(shù)=function(){
? // this ->將來調用該函數(shù)的jquery類型子對象
? ? ? ? //不用$封裝? 已經是jQuery對象了
}
插件: 基于jQuery開發(fā)的獨立的小功能，效果
為什么: 復用功能和效果，極大節(jié)約代碼量
何時: 只要發(fā)現(xiàn)多個項目中，都用到相同的功能和效果
如何: 3種:
1. jQuery UI: jQuery官方推出的插件
官網: jqueryui.com
快速入門: jqueryui.com
手冊: 官網
如何使用:
下載js和css以及圖片:
強調: jquery-ui.css 必須和images文件夾同目錄
引入:
jquery-ui.css
jquery-3.2.1.js
jquery-ui.js
自定義腳本
包括: 交互, 效果, 部件
2. 第三方插件:
3. *****自定義插件:
=======================
正課:
1. 插件:
官方插件: jQuery UI
***封裝自定義插件:
第三方插件:
2. jQuery的Ajax封裝
*****跨域請求
什么是插件：具有完整樣式和功能的小功能(函數(shù))
為什么：開發(fā)中，很多效果/功能都是重復使用的
何時：只要項目中有反復使用的功能/樣式，都要先封裝為組件，再反復使用組件
包括：3中
? 1.官方 2.第三方 3.自定義
1. 插件:
官方插件: jQuery UI
基于jQuery API實現(xiàn)的可復用的小功能庫
如何：
? 下載
包括：文件夾images jquery-ui.css? jquery-ui.js
? 其中，images要和jquery-ui.css同一目錄下
.autocomplete();
HTML: <input ... />
JS: $(文本框).autocomplete({
source:客戶端數(shù)組|"遠程.php路徑"
})
PHP: 2種:
1. 返回只有一個鍵的關聯(lián)數(shù)組, 只要鍵名為label，客戶端autocomplete可自動識別
2. 返回包含多個鍵的關聯(lián)數(shù)組: 2步:
1. 再次調用:
.autocomplete("instance")._renderItem=function($ul,item){
//$ul: 自動獲得當前下拉列表的ul元素
//item: 獲得結果結合中，當前正在加載的元素對象
//操作: 3件事:
//1. 創(chuàng)建一個li>div:
//從item中獲取鍵的值，拼接到div中
//2. 將新的li追加到$ul中
//3. 返回新的li的對象
}
2. 在autocomplete中定義select處理函數(shù):
在單擊每個列表項時自動觸發(fā):
select:function(e,obj){
//obj.item是當前l(fā)i對應的原集合中的對象
//常用操作: 2個
//1. 將item中的主要內容，顯示在文本框中
//2. 用當前選中項作為參數(shù)，跳轉到新的url
return false;//必須
}
2. 日期選擇: datepicker
HTML: <input />
CSS:
JS: $(文本框).datepicker()
3. 對話款: 表單提交
HTML:
<div id="xxx" title="標題"
<form>
...
//不用寫提交和重置按鈕
</form>
</div>
css:
JS: $(div).dialog(); //僅將div及其內容，變?yōu)閷υ捒虻臉邮?/p>
總結:
問題: jquery ui采用侵入的方式，自動加載樣式和行為
優(yōu): 極大的減少了開發(fā)人員的代碼量
缺: 侵入的class和行為都是寫死的，不便于維護
解決: bootstrap vs jquery ui
bootstrap不采用侵入的方式，隱式添加任何代碼
而是僅提供樣式類庫
由開發(fā)人員，自主的選擇應用何種class
自定義插件:
何時: 只要在項目中發(fā)現(xiàn)頻繁重用的功能，都要封裝為自定義插件
如何提取:
前提: 必須使用HTML,css,js實現(xiàn)了插件的完整樣式和功能
Step1: 將當前功能的css，提取到一個專門的css文件中
強調: css中盡量少的使用id,元素選擇器
盡量一切都用class去實現(xiàn)！
Step2: 將當前功能的js行為，提取到一個專門的js文件中
在插件的js文件中查找自定義擴展屬性的元素
強調: 將來插件都是通過查找自定義擴展屬性來為元素添加行為的
今后，只要出發(fā)事件的元素，都要標記自定義擴展屬性
如何使用:
1. 按插件要求，編寫HTML內容結構
2. 引入插件的css, 在HTML中對應元素上，手動添加class
第三方插件:
1. jquery validate
? $(form).validate({
rule:{
? name1:"規(guī)則1",
name2:{
? 規(guī)則1:值1,
規(guī)則1:值2,
}
},
messages:{
? 消息
}
})
2. jQuery的Ajax封裝:
$.ajax({
url:"xxx.php",
type:"get|post",
data:"參數(shù)數(shù)據(jù)"|{變量:值,...}| $(form).serialize(),
//jquery-1.11.3.js
//success:data=>{...}
})//jquery-3.2.1.js
.then(data=>{...})
補充: jquery表單操作:
$(form).serialize()
=====================================
正課:
1. 插件:
官方插件: jQuery UI
***封裝自定義插件:
第三方插件:
2. jQuery的Ajax封裝
*****跨域請求
1. 插件:
官方插件: jQuery UI
.autocomplete();
? HTML: <input ... />
? JS: $(文本框).autocomplete({
? ? ? source:客戶端數(shù)組|"遠程.php路徑"
? ? })
? PHP: 2種:
? 1. 返回只有一個鍵的關聯(lián)數(shù)組, 只要鍵名為label，客戶端autocomplete可自動識別
? 2. 返回包含多個鍵的關聯(lián)數(shù)組: 2步:
? ? 1. 再次調用:
? ? ? .autocomplete("instance")._renderItem=function($ul,item){
? ? ? ? //$ul: 自動獲得當前下拉列表的ul元素
? ? ? ? //item: 獲得結果結合中，當前正在加載的元素對象
? ? ? ? //操作: 3件事:
? ? ? ? ? //1. 創(chuàng)建一個li>div:
? ? ? ? ? ? //從item中獲取鍵的值，拼接到div中
? ? ? ? ? //2. 將新的li追加到$ul中
? ? ? ? ? //3. 返回新的li的對象
? ? ? }
? ? 2. 在autocomplete中定義select處理函數(shù):
? ? ? 在單擊每個列表項時自動觸發(fā):
? ? ? select:function(e,obj){
? ? ? ? //obj.item是當前l(fā)i對應的原集合中的對象
? ? ? ? //常用操作: 2個
? ? ? ? ? //1. 將item中的主要內容，顯示在文本框中
? ? ? ? ? //2. 用當前選中項作為參數(shù)，跳轉到新的url
? ? ? ? return false;//必須
? ? ? }
? 2. 日期選擇: datepicker
? HTML: <input />
? CSS:
? JS: $(文本框).datepicker()
? 3. 對話款: 表單提交
? HTML:
? ? <div id="xxx" title="標題"
? ? ? <form>
? ? ? ? ...
? ? ? ? //不用寫提交和重置按鈕
? ? ? </form>
? ? </div>
? css:
? JS: $(div).dialog(); //僅將div及其內容，變?yōu)閷υ捒虻臉邮?/p>
總結:
問題: jquery ui采用侵入的方式，自動加載樣式和行為
? 優(yōu): 極大的減少了開發(fā)人員的代碼量
? 缺: 侵入的class和行為都是寫死的，不便于維護
解決: bootstrap vs jquery ui
? bootstrap不采用侵入的方式，隱式添加任何代碼
? ? 而是僅提供樣式類庫
? ? 由開發(fā)人員，自主的選擇應用何種class
自定義插件:
何時: 只要在項目中發(fā)現(xiàn)頻繁重用的功能，都要封裝為自定義插件
如何提取:
? 前提: 必須使用HTML,css,js實現(xiàn)了插件的完整樣式和功能
? Step1: 將當前功能的css，提取到一個專門的css文件中
? ? 強調: css中盡量少的使用id,元素選擇器
? ? ? ? 盡量一切都用class去實現(xiàn)！
? Step2: 將當前功能的js行為，提取到一個專門的js文件中
? ? 在插件的js文件中查找自定義擴展屬性的元素
? ? 強調: 將來插件都是通過查找自定義擴展屬性來為元素添加行為的
? ? 今后，只要出發(fā)事件的元素，都要標記自定義擴展屬性
如何使用:
? 1. 按插件要求，編寫HTML內容結構
? 2. 引入插件的css, 在HTML中對應元素上，手動添加class
第三方插件:
1. jquery validate
2. jQuery的Ajax封裝:
$.ajax({
? url:"xxx.php",
? type:"get|post",
? data:"參數(shù)數(shù)據(jù)"|{變量:值,...}| $(form).serialize(),
? //jquery-1.11.3.js
? //success:data=>{...}
})//jquery-3.2.1.js
.then(data=>{...})
補充: jquery表單操作:
$(form).serialize()
