jQuery 中, $(document).ready()是什么意思慢逾?
$(document).ready()的作用是當(dāng)文檔中的DOM節(jié)點加載完成后立倍,在加載外部圖片和資源前,執(zhí)行ready()里面的操作侣滩。(注意:$(document).ready(function(){})可以簡寫成$(function(){}))
如果執(zhí)行的代碼需要在元素被加載之后才能使用時口注,(例如,取得圖片的大小需要在圖片被加載完后才能知道)君珠,就需要將這樣的代碼放到 load 事件中寝志。
window.onload是整個頁面加載完成(包括圖片,css策添,腳本等)之后再執(zhí)行onload()中的操作材部。并且 window.onload不能同時編寫多個,如果有多個window.onload方法唯竹,只會執(zhí)行一個 (后者會覆蓋前者)乐导。
$node.html()和$node.text()的區(qū)別?
$node.html():獲取 $node元素的HTML內(nèi)容,包括HTML標(biāo)簽和文本
$node.text():獲取 $node元素的文本內(nèi)容浸颓,不包括HTML標(biāo)簽
$.extend 的作用和用法?
將兩個或更多對象的內(nèi)容合并到第一個對象兽叮。
在默認(rèn)情況下,通過$.extend()合并操作不是遞歸的猾愿;
如果第一個對象的屬性本身是一個對象或數(shù)組,那么它將完全用第二個對象相同的key重寫一個屬性,這些值不會被合并账阻。
如果將 true 作為該函數(shù)的第一個參數(shù)蒂秘,那么會在對象(只是對象)上進(jìn)行遞歸的合并。
var obj1 = {
name : zoro,
number: {a:17,b:18}
}
var obj2 =
number: {a:20,c:21}
color: green
}
$.extend(obj1,obj2)
//obj1 { name:zoro, number:{a:20,c:21},color:green}
obj1 = {
name : zoro,
number: {a:17,b:18}
}
$extend(true,obj1,obj2)
//obj1 {name:zoro,number:{a:20,b:18,c:21},color:green}
jQuery 的鏈?zhǔn)秸{(diào)用是什么淘太?
$('#id').css('color','pink').find('p').text()
jQuery進(jìn)行的每一步操作最終返回的都是一個jQuery對象姻僧。
鏈?zhǔn)讲僮髂艽蟠缶喆a量。
使用鏈?zhǔn)讲僮髌涯粒胁僮鞔a共享一個jQuery對象撇贺,省去了逐步查詢DOM元素的性能損耗。
jQuery 中 data 函數(shù)的作用
.data() 方法允許我們在DOM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險冰抢。
.data(key,value);
以指定的鍵名key存取數(shù)據(jù)松嘶。如果指定了value參數(shù),則表示以鍵名key存放值為value的數(shù)據(jù)挎扰;如果沒有指定value參數(shù)翠订,則表示讀取之前以鍵名key存放的數(shù)據(jù)巢音;如果沒有指定任何參數(shù),則以對象形式返回之前存儲的所有數(shù)據(jù)
data(obj);
以對象形式同時傳入任意多個key-value形式的數(shù)據(jù)尽超,對象的每個屬性就是鍵名key官撼,屬性值就是value。
data()函數(shù)的所有"存儲數(shù)據(jù)"操作針對當(dāng)前jQuery對象所匹配的每一個元素似谁;所有"讀取數(shù)據(jù)"操作只針對第一個匹配的元素
即當(dāng)使用.data()獲取值時傲绣,jQuery會首先嘗試將獲取的字符串值轉(zhuǎn)化成JS類型,包括布爾值巩踏,null秃诵,數(shù)字,對象蛀缝,數(shù)組
如果就是想獲取字符串值而不想獲得自動轉(zhuǎn)換的值顷链,可以使用.attr(“data-”+key)來獲取相應(yīng)的值
寫出以下功能對應(yīng)的 jQuery 方法:
給元素 $node 添加 class active,給元素 $noed 刪除 class active
$node.addClass('active') $node.removeClass('active')
展示元素$node, 隱藏元素$node
$node.hide() $node.show()
獲取元素$node 的 屬性: id屈梁、src嗤练、title, 修改以上屬性
$node.attr('id') $node.attr('src') $node.attr('title')
$node.attr({id: 'zoro', src: 'http:asd', title: 'real'})
給$node 添加自定義屬性data-src
$node.data('data-src','url')
在$ct 內(nèi)部最開頭添加元素$node
$ct.prepend($node)
在$ct 內(nèi)部最末尾添加元素$node
$cd.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)邊距构哺、包括邊框革答、包括外邊距)
設(shè)置參數(shù)則設(shè)置獲取的屬性 $node.height('700')
$node.height() 不包括內(nèi)邊距 僅是內(nèi)容的高度
$node.width() 不包括內(nèi)邊距 僅是內(nèi)容的寬度
$node.innerHeight() 獲取padding+內(nèi)容的高度
$node.innerWidth() 獲取padding+內(nèi)容的寬度
$node.outerHeight() 獲取邊框+padding+內(nèi)容的高度
$node.outerWidth() 獲取邊框+padding+內(nèi)容的寬度
$node.outerHeight(true) 獲取外邊距+邊框+padding+內(nèi)容的高度
$node.outerWidth(true) 獲取外邊距+邊框+padding+內(nèi)容的寬度
獲取窗口滾動條垂直滾動距離
$(window).scrollTop() 垂直滾動距離
$(window).scrollLeft() 水平滾動距離
獲取$node 到根節(jié)點水平、垂直偏移距離
$node.offset().left 水平偏移距離
$node.offset().top 垂直偏移距離
修改$node 的樣式曙强,字體顏色設(shè)置紅色残拐,字體大小設(shè)置14px
$node.css({'font-size':'14px', 'color':'red'})
遍歷節(jié)點,把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
$node.each(function(){
console.log($(this).text())
})
從$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()