題目1：jQuery 中盹兢， $(document).ready()是什么意思烹俗？

1. $(document).ready()表示頁(yè)面的dom元素已經(jīng)加載完畢蛤袒，這是為了防止在頁(yè)面加載元素加載完之前對(duì)dom元素進(jìn)行操作。原生js中我們可以使用window.onload來(lái)達(dá)到這個(gè)效果乘粒，不過(guò)兩者還是有區(qū)別，onload是所有元素伤塌、圖片灯萍、外部資源都加載完，而$(document).ready()只需要元素加載完成寸谜。所以onload比$().ready()要慢

題目2：$node.html()和$node.text()的區(qū)別?

1. $node.html()返回node中的html內(nèi)容竟稳，$node.text()返回node中的文本內(nèi)容。
2. 當(dāng)包含參數(shù)的時(shí)候熊痴，html(str)為替換html內(nèi)容為參數(shù)值他爸，text(str)為替換文本內(nèi)容為參數(shù)值。

題目3：$.each果善，$.extend 的作用和用法?

1. $.each：
   $.each()函數(shù)和$(selector).each()是不一樣的诊笤，$(selector).each()是專(zhuān)門(mén)遍歷一個(gè)jQuery對(duì)象的，$.each()函數(shù)可用于迭代任何集合巾陕，無(wú)論是“名/值”對(duì)象（JavaScript對(duì)象）或數(shù)組讨跟。在迭代數(shù)組的情況下，回調(diào)函數(shù)每次傳遞一個(gè)數(shù)組索引和相應(yīng)的數(shù)組值作為參數(shù)鄙煤。該方法返回其第一個(gè)參數(shù)晾匠，就是迭代的對(duì)象。

//$.each()
var str=$.each([52, 97],function(index,value){
  console.log(index+":"+value);
});
var  obj=$.each({"a":10,"b":"jon"},function(index,value){
  console.log(index+":"+value);
});
//$(selector).each()
<ul class="list">
  <li>1</li><li>2</li>
</ul>
$("ul.list li").each(function(){
  var num=$(this).text()*2;
  $(this).text(num);
});

2. $.extend：
   當(dāng)我們提供兩個(gè)或多個(gè)對(duì)象給$.extend()梯刚，對(duì)象的所有屬性都添加到目標(biāo)對(duì)象（第一個(gè)參數(shù)）凉馆。
   只有一個(gè)參數(shù)提供給$.extend()，意味著目標(biāo)參數(shù)被省略亡资。jQuery對(duì)象被默認(rèn)為目標(biāo)對(duì)象澜共。這時(shí)可以在jQuery的命名空間下添加新的功能。對(duì)于插件開(kāi)發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的锥腻。
   在默認(rèn)情況下嗦董，通過(guò)$.extend()合并，如果第一個(gè)對(duì)象的屬性本身是一個(gè)對(duì)象或數(shù)組瘦黑，那么它將完全用第二個(gè)對(duì)象相同的key重寫(xiě)一個(gè)屬性京革。然而，如果將 true 作為該函數(shù)的第一個(gè)參數(shù)幸斥，那么會(huì)在對(duì)象上進(jìn)行遞歸的合并存崖。

//默認(rèn)情況下合并是重寫(xiě)一個(gè)屬性
var object1 = {
  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
};
var object2 = {
  banana: { price: 200 },  durian: 100
};
$.extend( object1, object2 );    //object1={apple: 0,  banana: { price: 200 }, cherry: 97,durian: 100}，banaba被替換了睡毒，而不是合并
//第一個(gè)參數(shù)為true時(shí)
var object1 = {
  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
};
var object2 = {
  banana: { price: 200 },  durian: 100
};
$.extend( true, object1, object2 );    //object1={apple: 0,  banana: { weight:52,price: 200 },  cherry: 97,durian: 100}，banaba被合并
//不改變第一個(gè)參數(shù)冗栗，生成新對(duì)象
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend( {}, defaults, options );   //settings={validate: true, limit: 5, name: "bar"}

題目4：jQuery 的鏈?zhǔn)秸{(diào)用是什么演顾？

jQuery鏈?zhǔn)秸{(diào)用：在對(duì)象上一次性調(diào)動(dòng)多個(gè)方法
$(this).addClass("active").siblings().removeClass("active");
$('#ct').css('color','blue').show(400).hide();
因?yàn)榇蟛糠謱?duì)象方法的最后是return this供搀，所以有了鏈?zhǔn)秸{(diào)用，簡(jiǎn)易代碼钠至。

題目5：jQuery 中 data 函數(shù)的作用

.data() 方法允許我們?cè)贒OM元素上綁定任意類(lèi)型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)葛虐。

//我們可以在一個(gè)元素上設(shè)置不同的值，之后獲取這些值：
$("body").data("foo", 52); 
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data();   //{ foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
//獲取值棉钧，若無(wú)則返回undefined
alert( $("body").data("hint")); //undefined
alert( $("body").data("foo")); //52
//刪除值
$("body").removeData("foo");
console.log($("body").data("foo"));    //undefined

  <div>
  The values stored were<span></span>and<span></span>
</div>
<script>var div = $("div")[0];
   $("div").data("test", { first: 16, last: "pizza!" });
   $("span:first").text($("div").data("test").first);    //第一個(gè)span里面加16
   $("span:last").text($("div").data("test").last);    //第二個(gè)span里面加pizza!
</script>
//從jQuery 1.4.3起屿脐，HTML 5 data- 屬性將自動(dòng)被引用到j(luò)Query的數(shù)據(jù)對(duì)象中。
<div data-role="page" data-last-value="43" data-hidden="true"></div>
$("div").data("role")==="page"
$("div").data("lastValue")===43
$("div").data("hidden")===true

題目6：寫(xiě)出以下功能對(duì)應(yīng)的 jQuery 方法：

1. 增刪class
   給元素 $node 添加 class active,給元素 $noed 刪除 class active

$("node").addClass("active");  $("node").removeClass("active");

2. 顯示/隱藏
   展示元素$node, 隱藏元素$node

$(node).show();  $("node").hide();    //2個(gè)參數(shù)宪卿，1.動(dòng)畫(huà)運(yùn)行時(shí)間;2.完成時(shí)執(zhí)行的函數(shù)的诵；

3. 獲取/修改屬性
   獲取元素$node 的 屬性: id、src佑钾、title西疤， 修改以上屬性

$("node").attr("id"); $("node").attr("src"); $("node").attr("title"); 
$("node").attr("id","value"); $("node").attr("src","value"); $("node").attr("title","value");

4. 添加自定義屬性
   給$node 添加自定義屬性data-src

$("node").data("src","value");

5. 開(kāi)頭添加元素
   在$ct 內(nèi)部最開(kāi)頭添加元素$node

$("ct").prepend($("node"));

6. 末尾添加元素
   在$ct 內(nèi)部最末尾添加元素$node

$("ct").append($("node"));

7. 刪除元素
   刪除$node

$("node").remove(); 
$("node1").remove($("node")); //刪除node1里的node

8. 清空元素里的內(nèi)容
   把$ct里內(nèi)容清空

$("ct").empty();

9. 設(shè)置html
   在$ct 里設(shè)置 html <div class="btn"></div>

$("ct").html("<div class='btn'></div>");

10. 獲取寬高
    獲取、設(shè)置$node 的寬度休溶、高度(分別不包括內(nèi)邊距代赁、包括內(nèi)邊距、包括邊框兽掰、包括外邊距)

$node.width();//不包括內(nèi)邊距寬度,僅包括內(nèi)容
$node.height();//不包括內(nèi)邊距高度,僅包括內(nèi)容
$node.innerWidth();//包括內(nèi)容和內(nèi)邊距寬度
$node.innerHeight();//包括內(nèi)容和內(nèi)邊距高度
$node.outerWidth();//包括內(nèi)容,內(nèi)邊距,邊框?qū)挾?$node.outerHeight();//包括內(nèi)容,內(nèi)邊距,邊框高度
$node.outerHeight(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距高度
$node.outerWidth(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度

11. 獲取滾動(dòng)距離
    獲取窗口滾動(dòng)條垂直滾動(dòng)距離

$(window).scrollTop();

12. 獲取水平垂直偏移距離
    獲取$node 到根節(jié)點(diǎn)水平芭碍、垂直偏移距離

$node.offset();    //返回的對(duì)象包含top 和 left, 此方法只對(duì)可見(jiàn)元素有效

13. 修改元素樣式
    修改$node 的樣式，字體顏色設(shè)置紅色孽尽，字體大小設(shè)置14px

 $node.css({
    color: 'red',
    'font-size': '14px'                //中間有短線(xiàn)的必須用引號(hào)窖壕，因?yàn)閖s只支持下劃線(xiàn)
  });

14. 遍歷節(jié)點(diǎn)
    遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍

$('#items li').each(function(){
    var text = $(this).text()
    $(this).text(text + text)
});

15. 查找元素
    從$ct 里查找 class 為 .item的子元素

$ct.find('.item');

16. 獲取元素
    獲取$ct 里面的所有孩子

$ct.children();

17. 獲取元素
    對(duì)于$node泻云，向上找到 class 為'.ct'的父親艇拍，在從該父親找到'.panel'的孩子

$node.parents(".ct").find(".panel");

18. 獲取元素?cái)?shù)量
    獲取選擇元素的數(shù)量

$node.length
$node.size() //自1.8版本廢棄，請(qǐng)使用.length代替

19. 獲取元素排行
    獲取當(dāng)前元素在兄弟中的排行

$node.index();

題目7：用jQuery實(shí)現(xiàn)以下操作

1. 當(dāng)點(diǎn)擊$btn 時(shí)宠纯，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色

$(".wrap").on("click",".btn",function(e){
  e.preventDefault();
  var $this=$(this);
  $(this).css("background-color","red");
  setTimeout(function(){
    $this.css("background-color","blue");
    console.log($this);
  },800);
});

2. 當(dāng)窗口滾動(dòng)時(shí)卸夕，獲取垂直滾動(dòng)距離

$(window).on("scroll",function(){
  $(".getHeight").find("span").text($(window).scrollTop());
});

3. 當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色婆瓜，移出鼠標(biāo)背景色變?yōu)榘咨?/strong>

$(".wrap").on("mouseenter",".line .b",function(){
  $(this).css("background-color","red");
});
$(".wrap").on("mouseleave",".line .b",function(){
  $(this).css("background-color","#fff");
});

$(".wrap").on("focus",".line input[type=text]",function(){
  $(this).css("border-color","blue");
});

$(".wrap").on("focusout",".line input[type=text]",function(){
  console.log($(this).val());
});

$(".wrap").on("input",".line input[type=text]",function(){
  $(this).val($(this).val().toUpperCase());
});

$(".wrap").on("change","select",function(){
  $(this).parent().find(".right").text($(this).find("option:selected").text());
});