《鋒利的JQuery》讀書筆記

DOM操作

遍歷節(jié)點(diǎn)

• children()方法用于取得匹配元素的子元素集合。注意，該方法只考慮子元素而不考慮其他后代元素。可以直接調(diào)用children().length獲取子節(jié)點(diǎn)的數(shù)目

• next()方法用于取得匹配元素后面緊鄰的同輩元素；

• prev()方法用于取得匹配元素前面緊鄰的同輩元素；

• siblings()方法用于取得匹配元素前后所有的同輩元素；

• closest()方法用于取得最近的匹配元素，逐級(jí)向上查找匹配選擇器的元素，只返回一個(gè)元素，如果什么都沒(méi)找到則返回一個(gè)空的jQuery對(duì)象。

parent()、parents()、closest()方法對(duì)比

• parent()方法用于獲取集合中每個(gè)匹配的父級(jí)元素，只返回一個(gè)元素節(jié)點(diǎn)
• parents()方法用于獲取集合中每個(gè)匹配的祖先元素，返回父級(jí)和祖先節(jié)點(diǎn)
• closest()方法是從元素本身開始，逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素。

CSS-DOM操作

可以直接利用css()方法來(lái)獲取元素的樣式屬性，而不管這些屬性是外部CSS導(dǎo)入，還是直接拼接在HTML元素里（內(nèi)聯(lián)）的。
也可以直接利用css()方法來(lái)設(shè)置某個(gè)元素的單個(gè)樣式或者多個(gè)樣式屬性。

• 如果值是數(shù)字，將會(huì)被自動(dòng)轉(zhuǎn)化為像素值。

  $(“p”).css({“fontSize”:”30px”,”backgroundColor”:”#888888”})

• 在css()方法中，如果屬性值中帶有“-”符號(hào)，例如font-size和background-color屬性，如果在設(shè)置這些屬性的值的時(shí)候不帶引號(hào)，那么就要用駝峰式寫法。

如果帶上了引號(hào)，既可以寫成 ”fint-size”，也可以寫成 ”fontSize”。

獲取元素的位置信息

元素定位有以下幾種常見的方法：

• offenset()方法

他的作用是獲取元素在當(dāng)前視窗的相對(duì)偏移，其中返回的對(duì)象包含兩個(gè)屬性，即top和left

var offset = $("p").offset(); //獲取offset值 var left = offset.left; var right = offset.right;

position()方法

獲取元素相對(duì)于最近一個(gè)position樣式屬性設(shè)置為 relative 或者absolute祖父節(jié)點(diǎn)的相對(duì)偏移,返回的對(duì)象也包含兩個(gè)屬性,top和left

var position = $("p").position(); //獲取offset值 var left = position.left; var right = position.right;

scrollTop()方法和scrollLeft()方法

兩個(gè)方法分別獲取元素的滾動(dòng)條距頂端的距離和距離左側(cè)的距離

var $p = $("p"); var scrollTop = $p.scrollTop(); //獲取元素的滾動(dòng)條距離頂端的距離 var scrollLeft = $p.scrollLeft(); //獲取元素的滾動(dòng)條距離左側(cè)的距離

這兩個(gè)方法可以指定一個(gè)參數(shù)，控制元素的滾動(dòng)條滾動(dòng)到指定位置。

$("textarea").scrollTop(300); $("textarea").scrollLeft(300);

JQuery事件和動(dòng)畫

DOM加載

當(dāng)頁(yè)面加載完成之后，瀏覽器會(huì)通過(guò)JavaScript為DOM元素添加事件。在常規(guī)的JavaScript代碼中使用window.onload()方法，在JQuery中使用的是$(document).ready()方法。

• window.onload()方法是在網(wǎng)頁(yè)中所有的元素（包括所有的關(guān)聯(lián)文件，例如圖片和js文件）完全加載到瀏覽器之后才執(zhí)行。
• $(document).ready()方法在DOM完全就緒的時(shí)候就可以加載。所以作為補(bǔ)充，JQuery還有一個(gè)關(guān)于元素加載的方法即load()方法

事件綁定

在文檔加載完成以后如果需要對(duì)一個(gè)元素綁定事件可以使用bind()方法實(shí)現(xiàn)。bind()方法的調(diào)用格式為：

bind(type[,data],fn);

bind()方法有三個(gè)參數(shù)，解釋說(shuō)明如下：

第一個(gè)參數(shù)是事件類型,參數(shù)類型包括：

第二個(gè)參數(shù)是可選參數(shù)，作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象。

第三個(gè)參數(shù)是用來(lái)綁定處理的函數(shù)。

JQuery合成事件

JQuery有兩個(gè)合成事件——hover()方法和toggle()方法。這兩個(gè)方法都是JQuery的自定義方法。

1、hover()方法 hover()方法的語(yǔ)法結(jié)構(gòu)為：

hover(enter,leave);

2、toggle()方法

toggle(function1,function2.......functionN);//當(dāng)鼠標(biāo)點(diǎn)擊元素的時(shí)候每點(diǎn)擊一次就會(huì)觸發(fā)一個(gè)函數(shù)，依次進(jìn)行。

Jquery 事件 及事件對(duì)象

事件捕獲和事件冒泡剛好是相反的兩個(gè)過(guò)程，事件捕獲是從最頂端向下觸發(fā)。JQuery不支持事件捕獲，并不是所有的瀏覽器都行支持事件捕獲，所以需要事件捕獲的時(shí)候可以編寫原生JavaScript程序來(lái)實(shí)現(xiàn)。

事件對(duì)象的屬性:

• event.type 事件類型
• event.preventDefault
• event.stopPropagation
• event.target ： 獲取觸發(fā)事件的元素
• event.relatedTarget：獲取發(fā)生mouseover和mouseout事件的相關(guān)屬元素
• event.pageX和event.pageY：該方法是用來(lái)獲取光標(biāo)相對(duì)于頁(yè)面的x和y坐標(biāo)
• event.which ：該方法是鼠標(biāo)單擊事件中獲取到鼠標(biāo)的左、中、右鍵；在鍵盤事件中獲取鍵盤按鍵
• event.metaKey：改方法是用于獲取鍵盤的鍵

自定義動(dòng)畫法animate()

animate(params,speed,callback);參數(shù)說(shuō)明： (1)params:一個(gè)包含樣式屬性以及值得映射，比如：{property1:"value1",property2:"value2",.....} (2)speed:速度參數(shù)，可選 (3)callback:在動(dòng)畫完成之后調(diào)用的函數(shù)，是可選參數(shù)

* 停止元素的動(dòng)畫
當(dāng)需要停止匹配元素正在發(fā)生的動(dòng)畫的時(shí)候，可以使用stop()方法實(shí)現(xiàn)。

stop()方法的語(yǔ)法結(jié)構(gòu)如下：stop([clearQueue],[gotoEnd]);參數(shù)clearQueue和gotoEnd都是可選參數(shù)，都是Boolean值。clearQueue代表是是否清空未執(zhí)行完的動(dòng)畫隊(duì)列，gotoEnd代表是否將正在執(zhí)行的動(dòng)畫直接跳轉(zhuǎn)到末尾狀態(tài)。

* 判斷元素是否處于動(dòng)畫狀態(tài)

alert($("div").is(":animated"));

* 延遲動(dòng)畫:實(shí)現(xiàn)動(dòng)畫的延遲效果使用delay()方法就可以實(shí)現(xiàn)

模擬操作

1.常用模擬方法trigger(),triggerHandler()方法

2.觸發(fā)自定義事件

$('#btn').bind("myClick", function(){$('#test').append("<p>我的自定義事件.</p>");});$("#btn").click("myClick");

3.傳遞數(shù)據(jù)

trigger(type,[data])方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是要觸發(fā)的函數(shù)類型，第二個(gè)參數(shù)是要傳遞給事件處理函數(shù)的附加數(shù)據(jù)，以數(shù)組形式傳遞。通常可以傳遞一個(gè)參數(shù)給回調(diào)函數(shù)來(lái)區(qū)別這次事件是代碼觸發(fā)還是用戶觸發(fā)。

$('#btn').bind("myClick", function(event, message1, message2){$('#test').append( "<p>"+message1 + message2 +"</p>");}); ('#btn').trigger("myClick",["我的自定義","事件"]);

JQuery中一些不熟悉的方法

• is(xxx)：根據(jù)選擇器、DOM元素或 jQuery 對(duì)象來(lái)檢測(cè)匹配元素集合，如果其中至少有一個(gè)元素符合這個(gè)給定的表達(dá)式就返回true。

• end(xxx)：回到最近的一個(gè)”破壞性”操作之前。即，將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。

• index(xxx)

總結(jié)

以上是生活随笔為你收集整理的《锋利的JQuery》读书笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。