题目1： jQuery 中， $(document).ready()是什么意思？
- $(document).ready():当DOM加载完成后执行该函数；
- window.onload:当页面加载完成后执行该函数(页面内容、图片、外部资源)
$(document).ready(function(){
});
可简写为:
$(function(){
})
题目2： $node.html()和$node.text()的区别?
- $node.html():返回该节点下的html内容(包括html标签)。
- $node.text()：返回该节点下的文本内容(不包括html标签)
```
#题目3： $.extend 的作用和用法?
```
$.extend()将多个对象合并到一起，可以传入多个参数。
//定义一个对象
var obj={
name:'lulu',
age:27,
sex:'woman'
};
//定义一个新对象
var newObj={
name:'xuxu',
age:20
};
//extend方法接受多个参数,并且第一个对象被覆盖
$.extend(obj,newObj,{
name:'maomao',
age:25,
like:'eat'
});
console.log(obj);
//object{
//age:25,
//like:"eat",
//name:"maomao",
//sex:"woman"
//
}
```
#题目4： jQuery 的链式调用是什么？
```
Query链式调用：在对象上一次性调动多个方法
$(this).addClass("active").siblings().removeClass("active")
$(#ct).css('color','blue').show(400).hide();
因为大部分对象方法的最后是return this，所以有了链式调用，简易代码。
```
#题目5： jQuery 中 data 函数的作用
```
从div元素储存然后找回一个值
<!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.data("src",str)
```
在$ct 内部最开头添加元素$node
```
$(".ct").prepend(node);
```
在$ct 内部最末尾添加元素$node
```
$(".ct").append(node);
```
删除$node
```
$(node).remove();
```
把$ct里内容清空
```
$node.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"})
```
遍历节点，把每个节点里面的文本内容重复一遍
```
$node.each(function(){
console.log($(this).text())
})
```
从$ct 里查找 class 为 .item的子元素
```
$(".ct").find(".item")
```
获取$ct 里面的所有孩子
```
$(".ct").children()
```
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
```
$node.parents(".ct").find(".panel")
```
获取选择元素的数量
```
$node.length;
```
获取当前元素在兄弟中的排行
```
$node.index();
```
#题目7：用jQuery实现以下操作
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
当窗口滚动时，获取垂直滚动距离
```
$(document).on("scroll",function(){
console.log($(this).scrollTop());
});
```
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
```
$(".btn").on("mouseover",function(){
$(this).css("background-color","red");
});
$(".btn").on("mouseout",function(){
$(this).css("background-color","");
})
```
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
```
$("input").on("focus",function(){
$(this).css("border","1px solid blue");
});
$("input").on("change",function(){
$(this).val($(this).val().toUpperCase());
});
$("input").on("blur",function(){
$(this).css("border","");
if($(this).val()!=""){
console.log($(this).val());
}
});
```
当选择 select 后，获取用户选择的内容
#8 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面
[效果](http://jrgzuoye.applinzi.com/作业安排/jscode/JS9-jqueryajax/1.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>内容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
});
});
```
网友评论