題目1： jQuery 中果复， $(document).ready()是什么意思虽抄？
- ready( handler )
當(dāng)DOM準(zhǔn)備就緒時，指定一個函數(shù)來執(zhí)行私植。
雖然JavaScript提供了load事件兵琳，當(dāng)頁面呈現(xiàn)時用來執(zhí)行這個事件骇径，直到所有的東西破衔，如圖像已被完全接收前晰筛，此事件不會被觸發(fā)。
在大多數(shù)情況下曙博，只要DOM結(jié)構(gòu)已完全加載時父泳，腳本就可以運行吴汪。傳遞處理函數(shù)給.ready()方法漾橙，能保證DOM準(zhǔn)備好后就執(zhí)行這個函數(shù)霜运，因此蒋腮，這里是進行所有其它事件綁定及運行其它 jQuery 代碼的最佳地方徽惋。
如果執(zhí)行的代碼需要在元素被加載之后才能使用時险绘，（例如誉碴，取得圖片的大小需要在圖片被加載完后才能知道）黔帕，就需要將這樣的代碼放到 load 事件中成黄。
下面兩種語法全部是等價的：
$(document).ready(handler)
$(handler)
我們經(jīng)常這么使用
$(function(){
console.log('ready');
});
題目2：$node.html()和$node.text()的區(qū)別?
- html([string])
這是一個讀寫兩用的方法奋岁，用于獲取/修改元素的innerHTML
當(dāng)沒有傳遞參數(shù)的時候，返回元素的innerHTML
當(dāng)傳遞了一個string參數(shù)的時候滨攻，修改元素的innerHTML為參數(shù)值
看個例子
$('div').html()
$('div').html('123')
后續(xù)這種讀寫兩用的方法很多光绕，原理都類似
如果結(jié)果是多個進行賦值操作的時候會給每個結(jié)果都賦值
如果結(jié)果多個诞帐，獲取值的時候爆雹，返回結(jié)果集中的第一個對象的相應(yīng)值
- text()
和html方法類似顶别，操作的是DOM的innerText值
題目3： $.extend 的作用和用法?
jQuery.extend([deep,] target [, object1 ] [, objectN ] )
1.當(dāng)我們提供兩個或多個對象給$.extend()驯绎，對象的所有屬性都添加到目標(biāo)對象（target參數(shù)）剩失。
2.如果只有一個參數(shù)提供給$.extend()，這意味著目標(biāo)參數(shù)被省略脾歧。在這種情況下鞭执，jQuery對象本身被默認(rèn)為目標(biāo)對象芒粹。這樣化漆，我們可以在jQuery的命名空間下添加新的功能。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時是很有用的
目標(biāo)對象（第一個參數(shù)）將被修改座云，并且將通過$.extend()返回朦拖。然而贞谓，如果我們想保留原對象裸弦，我們可以通過傳遞一個空對象作為目標(biāo)對象：
var object = $.extend({}, object1, object2);
在默認(rèn)情況下，通過$.extend()合并操作不是遞歸的;
如果第一個對象的屬性本身是一個對象或數(shù)組理疙，那么它將完全用第二個對象相同的key重寫一個屬性晕城。這些值不會被合并，而是被覆蓋窖贤。如果將 true作為該函數(shù)的第一個參數(shù)砖顷，那么會在對象上進行遞歸的合并。
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );//f返回Object1 {apple: 0, banana: {price：200}, cherry: 97, durian: 100}赃梧，banana屬性被object2覆蓋滤蝠。
題目4： jQuery 的鏈?zhǔn)秸{(diào)用是什么除盏？
鏈?zhǔn)秸{(diào)用實例：
$("#mybtn").css("width","100px")
.css("height","100px")
.css("background","red");
鏈?zhǔn)秸{(diào)用就是jQuery對象使用方法后繼續(xù)調(diào)用方法苇瓣，而不用再次選擇jQuery對象只锭。
原理：實際上鏈?zhǔn)讲僮鲀H僅是通過對象上的方法最后 return this 把對象再返回回來探膊，對象當(dāng)然可以繼續(xù)調(diào)用方法般眉。
優(yōu)點：
1.當(dāng)然是省代碼啦吨娜，雖然jQuery對象選擇比DOM對象要方便很多问拘，但是，能省一行是一行压鉴，能省一句是一句崖咨，并且排版清晰，代碼優(yōu)雅油吭。
2.鏈?zhǔn)讲僮髯钪档梅Q贊的還是其解決了異步編程模型的執(zhí)行流程不清晰的問題击蹲。jQuery中$(document).ready就非常好的闡釋了這一理念。DOMCotentLoaded是一個事件婉宰，在DOM并未加載前际邻，jQuery的大部分操作都不會奏效，但jQuery的設(shè)計者并沒有把他當(dāng)成事件一樣來處理芍阎，而是轉(zhuǎn)成一種“選其對象世曾，對其操作”的思路。$選擇了document對象谴咸，ready是其方法進行操作轮听。這樣子流程問題就非常清晰了，在鏈條越后位置的方法就越后執(zhí)行岭佳。
題目5： jQuery 中 data 函數(shù)的作用
data()函數(shù)用于在當(dāng)前jQuery對象所匹配的所有元素上存取數(shù)據(jù)血巍。
通過data()函數(shù)存取的數(shù)據(jù)都是臨時數(shù)據(jù)，一旦頁面刷新珊随，之前存放的數(shù)據(jù)都將不復(fù)存在述寡。該函數(shù)屬于jQuery對象(實例)。如果需要移除通過data()
函數(shù)存放的數(shù)據(jù)叶洞，請使用removeData()函數(shù)鲫凶。
data()函數(shù)有以下兩種用法：
- 用法一：
jQueryObject.data( [ key [, value ] ])
以指定的鍵名key存取數(shù)據(jù)。如果指定了value參數(shù)衩辟，則表示以鍵名key存放值為value的數(shù)據(jù)螟炫；如果沒有指定value參數(shù)，則表示讀取之前以鍵名key存放的數(shù)據(jù)艺晴；如果沒有指定任何參數(shù)昼钻，則以對象形式返回之前存儲的所有數(shù)據(jù)。
- 用法二：
jQueryObject.data( object )
以對象形式同時傳入任意多個key-value形式的數(shù)據(jù)封寞，對象的每個屬性就是鍵名key然评，屬性值就是value。
注意：data()函數(shù)的所有"存儲數(shù)據(jù)"操作針對當(dāng)前jQuery對象所匹配的每一個元素狈究；所有"讀取數(shù)據(jù)"操作只針對第一個匹配的元素碗淌。
返回值
data()函數(shù)的返回值是任意類型，返回值的類型取決于當(dāng)前data()函數(shù)執(zhí)行的是"存儲數(shù)據(jù)"操作還是"讀取數(shù)據(jù)"操作。
如果data()函數(shù)執(zhí)行的是"存儲數(shù)據(jù)"操作贯莺，則返回當(dāng)前jQuery對象本身；如果是"讀取數(shù)據(jù)"操作宁改，則返回讀取到的數(shù)據(jù)缕探。
如果當(dāng)前jQuery對象匹配多個元素，讀取數(shù)據(jù)時还蹲，data()函數(shù)只以其中第一個匹配的元素為準(zhǔn)爹耗。
如果執(zhí)行data(key)函數(shù)(僅傳入一個參數(shù)key)時找不到相應(yīng)的數(shù)據(jù)，則返回undefined谜喊。如果執(zhí)行data()函數(shù)(不帶任何參數(shù))時找不到相應(yīng)的數(shù)據(jù)潭兽，則返回一個空的對象(沒有任何屬性)。
題目6：寫出以下功能對應(yīng)的 jQuery 方法：
給元素 $node 添加 class active
$node.addClass( "active" );給元素 $noed 刪除 class active
$node.removeClass( "active" );展示元素$node, 隱藏元素$node
$node.show();$node.hide();獲取元素$node 的 屬性: id斗遏、src山卦、title， 修改以上屬性
$node.attr('src');$node.attr('id','value');
$node.attr('id');$node.attr('src','value');
$node.attr('title');$node.attr('title','value');給$node 添加自定義屬性data-src
在$ct 內(nèi)部最開頭添加元素$node
$node.prepend('content')在$ct 內(nèi)部最末尾添加元素$node
$node.append('content')刪除$node
$node.remove把$ct里內(nèi)容清空
$node.empty()在$ct 里設(shè)置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')獲取诵次、設(shè)置$node 的寬度账蓉、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距逾一、包括邊框铸本、包括外邊距)
$node.width()和$node.height()//content的寬和高
$node.innerWidth()和$node.innerHeight()//content，padding的寬和高
$node.outerWidth()和$node.outerHeight;//content,padding,border的寬和高
$node.outerWidth(true)和$node.outerHeight(true);//content,padding,border,margin的寬和高獲取窗口滾動條垂直滾動距離
$node.scrollTop()獲取$node 到根節(jié)點水平遵堵、垂直偏移距離
$node.offset().left;
$node.offset().top;修改$node 的樣式箱玷，字體顏色設(shè)置紅色，字體大小設(shè)置14px
$node.css({
color:red,
font-size:14px,
})遍歷節(jié)點陌宿，把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
$node.each(function(){
$(this).text($(this)+$(this))
})從$ct 里查找 class 為 .item的子元素
$ct.find('.item')獲取$ct 里面的所有孩子
$ct.children()對于$node锡足，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parent('.ct').children('.panel')獲取選擇元素的數(shù)量
$node.length()獲取當(dāng)前元素在兄弟中的排行
$node.index()
題目7：用jQuery實現(xiàn)以下操作
- 當(dāng)點擊$btn 時壳坪，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
當(dāng)窗口滾動時舱污，獲取垂直滾動距離
當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色弥虐，移出鼠標(biāo)背景色變?yōu)榘咨?/p>
當(dāng)鼠標(biāo)激活 input 輸入框時讓輸入框邊框變?yōu)樗{(lán)色扩灯，當(dāng)輸入框內(nèi)容改變時- 把輸入框里的文字小寫變?yōu)榇髮懀?dāng)輸入框失去焦點時去掉邊框藍(lán)色霜瘪，控制臺展示輸入框里的文字
當(dāng)選擇 select 后珠插，獲取用戶選擇的內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
height: 900px;
background-color: #999;
font-size: 24px;
}
div{
margin: 30px auto;
padding: 30px;
width: 500px;
background-color: #ddd;
text-align: center;
}
#btn{
width: 90px;
height: 40px;
font-size: 18px;
line-height: 20px;
background-color: orange;
color: white;
border-radius: 3px;
border:none;
}
#input{
width: 200px;
height: 40px;
padding: 0 10px;
border-radius: 3px;
}
#select{
padding: 0 10px;
margin-bottom: 20px;
width: 120px;
height: 40px;
font-size: 24px;
border-radius: 3px;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<div>
<button id="btn">點一下</button>
</div>
<div>垂直滾動距離<span class="scroll">0</span>px</div>
<div class="bk"></div>
<div>
<input id="input" type="text" name="" placeholder="在這里輸入">
</div>
<div>
<label name="你的愛車">dreamcar</label>
<select id="select" name="你的愛車">
<option value="奔馳">奔馳</option>
<option value="寶馬">寶馬</option>
<option value="奧迪">奧迪</option>
</select>
<h2></h2>
</div>
<script type="text/javascript">
//當(dāng)點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
$('#btn').on('click',function(){
$('#btn').css("background-color", "red")
setTimeout(function() {
$('#btn').css("background-color","blue")
}, 1000)
})
//當(dāng)窗口滾動時颖对，獲取垂直滾動距離
$(window).on('scroll', function() {
$('.scroll').text( $(window).scrollTop() )
})
//當(dāng)鼠標(biāo)放置到$div 上捻撑，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?$('.bk').on('mouseenter',function(){
$('.bk').css("background-color","red")
})
$('.bk').on('mouseout',function(){
$('.bk').css("background-color","#eee")
})
//當(dāng)鼠標(biāo)激活 input 輸入框時讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮懝嘶迹?dāng)輸入框失去焦點時去掉邊框藍(lán)色番捂，控制臺展示輸入框里的文字
$('#input').on('focus',function(){
$('#input').css("border-color","blue")
})
$('#input').on('keyup',function(){
$('#input').val($('#input').val().toUpperCase())
})
$('#input').on('blur',function(){
$('#input').css("border","none")
console.log($('#input').val())
})
//當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
$('#select').on('change',function(){
console.log($('#select').val())
$('h2').text("你的dreamcar是"+$('#select').val())
})
</script>
</body>
</html>
題目8： 用 jQuery ajax 實現(xiàn)如下效果江解。`當(dāng)點擊加載更多會加載數(shù)據(jù)展示到頁面效果預(yù)覽345
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加載新聞</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ol,ul{list-style: none;}
ul > li{
margin:10px;
border:1px solid #eee;
padding: 10px;
font-size: 20px;
}
ul > li:hover{
background-color: green;
color: white;
}
button{
display: block;
margin: 40px auto;
padding: 15px;
font-size: 24px;
color: white;
background-color: orange;
border-radius: 3px;
border:none;
cursor: pointer;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<ul>
<li>新聞0</li>
<li>新聞1</li>
</ul>
<button>加載更多新聞</button>
<script type="text/javascript">
var isLoading = false
$('button').on('click',function(e){
e.preventDefault();
if (isLoading) {
return ;
}
isLoading = true;
$.ajax({
url:'http://localhost:8080/getNews?',
method:'get',
data:{length:5,
index:$('li').last().index()
}
}).done(function(data){
append(data)
isLoading = false;
})
.fail(function(jqXHR, textStatus){
console.log(textStatus);
})
console.log(data)
})
function append(arr){
arr.forEach(function(e,i,arr){
var $xxx = $('<li></li>')
$xxx.text(arr[i]).appendTo($('ul'))
})
}
</script>
</body>
</html>
router.js
router.get('/getNews', function(req, res) {
var length = req.query.length // 通過 req.query獲取請求參數(shù)
var index = parseInt(req.query.index) // 通過 req.query獲取請求參數(shù)
var result = []
console.log(typeof(index))
console.log(index)
for(var i = 0;i < length ;i++){
result.push("新聞"+(index+i+1))
}
res.send(result)
})
題目9(選做)： 實現(xiàn)一個天氣預(yù)報頁面设预，UI 如下圖所示(可自由發(fā)揮)。數(shù)據(jù)接口:
獲取當(dāng)前用戶所在城市接口：//jirenguapi.applinzi.com/city.php
服務(wù)端支持 CORS 跨域調(diào)用犁河，前端可直接使用 ajax 獲取數(shù)據(jù)
獲取某城市對應(yīng)的天氣接口：//jirenguapi.applinzi.com/weather.php?city=北京
服務(wù)端支持 CORS 跨域調(diào)用鳖枕，前端可直接使用 ajax 獲取數(shù)據(jù), 如果不傳遞參數(shù)默認(rèn)獲取當(dāng)前用戶所在城市的天氣
