進(jìn)階15:jQuery動(dòng)畫和ajax

題目1: jQuery 中种呐, $(document).ready()是什么意思?

當(dāng)dom完全加載(例如html被完全解析dom樹構(gòu)建完成時(shí))若债,jquery允許你執(zhí)行代碼,使用此函數(shù)可以做到表現(xiàn)與邏輯分離减江,并且所有的瀏覽器都支持,可以放到頁(yè)面的任何位置捻爷。

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

$node.html():獲取元素內(nèi)html標(biāo)簽加文本內(nèi)容您市。
$node.html(string):設(shè)置該元素內(nèi)的html
$node.text():只獲取元素內(nèi)的文本內(nèi)容。
$node.text(string):設(shè)置該元素的文本內(nèi)容

題目3: $.extend 的作用和用法?

  • 用法一
    目標(biāo)對(duì)象(第一個(gè)參數(shù))將被修改役衡,并且將通過(guò)$.extend()返回。然而薪棒,如果我們想保留原對(duì)象手蝎,我們可以通過(guò)傳遞一個(gè)空對(duì)象作為目標(biāo)對(duì)象:
image.png

如圖當(dāng)傳入?yún)?shù)為一個(gè)或這多個(gè)對(duì)象時(shí)這個(gè)方法是把后面的對(duì)象向第一個(gè)對(duì)象(obj1)擴(kuò)展;后面的對(duì)象與第一個(gè)有重復(fù)的則覆蓋沒有的則添加到第一個(gè)對(duì)象俐芯;第一個(gè)的對(duì)象可以是一個(gè)空對(duì)象({})

  • 用法二(深淺拷貝)
    在默認(rèn)情況下棵介,通過(guò)$.extend()合并操作不是遞歸的;
    如果第一個(gè)對(duì)象的屬性本身是一個(gè)對(duì)象或數(shù)組,那么它將完全用第二個(gè)對(duì)象相同的key重寫一個(gè)屬性吧史。這些值不會(huì)被合并邮辽。如果將true作為該函數(shù)的第一個(gè)參數(shù),那么會(huì)在對(duì)象上進(jìn)行遞歸的合并贸营。
image.png
image.png

題目4: jQuery 的鏈?zhǔn)秸{(diào)用是什么吨述?

每個(gè)jQuery的方法都會(huì)返回(return)一個(gè)jQuery對(duì)象,使得一個(gè)對(duì)象可以多次調(diào)用方法

題目5: jQuery 中 data 函數(shù)的作用

在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值钞脂。

image.png

詳情可參考:http://www.jquery123.com/data/

題目6:寫出以下功能對(duì)應(yīng)的 jQuery 方法

給元素 $node 添加 class active揣云,給元素 $noed 刪除 class active

  • 給元素 $node 添加 class active,給元素 $noed 刪除 class active
    $node.addClass()
    $node.removeClass()
  • 展示元素$node, 隱藏元素$node
    $node.show()
    $node.hide()
  • 獲取元素$node 的 屬性: id冰啃、src邓夕、title, 修改以上屬性
    $node.attr("id",str)
    $node.attr("src",str)
    $node.attr("title",str)
  • 給$node 添加自定義屬性data-src
    $node.data("src",str)
  • 在$ct 內(nèi)部最開頭添加元素$node
    $ct.prepend($node)
  • 在$ct 內(nèi)部最末尾添加元素$node
    $ct.append($node)
  • 刪除$node
    $node.remove()
  • 把$ct里內(nèi)容清空
    $ct.empty()
  • 在$ct 里設(shè)置 html <div class="btn"></div>
    $ct.html('<div class="btn"></div>')
  • 獲取阎毅、設(shè)置$node 的寬度焚刚、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距扇调、包括邊框矿咕、包括外邊距)
    $node.width():不包括內(nèi)邊距
    $node.innerWidth():包括內(nèi)邊距
    $node.outerWidth():包括內(nèi)邊距和邊框
    $node.outerWidth(true):包括內(nèi)邊距,邊框狼钮,外邊距
  • 獲取窗口滾動(dòng)條垂直滾動(dòng)距離
    $(window).scrollTop()
  • 獲取$node 到根節(jié)點(diǎn)水平痴腌、垂直偏移距離
    $node.offset()
  • 修改$node 的樣式,字體顏色設(shè)置紅色燃领,字體大小設(shè)置14px
    $node.css({"font":"red","fontSize":"14px"})
  • 遍歷節(jié)點(diǎn)士聪,把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
    $node.each(function(index,node){
    var str = $(this).text()
    $(this).text(str+str)
    })
  • 從$ct 里查找 class 為 .item的子元素
    $ct.find('.item')
  • 獲取$ct 里面的所有孩子
    $ct.children()
  • 對(duì)于$node,向上找到 class 為'.ct'的父親猛蔽,在從該父親找到'.panel'的孩子
    $node.parent('.ct').find('.panel')
    注意!:$node.parent()和$node.parents()的用法
  • 獲取選擇元素的數(shù)量
    $node.length
  • 獲取當(dāng)前元素在兄弟中的排行
    $.node.index()

題目7:用jQuery實(shí)現(xiàn)以下操作

  • 當(dāng)點(diǎn)擊$btn 時(shí)剥悟,讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
  • 當(dāng)窗口滾動(dòng)時(shí)灵寺,獲取垂直滾動(dòng)距離
  • 當(dāng)鼠標(biāo)放置到$div 上,把$div 背景色改為紅色区岗,移出鼠標(biāo)背景色變?yōu)榘咨?/li>
  • 當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色略板,當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫變?yōu)榇髮懀?dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色慈缔,控制臺(tái)展示輸入框里的文字
  • 當(dāng)選擇 select 后叮称,獲取用戶選擇的內(nèi)容
    效果預(yù)覽:http://js.jirengu.com/vamuxesivu/1/edit

題目8: 用 jQuery ajax 實(shí)現(xiàn)如下效果。`當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面

https://github.com/a625689014/loadMore

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末藐鹤,一起剝皮案震驚了整個(gè)濱河市瓤檐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌娱节,老刑警劉巖挠蛉,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異肄满,居然都是意外死亡谴古,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門稠歉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)掰担,“玉大人,你說(shuō)我怎么就攤上這事怒炸《鞯校” “怎么了?”我有些...
    開封第一講書人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵横媚,是天一觀的道長(zhǎng)纠炮。 經(jīng)常有香客問(wèn)我,道長(zhǎng)灯蝴,這世上最難降的妖魔是什么恢口? 我笑而不...
    開封第一講書人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮穷躁,結(jié)果婚禮上耕肩,老公的妹妹穿的比我還像新娘。我一直安慰自己问潭,他們只是感情好猿诸,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著狡忙,像睡著了一般梳虽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上灾茁,一...
    開封第一講書人閱讀 51,443評(píng)論 1 302
  • 那天窜觉,我揣著相機(jī)與錄音谷炸,去河邊找鬼。 笑死禀挫,一個(gè)胖子當(dāng)著我的面吹牛旬陡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播语婴,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼描孟,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了砰左?” 一聲冷哼從身側(cè)響起匿醒,我...
    開封第一講書人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎菜职,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體旗闽,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡酬核,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了适室。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嫡意。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖捣辆,靈堂內(nèi)的尸體忽然破棺而出蔬螟,到底是詐尸還是另有隱情,我是刑警寧澤汽畴,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布旧巾,位于F島的核電站,受9級(jí)特大地震影響忍些,放射性物質(zhì)發(fā)生泄漏鲁猩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一罢坝、第九天 我趴在偏房一處隱蔽的房頂上張望廓握。 院中可真熱鬧,春花似錦嘁酿、人聲如沸隙券。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)娱仔。三九已至,卻和暖如春游桩,著一層夾襖步出監(jiān)牢的瞬間拟枚,已是汗流浹背薪铜。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留恩溅,地道東北人隔箍。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像脚乡,于是被迫代替她去往敵國(guó)和親蜒滩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

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