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