JQuery:在項(xiàng)目中總結(jié)零散知識(shí)點(diǎn)(二)

1. animate() 方法

  • animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫卿樱。
    該方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)僚害。CSS屬性值是逐漸改變的,這樣就可以創(chuàng)建動(dòng)畫效果繁调。
    只有數(shù)字值可創(chuàng)建動(dòng)畫(比如 "margin:30px")萨蚕。字符串值無(wú)法創(chuàng)建動(dòng)畫(比如 "background-color:red")。

注:使用 "+=" 或 "-=" 來(lái)創(chuàng)建相對(duì)動(dòng)畫(relative animations)蹄胰。

(1)$(*selector*).animate(styles,speed,easing,callback)

參數(shù) 描述
styles 必需岳遥。規(guī)定產(chǎn)生動(dòng)畫效果的 CSS 樣式和值。
可能的 CSS 樣式值:
- left / top / borderWidth / margin / fontSize / outlineWidth.....and so on
:CSS 樣式使用 DOM 名稱(比如 "fontSize")來(lái)設(shè)置裕寨,而非 CSS 名稱(比如 "font-size")浩蓉。
speed 可選。規(guī)定動(dòng)畫的速度宾袜。默認(rèn)是 "normal"捻艳。
可能的值:
- 毫秒 (比如 1500)
- "slow"
- "normal"
- "fast"
easing 可選。規(guī)定在不同的動(dòng)畫點(diǎn)中設(shè)置動(dòng)畫速度的 easing 函數(shù)庆猫。
內(nèi)置的 easing 函數(shù):
- swing
- linear
擴(kuò)展插件中提供更多 easing 函數(shù)认轨。
callback 可選。animate 函數(shù)執(zhí)行完之后月培,要執(zhí)行的函數(shù)嘁字。

(2)$(*selector*).animate(styles,options)

參數(shù) 描述
styles 必需。規(guī)定產(chǎn)生動(dòng)畫效果的 CSS 樣式和值(同上)节视。
options 可選拳锚。規(guī)定動(dòng)畫的額外選項(xiàng)。
可能的值:
- speed - 設(shè)置動(dòng)畫的速度
- easing - 規(guī)定要使用的 easing 函數(shù)
- callback - 規(guī)定動(dòng)畫完成之后要執(zhí)行的函數(shù)
- step - 規(guī)定動(dòng)畫的每一步完成之后要執(zhí)行的函數(shù)
- queue - 布爾值寻行。指示是否在效果隊(duì)列中放置動(dòng)畫。如果為 false匾荆,則動(dòng)畫將立即開始
- specialEasing - 來(lái)自 styles 參數(shù)的一個(gè)或多個(gè) CSS 屬性的映射拌蜘,以及它們的對(duì)應(yīng) easing 函數(shù)

animate()函數(shù)比css中的animate和transition都要好使T_T
一入jQuery深似海!牙丽!


2. click() 方法

  • 當(dāng)單擊元素時(shí)简卧,發(fā)生 click 事件。
    click() 方法觸發(fā) click 事件烤芦,或規(guī)定當(dāng)發(fā)生 click 事件時(shí)運(yùn)行的函數(shù)举娩。

語(yǔ)法:

jQueryObject.click( [ [ data ,]  handler ] )
  • 如果指定了至少一個(gè)參數(shù),則表示綁定click事件的處理函數(shù);沒(méi)有指定任何參數(shù)铜涉,則表示觸發(fā)所有選擇器選擇到的元素上的click事件智玻。
參數(shù) 描述
data 可選/任意類型觸發(fā)事件時(shí),需要通過(guò)event.data傳遞給事件處理函數(shù)的任意數(shù)據(jù)芙代。
handler 可選/Function類型指定的事件處理函數(shù)吊奢。

(1) jQuery 1.4.3新增支持:click()支持data參數(shù)。
(2) 參數(shù)handler中的this指向當(dāng)前DOM元素纹烹。click()還會(huì)為handler傳入一個(gè)參數(shù):表示當(dāng)前事件的Event對(duì)象页滚。
(3) 如果函數(shù)handler的返回值為false,則表示阻止元素的默認(rèn)事件行為铺呵,并停止事件在DOM樹中冒泡裹驰。例如,<a>鏈接的click事件的處理函數(shù)返回false片挂,可以阻止鏈接的默認(rèn)URL跳轉(zhuǎn)行為幻林。
(4) click()函數(shù)的返回值為jQuery類型,返回當(dāng)前jQuery對(duì)象本身宴卖。
(5) click事件綁定處理函數(shù)可以綁定多個(gè)滋将,觸發(fā)時(shí)按照綁定順序依次執(zhí)行。
(6) 要?jiǎng)h除通過(guò)click()綁定的事件症昏,請(qǐng)使用unbind()函數(shù)随闽。

一個(gè)data參數(shù)的示例:

$(document).ready(function(){
    $("p").click("hi",function(event){
       alert("段落被點(diǎn)擊了。"+event.data);//結(jié)果為alert了“段落被點(diǎn)擊了肝谭。hi”
    });
});

var bottle = { id: 'aa', height:'10.5' };
$(":button").click( user, function(event){
    alert( event.data.id ); 
} );

一個(gè)有趣又有點(diǎn)奇怪的現(xiàn)象:
當(dāng)把上述例子改為:

var show=function(){
    alert("段落被點(diǎn)擊了掘宪。");
}
//或者
//function show(){
//    alert("段落被點(diǎn)擊了。");
//}
$("p").click(show());

會(huì)發(fā)現(xiàn)攘烛。魏滚。。在頁(yè)面刷新出來(lái)之后show()函數(shù)立刻就執(zhí)行了坟漱,并且之后點(diǎn)擊段落也不再有反應(yīng)鼠次。
但是!如果改成下面這樣:

var show=function(){
    alert("段落被點(diǎn)擊了芋齿。");
}
$("p").click(function(){show();});

就又能正確運(yùn)行了P瓤堋!
十分神奇觅捆。目前我的想法是之所以出現(xiàn)這個(gè)現(xiàn)象是因?yàn)樯庖郏琧lick函數(shù)要求的是function類型的參數(shù),而show屬于object型栅炒。(掂摔?术羔??我也不知道對(duì)不對(duì)乙漓,暫時(shí)是這樣理解的)


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末级历,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子簇秒,更是在濱河造成了極大的恐慌鱼喉,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,692評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件趋观,死亡現(xiàn)場(chǎng)離奇詭異扛禽,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)皱坛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門编曼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人剩辟,你說(shuō)我怎么就攤上這事掐场。” “怎么了贩猎?”我有些...
    開封第一講書人閱讀 162,995評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵熊户,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我吭服,道長(zhǎng)嚷堡,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,223評(píng)論 1 292
  • 正文 為了忘掉前任艇棕,我火速辦了婚禮蝌戒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘沼琉。我一直安慰自己北苟,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,245評(píng)論 6 388
  • 文/花漫 我一把揭開白布打瘪。 她就那樣靜靜地躺著友鼻,像睡著了一般。 火紅的嫁衣襯著肌膚如雪闺骚。 梳的紋絲不亂的頭發(fā)上桃移,一...
    開封第一講書人閱讀 51,208評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音葛碧,去河邊找鬼。 笑死过吻,一個(gè)胖子當(dāng)著我的面吹牛进泼,可吹牛的內(nèi)容都是我干的蔗衡。 我是一名探鬼主播,決...
    沈念sama閱讀 40,091評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼乳绕,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼绞惦!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起洋措,我...
    開封第一講書人閱讀 38,929評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤济蝉,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后菠发,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體王滤,經(jīng)...
    沈念sama閱讀 45,346評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,570評(píng)論 2 333
  • 正文 我和宋清朗相戀三年滓鸠,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了雁乡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,739評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡糜俗,死狀恐怖踱稍,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情悠抹,我是刑警寧澤珠月,帶...
    沈念sama閱讀 35,437評(píng)論 5 344
  • 正文 年R本政府宣布,位于F島的核電站楔敌,受9級(jí)特大地震影響啤挎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜梁丘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,037評(píng)論 3 326
  • 文/蒙蒙 一侵浸、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧氛谜,春花似錦掏觉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至杨何,卻和暖如春酱塔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背危虱。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工羊娃, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人埃跷。 一個(gè)月前我還...
    沈念sama閱讀 47,760評(píng)論 2 369
  • 正文 我出身青樓蕊玷,卻偏偏與公主長(zhǎng)得像邮利,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子垃帅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,647評(píng)論 2 354

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

  • 通過(guò)jQuery延届,您可以選取(查詢贸诚,query)HTML元素方庭,并對(duì)它們執(zhí)行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 656評(píng)論 0 3
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式酱固。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性械念。 1....
    LaBaby_閱讀 1,171評(píng)論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性媒怯。 1....
    LaBaby_閱讀 1,335評(píng)論 0 2
  • 為甚嚒要學(xué)習(xí)jQuery订讼? 因?yàn)镴S中有很多痛點(diǎn): window.onload事件只能出現(xiàn)一次,如果出現(xiàn)多次扇苞,后面...
    magic_pill閱讀 816評(píng)論 0 13
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    程序員poetry閱讀 16,643評(píng)論 18 503