柚子快報(bào)邀請(qǐng)碼778899分享：jQuery 筆記

http://yzkb.51969.com/

一、什么是jQuery

框架：半成品軟件

Jquery就是封裝好的js 本質(zhì)上還是js

jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript**框架**，是繼Prototype之后又一個(gè)優(yōu)秀的**JavaScript代碼庫(kù)**（*或JavaScript框架*）。

JQuery:封裝好的代碼庫(kù)。有一些大牛（官方）嫌棄js用著不好，很多具有特殊功能的代碼的集合。就把這些代碼寫(xiě)在一個(gè)js文件中，名字就叫 jquery.js。

jQuery設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫(xiě)更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的**JavaScript設(shè)計(jì)模式**，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫(huà)設(shè)計(jì)和**Ajax交互**。

優(yōu)點(diǎn)：選擇器強(qiáng)大 優(yōu)秀的DOM操作 動(dòng)畫(huà) 鏈?zhǔn)骄幊蹋ㄒ?. 到底）

二、jQuery的使用

(一) 基礎(chǔ)語(yǔ)法：

1. $('選擇器').action()

2. 獲取DOM元素

$('選擇器')

獲取 單個(gè) 和 多個(gè) DOM元素都是用這個(gè)語(yǔ)法！

3. 注意： 通過(guò)$('選擇器')獲取的DOM元素 ?被稱為 jquery 元素(被jquery二次處理過(guò)) 通過(guò) 原生js獲取的DOM元素 ?就是標(biāo)準(zhǔn)的DOM元素 jquery DOM對(duì)象 只能調(diào)用jquery內(nèi)部提供的方法 原生js DOM對(duì)象 只能調(diào)用原生js內(nèi)部的方法

(二) jsDOM對(duì)象與 JqueryDOM對(duì)象的互相轉(zhuǎn)換

js對(duì)象---》jquery對(duì)象 $(js對(duì)象)

jquery對(duì)象-》js對(duì)象

jquery對(duì)象[下標(biāo)]

- jquery對(duì)象.get(下標(biāo))

- jquery對(duì)象的遍歷

- 普通for循環(huán)

- $('選擇器').each(function(index,item){ });

- $.each('要遍歷的對(duì)象/數(shù)組',function(index,item){ })

//內(nèi)置方法 each

$('p').each(function(index,item){

console.log(item,index);})

三、jQuery的屬性操作

text() - 設(shè)置或返回所選元素的文本內(nèi)容html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）val() - 設(shè)置或返回表單字段的值hide()--隱藏 ? ===》display:none; show()--顯示 ===》display:block/inline; length--長(zhǎng)度

四、jQuery操作CSS樣式

js jq 對(duì)象.style.屬性 = “屬性值” css({"屬性":"屬性值"，"屬性":"屬性值"})//多屬性 css("屬性名","屬性值");//單個(gè)屬性

五、jQuery的事件綁定

(一) 綁定方法：

六、jQuery事件委托的解決辦法

也可以直接這樣寫(xiě)，把標(biāo)簽名放中間

七、jQuery的DOM 操作

(一) jQuery的事件

jquery事件 說(shuō)明 ready( fn) 頁(yè)面加載完畢時(shí)發(fā)生的事件 blur( [ [data], fn ] ) 元素失去焦點(diǎn)時(shí)發(fā)生的事件 change([ [data], fn ] ] ) 元素的值發(fā)生改變時(shí)發(fā)生的事件 click( [ [data], fn ] ) 單擊鼠標(biāo)時(shí)發(fā)生的事件 dblclick( [ [data], fn ] ) 雙擊鼠標(biāo)時(shí)發(fā)生的事件 focus( [ [data],fn ] ] ) 元素獲得焦點(diǎn)是發(fā)生的事件 keydown( [ [data], fn ] ] ) 按下鍵盤(pán)時(shí)發(fā)生的事件 keyup( [ [data],fn ] ]) 松開(kāi)鍵盤(pán)時(shí)發(fā)生的事件 keypress( [ [data] , fn ] ） 按下并松開(kāi)鍵盤(pán)時(shí)發(fā)生的事件 mousedown([[[data],fn ]]) 按下鼠標(biāo)按鈕時(shí)發(fā)生的事件 mousemove([[[data],fn ]]) 鼠標(biāo)移動(dòng)時(shí)發(fā)生的事件 mouseout([[data],fn ]]) 鼠標(biāo)離開(kāi)某元素時(shí)發(fā)生的事件 mouseover([[data],fn ]]) 鼠標(biāo)懸浮到某元素上時(shí)發(fā)生的事件 mouseup([[data],fn ]) 松開(kāi)鼠標(biāo)按鈕時(shí)發(fā)生的事件 scroll([[data], fn ]) 頁(yè)面滾動(dòng)時(shí)發(fā)生的事件 select([[data],fn ]]) input元素的選取事件 submit([[data] , fn ]) 表單提交事件 unload([[data],fn ]]) 頁(yè)面卸載時(shí)發(fā)生的事件

(二) jQuery事件對(duì)象event/e屬性

type 獲取事件類型 target 獲取觸發(fā)事件的元素 result 獲取上一個(gè)事件處理函數(shù)返回的值 which 獲取在鼠標(biāo)單擊事件中獲取鼠標(biāo)的按鍵，值 pagex/y 獲取事件發(fā)生時(shí)相對(duì)于頁(yè)面的坐標(biāo) keycode 獲取在鍵盤(pán)事件中鍵盤(pán)對(duì)應(yīng)的鍵值 screenx/y 獲取事件發(fā)生時(shí)相對(duì)于屏幕的坐標(biāo) data 事件發(fā)生時(shí)傳遞的參數(shù)的信息都保持在該屬性中

事件對(duì)象：e<===>window.event 表示事件對(duì)象，其中包含事件發(fā)生時(shí)周圍的各種信息。

(三) 事件綁定

$("選擇器").click(function(){ })；常用

$("父選擇器").on("事件類型1 事件類型2。。。 "，"子元素" , function(){});常用動(dòng)態(tài) 綁定 如果想給某個(gè)父元素中的子元素綁定事件，但是 這個(gè)子元素 不存在不是我們自己寫(xiě)的，而是通過(guò)js代碼動(dòng)態(tài)添加的時(shí)候，此時(shí)綁定事件用。

八、DOM操作

一、創(chuàng)建節(jié)點(diǎn)：

創(chuàng)建節(jié)點(diǎn) $（“<標(biāo)簽名 屬性>內(nèi)容”） $（“<標(biāo)簽名>”）

二、添加節(jié)點(diǎn)

append() 在被選元素的（內(nèi)）結(jié)尾追加元素 （兒子） prepend() 在被選元素的開(kāi)頭插入內(nèi)容（兒子） after() 在被選元素之后插入內(nèi)容（加的是兄弟） before() 在被選元素之前插入內(nèi)容（加的是兄弟）

三、刪除節(jié)點(diǎn)

remove() 刪除被選元素（及其子元素） empty() 從被選元素刪除子元素/清空子元素

四、復(fù)制節(jié)點(diǎn)

clone(includeEvents) 生成被選元素的副本，包含子節(jié)點(diǎn)、文本和屬性。 includeEvents： 可選。布爾值。規(guī)定是否復(fù)制元素的所有事件處理。默認(rèn)地，副本中不包含事件處理器。

九、節(jié)點(diǎn)屬性方法

方法名 含義 parent() 返回被選元素的直接父元素。---》parentNode parents() 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 () children() 返回被選元素的所有直接子元素---》children find() 方法返回被選元素的后代元素，一路向下直到最后一個(gè)后代 contents() 返回被選元素的所有直接子元素（包含文本和注釋節(jié)點(diǎn)） next() 返回被選元素的下一個(gè)同胞元素。---->nextElementSibling nextAll() 返回被選元素的所有跟隨的同胞元素。 prev() 返回被選元素的上一個(gè)同胞元素---》previousElementSibling prevAll() 返回被選元素的所有上邊的同胞元素 siblings() 返回被選元素的所有同胞元素。 first() 返回被選元素的首個(gè)元素。 last() 返回被選元素的最后一個(gè)元素。 eq() 返回被選元素中帶有指定索引號(hào)的元素。

十、工具函數(shù):

方法 含義 $. type( ) 用來(lái)測(cè)試數(shù)據(jù)的類型 $.isNumeric() 用來(lái)測(cè)試數(shù)據(jù)是否為數(shù)字 $.trim() 用來(lái)去除字符串兩端的空格 $.parseJSON() 用來(lái)把字符串解析成JSON對(duì)象

對(duì)象和json

對(duì)象的數(shù)據(jù)格式：

鍵值對(duì) HashMap

var/let 對(duì)象名 = {

key1:value1,

key2:value2,

key3:value3,

...

}

//對(duì)象的取值：

//方法一：

//alert(person1.name)

//方法二：

alert(person1["name"]);

柚子快報(bào)邀請(qǐng)碼778899分享：jQuery 筆記

http://yzkb.51969.com/

相關(guān)閱讀