1、jQuery 中， $(document).ready()是什么意思？
為防止文檔在完全加載之前運行Jquery代碼，若在文檔未完全加載前就運行函數(shù)，操作可能失敗。必須在文檔加載完后執(zhí)行操作，可使用ready事件，作用相當于把js寫到body末尾。
//第一種寫法
$(document).ready(function(){});
//第二種寫法
$(function(){})
window.onload是所有元素、圖片、外部資源都加載完執(zhí)行，而$(document).ready()只需要DOM元素加載完成。
原生寫法
document.addEventListener('DOMContentLoaded',function(){
......
})
2、$node.html()和$node.text()的區(qū)別?
$node.html()和$node.text()對應原生DOM中的innerHTML、innerText
- $node.html() 是獲取或修改目標元素的HTML節(jié)點及相關(guān)節(jié)點的值
-
$node.text() 只是獲取或者修改文本節(jié)點內(nèi)容
3、$.extend 的作用和用法?
將兩個或多個對象的所有屬性，傳遞給target，目標對象（第一個參數(shù)）將被修改，并且將通過$.extend()返回，重復的屬性及其值會被覆蓋。
第一個參數(shù)設(shè)置為true，為深拷貝；設(shè)置為false，是淺拷貝。不設(shè)置默認是淺拷貝
var obj = {}
var obj1 = {
name:'obj1',
age:'1',
friends:[1,2,3]
}
var obj2 = {
name:'obj2',
sex:'male'
}
//1淺拷貝
$.extend(obj,obj1)
console.log(obj) //name:'obj1',age:'1',friends:Array(3)
//深拷貝
$.extend(true,obj,obj1)
//2
$.extend(obj,obj1,obj2)
console.log(obj) //name:'obj2',age:'1',friends:Array(3),sex:'male'
//3
var opts = $.extend({},obj1,obj2)
console.log(opts) //原理同2,存在的替換，不存在的添加
//4
$.extend($.fn,obj2)
//5
$.fn.extend(obj2)
//.extend常見用法
function getPeople(obj){
var defalut = {
name:'hunger',
age:'30',
sex:'male'
}
//var opts = {}
var opts = $.extend({},defalut,obj)
console.log(opts)
}
jQuery 的鏈式調(diào)用是什么？
$("#Test").css('color','red').show(200).removeClass('style');
上面的例子就是鏈式操作，在一行代碼里，對id為Test的對象進行了三項操作
- 代碼更精簡。鏈式操作能大大精簡代碼量，多項操作一行代碼一氣呵成
- 優(yōu)化性能。使用鏈式操作，所有操作代碼共享一個jQuery對象，省去了逐步查詢DOM元素的性能損耗。
jQuery 中 data 函數(shù)的作用？
在匹配元素上存儲任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個元素的給定名稱的數(shù)據(jù)存儲的值。
.data() 方法允許我們在DOM元素上綁定任意類型的數(shù)據(jù)，避免了循環(huán)引用的內(nèi)存泄漏風險。
我們可以在一個元素上設(shè)置不同的值，之后獲取這些值：
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data("foo"); //52
$("body").data(); //{ foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
通過data()函數(shù)存取的數(shù)據(jù)都是臨時數(shù)據(jù)，一旦頁面刷新，之前存放的數(shù)據(jù)都將不復存在。該函數(shù)屬于jQuery對象(實例)。如果需要移除通過data()函數(shù)存放的數(shù)據(jù)，可以使用removeData()函數(shù)。
以下功能對應的 jQuery 方法：
$node.addClass('active')// 給元素 $node 添加 class active
$node.removeClass('active')// 給元素 $noed 刪除 class active
$node.show()// 展示元素$node
$node.hide(5000)// 隱藏元素$node
// 獲取元素$node 的 屬性: id、src、title
$node.attr('id')
$node.attr('src')
$node.attr('title')
// 修改以上屬性
$node.attr('id','xxx')
$node.attr('src','xxx')
$node.attr('title','xxx')
$node.attr('data-src','xxx')// 給$node 添加自定義屬性data-src
// 在$ct 內(nèi)部最開頭添加元素$node
$ct.prepend('$node')
$node.prependTo('$ct')
// 在$ct 內(nèi)部最末尾添加元素$node
$ct.append('$node')
$node.appendTo('$ct')
$node.remove()// 刪除$node
$ct.empty()// 把$ct里內(nèi)容清空
$ct.html('<div class="btn"></div>')// 在$ct 里設(shè)置 html <div class="btn"></div>
//獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)
//高度
$node.height()//不包括內(nèi)邊距
$node.innerHeight()//包括內(nèi)邊距
$node.outerHeight()//包括邊框
$node.outerHeight(true);//包括外邊距
//寬度
$node.width()//不包括內(nèi)邊距
$node.innerWidth()//包括內(nèi)邊距
$node.outerWidth()//包括邊框
$node.outerWidth(true);//包括外邊距
$(window).scrollTop()// 獲取窗口滾動條垂直滾動距離
// 獲取$node 到根節(jié)點水平、垂直偏移距離
$node.offset().left
$node.offset().top
// 修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px
$node.css({
'color':'red',
'font-size':'14px'
})
// 遍歷節(jié)點，把每個節(jié)點里面的文本內(nèi)容重復一遍
$node.each(function(){
console.log($this.text())
})
$ct.find('.item')// 從$ct 里查找 class 為 .item的子元素
$ct.children()// 獲取$ct 里面的所有孩子
$node.parent('.ct').children('.panel')// 對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.length// 獲取選擇元素的數(shù)量
$node.index()// 獲取當前元素在兄弟中的排行
