jQuery總結(jié)筆記(二)

一、動(dòng)畫(huà)

show:顯示隱藏的元素(無(wú)動(dòng)畫(huà))

hide :? ? 隱藏顯示的元素? (無(wú)動(dòng)畫(huà))

fadeIn:通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡入效果,并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)剩晴。

fadeOut:通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果竖独,并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)草讶。

fadeTo:把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度昔园,并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。

slideDown:通過(guò)高度變化(向下增大)來(lái)動(dòng)態(tài)地顯示所有匹配的元素阿浓,在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)他嚷。

slideUp:通過(guò)高度變化(向上減小)來(lái)動(dòng)態(tài)地隱藏所有匹配的元素芭毙,在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)筋蓖。

slideToggle:通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性,并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)退敦。

animate:用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)粘咖。

stop:停止所有在指定元素上正在運(yùn)行的動(dòng)畫(huà)。

delay:設(shè)置一個(gè)延時(shí)來(lái)推遲執(zhí)行隊(duì)列中之后的項(xiàng)目侈百。

finish:停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)瓮下,刪除所有排隊(duì)的動(dòng)畫(huà),并完成匹配元素所有的動(dòng)畫(huà)钝域。

二唱捣、DOM操作

.css()、addClass(“className”)网梢、removeClass()、toggleClass

?.attr()赂毯、removeAttr()战虏、.val()、.html(“<p></p>”)党涕、

text()??

node.append(“我是追加的內(nèi)容</p>”)/appendTo()? 在節(jié)點(diǎn)內(nèi)部后面追加元素/將元素追加到節(jié)點(diǎn)內(nèi)部后面

prePend()/prependTo()? ? ?在節(jié)點(diǎn)內(nèi)部前面追加元素/將元素追加到節(jié)點(diǎn)內(nèi)部前面

before(node)/after(node)? 在節(jié)點(diǎn)前/后面添加兄弟節(jié)點(diǎn)

node.insertBefore()/node.insertAfter()? 將節(jié)點(diǎn)作為兄弟節(jié)點(diǎn)添加到節(jié)點(diǎn)前/后面

node.remove();? //刪除指定節(jié)點(diǎn)及所有子節(jié)點(diǎn)? 推薦使用node.html("");? 方式清空

node.empty();? ? ?//刪除節(jié)點(diǎn)的所有子節(jié)點(diǎn)

node.clone(booolean);? //復(fù)制節(jié)點(diǎn)? 參數(shù)是否深層克路掣小(克隆綁定的事件)

node1.wrap(node2);? //用node2包裹node1

node1.replaceWith(node2);? //把node1節(jié)點(diǎn)換成node2節(jié)點(diǎn)

三、元素操作

?3.1 高度和寬度

$(“div”).height();?????????? //高度

$(“div”).width();???????????????? //寬度

.height()方法和.css(“height”)的區(qū)別:

返回值不同膛堤,.height()方法返回的是數(shù)字類型(20)手趣,

.css(“height”)返回的是字符串類型(20px),因此.height()方法常用在參與數(shù)學(xué)計(jì)算的時(shí)候

3.2 坐標(biāo)值

$(“div”).offset();??????????? //獲取或設(shè)置坐標(biāo)值? ?設(shè)置值后變成相對(duì)定位

$(“div”).position();?????? //獲取坐標(biāo)值? ? ? ? 子絕父相只能讀取不能設(shè)置

3.3 滾動(dòng)條

$(“div”).scrollTop();?????????? //相對(duì)于滾動(dòng)條頂部的偏移

$(“div”).scrolllLeft();???? //相對(duì)于滾動(dòng)條左部的偏移

四、jQuery事件

4.1 綁定

// 綁定事件

bind:$node.bind(“click”,function(){});

//綁定兩個(gè)事件

bind:$node.bind({“click”:function(){},"onmouseenter",function(){}});

// 觸發(fā)一次

one : $node.one(“click”,function(){});

//綁定多個(gè)子元素

delegate : $node.delegate(“p”,”click”,function(){});

//強(qiáng)烈推薦

on: $node.on(“click”,”p”,function(){});

4.2 解綁

unbind

undelegate

off

4.3 觸發(fā)

click? : $(“div”).click();

trigger:觸發(fā)事件绿渣,并且觸發(fā)瀏覽器默認(rèn)行為

triggerHandler:不觸發(fā)瀏覽器默認(rèn)行為

4.4 事件對(duì)象介紹

event.stopPropagation()???? ????? //阻止事件冒泡

event.preventDefault();?????????? //阻止默認(rèn)行為

五朝群、jQuery其他補(bǔ)充

5.1 隱式迭代

默認(rèn)情況下,會(huì)自動(dòng)迭代執(zhí)行jQuery選擇出來(lái)的所有dom元素的操作中符。

如果獲取的是多元素的值姜胖,默認(rèn)返回的是第一個(gè)元素的值。

5.2 map函數(shù)

$.map(arry,function(object,index){}) *返回一個(gè)新的數(shù)組*

var arry = $("li").map(function(index, element){}) *注意參數(shù)的順序是反的*

5.3 each函數(shù)

$.each(array, function(index, object){})

$("li").each(function(index, element){} )? //參數(shù)的順序是一致的淀散。

5.4 全局對(duì)象污染沖突

var newJq = $.noConflict();//讓jQuery釋放 $, 讓$ 回歸到j(luò)Query之前的對(duì)象定義上去右莱。

5.5 jQuery.data()? 數(shù)據(jù)緩存

$(".nav").data("name", 123);//設(shè)置值。

var t? = $(".nav").data("name"); //獲取值

t.name = "18";//對(duì)象的更改档插,會(huì)直接同步到 元素的jQuery對(duì)象上去慢蜓。

5.6 jQuery插件

全局jQuery函數(shù)擴(kuò)展方法

$.log = function() {}

jQuery對(duì)象擴(kuò)展方法

$.fn.log = function() {}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市郭膛,隨后出現(xiàn)的幾起案子晨抡,更是在濱河造成了極大的恐慌,老刑警劉巖饲鄙,帶你破解...
    沈念sama閱讀 212,454評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凄诞,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡忍级,警方通過(guò)查閱死者的電腦和手機(jī)帆谍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)轴咱,“玉大人汛蝙,你說(shuō)我怎么就攤上這事∑臃危” “怎么了窖剑?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,921評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)戈稿。 經(jīng)常有香客問(wèn)我西土,道長(zhǎng),這世上最難降的妖魔是什么鞍盗? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,648評(píng)論 1 284
  • 正文 為了忘掉前任需了,我火速辦了婚禮,結(jié)果婚禮上般甲,老公的妹妹穿的比我還像新娘肋乍。我一直安慰自己,他們只是感情好敷存,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,770評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布墓造。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪觅闽。 梳的紋絲不亂的頭發(fā)上帝雇,一...
    開(kāi)封第一講書(shū)人閱讀 49,950評(píng)論 1 291
  • 那天,我揣著相機(jī)與錄音谱煤,去河邊找鬼摊求。 笑死,一個(gè)胖子當(dāng)著我的面吹牛刘离,可吹牛的內(nèi)容都是我干的室叉。 我是一名探鬼主播,決...
    沈念sama閱讀 39,090評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼硫惕,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼茧痕!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起恼除,我...
    開(kāi)封第一講書(shū)人閱讀 37,817評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤踪旷,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后豁辉,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體令野,經(jīng)...
    沈念sama閱讀 44,275評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,592評(píng)論 2 327
  • 正文 我和宋清朗相戀三年徽级,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了气破。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,724評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡餐抢,死狀恐怖现使,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情旷痕,我是刑警寧澤碳锈,帶...
    沈念sama閱讀 34,409評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站欺抗,受9級(jí)特大地震影響售碳,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜绞呈,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,052評(píng)論 3 316
  • 文/蒙蒙 一团滥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧报强,春花似錦、人聲如沸拱燃。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,815評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至召嘶,卻和暖如春父晶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背弄跌。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,043評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工甲喝, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人铛只。 一個(gè)月前我還...
    沈念sama閱讀 46,503評(píng)論 2 361
  • 正文 我出身青樓埠胖,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親淳玩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子直撤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,627評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,146評(píng)論 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)蜕着。 注意:講述HT...
    kismetajun閱讀 27,450評(píng)論 1 45
  • //------------------------- 第一章 認(rèn)識(shí)JQuery ----------------...
    米塔塔閱讀 707評(píng)論 0 9
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式谋竖。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,330評(píng)論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式承匣。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性蓖乘。 1....
    LaBaby_閱讀 1,167評(píng)論 0 1