====DOM===========================================================================

=DAY-01=====================================

正課:

1. 什么是DOM

2. *DOM Tree

3. *查詢: 4種

1. 什么是DOM: Document Object Model

? 什么是:

? ? 專門操作網(wǎng)頁內(nèi)容的統(tǒng)一的API標準——W3C

? 為什么:

? 早期的DOM時木有標準蒋纬，存在嚴重的兼容性問題

DOM就是為了統(tǒng)一操作網(wǎng)頁內(nèi)容的API標準

用DOM操作網(wǎng)頁內(nèi)容泊愧，幾乎100%兼容所有瀏覽器

? 何時:

? 只要操作網(wǎng)頁內(nèi)容村视，都用DOM

原生JS：只需要瀏覽器官套，不需要下載第三方軟件，就可以操作

? ECMAScript(核心語法)

+DOM(操作網(wǎng)頁內(nèi)容)

+BOM(操作瀏覽器窗口)

? 如何:

2.? DOM Tree:

什么是:

在內(nèi)存中蚁孔，存儲網(wǎng)頁中所有內(nèi)容的樹型結構

為什么:

? 樹型結構最好的展現(xiàn)層次關系結構奶赔，且可無限向下延伸。

何時:

? 當瀏覽器讀到網(wǎng)頁內(nèi)容時杠氢，就會自動在內(nèi)存中創(chuàng)建樹形結構

只要存儲不確定層級深度的上下級關系站刑，都用樹型結構

如何:

自動創(chuàng)建，自動維護

1. 當瀏覽器讀取到HTML文檔時鼻百，開始創(chuàng)建

2. 首先創(chuàng)建根節(jié)點document

document對象是整棵DOM樹的樹根

所有網(wǎng)頁內(nèi)容绞旅，都是document節(jié)點的后代節(jié)點

3. 依次讀取網(wǎng)頁中每個元素，屬性温艇，文本

網(wǎng)頁中每項內(nèi)容(元素因悲，屬性，文本)都是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? ? ? 文本內(nèi)容

DOM: *查詢，修改绣否，添加誊涯，刪除，事件綁定

所有DOM操作蒜撮，都遵循4步

1暴构、查找觸發(fā)事件的元素

2、綁定事件處理函數(shù)

3段磨、查找要修改的元素

4取逾、修改其內(nèi)容

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)系

何時:

如果已經(jīng)獲得一個節(jié)點，找周圍附近的有關系的節(jié)點時

如何: 2大類關系:

節(jié)點樹: 包含所有網(wǎng)頁內(nèi)容(元素债蜜，文字)的完整樹結構

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é)點，調(diào)用和父元素完全相同的方法

算法: 深度優(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)調(diào)用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");

? 強調(diào): 只能用document調(diào)用棘街！

? 返回值：

返回一個元素(id重復時蟆盐，返回第一個)

找不到時，返回null

2. 按標簽名(tag name)查找:

var elems=parent.getElementsByTagName("標簽名");

? 強調(diào):

? ? 1. 可在任意父元素上調(diào)用遭殉！

2. 不僅找直接子元素石挂，且查找所有后代中的元素

? 返回值：

返回包含多個元素的動態(tài)集合(類數(shù)組對象)

找不到，返回length為0的空集合

3. 按name屬性查找:(表單常用這個)

var elems=document.getElementsByName("name");

強調(diào): 只能用document調(diào)用

? ? ? ? 返回值：

返回包含多個元素的動態(tài)集合(類數(shù)組對象)

找不到险污，返回length為0的空集合

4. 按class屬性查找:

var elems=parent.getElementsByClassName("class");

返回值：

返回包含多個元素的動態(tài)集合(類數(shù)組對象)

找不到痹愚，返回length為0的空集合

? 強調(diào):

? 1. 可在任意父元素上調(diào)用！

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樹

強調(diào)：

1. 可在任何父元素上調(diào)用

2. 不僅查找直接削祈，切查找所有后續(xù)元素

3. 受制于瀏覽器的兼容性限制

鄙視：getElementsByTagName? VS? querySelectorAll

? 返回值：

? html-->動態(tài)集合for(var len=xxx.length)

選擇器查找-->非動態(tài)集合

? 首次查找：

前者塊翅溺，后者慢

易用性：

總結：如果只要一個條件就可獲得想要的

=DAY-02======================================================================

4. 修改: 3種:

1. 內(nèi)容: 3種:

1. 獲取或修改元素的HTML代碼片段內(nèi)容:(代碼)

elem.innerHTML

2. 獲取或修改元素的純文本內(nèi)容(網(wǎng)頁顯示的)

elem.textContent vs innerHTML:

? ? 1. 去掉內(nèi)嵌標簽

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標準屬性吨拍，已經(jīng)提前預定義在了元素對象上褪猛，默認值為""

如何:

獲取:? ? ? var value=elem.屬性名

修改:? ? ? elem.屬性名=值

判斷有沒有: elem.屬性名!==""? 有true

移除:? ? ? elem.屬性名=""

? 特例: class屬性:obj.class類型名=> .className樣式類名

核心DOM: 可直接使用class

HTML DOM: 必須換為.className => 就是HTML中的class

因為js的對象中已經(jīng)提前有一個內(nèi)部屬性class，用來記錄對象創(chuàng)建時的類型名

2. 狀態(tài)屬性: disabled? selected? ? checked

特點: 值是bool類型

? 不能用核心DOM操作,因為核心DOM只能操作字符串類型

? 只能用HTML DOM? 打. 操作

都有對應的選擇器：? :check :

3. 自定義擴展屬性:

什么是: 自定義的羹饰，不在HTML標準范圍內(nèi)的屬性

為什么:

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. 內(nèi)聯(lián)樣式:

用style設置的css屬性，默認出現(xiàn)在內(nèi)聯(lián)樣式中

特點: 優(yōu)先級最高, 僅當前元素獨有

修改:

1. 僅修改一個內(nèi)聯(lián)樣式

elem.style.css屬性名=值

強調(diào): 所有css屬性名要去橫線變駝峰

比如: z-index => zIndex

font-size=> fontSize

background-position=>backgroundPosition

2. 批量替換內(nèi)聯(lián)樣式:

elem.style.cssText="...";

獲取:

錯誤: elem.style.css屬性

style僅表示內(nèi)聯(lián)樣式锦针，elem.style只能獲得內(nèi)聯(lián)延時荠察，無法獲得外部樣式，丟樣式

解決: 獲得計算后的樣式:

什么是: 最終應用到當前元素上的所有樣式的合集

為什么: 一個元素的完整樣式奈搜，可能來源自多個地方

何時: 只要獲取樣式悉盆，都要獲得計算后的完整樣式！

如何: 2步:

1. 獲得計算后的完整style對象

var style=getComputedStyle(elem);

2. 獲得style中的css屬性值;

var value=style.css屬性;

強調(diào): 計算后的樣式style是只讀的馋吗，不能修改焕盟！

2. 修改樣式表中的樣式: ——了解

1. 獲得樣式表對象:sheet

var sheet=document.styleSheets[i];

2. 獲得要修改的屬性所在的cssRule(樣式表對象中的一套規(guī)則:（一對兒{}中的內(nèi)容)

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、修改其內(nèi)容

=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?

網(wǎng)頁的加載原理:

html -> DOM Tree

↓

Render Tree-> ***layout***? ? ->? paint

↑? ? ? 計算每個元素的

css -> COM? ? ? ? 絕對布局位置

只要修改DOM樹, 包括: 修改樣式,修改位置,添加刪除元素

都會導致重新layout ——>效率低

解決:

1. 如果同時添加父元素和子元素時来农，

都要先在內(nèi)存中將所有子元素鞋真，添加到父元素中，

最后沃于，再將父元素涩咖，一次性添加到DOM樹。

? ? ? 2. 如果父元素已經(jīng)在樹上繁莹，要同時添加多個平級子元素時:

? 先將多個子元素添加到文檔片段中檩互，再將文檔片段一次性添加到DOM樹中

? ? ? 文檔片段:

? ? ? ? 什么是: 內(nèi)存中，臨時存儲一棵dom子樹片段的存儲空間(虛擬父元素對象)

? ? ? ? 何時: 只要同時添加多個平級子元素時

? ? ? ? 如何: 3步:

? ? ? ? ? 1. 創(chuàng)建文檔片段對象

? ? ? ? ? ? var frag=document.createDocumentFragment();

? ? ? ? ? 2. 先將子元素添加到文檔片段中

? ? ? ? ? ? frag.appendChild(child)

? ? ? ? ? 3. 將文檔片段一次性添加到DOM樹指定父元素下

? ? ? ? ? ? parent.appendChild(frag)

? ? ? ? ? 強調(diào): 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屬性薄风，則用內(nèi)容代替

.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位置的行

強調(diào): 主語是行分組時撰茎，i要求是在行分組內(nèi)的相對下標位置

問題：行分組內(nèi)的相對下標無法自動獲取

解決：table.deleteRow(tr.rowIndex)

? tr.rowIndex可自動獲得當前tr相對于整個表格的下標位置

table.deleteRow(i) i剛好需要相對于整個表格的下標位置

獲取: 行分組.rows? 獲得行分組內(nèi)所有行的集合

%嵌牺、行:管著格:

創(chuàng)建: var td=tr.insertCell(i)

固定套路: 末尾追加: tr.insertCell()

強調(diào)：只能創(chuàng)建td不能創(chuàng)建th

刪除: tr.deleteCell(i)

獲取: tr.cells

form:

獲取: var form=document.forms[i/id/name];

屬性: form.elements 獲得表單中所有表單元素的集合

強調(diào): 表單元素包括: 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. 封裝保存所有內(nèi)置龄糊，全局的API和對象(像alert 啊等)

包括：history逆粹，location，document炫惩，navigator僻弹，screen，event

(屬性: 文檔顯示區(qū)大小: 瀏覽器窗口中專門顯示網(wǎng)頁的區(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 不指定窗口名, 每打開一個窗口蚣抗，瀏覽器會自動隨機生成內(nèi)部窗口名

關閉窗口: /*window.*/close();

history: 保存當前窗口打開后，成功訪問過的url的歷史記錄棧

不允許修改history內(nèi)容!

只能三個操作: 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ù)小文件

為什么: 程序內(nèi)存中的所有數(shù)據(jù)(變量党涕、數(shù)組烦感、對象)都是臨時存儲的

何時: 只要希望在客戶端持久保存用戶私密數(shù)據(jù)時

如何判斷是否啟用cookie:

var bool=navigator.cookieEnabled

設置: 設置->高級->隱私->內(nèi)容設置->查看和禁用cookie

2. 判斷是否安裝插件:

什么是: 保存當前瀏覽器安裝插件的集合

什么是插件：為瀏覽器添加新功能的小軟件

如何判斷插件是否安裝:

navigator.plugins["插件名"]!==undefined

3. 判斷當前瀏覽器名稱和版本號——鄙視

navigator.userAgent: 保存瀏覽器名稱，版本和內(nèi)核信息的字符串

何時: 只要判斷瀏覽器名稱和版本時就用

? 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ù)中绿渣，設定臨界值

一旦達到臨界值，就自動調(diào)用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ā)的? 頁面內(nèi)容狀態(tài)的改變氛悬。

事件處理函數(shù):

當事件發(fā)生時则剃，自動調(diào)用執(zhí)行的函數(shù)

所有事件處理函數(shù)：

this->elem 當前觸發(fā)事件的.前的元素

何時：

? ? 今后只要希望觸發(fā)事件時，自動執(zhí)行一項任務如捅，就要提前綁定事件處理函數(shù)

綁定事件處理函數(shù): 3種:

1. 在HTML中綁定事件處理函數(shù):? (組件開發(fā)中常用)

? html:<ANY? ... on事件名="js語句/js函數(shù)調(diào)用" ...>

js:function 函數(shù)(){...}

問題:

1. 不便于集中管理事件

2. 不便于靈活重用

總之: 不符合內(nèi)容與行為分離的原則

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);

? 強調(diào):

如果一個處理函數(shù)朴肺，可能被移除窖剑，

則綁定時，就必須用有名的函數(shù)戈稿。不能用匿名函數(shù)西土。

事件模型: 當事件觸發(fā)后，發(fā)生的一系列行為過程——鄙視

DOM標準認為: 點在內(nèi)層元素上鞍盗，也等效于點在外層元素上了

3個階段:

1. 捕獲: 由外向內(nèi)記錄各級父元素上綁定的處理函數(shù)

捕獲階段只記錄處理函數(shù)需了，不執(zhí)行！

2. 目標觸發(fā):

目標元素: 最初實際觸發(fā)事件的元素

優(yōu)先觸發(fā)內(nèi)層目標元素上的事件處理函數(shù)

3. 冒泡: 由內(nèi)向外般甲，按捕獲階段順序的反向肋乍，依次觸發(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屬性, 內(nèi)容...

阻止事件(默認行為):

什么是：

當事件處理函數(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

什么是: 客戶端持久存儲用戶私密信息的小文件

為什么: 內(nèi)存中的數(shù)據(jù)都是臨時的

何時: 只要在客戶端持久保存數(shù)據(jù)時

如何判斷是否啟用cookie:

var bool=navigator.cookieEnabled

設置: 設置->高級->隱私->內(nèi)容設置->查看和禁用cookie

2. 判斷是否安裝插件:

什么是: 為瀏覽器添加新功能的小軟件

如何判斷插件是否安裝:

navigator.plugins["插件名"]!==undefined

3. 判斷當前瀏覽器名稱和版本號——鄙視

navigator.userAgent: 保存瀏覽器名稱旷痕，版本，內(nèi)核信息的字符串

何時: 只要判斷瀏覽器名稱和版本時

3. ***event: ——DOM

什么是: 用戶手動觸發(fā)的顽冶，或瀏覽器自動觸發(fā)的頁面狀態(tài)的改變欺抗。

事件處理函數(shù): 當事件發(fā)生時，自動執(zhí)行的函數(shù)

綁定事件處理函數(shù): 3種:

1. 在HTML中綁定事件處理函數(shù):

<ANY? ... on事件名="js語句" ...>

問題: 1. 不便于集中管理事件

2. 不便于靈活重用

總之: 不符合內(nèi)容與行為分離的原則

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標準認為: 點在內(nèi)層元素上召嘶，也等效于點在外層元素上了

3個階段:

1. 捕獲: 由外向內(nèi)記錄各級父元素綁定的處理函數(shù)

捕獲階段只記錄處理函數(shù)，不執(zhí)行

2. 目標觸發(fā):

目標元素: 最初實際觸發(fā)事件的元素

優(yōu)先觸發(fā)目標元素上的處理函數(shù)

3. 冒泡: 由內(nèi)向外哮缺，按捕獲階段順序的反向弄跌，依次觸發(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();

強調(diào): 默認淺克隆: 僅克隆樣式和屬性, 不可隆行為

深克隆: 即克隆樣式和屬性纽什，又克隆行為

$(...).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. .事件名:

強調(diào): 僅對常用的事件提供了終極簡化

? js 和css并行執(zhí)行

? transition沒顯示

? 放到window.onload=function(){頁面內(nèi)容加載完成后在執(zhí)行的}中

4顿颅、頁面加載后執(zhí)行: 2種:

1. DOMContentLoaded: DOM內(nèi)容加載完，就可提前執(zhí)行

DOM內(nèi)容僅包括: html和js

提前觸發(fā)

何時: 只要不依賴于css和圖片的所有操作都可在DOM內(nèi)容加載后足丢，提前綁定觸發(fā)

比如: 事件綁定

jq: $(document).ready(()=>{//就等于DOMContentLoaded

? //DOM內(nèi)容加載后粱腻，就可提前執(zhí)行的操作

//比如: 事件綁定

})

簡化: $().ready(()=>{

更簡化: $(()=>{...})

其實: 寫在body結尾的script中的代碼默認就是DOM內(nèi)容加載后自動執(zhí)行

2. window.onload 在所有頁面內(nèi)容加載完成后自動觸發(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)先調(diào)用 getElementById

? ? ? ? tag? ? ? ? ? ? ? ? ? ? ? ? ? ? TagName

.class? ? ? ? ? ? ? ? ? ? ? ? Classname

其余復雜選擇器都調(diào)用querySelectorAll

2、DOM對象作為參數(shù)：將DOM元素封裝為jQuery對象

DOM不是jQuery類型的子對象著角，無法直接使用jQuery簡化版本的API

需要先封裝，在使用

3旋恼、html代碼片段作為參數(shù)：創(chuàng)建新的DOM元素對象

4吏口、回調(diào)函數(shù)作為參數(shù)：自動在DOM內(nèi)容加載后奄容，提前出該函數(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ù)是一個回調(diào)函數(shù)：

在動畫播放后自動執(zhí)行酝碳。callback專門用于在動畫播放后執(zhí)行善后處理。

回調(diào)函數(shù)中: this->正在播放動畫的DOM元素

強調(diào): 想用this恨狈，就不能用箭頭函數(shù)

并發(fā)和排隊:

排隊: 對同一個元素調(diào)用的多個動畫API疏哗，是排隊執(zhí)行。

原理: 動畫API并不是啟動動畫拴事。僅是將動畫加入一個隊列中順序執(zhí)行沃斤。

并發(fā): 在一個animate函數(shù)內(nèi)，修改的多個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.調(diào)用方法

? $.each() obj可以是任何類數(shù)組對象

$(...).each 必須是jQuery對象

4. .indexOf => $(全部).index($要查找的元素)

如果在同一個父元素內(nèi)查找直接子元素 $(要查找的元素).index()

3.定義jQuery全局函數(shù)

? jQuery.fn.自定義函數(shù)=function(){

? // this ->將來調(diào)用該函數(shù)的jquery類型子對象

? ? ? ? //不用$封裝? 已經(jīng)是jQuery對象了

}

插件: 基于jQuery開發(fā)的獨立的小功能，效果

為什么: 復用功能和效果牲证，極大節(jié)約代碼量

何時: 只要發(fā)現(xiàn)多個項目中哮针，都用到相同的功能和效果

如何: 3種:

1. jQuery UI: jQuery官方推出的插件

官網(wǎng): jqueryui.com

快速入門: jqueryui.com

手冊: 官網(wǎng)

如何使用:

下載js和css以及圖片:

強調(diào): 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. 再次調(diào)用:

.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中的主要內(nèi)容奠宜，顯示在文本框中

//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及其內(nèi)容瞻想，變?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文件中

強調(diào): css中盡量少的使用id,元素選擇器

盡量一切都用class去實現(xiàn)！

Step2: 將當前功能的js行為贵少，提取到一個專門的js文件中

在插件的js文件中查找自定義擴展屬性的元素

強調(diào): 將來插件都是通過查找自定義擴展屬性來為元素添加行為的

今后呵俏，只要出發(fā)事件的元素，都要標記自定義擴展屬性

如何使用:

1. 按插件要求春瞬，編寫HTML內(nèi)容結構

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. 再次調(diào)用:

? ? ? .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中的主要內(nèi)容，顯示在文本框中

? ? ? ? ? //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及其內(nèi)容绪氛，變?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文件中

? ? 強調(diào): css中盡量少的使用id,元素選擇器

? ? ? ? 盡量一切都用class去實現(xiàn)！

? Step2: 將當前功能的js行為伯襟，提取到一個專門的js文件中

? ? 在插件的js文件中查找自定義擴展屬性的元素

? ? 強調(diào): 將來插件都是通過查找自定義擴展屬性來為元素添加行為的

? ? 今后猿涨，只要出發(fā)事件的元素，都要標記自定義擴展屬性

如何使用:

? 1. 按插件要求姆怪，編寫HTML內(nèi)容結構

? 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()