jQuery动画与ajax
题目1： jQuery 中， $(document).ready()是什么意思？
当DOM准备就绪时，指定一个函数来执行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数.
题目2： $node.html()和$node.text()的区别?
$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容
题目3.$.extend 的作用和用法?
jQuery.extend( target [, object1 ] [, objectN ] )
var object = $.extend({}, object1, object2);//object1 和object2里的属性和值会合并到｛｝这个空对象中。当然空对象可以是任何对象。这种方法不会修改obj1的值，常用于插件开发。
目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：
深拷贝：
Paste_Image.png
题目4.JQuery 的链式调用是什么？
$(#ct).css('color','blue').show(400).hide();
题目5.jquery 中 data 函数的作用?
在匹配元素上存储任意相关数据.
<!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>
此时页面展示为：
The values stored were 16 and pizza!
题目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('id’,'值'); //修改
$node.attr('src');//获取
$node.attr('src’,'值');//修改
$node.attr('title');//获取
$node.attr('title’,'值');//修改
给$node 添加自定义属性data-src
$node.attr('data-src', ' ');
在$ct 内部最开头添加元素$node
$ct.prepend($node);
在$ct 内部最末尾添加元素$node
$ct.append($node)
删除$node
$node.remove();
把$ct里内容清空
$ct.empty();
在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>');
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
无参数获得宽度，高度
有参数设置宽度，高度
$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
获取窗口滚动条垂直滚动距离
$(window).scrollTop();
获取$node 到根节点水平、垂直偏移距离
$node.offset();
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({'color' : 'red', 'font-size' : '14px' });
遍历节点，把每个节点里面的文本内容重复一遍
$.each(function(){
console.log($(this).text());
})
从$ct 里查找 class 为 .item的子元素
$ct.find('.item');
获取$ct 里面的所有孩子
$ct.children();
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parent('.ct').find('.panel');
获取选择元素的数量
$node.parent('.ct').find('.panel');
获取当前元素在兄弟中的排行
$(this).index();
题目7：
用jQuery实现以下操作
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
当窗口滚动时，获取垂直滚动距离
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
当选择 select 后，获取用户选择的内容
题目8： 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览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; //当数据来临完毕的时候，再设为true，下次用户点击时正常
/*
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; //当数据来临完毕的时候，再设为true，下次用户点击时正常。
*/
}else{
return
}
},
error:function(){
alert('出错了')
}
});
})
</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('内容'+(parseInt(getIndex)+i))
}
res.send(data);
});
Paste_Image.png
