1.jQuery中,$(document).ready()
是什么意思?
頁面DOM結(jié)構(gòu)加載完畢后,腳本就可以運行。傳遞處理函數(shù)給.ready()方法,能保證DOM準(zhǔn)備好后就執(zhí)行這個函數(shù)。
如果執(zhí)行的代碼需要在元素被加載之后才能使用時,(例如,取得圖片的大小需要在圖片被加載完后才能知道),就需要將這樣的代碼放到 load 事件中。
$(document).ready(handler)
等價于 $(handler)
2.$node.html()
和 $node.text()
的區(qū)別?
$node.html()
獲取元素HTML內(nèi)容,包括html標(biāo)簽和文本內(nèi)容
$node.text()
獲取元素文本內(nèi)容,只包括文本內(nèi)容,不包括標(biāo)簽
<div class="wrap">
<p>Hello World!</p>
</div>
console.log($('.wrap').html()) // <p>Hello World!</p>
console.log($('.wrap').text()) // Hello World!
3.$.extend
的作用與用法?
JQuery.extend([deep,]target[,object1][,objectN])
$.extend()
是指將一個或者多個對象的內(nèi)容合并到第一個對象中,若有重復(fù)的內(nèi)容則會被覆蓋。
var obj1 = { a: '1'}
var obj2 = { b: '2', c: '3'}
var obj3 = { b: '3', d: '5'}
var obj4 = {}
$.extend(obj1,obj2); //obj1 ={a: '1', b: '2', c: '3'}
$.extend(obj1,obj2,obj3); //obj1 ={a: '1', b: '3', c: '3', d: '5'}
$.extend(obj4,obj1,obj2,obj3); //obj4 ={a: '1', b: '3', c: '3', d: '5'}
var obj5 = $.extend({},obj1,obj2,obj3); //obj5 ={a: '1', b: '3', c: '3', d: '5'}
4.jQuery的鏈?zhǔn)秸{(diào)用是什么?
對一個jQuery方法進行多次多種方法的調(diào)用,其原理是通過對象上每個方法最后返回本對象--this。因為返回的是同一對象,所以鏈?zhǔn)讲僮骶湍艹掷m(xù)下去。
$('.box').find('p').text('This is a message');
5.jQuery中data函數(shù)的作用
data函數(shù)用于在當(dāng)前jQuery對象所匹配的所有元素上存取數(shù)據(jù)。
data() 以對象形式返回之前存儲的所有數(shù)據(jù)
data(key) 以指定的鍵名key存取數(shù)據(jù)
data(key,value) 以鍵名key存放值為value的數(shù)據(jù)
data(object) 以對象形式同時傳入任意多個key-value的數(shù)據(jù)
6.寫出以下功能對應(yīng)的jQuery方法
$node.addClass('active'); //給元素 $node 添加 class active
$node.removeClass('active') //給元素 $node 刪除 class active
$node.show() //展示元素$node
$node.hide() //隱藏元素$node
$node.attr('id') //獲取元素$node 的 屬性: id
$node.attr('src') //獲取元素$node 的 屬性: src
$node.attr('title') //獲取元素$node 的 屬性: title
$node.attr('id','xxx') //修改元素$node 的 屬性: id
$node.attr('src','xxx') //修改元素$node 的 屬性: src
$node.attr('title','xxx') //修改元素$node 的 屬性: title
$node.attr('data-src','xxx') //給$node 添加自定義屬性data-src
$ct.prepend($node) or $node.prependTo($ct) //在$ct 內(nèi)部最開頭添加元素$node
$ct.append($node) or $node.appendTo($ct) //在$ct 內(nèi)部最末尾添加元素$node
$node.remove() //刪除$node
$node.empty() //把$ct里內(nèi)容清空
$ct.html('<div class="btn"></div>') //在$ct 里設(shè)置 html <div class="btn"></div>
$node.width()//獲取$node 的寬度,不包括內(nèi)邊距
$node.height() //獲取$node 的高度,不包括內(nèi)邊距
$node.innerWidth() //獲取$node 的寬度,包括內(nèi)邊距不包括border
$node.innerHeight() //獲取$node 的高度,包括內(nèi)邊距不包括border
$node.outerWidth([includeMargin]) //獲取$node 的寬度,包括內(nèi)邊距、邊框,當(dāng)includeMargin為true,則包括外邊框,否則不包括外邊框
$node.outerHeight([includeMargin]) //獲取$node 的高度,包括內(nèi)邊距、邊框,當(dāng)includeMargin為true,則包括外邊框,否則不包括外邊框
$node.width('xxx') //設(shè)置$node 的寬度
$node.height('xxx') //設(shè)置$node 的高度
$(wondow).scrollTop() //獲取窗口滾動條垂直滾動距離
$node.offset().left //獲取$node 到根節(jié)點水平偏移距離
$node.offset().top //獲取$node 到根節(jié)點垂直偏移距離
$node.css({"color": "red","font-size": "14px"}) //修改$node 的樣式,字體顏色設(shè)置紅色,字體大小設(shè)置14px
$node.each(function(){ console.log($(this).text())}) //遍歷節(jié)點,把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
$ct.find('.item') //從$ct 里查找 class 為 .item的子元素
$ct.children() //獲取$ct 里面的所有孩子
$node.parent('.ct').find('.panel') //對于$node,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子
$node.length //獲取選擇元素的數(shù)量
$node.index() //獲取當(dāng)前元素在兄弟中的排行