1. jQuery 中， $(document).ready()是什么意思？
当DOM准备就绪时，指定一个函数来执行里面的代码。
与load事件要在页面所有内容加载完后才执行不同，read事件只要在DOM结构完全加载后，就可以执行。
$(document).ready(function(){
});
可简写为:
$(function(){
})
2. $node.html()和$node.text()的区别?
$node.html()：选取的是指定节点的html内容包括文本内容和标签
$node.text()：选取的是指定节点的text内容只有文本内容
3. $.extend 的作用和用法?
作用：
- 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
- 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的
用法：
//目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：
var object = $.extend({}, object1, object2);
//如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。
//如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。
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 );
4. jQuery 的链式调用是什么？
jQuery链式调用：在对象上一次性调动多个方法
$(this).addClass("active").siblings().removeClass("active")
$(#ct).css('color','blue').show(400).hide();
因为大部分对象方法的最后是return this，所以有了链式调用，简易代码。
5. jQuery 中 data 函数的作用
data函数可以读取html标签中的data-xxx自定义属性,并且为标签对象储存各种自定义属性
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
//获取属性
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
//设置属性
$( "div" ).data( "role","newPage" )
6. 写出以下功能对应的 jQuery 方法：
给元素 $node 添加 class active，给元素 $node 删除 class active
$node.addClass('active');
$node.removeClass('active');
展示元素$node, 隐藏元素$node
$node.show();
$node.hide();
获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr('id');
$node.sttr('src');
$node.sttr('title');
$node.attr('id','1');
$node.sttr('src','2');
$node.sttr('title','3');
给$node 添加自定义属性data-src
$node.attr('data-src','123');
在$ct 内部最开头添加元素$node
$ct.prepend('node');
在$ct 内部最末尾添加元素$node
$ct.append('node');
删除$node
$node.remove();
把$ct里内容清空
$ct.html('');
在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>');
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
//不包括内边距
$node.height(); //读取高度
$node.width(); //读取宽度
$node.height('50px'); //设置高度
$node.width('50px'); //设置宽度
//包括内边距
$node.innerHeight(); //读取高度
$node.innerWidth(); //读取宽度
$node.innerHeight( '50px' ); //设置高度
$node.innerHeight( '50px' ); //设置高度
//包括边框
$node.outerHeight(); //读取高度
$node.outerwidth(); //读取宽度
$node.outerHeight('50px'); //设置高度
$node.outerwidth('50px'); //设置宽度
//包括外边距
$node.outerHeight(true); //读取高度
$node.outerwidth(true); //读取宽度
获取窗口滚动条垂直滚动距离
$node..scrollTop();
获取$node 到根节点水平、垂直偏移距离
$node.offset();
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({'color':'red','font-size':'14px'});
遍历节点，把每个节点里面的文本内容重复一遍
$element.each(function(){
var $this = $(this);
$this.text($this.text()+$this.text());
});
从$ct 里查找 class 为 .item的子元素
$ct.children('.item');
获取$ct 里面的所有孩子
$ct.children();
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel');
获取选择元素的数量
$('div').length;
获取当前元素在兄弟中的排行
$node.index();
7. 用jQuery实现以下操作
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
var $btn = $('.btn');
$btn.on('click',function(){
$btn.css("background":"red");
setTimeout(function(){
$btn.css("background":"blue");
},1000);
});
当窗口滚动时，获取垂直滚动距离
$(document).on('scroll',function(){
var distance = $(document).scrollTop();
console.log(distance);
});
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
var $div = $('div');
$div.on('mouseover',function(){
$div.css("background":"red");
});
$div.on('mouseleave',function(){
$div.css("background":"white");
});
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
<style>
.border{
border-color:blue;
}
</style>
<input type="text" id="int">
<script>
var $int = $('#int');
$int.on('focus',function(){
$(this).addClass("border");
}).on('keyup',function(){
$(this).val($(this).val().toUppercase());
}).on('blur',function(){
$(this).removeClass("border");
console.log($(this).val());
})
</script>
当选择 select 后，获取用户选择的内容
var $select = $('#select');
$select.on('change',function(){
console.log($(this).val());
})
8 用 jQuery ajax 实现如下效果。当点击加载更多会加载数据展示到页面
客户端：
<!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>内容1</li>
<li>内容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>'+"内容"+info.array[0]+'</li>',
html += '<li>'+"内容"+info.array[1]+'</li>',
html += '<li>'+"内容"+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
});
});
