jQuery 中欺栗, $(document).ready()是什么意思娶牌?
JavaScript提供了load事件餐曹,當(dāng)頁面加載完畢時用來執(zhí)行這個事件虑瀑,直到所有的東西湿滓,如圖像已被完全接收前畏腕,此事件不會被觸發(fā)。
而 $(document).ready()是當(dāng)DOM結(jié)構(gòu)完全加載時茉稠,指定一個函數(shù)來執(zhí)行
$node.html()和$node.text()的區(qū)別?
$node.html()
用來設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容
$node.text()
用來設(shè)置和獲取元素內(nèi)部文本
$.extend 的作用和用法?
將兩個或更多對象的屬性或方法合并到第一個對象描馅,常用于合并 defaults 和 options 對象,并且不修改 defaults 對象而线。
var defaults = {
username: 'user',
gender: 'unknown',
limits: function() {
alert(1)
}
}
var options = {
username: 'nicole',
gender: 'female',
limits: function() {
alert(1)
}
}
var userInfo = {}
$.extend(userInfo, defaults, options)
console.log(userInfo)
/*
[object Object] {
gender: "female",
limits: function () {
alert(1)
},
username: "nicole"
}*/
jQuery 的鏈?zhǔn)秸{(diào)用是什么铭污?
由于jQuery的方法都會返回一個jQuery對象,使得一個對象可以多次調(diào)用方法膀篮。
$('div').siblings().addClass('hover')
jQuery 中 data 函數(shù)的作用
用來讀取或設(shè)置HTML5的data-*屬性的值
// html
<div data-index="2"></div>
// js
$div = $('div')
$div.data('index','5')
var index= $div.data('index')
$div.html(index)
//output: 5
寫出以下功能對應(yīng)的 jQuery 方法:
$node = $('.node')
$ct = $('#ct')
// 給元素 $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','div')
$node.attr('src','http://baidu.com')
$node.attr('title','jirengu')
// 給$node 添加自定義屬性data-src
$node.data('src','http://baidu.com')
// 在$ct內(nèi)部最開頭添加元素$node
$ct.prepend($node)
// 在$ct 內(nèi)部最末尾添加元素$node
$ct.append($node)
// 刪除$node
$node.remove()
// 把$ct里內(nèi)容清空
$ct.html('')
// 在$ct 里設(shè)置 html <div class="btn"></div>
$ct.html('<div class="btn">1</div>')
// 獲取、設(shè)置$node 的寬度筷屡、高度(分別不包括內(nèi)邊距涧偷、包括內(nèi)邊距、包括邊框毙死、包括外邊距)
$node.width()
$node.innerWidth()
$node.outerWidth()
$node.outerWidth(true)
$node.height()
$node.innerHeight()
$node.outerHeight()
$node.outerHeight(true)
// 獲取窗口滾動條垂直滾動距離
$(window).scrollTop()
// 獲取$node 到根節(jié)點水平燎潮、垂直偏移距離
$node.offset()
// 修改$node 的樣式,字體顏色設(shè)置紅色扼倘,字體大小設(shè)置14px
$node.css({
color: 'red',
fontSize: '14px'
})
// 遍歷節(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
$node.size()
// 獲取當(dāng)前元素在兄弟中的排行
$node.index()