1沛厨、jQuery 中系馆, $(document).ready()是什么意思痴突?
- $(document).ready():表示頁(yè)面的dom元素加載完畢搂蜓,此事件才會(huì)被觸發(fā),這是為了防止在頁(yè)面加載元素加載完之前對(duì)dom元素進(jìn)行操作
- window.onload: 表示頁(yè)面所有的元素接收完全后辽装,此事件才會(huì)被觸發(fā)帮碰,這個(gè)過程耗時(shí)間比較長(zhǎng)
2、$node.html()和$node.text()的區(qū)別?
- $node.html() 的作用是用于修改和獲取當(dāng)前元素的html標(biāo)簽和文本元素拾积。
- $node.text() 的作用是修改和獲取當(dāng)前元素的文本元素殉挽。
3、$.extend 的作用和用法?
- $.extend() 用于對(duì)象合并拓巧,可以把 1 個(gè)或多個(gè)對(duì)象里面的屬性全部合并到第一個(gè)對(duì)象里面斯碌。用法:$.extend(targetObject, object1, ..., objectN); 如果屬性名有重復(fù),那么后面對(duì)象的屬性值會(huì)覆蓋前面的
- 此外玲销,$.extend() 還支持深度合并输拇,用法:$.extend(true, targetObject, object1, ..., objectN), 這樣如果后面的對(duì)象里面的屬性還是一個(gè)對(duì)象或數(shù)組或其他引用類型,那么它們會(huì)被深度合并在 target object 里面
- 如果 $.extend() 只有一個(gè)對(duì)象參數(shù)的話贤斜,那么 jQuery 對(duì)象本身會(huì)被當(dāng)作 target object
4策吠、jQuery 的鏈?zhǔn)秸{(diào)用是什么
鏈?zhǔn)秸{(diào)用就是分步驟地對(duì)jQuery對(duì)象實(shí)現(xiàn)各種操作,例如
$(this).css('color','red').show(200).removeClass('style')
優(yōu)點(diǎn):
- 節(jié)省代碼量瘩绒,代碼看起來更優(yōu)雅猴抹;
- 返回的都是同一個(gè)對(duì)象,可以提高代碼的效率锁荔。
- 讓代碼流程更清晰蟀给。
5、jQuery 中 data 函數(shù)的作用
- 在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。
注意和attr()區(qū)別跋理,attr()設(shè)定和取出元素的屬性值是直接顯示在elements元素上择克,data()方法設(shè)定的數(shù)據(jù)不會(huì)顯示在elements元素上,data()方法避免循環(huán)引用的內(nèi)容泄漏風(fēng)險(xiǎn)
6前普、寫出以下功能對(duì)應(yīng)的 jQuery 方法:
1.給元素 $node 添加 class active肚邢,給元素 $noed 刪除 class active
$node.addClass('active')或$node.attr('class','active') // 添加 class active
$node.removeClass('active') // 刪除 class active
2.展示元素 $node, 隱藏元素 $node
$node.show() // 顯示元素
$node.hide() // 隱藏元素
$node.fadeIn() // 通過淡入的方式顯示匹配元素
$node.fadeOut() // 通過淡出的方式隱藏匹配元素
$node.slideDown() // 用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素
$node.slideUp() // 用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素
3.獲取元素$node 的 屬性: id、src拭卿、title骡湖, 修改以上屬性
$node.attr('id')
$node.attr('id','btn')
$node.attr('src')
$node.attr('src','b.jpg')
$node.attr('title')
$node.attr('title','city')
4.給$node 添加自定義屬性data-src
$node.attr('data-src','c.jpg')
5.在$ct 內(nèi)部最開頭添加元素$node
$ct.prepend($node)
$node.prependTo($ct)
6.在$ct 內(nèi)部最末尾添加元素$node
$ct.append($node)
$node.appendTo($ct)
7.刪除$node
$node.remove()
$node.detach() // 保留事件
8.把$ct 里內(nèi)容清空
$ct.empty()
9.在$ct 里設(shè)置 html
$ct.html('<li><a href="#">'+prod+'</a></li>')
10.獲取、設(shè)置$node 的寬度峻厚、高度(分別不包括內(nèi)邊距响蕴、包括內(nèi)邊距、包括邊框惠桃、包括外邊距)
$node.width() //不包括內(nèi)邊距寬度,僅包括內(nèi)容
$node.height() //不包括內(nèi)邊距高度,僅包括內(nèi)容
$node.innerWidth() //包括內(nèi)容和內(nèi)邊距寬度
$node.innerHeight() //包括內(nèi)容和內(nèi)邊距高度
$node.outerWidth() //包括內(nèi)容,內(nèi)邊距,邊框?qū)挾?$node.outerHeight() //包括內(nèi)容,內(nèi)邊距,邊框高度
$node.outerHeight(true) //包括內(nèi)容,內(nèi)邊距,邊框,外邊距高度
$node.outerWidth(true) //包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度
11.獲取窗口滾動(dòng)條垂直滾動(dòng)距離
$(window).scrollTop()
12.獲取$node 到根節(jié)點(diǎn)水平浦夷、垂直偏移距離
$node.offset()
13.修改$node 的樣式,字體顏色設(shè)置紅色刽射,字體大小設(shè)置14px
$node.css({'color':'red','font-size':'14px'})
14.遍歷節(jié)點(diǎn)军拟,把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
$node.each(function() {
$(this).text()
})
15.從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
16.獲取$ct 里面的所有孩子
$ct.children()
17.對(duì)于$node,向上找到 class 為'.ct'的父親誓禁,在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel')
18.獲取選擇元素的數(shù)量
$node.length
$node.size()
19.獲取當(dāng)前元素在兄弟中的排行
$node.index()