題目1: jQuery 中, $(document).ready()是什么意思?
當(dāng)DOM準(zhǔn)備就緒時(shí),指定一個(gè)函數(shù)來執(zhí)行。
也可以寫成
$(function(){
console.log();
})
題目2: $node.html()和$node.text()的區(qū)別?
$node.html()作用是 取得第一個(gè)匹配元素的html內(nèi)容,如果$node匹配多于一個(gè)的元素,那么只有第一個(gè)匹配元素的HTML 內(nèi)容會(huì)被獲取。與DOM對象的innerHTML屬性類似。
$node.text()作用是 取得所有匹配元素的內(nèi)容。結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來的文本。與DOM對象的innerText屬性類似。
題目3: $.extend 的作用和用法?
- 作用:當(dāng)我們提供兩個(gè)或多個(gè)對象給$.extend(),對象的所有屬性都添加到目標(biāo)對象(target參數(shù))。
用法
var obj1 = {a:1}
var obj2= {b:2, c:3 }
var obj3 = {b:3, d:5}
var obj4 = {}
$.extend(obj1, obj2) // {a: 1, b: 2, c: 3}
$.extend(obj1, obj2, obj3) //{a: 1, b: 2, c: 3, d:5}
$.extend(obj4, obj1, obj2, obj3) //{a: 1, b: 2, c: 3, d:5}
var obj5 = $.extend({}, obj1, obj2, obj3)
console.log(obj5) //{a: 1, b: 2, c: 3, d:5}
題目4: jQuery 的鏈?zhǔn)秸{(diào)用是什么?
定義:分步驟的對jQuery對象使用方法后繼續(xù)調(diào)用方法,不要再次選擇jQuery對象。
原理:通過對象上的方法最后return this 把對象再返回回來,對象就可以繼續(xù)調(diào)用方法。
作用: 使代碼排版更清晰,便于查看執(zhí)行流程。
題目5: jQuery 中 data 函數(shù)的作用
定義: 在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。
作用:
.data()方法允許我們在DOM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。
.data( key, value )
.data(key)
key:string類型,儲(chǔ)存的數(shù)據(jù)名
value:任意類型,除了undefined
1.如果元素沒有設(shè)置任何值將返回undefined
2.HTML5 data-屬性自動(dòng)被引用到j(luò)Query的數(shù)據(jù)對象中,data-屬性是在第一次使用這個(gè)數(shù)據(jù)屬性后不再存取或改變
3.調(diào)用.data()如果不帶參數(shù),將會(huì)以JavaScript對象的形式獲取所有數(shù)據(jù),這個(gè)對象可以安全存放在變量中,因?yàn)樗奶崛χ筮M(jìn)行的.data(obj)操作不會(huì)干擾
4.直接操作這個(gè)對象會(huì)比每次調(diào)用.data()來設(shè)置或獲取值要快一些
題目6:寫出以下功能對應(yīng)的 jQuery 方法:
給元素 $node 添加 class active,給元素 $noed 刪除 class active
$node.addClass('active')
$node.removeClass('active')
展示元素$node, 隱藏元素$node
$node.show()
$node.hide()
獲取元素$node 的 屬性: id、src、title, 修改以上屬性
$node.attr('id', 'prod')
$node.attr('src', 'hhtp: //www.baidu.com')
$node.attr('title', 'brief')
給$node 添加自定義屬性data-src
$node.attr('data-src', 'www.baidu.com')
在$ct 內(nèi)部最開頭添加元素$node
$ct.prepend($node)
$node.prependTo($ct)
在$ct 內(nèi)部最末尾添加元素$node
$ct.append($node)
$node.appendTo($ct)
刪除$node
$node.remove()
把$ct里內(nèi)容清空
$ct.empty()
在$ct 里設(shè)置 html <div class="btn"></div>
$ct.append('<div class="btn"></div>')
獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)
- 不包括內(nèi)邊距(不加padding,border)
$node.width()
$node.height()
- 包括內(nèi)邊距(加padding,不加border)
$node.innerWidth()
$node.innerHeight()
- 包括外邊距(加,padding,border,margin)
$node.outerWidth(true)
$node.outerHeight(true)
獲取窗口滾動(dòng)條垂直滾動(dòng)距離
$node.scrollTop()
獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
$node.offset()
修改$node 的樣式,字體顏色設(shè)置紅色,字體大小設(shè)置14px
$node.css({
'color': red;
'font-size': '14px'
})
遍歷節(jié)點(diǎn),把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
$node.each(function(){
var str = $(this).text()
$(this).text(str+str)
})
從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
獲取$ct 里面的所有孩子
$ct.children()
對于$node,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel')
獲取選擇元素的數(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)榘咨?/p>
當(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)容
題目:8