1. jQuery 中， $(document).ready()是什么意思？
等价于$(handler),一般使用$(handler)；
意思是当DOM加载完毕，就指定一个函数来执行；
当我们需要把js放到body前面时就需要加上这个方法
类似但不同于load事件，当执行的代码需要元素被加载完成之后才能执行时，就需要使用load事件。
2. $node.html()和$node.text()的区别?
$node.html():获取集合中第一个匹配元素的HTML内容
$node.text():得到匹配元素集合中每个元素的合并文本，包括他们的后代
黑体部分为上述二者的区别
$node.html(str):设置每一个匹配元素的html内容
$node.text(str):设置匹配元素集合中每个元素的文本内容为指定的文本内容。
3. $.extend 的作用和用法?
完整写法：jQuery.extend( [deep ], target, object1 [, objectN ] )
当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数），deep是指深拷贝
在第一个参数默认情况下，obj1和obj2不采用递归的方式合并到target中，即如果有相同的属性obj2会覆盖obj1；
在第一个参数为true时，obj1和obj2采用递归的方式合并到target中，即如果有相同的属性obj2会把obj1给兼并
4.jQuery 的链式调用是什么？
$('ct').css('background-color','blue').fadeIn(300).fadeOut(300);
5.jQuery 中 data 函数的作用
.data( key, value ):在匹配元素上存储任意相关数据.
$("body").data("foo", 52);
$("body").data(); //{foo:52}
.data( key ):返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 通过.data(name, value)或HTML5 data-* 属性设置
alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar
返回前缀为data-属性的值
<div data-role="page"></div>
$("div").data("role") === "page";
6.
给元素 $node 添加 class active，给元素 $node 删除 class active
$node.addClass('active').remove('active')
展示元素$node, 隐藏元素$node
$node.show()
$node.hide()
$node.fadeIn()
$node.fadeOut()
$node.sildeDown()
$node.slideUp()
获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr({'id': 'hello', 'src':'jirengu.com', 'title':'world'})
给$node 添加自定义属性data-src
$node.data("src",str)
在$ct 内部最开头添加元素$node
$ct.prepend($node)
$node.prependTo($ct)
在$ct 内部最末尾添加元素$node
$ct.append($node)
$node.appendTo($ct)
删除$node
$ct.remove($node)
$ct.detach($node)
把$ct里内容清空
$ct.empty()
在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width(); //不包括内边距宽度,仅包括内容
$node.height(); //不包括内边距高度,仅包括内容
$node.innerWidth(); //包括内容和内边距宽度
$node.innerHeight(); //包括内容和内边距高度
$node.outerWidth(); //包括内容,内边距,边框宽度
$node.outerHeight(); //包括内容,内边距,边框高度
$node.outerHeight(true); //包括内容,内边距,边框,外边距高度
$node.outerWidth(true); //包括内容,内边距,边框,外边距宽度
获取窗口滚动条垂直滚动距离
$(window).scrollTop()
获取$node 到根节点水平、垂直偏移距离
$node.offset()
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({'color': 'red','font-size': 14px })
遍历节点，把每个节点里面的文本内容重复一遍
$('#ct p').each(function(){
var text = $(this).text()
$(this).append(text)
})
从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
获取$ct 里面的所有孩子
$(".ct").children()
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
获取选择元素的数量
$node.length;
$node.size();
获取当前元素在兄弟中的排行
$ct.index($node)
7.
效果
8.
<!DOCTYPE html>
<html>
<head>
<title>jQueryAjax
</title>
</head>
<style type="text/css">
ul,li{
margin: 0;
padding: 0;
}
li:hover{
background-color: #6ff;
color: #fff;
}
.btn{
display:block;
margin: 10px auto;
text-decoration: none;
color: #fff;
background: #6ea;
width: 100px;
padding: 10px;
line-height: 30px;
font-size: 18px;
text-align: center;
}
#ct>li{
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
}
</style>
<body>
<ul id="ct">
<li>
内容1
</li>
<li>
内容2
</li>
</ul>
<a class="btn" href="#" id="load-more">
加载更多
</a>
<script src="./jquery-3.2.0.min.js"></script>
<script type="text/javascript">
var pageIndex = 3
var isDataArrive = true
$('.btn').on('click', function(e){
e.preventDefault()
if(!isDataArrive) return;
console.log(pageIndex)
$.ajax({
type: 'get',
url: '/loadMore',
dataType: 'json',
data: {
index: pageIndex,
length: 5
}
}).done(function(ret){
if (ret.status === 0){
pageIndex += 5
$('#ct').append(appendHtml(ret.data));
isDataArrive = true
}else{
alert('数据错误')
}
}).fail(function(){
alert('系统异常')
})
isDataArrive = false
})
function appendHtml(text){
var htmls = ''
for(i = 0; i<text.length; i++){
htmls += '<li>'+text[i]+'</li>'
}
return htmls
}
</script>
</body>
</html>
router.js
app.get('/loadMore', function(req, res){
var curIdx = req.query.index
var len = req.query.length
var text = []
for(var i =0; i<len; i++){
text.push('内容' + (parseInt(curIdx) + i) )
}
setTimeout(function(){
res.send({
data: text,
status: 0
});
},3000)
});
