jQuery 中， $(document).ready()是什么意思碟狞？
- HTML中DOM加載完畢后啄枕，執(zhí)行參數(shù)里的handler函數(shù),可以按照順序多次觸發(fā)。
- onload的本質(zhì)是當頁面里的所有資源（內(nèi)部族沃，外部）加載完畢后再觸發(fā)回調(diào)频祝，而且只會加載一次。
在一般的開發(fā)中脆淹，推薦使用ready常空，因為考慮到如果頁面中有大量外部資源需要加載的時候，不必等待資源加載完畢時就能夠給DOM節(jié)點綁定事件盖溺，從而使得頁面的交互功能不因加載資源而阻塞漓糙。如果交互依賴于外部資源，那么就只能使用load烘嘱。
$(document).ready(function(){
//do something
});
$(function(){
//do something
});
$node.html()和$node.text()的區(qū)別?
- $node.html()昆禽，返回所選擇元素內(nèi)的html內(nèi)容，包含html標簽和文本內(nèi)容
- $node.text()蝇庭，返回所選擇元素內(nèi)的文本內(nèi)容醉鳖，不包含html標簽，只包含文本內(nèi)容
$.extend 的作用和用法?
$.extend方法用于將多個對象合并進第一個對象哮内。
var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
$.extend(o1,o2);
o1.p1 // "c"
$.extend的另一種用法是生成一個新對象盗棵，用來繼承原有對象。這時，它的第一個參數(shù)應該是一個空對象漾根。
var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
var o = $.extend({},o1,o2);
o
// Object {p1: "c", p2: "b"}
默認情況下泰涂，extend方法生成的對象是“淺拷貝”，也就是說辐怕，如果某個屬性是對象或數(shù)組逼蒙，那么只會生成指向這個對象或數(shù)組的指針，而不會復制值寄疏。如果想要“深拷貝”是牢，可以在extend方法的第一個參數(shù)傳入布爾值true。
var o1 = {p1:['a','b']};
var o2 = $.extend({},o1);
var o3 = $.extend(true,{},o1);
o1.p1[0]='c';
o2.p1 // ["c", "b"]
o3.p1 // ["a", "b"]
jQuery 的鏈式調(diào)用是什么陕截？
每一步的jQuery操作驳棱，返回的都是一個jQuery對象，所以不同操作可以連在一起农曲。
jQuery 中 data 函數(shù)的作用
類似于html5中的data-屬性社搅，用來方便用戶給標簽綁定數(shù)據(jù)，jquery的data函數(shù)用于在當前jquery對象所匹配的所有元素上存取數(shù)據(jù)乳规，data()函數(shù)存取的數(shù)據(jù)都是臨時數(shù)據(jù)形葬，一旦頁面刷新，之前存放的數(shù)據(jù)都將不復存在暮的。如果需要移除用removeData()方法笙以。用法：可以傳入兩個參數(shù)，分別是key和value冻辩，或者傳入一個object猖腕。需要注意是當讀取數(shù)據(jù)時只以第一個匹配元素為準。
寫出以下功能對應的 jQuery 方法：
- 給元素 $node 添加 class active恨闪，給元素 $noed 刪除 class active
$node.addClass('active');//添加
$node.removeClass('active');//刪除
- 展示元素$node, 隱藏元素$node
$node.hide([duration ] [,easing ] [,complete ])
$node.show( [duration ] [, easing ] [, complete ] )
$node.toggle( [duration ] [, easing ] [, complete ] )
- 獲取元素$node 的 屬性: id倘感、src、title凛剥， 修改以上屬性
$node.attr(attributeName)
$node.attr(attributeName,value)
- 給$node 添加自定義屬性data-src
$node.attr(‘data-src’,value)
- 在$ct 內(nèi)部最開頭添加元素$node
$node.prepend(content[,content])
$node.prependTo(target)
- 在$ct 內(nèi)部最末尾添加元素$node
$node.append(content[,content])
$node.appendTo(target)
- 刪除$node
$node.remove([selector])
$node.detach()
- 把$ct里內(nèi)容清空
$node.empty()
- 在$ct 里設置 html <div class="btn"></div>
$node.html([string])
- 獲取侠仇、設置$node 的寬度、高度(分別不包括內(nèi)邊距犁珠、包括內(nèi)邊距逻炊、包括邊框、包括外邊距)
獲取高度/寬度：.height()/.width()
獲取高度/寬度包括內(nèi)邊距：innerHeight()/innerWidth()
獲取高度/寬度包括內(nèi)邊距+邊框:outerHeight()/outerWidth()
獲取高度/寬度包括內(nèi)邊距+邊框+外邊距:outerHeight(true)/outerWdith(true)
- 獲取窗口滾動條垂直滾動距離
$node..scrollTop();
- 獲取$node 到根節(jié)點水平犁享、垂直偏移距離
$node.offset()
- 修改$node 的樣式余素，字體顏色設置紅色，字體大小設置14px
$node.css(propertyName,value)
- 遍歷節(jié)點炊昆，把每個節(jié)點里面的文本內(nèi)容重復一遍
$node.clone( [withDataAndEvents ] )
- 從$ct 里查找 class 為 .item的子元素
.find([selector])
- 獲取$ct 里面的所有孩子
$ct.children()
- 對于$node桨吊，向上找到 class 為'.ct'的父親威根，在從該父親找到'.panel'的孩子
$node.parents(".ct").find(".panel");
- 獲取選擇元素的數(shù)量
$node.length;
$node.size();
- 獲取當前元素在兄弟中的排行
$node.index();
用jQuery實現(xiàn)以下操作
- 當點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色
- 當窗口滾動時视乐，獲取垂直滾動距離
- 當鼠標放置到$div 上洛搀，把$div 背景色改為紅色，移出鼠標背景色變?yōu)榘咨?/li>
- 當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色佑淀，當輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮懀? - 當輸入框失去焦點時去掉邊框藍色留美，控制臺展示輸入框里的文字
- 當選擇 select 后，獲取用戶選擇的內(nèi)容
DEMO
