題目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