jQuery 中， $(document).ready()是什么意思？
當DOM準備就緒時，指定一個函數來執行。
傳遞處理函數給.ready()方法，能保證DOM準備好后就執行這個函數，因此，這里是進行所有其它事件綁定及運行其它 jQuery 代碼的最佳地方。
$(document).ready(handler)
$(handler)
兩種寫法等價
$node.html()和$node.text()的區別?
$node.html()選擇的是node元素內的html內容包含文本和html標簽
$node.text()選擇的是node元素內的文本，不包含html標簽
$.extend 的作用和用法?
作用：合并一個或多個對象的內容到第一個對象
語法：jQuery.extend([deep,] target [, object1 ] [, objectN ] )
用法：
- deep：設置淺拷貝或深拷貝(默認為false淺拷貝，不用寫)，若設置深拷貝則為true
- target：目標對象
- object：傳遞對象，可以有很多個，但是后面的相同參數會覆蓋前面的
<script>
var obj1={
name:'fang',
age:'18',
friends:{
name:'xiaobai',
age:'18',
sex:'male'
}
}
var obj2={
name:'ruoyu',
age:'20',
friends:{
name:'xiaohei',
age:'20'
}
}
var obj3=$.extend({},obj1,obj2)
console.log(obj3)
</script>
console.log輸出值為
Object
age: "20"
friends: Object
age: "20"
name: "xiaohei"
__proto__: Object
name: "ruoyu"
__proto__: Object
jQuery 的鏈式調用是什么？
當jQuery方法返回值仍為當前對象時可繼續調用該對象的方法，形成鏈式調用
$(this).addClass("active").siblings().removeClass("active")
jQuery 中 data 函數的作用
data函數用于在當前jQuery對象所匹配的所有元素上存取數據。通過data函數存取的數據為臨時數據，頁面刷新后數據消失。
.data( key, value );
$( "body" ).data( "foo", 52 );
.data( obj );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
寫出以下功能對應的 jQuery 方法：
- 給元素 $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','xxx')
$node.attr('src','xxx')
$node.attr('title','xxx')
- 給$node 添加自定義屬性data-src
$node.attr('data-src','xxx')
- 在$ct 內部最開頭添加元素$node
$ct.prepend('$node')
- 在$ct 內部最末尾添加元素$node
$ct.append('$node')
- 刪除$node
$node.remove()
- 把$ct里內容清空
$ct.empty()
- 在$ct 里設置 html <div class="btn"></div>
$ct.html(' <div class="btn"></div>')
- 獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內 - 邊距、包括邊框、包括外邊距)
$node.width()//僅包括內容
$node.height()//僅包括內容
$node.innerWidth();//包括內容和padding寬度
$node.innerHeight();//包括內容和padding高度
$node.outerWidth();//包括內容,padding,border寬度
$node.outerHeight();//包括內容,padding,border高度
$node.outerHeight(true);//包括內容,padding,border,margin高度
$node.outerWidth(true);//包括內容,padding,border,margin寬度
- 獲取窗口滾動條垂直滾動距離
$(window).scrollTop();
- 獲取$node 到根節點水平、垂直偏移距離
$node.offset();
- 修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({'color':'red','font-size':'14px'})
- 遍歷節點，把每個節點里面的文本內容重復一遍
$node.each(function(){
console.log($(this).val())
})
- 從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
- 獲取$ct 里面的所有孩子
$ct.children()
- 對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel')
- 獲取選擇元素的數量
$node.length
- 獲取當前元素在兄弟中的排行
$node.index()
