1. jQuery 中， $(document).ready()是什么意思？
包含在$(document).ready()中的代碼只有在頁面文檔對象模型（DOM）準備好執(zhí)行JavaScript代碼時才會運行。
2.$node.html()和$node.text()的區(qū)別?
jQuery.html（）將字符串轉(zhuǎn)為HTML，jQuery.text（）將內(nèi)容轉(zhuǎn)為文本。
例子：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script>
$('#div1').html('<a href="example.html">Link</a><b>hello</b>');
$('#div2').text('<a href="example.html">Link</a><b>hello</b>');
</script>
</body>
</html>
3. $.extend 的作用和用法?
將兩個或多個對象的內(nèi)容合并到第一個對象中。
語法：
jQuery.extend( [deep ], target, object1 [, objectN ] )//版本1.1.4
參數(shù)：
deep
類型: Boolean
如果是true，合并成為遞歸（又叫做深拷貝）。
target
類型: Object
對象擴展。這將接收新的屬性。
object1
類型: Object
一個對象，它包含額外的屬性合并到第一個參數(shù).
objectN
類型: Object
包含額外的屬性合并到第一個參數(shù)
最簡單的實現(xiàn)：
var a = {a:1,b:2};
var b = {c:3,d:4};
$.extend(a,b); //a會變成 {a:1,b:2,c:3,d:4}
如果要合并進去的數(shù)組與目標數(shù)組有重復，那么會有這樣的操作
var a = {a:1,b:2};
var b = {b:3,c:4};
$.extend(a,b);//a會變成 {a:1,b:3,d:4}
上面的兩種方法都會改變目標數(shù)組a，那么想不改變原數(shù)組，可以如下
var a = {a:1,b:2};
var b = {b:3,c:4};
var c = $.extend({},a,b)//將第一個參數(shù)目標數(shù)組設為空數(shù)組，最后賦值給c，c的結(jié)果會是 {a:1,b:3,d:4}
那么有深拷貝的需求，就可以如下
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
//不進行深拷貝設置
$.extend( object1, object2);
/*
{
apple: 0,
banana: {
price: 200
},
cherry: 97,
durian: 100
}
其中 object2中的banana對象就直接覆蓋了object1中的banana對象，并沒有展開進行合并
*/
//設置深拷貝
$.extend(true, object1, object2);
/*
{
apple: 0,
banana: {
price: 200,
weight: 52
},
cherry: 97,
durian: 100
}
*/
深拷貝的注意：不支持第一個參數(shù)傳遞 false 。
如果對象的內(nèi)容里包含數(shù)組的話,數(shù)組里的內(nèi)容并不會進行合并，而是視為一個整體，對目標數(shù)組進行覆蓋：
var object1 = {
apple: 0,
banana: {weight: 52, price: 100,a:[232,222]},
cherry: [2,3,4]
};
var object2 = {
banana: {price: 200,a:[1,2]},
cherry:[1,2,3],
durian: 100
};
$.extend(true,object1, object2);
/*
{
apple: 0,
banana: {
a: [1, 2],
price: 200,
weight: 52
},
cherry: [1, 2, 3],
durian: 100
}
*/
4.jquery 的鏈式調(diào)用是什么？
它允許我們在同一個元素上一個接一個地運行多個jQuery命令。
示例：
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
5. jQuery 中 data 函數(shù)的作用
在匹配元素上存儲任意相關數(shù)據(jù) 或 返回匹配的元素集合中的第一個元素的給定名稱的數(shù)據(jù)存儲的值
語法：
.data( key, value )
.data( obj )
參數(shù):
key
類型: String
一個字符串，用戶存儲數(shù)據(jù)的名稱。（譯者注：存儲的數(shù)據(jù)名）
value
類型: Object
新的數(shù)據(jù)值；它可以是任意的Javascript數(shù)據(jù)類型，包括Array 或者 Object。
obj
類型: Object
一個用于更新數(shù)據(jù)的 鍵/值對
最基礎的給一個元素設置不同的值，之后獲取這些值
//存儲數(shù)值
$('body').data('foo',52);
$('body').data('bar',{myType:'test',count:40});
$('body').data({baz:[1,2,3]});
//獲取數(shù)值
$('body').data('foo');//52
$('body').data();//{ foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
從jQuery 1.4.3起， HTML 5 data- 屬性將自動被引用到jQuery的數(shù)據(jù)對象中。
舉個例子, 給定下面的HTML:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
下面所有的 jQuery 代碼都能運行。
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";
6.寫出以下功能對應的 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');
$node.attr('src');
$node.attr('title');
//修改
$node.attr('id','aa');
$node.attr('src','http://xxxx');
$node.attr('title','bbb');
- 給$node 添加自定義屬性data-src
$node.data('src','http://xxxx');
- 在$ct 內(nèi)部最開頭添加元素$node
$ct.prepend($node);
- 在$ct 內(nèi)部最末尾添加元素$node
$ct.append($node);
- 刪除$node
$node.remove()
- 把$ct里內(nèi)容清空
$ct.empty();
- 在$ct 里設置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
- 獲取、設置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)
//不包含內(nèi)邊距
$node.height()
$node.width()
//包括內(nèi)邊距
$node.innerHeight()
$node.innerWidth()
//包括邊框
$node.outerHeight()
$node.outerWidth()
//包括外邊距
$node.outerHeight(true)
$node.outerWidth(true)
- 獲取窗口滾動條垂直滾動距離
$(document).scrollTop();
- 獲取$node 到根節(jié)點水平、垂直偏移距離
$node.offset()
- 修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({
color:'red',
fontSize:'14px'
})
- 遍歷節(jié)點，把每個節(jié)點里面的文本內(nèi)容重復一遍
$('li').each(function(){
$(this).text($(this).text()+$(this).text());
})
- 從$ct 里查找 class 為 .item的子元素
$ct.find('.item');
- 獲取$ct 里面的所有孩子
$ct.children()
- 對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel')
- 獲取選擇元素的數(shù)量
$('div').length
- 獲取當前元素在兄弟中的排行
$("div").click(function () {
var index = $("div").index(this);
});
7.用jQuery實現(xiàn)以下操作
- 當點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色
$btn = $('#button');
$btn.on('click',function(){
$btn.css('background','blue')
});
- 當窗口滾動時，獲取垂直滾動距離
$(document).on('scroll',function(){
var n = $(document).scrollTop();
console.log(n);
});
- 當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變?yōu)榘咨?/li>
var $div = $('div');
$div.on('mouseover',function(){
$(this).css('background','red');
});
$div.on('mouseleave',function(){
$(this).css('background','#fff');
});
- 當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色，當輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮?，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字
var $input = $('input');
$input.on('focusin',function(){
$(this).css('border','1px solid blue');
});
$input.on('focusout',function(){
$(this).css('border','');
console.log($(this).val());
})
$input.on('keydown change',function(){
var value = $(this).val().toUpperCase();
$(this).val(value);
})
- 當選擇 select 后，獲取用戶選擇的內(nèi)容
var $select= $('#select');
$select.on('change',function(){
console.log($(this).val());
});
