jQuery動畫__ jQuery ajax

1. jQuery 中带迟, $(document).ready()是什么意思音羞?

  • 當DOM準備就緒時,指定一個函數(shù)來執(zhí)行仓犬。
  • 與JavaScript提供了window.onload事件的區(qū)別
    window.onload是當頁面呈現(xiàn)時用來執(zhí)行這個事件黄选,直到所有的東西,如圖像已被完全接收前婶肩,此事件不會被觸發(fā)
    $(document).ready()只要DOM結構已完全加載時办陷,腳本就可以運行。傳遞處理函數(shù)給.ready()方法律歼,能保證DOM準備好后就執(zhí)行這個函數(shù)

2.$node.html()和$node.text()的區(qū)別?

  • $node.html()
    獲取集合中第一個匹配元素的HTML內容
    在一個 HTML 文檔中, 我們可以使用 .html() 方法來獲取任意一個元素的內容民镜。 如果選擇器匹配多個元素,那么只有第一個匹配元素的 HTML 內容會被獲取
    用法:
    .html()
    .html( htmlString )
    .html( function(index, oldhtml) )

  • $node.text()
    得到匹配元素集合中每個元素的文本內容結合险毁,包括他們的后代

  • 和 .html() 方法不同制圈, .text() 在XML 和 HTML 文檔中都能使用们童。.text() 方法返回一個字符串,包含所有匹配元素的合并文本

3.$.extend 的作用和用法?

  • 描述: 將兩個或更多對象的內容合并到第一個對象鲸鹦。

  • jQuery.extend( [deep ], target, object1 [, objectN ] )

deep
類型: [Boolean]
如果是true慧库,合并成為遞歸(又叫做深拷貝)。

target
類型: [Object]
對象擴展馋嗜。這將接收新的屬性齐板。

object1
類型: [Object]
一個對象,它包含額外的屬性合并到第一個參數(shù).

objectN
類型: [Object]
包含額外的屬性合并到第一個參數(shù)

當我們提供兩個或多個對象給$.extend()葛菇,對象的所有屬性都添加到目標對象(target參數(shù))甘磨。

如果只有一個參數(shù)提供給$.extend(),這意味著目標參數(shù)被省略眯停。在這種情況下济舆,jQuery對象本身被默認為目標對象。這樣莺债,我們可以在jQuery的命名空間下添加新的功能滋觉。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時是很有用的。

請記住齐邦,目標對象(第一個參數(shù))將被修改椎侠,并且將通過$.extend()返回。然而侄旬,如果我們想保留原對象,我們可以通過傳遞一個空對象作為目標對象

var object = $.extend({}, object1, object2);```
`在默認情況下煌妈,通過$.extend()合并操作不是遞歸的;`如果第一個對象的屬性本身是一個對象或數(shù)組儡羔,那么它將完全用第二個對象相同的key重寫一個屬性。這些值不會被合并璧诵。`如果將 true 作為該函數(shù)的第一個參數(shù)汰蜘,那么會在對象上進行遞歸的合并。`
`警告:不支持第一個參數(shù)傳遞 false `


## 4.jQuery 的鏈式調用是什么之宿?
- jQuery高效的原因之一就是其鏈式調用族操。
`鏈式調用原理:`就是通過對象上每個方法最后返回本對象__this。
可以調用對此對象的其他jQuery方法比被,實現(xiàn)連續(xù)調用多個方法

- `鏈式調用的好處`
節(jié)省代碼量色难,代碼看起來更清晰優(yōu)雅;
可以提高代碼的效率等缀。
因為Javascript是無阻塞語言枷莉,通過事件來驅動,異步來完成一些本需要阻塞進程的操作尺迂。異步編程笤妙,編寫代碼時也是分離的冒掌,這就使代碼可讀性變差。
而鏈式操作蹲盘,代碼流程清晰股毫,改善了異步體驗。

例如:
$("#Test").addClass('style').find("div").eq(0).fadeOut(200);



## 5.jQuery 中 data 函數(shù)的作用?
- **描述: **存儲任意數(shù)據(jù)到指定的元素,返回設置的值召衔。
- jQuery.data() 方法允許我們在DOM元素上附加任意類型的數(shù)據(jù),避免了循環(huán)引用的內存泄漏風險铃诬。如果 DOM 元素是通過 jQuery 方法刪除的或者當用戶離開頁面時,jQuery 同時也會移除添加在上面的數(shù)據(jù)薄嫡。我們可以在一個元素上設置不同的值氧急,并獲取這些值:

jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');


## 6.寫出以下功能對應的 jQuery 方法:

給元素 $node 添加 class active:
$node.addClass('active')
給元素 $noed 刪除 class active:
$node.removeClass('actice')


展示元素$node:
$node.show()
隱藏元素$node:
$node.hide()

- 獲取元素$node 的 屬性: id、src毫深、title吩坝, 修改以上屬性

jQuery.attr():獲取匹配的元素集合中的第一個元素的屬性的值 或 設置每一個匹配元素的一個或多個屬性。

$node.attr('id')//獲取
$node.attr('id','value');//修改并賦值為value
$node.attr('src');//獲取
$node.attr('src','value');//修改
$node.attr('title');//獲取
$node.attr('title','value');//修改


- 給$node 添加自定義屬性data-src
`$node.data('src','value')`

- 在$ct 內部最開頭添加元素$node
`$ct.prepend('$node')`
- .prepend()
方法將指定元素插入到匹配元素里面作為它的第一個子元素
- .prepend()和[.prependTo()]實現(xiàn)同樣的功能哑蔫,主要的不同是語法钉寝,插入的內容和目標的位置不同。 

- 在$ct 內部最末尾添加元素$node
'$ct.append('$node')'
- 如果要作為最后一個子元素插入用[.append()]

- 刪除$node
`$node.remove()`

- 把$ct里內容清空
`$ct.empty()`

- 在$ct 里設置 html <div class="btn"></div>
'$ct.html(' html <div class="btn"></div>')'

- 獲取闸迷、設置$node 的寬度嵌纲、高度(分別不包括內邊距、包括內邊距腥沽、包括邊框逮走、包括外邊距)

$node.width();//僅包括內容
$node.height();//僅包括內容
$node.width(10px);//僅包括內容設置為10px

$node.innerWidth();//包括內容和內邊距寬度
$node.innerHeight();//包括內容和內邊距高度
$node.innerWidth(10px);//設置

$node.outerWidth();//包括內容,內邊距,邊框寬度
$node.outerHeight();//包括內容,內邊距,邊框高度
$node.outerWidth(10px);//設置

$node.outerHeight(true);//包括內容,內邊距,邊框,外邊距高度
$node.outerWidth(true);//包括內容,內邊距,邊框,外邊距寬度


- 獲取窗口滾動條垂直滾動距離
`$(window).scrollTop()`

- 獲取$node 到根節(jié)點水平、垂直偏移距離
`$node.offset().left;//水平距離`
`$node.offset().top;//垂直距離`
offset(): 在匹配的元素集合中今阳,獲取的第一個元素的當前坐標师溅,坐標相對于文檔。

- 修改$node 的樣式盾舌,字體顏色設置紅色墓臭,字體大小設置14px

- ```
$node.css({
'color':'red',
 'font-size': '14px'
})
  • 遍歷節(jié)點,把每個節(jié)點里面的文本內容重復一遍
$.each(function(){
  console.log($(this).text())
})
  • 從$ct 里查找 class 為 .item
    的子元素
    $ct.find('.item')

  • 獲取$ct 里面的所有孩子
    $ct.children()

  • 對于$node妖谴,向上找到 class 為'.ct'的父親窿锉,在從該父親找到'.panel'的孩子
    $node.parents('.ct').children('.panel')

  • 獲取選擇元素的數(shù)量
    $node.length

  • 獲取當前元素在兄弟中的排行
    $node.index()

7. 應用

用jQuery實現(xiàn)以下操作當點擊$btn 時,讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色 當窗口滾動時膝舅,獲取垂直滾動距離 當鼠標放置到$div 上嗡载,把$div 背景色改為紅色,移出鼠標背景色變?yōu)榘咨?當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色仍稀,當輸入框內容改變時把輸入框里的文字小寫變?yōu)榇髮懕谴斴斎肟蚴ソ裹c時去掉邊框藍色,控制臺展示輸入框里的文字 當選擇 select 后琳轿,獲取用戶選擇的內容

預覽
代碼

8.用 jQuery ajax 實現(xiàn)如下效果判沟。當點擊加載更多會加載數(shù)據(jù)展示到頁面.

效果預覽:


加載更多

html
router.js

9.實現(xiàn)一個天氣預報頁面耿芹,前端展示自由發(fā)揮,數(shù)據(jù)接口: http://api.jirengu.com/weather.php

天氣api

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末挪哄,一起剝皮案震驚了整個濱河市吧秕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌迹炼,老刑警劉巖砸彬,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異斯入,居然都是意外死亡砂碉,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門刻两,熙熙樓的掌柜王于貴愁眉苦臉地迎上來增蹭,“玉大人,你說我怎么就攤上這事磅摹∽搪酰” “怎么了?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵户誓,是天一觀的道長饼灿。 經(jīng)常有香客問我,道長帝美,這世上最難降的妖魔是什么碍彭? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮悼潭,結果婚禮上庇忌,老公的妹妹穿的比我還像新娘。我一直安慰自己女责,他們只是感情好漆枚,可當我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布创译。 她就那樣靜靜地躺著抵知,像睡著了一般。 火紅的嫁衣襯著肌膚如雪软族。 梳的紋絲不亂的頭發(fā)上刷喜,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天,我揣著相機與錄音立砸,去河邊找鬼掖疮。 笑死,一個胖子當著我的面吹牛颗祝,可吹牛的內容都是我干的浊闪。 我是一名探鬼主播恼布,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼搁宾!你這毒婦竟也來了折汞?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤盖腿,失蹤者是張志新(化名)和其女友劉穎爽待,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體翩腐,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡鸟款,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了茂卦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片何什。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖疙筹,靈堂內的尸體忽然破棺而出富俄,到底是詐尸還是另有隱情,我是刑警寧澤而咆,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布霍比,位于F島的核電站,受9級特大地震影響暴备,放射性物質發(fā)生泄漏悠瞬。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一涯捻、第九天 我趴在偏房一處隱蔽的房頂上張望浅妆。 院中可真熱鬧,春花似錦障癌、人聲如沸凌外。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽康辑。三九已至,卻和暖如春轿亮,著一層夾襖步出監(jiān)牢的瞬間疮薇,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工我注, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留按咒,地道東北人。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓但骨,卻偏偏與公主長得像励七,于是被迫代替她去往敵國和親智袭。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內容