1， jQuery 中溪窒， $(document).ready()是什么意思？
通常我們都會強調(diào)冯勉，一定要把JS寫在代碼最后澈蚌，以便等所有內(nèi)容加載完成在渲染，使得不會出現(xiàn)報錯灼狰。但是有一種辦法可以不用這么安排宛瞄。
這里補充一下：*window.onload*這樣做雖然不用特意將JS文件放到代碼最后，但是如果頁面圖片的加載元素過多也會使得整個頁面加載時間拖得很久交胚，這是弊端
- 在原生JS中：
<html>
<head>
<meta charset="utf-8">
<title>jquerytest2</title>
<script type="text/javascript">
window.onload = function(){
//解析到script標簽時還沒有body份汗，但是window只要開始就存在，所有這里改為window
</script>
</head>
<body>
<script type="text/javascript">
document.body.onload = function(){
//把所有的js都放在這個函數(shù)中蝴簇，等到所有HTML加載完成才會執(zhí)行而不會報錯
}
</script>
- 在jQuery中：
<html>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
$(document).ready(function(){
//把所有的js都放在這個函數(shù)中杯活，等到所有HTML加載完成才會執(zhí)行而不會報錯
})
<head>
</head>
</html>
- 簡化版也可以這樣寫：
<html>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
$(function(){
//把所有的js都放在這個函數(shù)中，等到所有HTML加載完成才會執(zhí)行而不會報錯
})
<head>
</head>
</html>
原生onload與JS下ready的區(qū)別：
-
JS：ready:
在大多數(shù)情況下熬词，只要DOM結(jié)構(gòu)已完全加載時旁钧，腳本就可以運行吸重。傳遞處理函數(shù)給.ready()方法，能保證DOM準備好后就執(zhí)行這個函數(shù)歪今，因此嚎幸，這里是進行所有其它事件綁定及運行其它 jQuery 代碼的最佳地方。 -
原生onload:
當頁面呈現(xiàn)時用來執(zhí)行這個事件彤委，直到所有的東西鞭铆，如圖像已被完全接收前，此事件不會被觸發(fā)焦影。
如果執(zhí)行的代碼需要在元素被加載之后才能使用時车遂，（例如，取得圖片的大小需要在圖片被加載完后才能知道）斯辰，就需要將這樣的代碼放到 load 事件中舶担。
2， $node.html()和$node.text()的區(qū)別?
- $node.html()彬呻，返回所選擇元素內(nèi)的html內(nèi)容衣陶，包含html標簽和文本內(nèi)容
- $node.text()，返回所選擇元素內(nèi)的文本內(nèi)容闸氮，不包含html標簽剪况，只包含文本內(nèi)容
<body>
<div id="ct">
<div class="box"></div>
<button class="btn1">隱藏</button>
<button class="btn2">展示</button>
</div>
</body>
$node.html()具體解釋
$node.text()具體解釋
3，$.extend 的作用和用法?
extend作用：
$.extend(目標對象蒲跨，先對象译断，后對象，...)
后對象中有的屬性替換先對象的屬性值或悲，沒有的屬性仍然使用先對象的屬性值孙咪。
用法：
- $.extend(obj,obj1)
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
var obj={};
var obj1 = {
name: 'harrisking',
age: '23',
sex: 'man'
};
$.extend(obj,obj1); //obj={ name: 'harrisking', age: '23', sex: 'man'}
- $.extend(obj,obj1,obj2)
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
var obj={};
var obj1 = {
name: 'harrisking',
age: '23',
sex: 'man'
};
var obj2 = {
name: 'marry',
sex: 'woman'
};
$.extend(obj,obj1,obj2); //obj={ name: 'marry', age: '23', sex: 'woman'}
- var opts = $.extend({ },obj1,obj2)
//extend非常常用的用法：
function getMessage(obj){
var defult = {
name: '佚名',
age: '未知',
sex: '中性'
}
var ops = {};
var opts = $.extend({}, defult, obj)
//也可以$.extend(opts, defult, obj);
console.log(opts);
}
getMessage();
- extend(true, obj, obj1)
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
var obj={};
var obj1 = {
name: 'harrisking',
age: '23',
sex: 'man',
friend:[1,2,3]
};
$.extend(obj,obj1);
console.log(obj);
</script>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
var obj={};
var obj1 = {
name: 'harrisking',
age: '23',
sex: 'man',
friend:[1,2,3]
};
$.extend(true,obj,obj1);
console.log(obj);
</script>
4， jQuery 的鏈式調(diào)用是什么巡语？
jQuery鏈式調(diào)用：在對象上一次性調(diào)動多個方法
$(this).addClass("active").siblings().removeClass("active")
因為大部分對象方法的最后是return this翎蹈，所以有了鏈式調(diào)用，簡易代碼男公。
5荤堪， jQuery 中 data 函數(shù)的作用
用于在匹配元素上存儲數(shù)據(jù)。
6理澎，JQuery ajax 中緩存怎樣控制?
cache (默認 : true, dataType 為 "script" 和 "jsonp" 時默認為 false)
如果設置為 false 逞力，瀏覽器將不緩存此頁面。注意: 設置cache
為 false將在 HEAD和GET請求中正常工作糠爬。它的工作原理是在GET請求參數(shù)中附加"_={timestamp}"（加上時間戳）
7寇荧，寫出以下功能對應的 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('tittle')
修改：
$node.attr('id','ct1')
$node.attr('src','http://a.har.com')
- 給$node 添加自定義屬性data-src
$node.attr('data-src','whatever')
- 在$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>')
//但是這樣將會清空掉原來的內(nèi)容
- 獲取峦嗤、設置$node 的寬度蕊唐、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距烁设、包括邊框替梨、包括外邊距)
不包括內(nèi)邊距、外邊距装黑、邊框：
$node.width()
$node.height()
包括內(nèi)邊距副瀑，不包括外邊距、邊框：
$node.innerWidth()
$node.innerHeight()
包括內(nèi)邊距恋谭、邊框糠睡，不包括外邊距：
$node.outerWidth()
$node.outerHeight()
包括內(nèi)邊距、外邊距疚颊、邊框：
$node.outerWidth(true)
$node.outerHeight(true)
- 獲取窗口滾動條垂直滾動距離
$(window).scrollTop()
- 獲取$node 到根節(jié)點水平狈孔、垂直偏移距離
$node.offset()
- 修改$node 的樣式，字體顏色設置紅色材义，字體大小設置14px
$node.css({'color':'red','font-size':'14px'})
- 遍歷節(jié)點均抽，把每個節(jié)點里面的文本內(nèi)容重復一遍
$node.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ù)量
$node.length
- 獲取當前元素在兄弟中的排行
$node.index()
8到忽，完成如下要求：
- 用jQuery實現(xiàn)以下操作當點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色
- 當窗口滾動時清寇，獲取垂直滾動距離
- 當鼠標放置到$div 上，把$div 背景色改為紅色护蝶，移出鼠標背景色變?yōu)榘咨?/li>
- 當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色华烟，當輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮懀斴斎肟蚴ソ裹c時去掉邊框藍色持灰，控制臺展示輸入框里的文字
- 當選擇 select 后盔夜，獲取用戶選擇的內(nèi)容
網(wǎng)頁效果預覽
9，完成如下頁面 效果預覽9
HTML端：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery任務二</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
.cot li{
border: 1px solid #ccc;
height:40px;
list-style: none;
margin: 10px 0;
line-height: 40px;
padding-left: 10px;
}
.btn{
display: inline-block;
width: 80px;
height:30px;
border:1px solid red;
color:red;
text-align: center;
line-height: 30px;
border-radius: 5px;
cursor: pointer;
position: absolute;
left:50%;
margin-left: -40px;
}
.btn:hover{
background: red;
color: white;
}
</style>
</head>
<body>
<ul class="cot">
<li>內(nèi)容1</li>
<li>內(nèi)容2</li>
</ul>
<a class="btn">加載更多</a>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$('.cot').on('mouseenter','li',function(){
$(this).css({
background: 'green',
color: 'white'
})
});
$('.cot').on('mouseleave','li',function(){
$(this).css({
background: 'white',
color: 'black'
})
});
var index = 1
$('.btn').on('click',function(){
$.ajax({
url: '/loading',
method: 'get',
data:{
len:3,
start:index
}
}).done(function(result){
appendHtml(result);
index++;
}).fail(function(){
console.log('error')
})
function appendHtml(info){
var html = "";
html += '<li>'+"內(nèi)容"+info.array[0]+'</li>',
html += '<li>'+"內(nèi)容"+info.array[1]+'</li>',
html += '<li>'+"內(nèi)容"+info.array[2]+'</li>',
$('.cot').append(html);
}
})
</script>
</body>
</html>
后臺端：
app.get('/loading', function(req, res) {
var loadDate = req.query.len*req.query.start;
var array=[loadDate,loadDate+1,loadDate+2]
res.send({
status: 0,
array
});
});
10堤魁，實現(xiàn)一個天氣預報頁面喂链，前端展示自由發(fā)揮，數(shù)據(jù)接口: http://api.jirengu.com/weather.php
(選做題目)
