題目1： jQuery 中， $(document).ready()是什么意思？
當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來執(zhí)行。傳遞處理函數(shù)給.ready()方法，能保證DOM準(zhǔn)備好后就執(zhí)行這個(gè)函數(shù).
題目2： $node.html()和$node.text()的區(qū)別?
$node.html()，返回所選擇元素內(nèi)的html內(nèi)容，包含html標(biāo)簽和文本內(nèi)容
$node.text()，返回所選擇元素內(nèi)的文本內(nèi)容，不包含html標(biāo)簽，只包含文本內(nèi)容
題目3.$.extend 的作用和用法?
jQuery.extend( target [, object1 ] [, objectN ] )
var object = $.extend({}, object1, object2);//object1 和object2里的屬性和值會(huì)合并到｛｝這個(gè)空對象中。當(dāng)然空對象可以是任何對象。這種方法不會(huì)修改obj1的值，常用于插件開發(fā)。
目標(biāo)對象（第一個(gè)參數(shù)）將被修改，并且將通過$.extend()返回。然而，如果我們想保留原對象，我們可以通過傳遞一個(gè)空對象作為目標(biāo)對象：
深拷貝：
題目4.JQuery 的鏈?zhǔn)秸{(diào)用是什么？
$(#ct).css('color','blue').show(400).hide();
題目5.jquery 中 data 函數(shù)的作用?
在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù).
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script>
</body>
</html>
此時(shí)頁面展示為：
The values stored were 16 and pizza!
題目6：
寫出以下功能對應(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('id’,'值'); //修改
$node.attr('src');//獲取
$node.attr('src’,'值');//修改
$node.attr('title');//獲取
$node.attr('title’,'值');//修改
給$node 添加自定義屬性data-src
$node.attr('data-src', ' ');
在$ct 內(nè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)邊距、包括邊框、包括外邊距)
無參數(shù)獲得寬度，高度
有參數(shù)設(shè)置寬度，高度
$node.width(); // width
$node.height(); // height
$node.innerWidth(); // width+ padding
$node.innerHeight(); // height+ padding
$node.outerWidth(); // width+ padding + border
$node.outerHeight(); // height + padding + border
$node.outWidth(true); // width ＋ padding + border + margin
$node.outHeight(true); // height + padding + border + margin
獲取窗口滾動(dòng)條垂直滾動(dòng)距離
$(window).scrollTop();
獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
$node.offset();
修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px
$node.css({'color' : 'red', 'font-size' : '14px' });
遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
$.each(function(){
console.log($(this).text());
})
從$ct 里查找 class 為 .item的子元素
$ct.find('.item');
獲取$ct 里面的所有孩子
$ct.children();
對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parent('.ct').find('.panel');
獲取選擇元素的數(shù)量
$node.parent('.ct').find('.panel');
獲取當(dāng)前元素在兄弟中的排行
$(this).index();
題目7：
用jQuery實(shí)現(xiàn)以下操作
當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離
當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?br>
當(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)展示輸入框里的文字
當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
題目8： 用 jQuery ajax 實(shí)現(xiàn)如下效果。`當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁面效果預(yù)覽57
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>server-mock使用說明</title>
<style>
.container{
width: 900px;
margin: 0 auto;
}
ul,li,p,a {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
border: 1px solid #CCC;
padding: 10px;
margin-bottom: 10px;
text-align: left;
cursor: pointer;
}
li:hover {
background-color: #228C4C;
}
#loadmore {
display: inline-block;
border: 1px solid #E27272;
border-radius: 3px;
padding: 10px;
color: #E27272;
}
.main {
text-align: center;
}
.bcgcolor {
background: #008000;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<ul id="ct">
</ul>
<a href="#" id="loadmore">加載更多</a>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script>
var $loadmore=$('#loadmore'),
$ct=$('#ct'),
pageIndex=0
$loadmore.on('click',function(){
var lock=false;
$.ajax({
type: "GET",
url: "/loadmore",
data:{
index:pageIndex,
length:5
},
dataType: "JSON",
success:function(ret){
if (!lock) {
for(i=0;i<ret.length;i++){
var li=$('<li></li>')
li.text(ret[i])
$ct.append(li)
}
pageIndex=pageIndex+5
lock=true; //當(dāng)數(shù)據(jù)來臨完畢的時(shí)候，再設(shè)為true，下次用戶點(diǎn)擊時(shí)正常
/*
var fragment=document.createDocumentFragment()
for(i=0;i<ret.length;i++){
var node=document.createElement('li')
node.innerText=ret[i]
fragment.appendChild(node);
}
$ct.append(fragment)
pageIndex=pageIndex+5
lock=true; //當(dāng)數(shù)據(jù)來臨完畢的時(shí)候，再設(shè)為true，下次用戶點(diǎn)擊時(shí)正常。
*/
}else{
return
}
},
error:function(){
alert('出錯(cuò)了')
}
});
})
</script>
</body>
</html>
/**
* 頁面路由，從模板渲染頁面渲染頁面,
* htttp://localhost:8080/user
* 支持 ejs, jade 模板
*/
app.get('/loadmore', function(req, res) {
var getIndex=req.query.index
var len=req.query.length
var data=[]
for(var i=0;i<len;i++){
data.push('內(nèi)容'+(parseInt(getIndex)+i))
}
res.send(data);
});
