1.jQuery 中据沈， $(document).ready()是什么意思？
以下兩種寫法等價饺蔑，當(dāng)DOM準(zhǔn)備就緒時锌介，指定一個函數(shù)來執(zhí)行
$(document).ready(handler)
$(handler)
2.$node.html()和$node.text()的區(qū)別?
- .html獲取的是集合中第一個匹配元素的HTML內(nèi)容
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
$('div.demo-container').html();
得到結(jié)果如下：
<div class="demo-box">Demonstration Box</div>
-.text得到匹配元素集合中每個元素的合并文本，包括他們的后代
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
$('div.demo-container').text()
得到結(jié)果：
Demonstration Box list item 1 list item 2
3.$.extend 的作用和用法?
jQuery.extend( [deep ], target, object1 [, objectN ] )
deep
類型:
[Boolean](https://www.jquery123.com/Types/#Boolean)
如果是true猾警，合并成為遞歸（又叫做深拷貝）孔祸。
target
類型:
[Object](https://www.jquery123.com/Types/#Object)
對象擴(kuò)展。這將接收新的屬性发皿。
object1
類型:
[Object](https://www.jquery123.com/Types/#Object)
一個對象崔慧，它包含額外的屬性合并到第一個參數(shù).
objectN
類型:
[Object](https://www.jquery123.com/Types/#Object)
包含額外的屬性合并到第一個參數(shù)
.extend的作用是將兩個或更多對象的內(nèi)容合并到第一個對象；
用法有以下：
- 合并兩個對象穴墅，并修改第一個對象
···
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
$.extend(object1, object2);
結(jié)果：{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
···
- 遞歸方式合并兩個對象惶室，并修改第一個對象
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
$.extend(true, object1, object2);
結(jié)果：{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
- 合并到新的對象，不改變原對象內(nèi)容
var obj1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var obj2 = {
banana: {price: 200},
durian: 100
};
var obj3 = {};
.extend(obj3, obj1,obj2)
obj1
{apple: 0, banana: {weight: 52, price: 100}, cherry: 97}
obj2
{banana: {price: 200}, durian: 100}
obj3
{apple: 0, banana: {price: 200}, cherry: 97, durian: 100}
4.jQuery 的鏈?zhǔn)秸{(diào)用是什么玄货？
鏈?zhǔn)讲僮魇峭ㄟ^對象上的方法最后
return this
把對象再返回回來皇钞，從而可以訪問自己的原型，對象可以繼續(xù)調(diào)用方法松捉，就可以鏈?zhǔn)讲僮?/p>
// 鏈?zhǔn)秸{(diào)用
$('.btn').on('click',function () {
$('.box').animate({width: 200})
.animate({height: 200})
})
鏈?zhǔn)秸{(diào)用的好處：節(jié)省代碼量夹界，代碼看起來更優(yōu)雅。
鏈?zhǔn)秸{(diào)用的問題：所有對象的方法返回的都是對象本身隘世，也就是說沒有返回值可柿，所以這種方法不一定在任何環(huán)境下都適合
5. jQuery 中 data 函數(shù)的作用
jQuery.data是一個調(diào)用鸠踪，應(yīng)使用.data()
.data()，在匹配元素上存儲任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個元素的給定名稱的數(shù)據(jù)存儲的值趾痘。
* #### .data( key, value )
* **key**
類型:
[String](https://www.jquery123.com/Types/#String)
一個字符串慢哈，用戶存儲數(shù)據(jù)的名稱。（譯者注：存儲的數(shù)據(jù)名）
* **value**
類型:
[Object](https://www.jquery123.com/Types/#Object)
新的數(shù)據(jù)值永票；它可以是任意的Javascript數(shù)據(jù)類型卵贱，包括Array 或者 Object。
* ####.data( obj )
* **obj**
類型:
[Object](https://www.jquery123.com/Types/#Object)
一個用于更新數(shù)據(jù)的 鍵/值對
用例：
我們可以在一個元素上設(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 ] }
6.寫出以下功能對應(yīng)的 jQuery 方法：
1)給元素 $node 添加 class active键俱，給元素 $noed 刪除 class active
$node.addClass('active') //添加
$node.removeClass('active') //刪除
2)展示元素$node, 隱藏元素$node
- 最簡單的，直接展示世分、隱藏
$node.show();
$node.hide();
沒有動畫编振，直接顯示和隱藏，但show可記憶display的屬性臭埋，顯示時恢復(fù)
也可增加動畫和事件效果踪央，并指定動畫完成時的執(zhí)行函數(shù)，hide類似
#### .show( [duration ] [, easing ] [, complete ] )
* **duration** (默認(rèn): `400`)
類型: Number or String 一個字符串或者數(shù)字決定動畫將運(yùn)行多久瓢阴。
* **easing** (默認(rèn):`swing`)
類型:String
一個字符串畅蹂，表示過渡使用哪種緩動函數(shù)。（譯者注：jQuery自身提供"linear" 和 "swing"荣恐，其他可以使用相關(guān)的插件）
* **complete**
類型:Function
在動畫完成時執(zhí)行的函數(shù)液斜。
$node.show(300, 'linear', function() {
alert('Animation complete.');
})
- 漸變效果
.fadeIn( [duration ] [, easing ] [, complete ] ) //淡入方式顯示
.fadeOut( [duration ] [, easing ] [, complete ] ) //淡出方式隱藏
.fadeToggle( [duration ] [, easing ] [, complete ] ) //通過調(diào)整不透明度，隱藏和顯示元素
- 滑動效果
.slideDown( [duration ] [, easing ] [, complete ] ) //給元素高度加動畫叠穆，下部向下滑動動畫顯示元素
.slideUp( [duration ] [, easing ] [, complete ] ) //給元素高度加動畫少漆，下部向上滑動，高度為0時硼被，元素隱藏
.slideToggle( [duration ] [, easing ] [, complete ] ) //上下滑動切換示损，隱藏和顯示元素
3)獲取元素$node 的 屬性: id、src祷嘶、title屎媳， 修改以上屬性
獲取屬性:.attr( attributeName )
var title = $( "em" ).attr( "title" );
$('.mod_tab').attr('id')
$('.content img').attr('src')
修改屬性:.attr( attributeName, value )
$('em').attr('title','photo for fun')
$('.mod_tab').attr('id','box');
$('.content img').attr('src','/img/test.img');
4)給$node 添加自定義屬性data-src
$node.attr('data-src','jirengu.com')
5)在$ct 內(nèi)部最開頭添加元素$node
$ct.prepend($node)
$node.prependTo($ct)
6)在$ct 內(nèi)部最末尾添加元素$node
$node.appendTo($ct)
7)刪除$node
$node.remove();
8)把$ct里內(nèi)容清空
$ct.empty();
9)在$ct 里設(shè)置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
10)獲取、設(shè)置$node 的寬度论巍、高度(分別不包括內(nèi)邊距烛谊、包括內(nèi)邊距、包括邊框嘉汰、包括外邊距)
- 不包括內(nèi)邊距寬高：
$node.width()
$node.height()
- 包括內(nèi)邊距padding的寬高
$node.innerWidth()
$node.innerHeight()
- 包括邊框的寬高
$node.outerWidth()
$node.outerHeight()
- 包括margin的寬高
$node.outerWidth(true)
$node.outerHeight(true)
11)獲取窗口滾動條垂直滾動距離
$node.scrollTop();
12)獲取$node 到根節(jié)點(diǎn)水平丹禀、垂直偏移距離
.offset()
.offset()方法允許我們檢索一個元素 包含其 border 邊框，不包括 margin相對于文檔document的當(dāng)前位置。和.position()的差別在于：.position()是相對于父級元素的位移双泪。當(dāng)通過全局操作（特別是通過拖拽操作）將一個新的元素放置到另一個已經(jīng)存在的元素的上面時持搜，若要取得這個新的元素的位置，那么使用 .offset()`更合適焙矛。
.offset()返回一個包含top和left屬性的對象
$node.offset().top;
$node.offset().left;
13)修改$node 的樣式葫盼，字體顏色設(shè)置紅色，字體大小設(shè)置14px
$node.css({
"color": "red",
"font-size": "14px"
});
14)遍歷節(jié)點(diǎn)村斟，把每個節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
$('.box>ul>li').each(function(index, node){
var str = $(node).text();
$(node).text(str + str)
})
15)從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
16)獲取$ct 里面的所有孩子
$ct.children()
17)對于$node贫导，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parent('.ct').find('.panel')
18)獲取選擇元素的數(shù)量
$node.length()
19)獲取當(dāng)前元素在兄弟中的排行
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
$('#bar').index()
1
