题目1： jQuery 中， $(document).ready()是什么意思？
ready()函数用于文档进入ready状态时执行代码。
当DOM完全加载（例如HTML被完全解析DOM树构建完成时），jquery才允许执行代码。
window.onload除了要等待DOM被创建还要等图片音频，视频等在内的所有资源被加载。图片和视频的加载会浪费大量的时间，用户会感觉到页面加载过慢有延迟。
Jquery ready()函数只对DOM树的等待，无需等待外部资源的加载，执行起来更快，用户体验更好
网页加载的顺序为：
1.解析HTML结构
2.加载外部脚本和样式文件
3.解析并执行脚本代码
4.构造HTML DOM结构// jquery 的ready函数在此步完成
5.加载图片等外部文件
6 页面加载文件//window的load函数在此步骤完成
<script>
window.onload=function(){
console.log("onload");
}
$(document).ready(function(){
console.log("$(document).ready");
})
</script>
</head>
<body>
</body>
结果显示为：
image.png
代码地址为：http://js.jirengu.com/fohehexecu/1/edit?html,console,output
总结：一般的开发中会推荐时用jquery 的ready（）方法，因为此方法不必等到图片或者视频等外部资源加载完成后才执行，只需等到DOM构造完成。
而如果功能必须等到外部资源全部加载完成才能实现功能，就只能使用load来实现了。
题目2： $node.html()和$node.text()的区别?
html获取的不仅仅是文本，还有标签等
text获取的仅仅是文本
body>
<div class="wrapper">
<div class="box">
this is a box
</div>
</div>
<script>
console.log($('.wrapper').html());
console.log($('.wrapper').text());
</script>
image.png
代码地址：
http://js.jirengu.com/luzafiqora/1/edit?html,console,output
题目3： $.extend 的作用和用法?
$.extend是将两个或者更多的对象的内容合并到第一个对象
参数形式1：jQuery.extend( target [, object1 ] [, objectN ] )
会将所有的对象拷贝到target对象中，target对象会发生变化。（例1显示）
如果想保留住原来的对象，可以传递一个空对象作为目标对象。（例题2显示）
//例1
var obj1={a:1,b:2};
var obj2={c:3};
$.extend(obj1,obj2);
console.log("obj1:",obj1);
var obj3={a:1,b:2};
var obj4={a:1,b:2,c:{a:1,b:3}};
$.extend(obj3,obj4);
console.log("obj3:",obj3);
obj4.c.b=100;//当obj4发生变化的时候，obj3中的拷贝的内容也会发生变化。
console.log("obj3 changed:",obj3);
image.png
//例2
var obj5={a:1,b:2};
var obj6={a:1,b:2,c:{a:1,b:3}};
//用一个{}作为第一个参数。obj5没有发生变化，产生了一个新对象b
var b= $.extend({},obj5,obj6);
console.log("obj3:",obj5);
console.log("对象b:",b);
obj6.c.a=888;//改变obj6中c的值
console.log("对象b:",b);
image.png
总结从例1和例题2中看出浅拷贝，当遇到对象嵌套多层的时候，浅拷贝的target会出现，当objectN变化的时候，target也会发生变化。
参数形式2：jQuery.extend( [deep ], target, object1 [, objectN ] )
当deep是true时，进行深拷贝
代码：
var obj7={a:1,b:2};
var obj8={a:1,b:2,c:{a:1,b:3}};
$.extend(true,obj7,obj8);
console.log("obj7:",obj7);
obj8.c.a=888;//改变obj8中c对象a的值
console.log("obj7:",obj7);
image.png
总结 以上是深拷贝，当拷贝的对象中的内容发生变化的时候，不影响被拷贝的对象。
http://js.jirengu.com/yuyuvumexo/1/edit?html,console,output
题目4： jQuery 的链式调用是什么？
像这样的$(‘#id’).show().hide().show().hide().show().hide();
原理是方法中返回的都是同一个对象。
题目5： jQuery 中 data 函数的作用
.data( key, value )
描述: 在匹配元素上存储任意相关数据.
代码
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
题目6：写出以下功能对应的 jQuery 方法：
给元素 $node 添加 class active，给元素 $noed 删除 class active
$("ele").addClass("active");
$("ele").removeClass("active");
展示元素$node, 隐藏元素$node
$("ele").show();
$("ele").hide();
获取元素$node 的 属性: id、src、title， 修改以上属性
获取属性 $("ele").attr("id")
$("ele").attr("src")
$("ele").attr("title")
修改属性
$("ele").attr("id","wrapper")
$node.attr("src","http://...")
$node.attr("title","yesjsd...")
给$node 添加自定义属性data-src
$("ele").data('data-src','value');
在$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 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
不包括内边距的宽度是：$("ele").width();//就是宽度为元素content的大小
包括内边距的宽度是：$("ele").innerWidth()//包含padding和content的
包括边框的宽度是：$("ele").outWidth()//包含border的宽度，padding和content
包括外边距的宽度是：$('ele').outWidth(true)//包含margin，border，padding，content的
不包括内边距的高度是：$("ele").height();//就是宽度为元素content的大小
包括内边距的高度是：$("ele").innerHeight()//包含padding和content的
包括边框的高度是：$("ele").outerHeight()//包含border的宽度，padding和content
包括外边距的高度是：$('ele').outerHeight(true)//包含margin，border，padding，content的
获取窗口滚动条垂直滚动距离
$('window').scrollTop();
获取$node 到根节点水平、垂直偏移距离
$('elem').offset().left 水平偏移距离
$('elem').offset().top 垂直偏移距离
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$('elem').css({"color":"red";"font-size":"14px"})
遍历节点，把每个节点里面的文本内容重复一遍
$("li").each(function(){
console.log($(this).text());
})
从$ct 里查找 class 为 .item的子元素
$("ct").find(".item")
获取$ct 里面的所有孩子
$("ct").children();
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$('node').parents(".ct").find('.panel');
获取选择元素的数量
$('ele').length
获取当前元素在兄弟中的排行
$('ele').index();
题目7：
用jQuery实现以下操作
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
当窗口滚动时，获取垂直滚动距离
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
当选择 select 后，获取用户选择的内容
代码地址：https://jsbin.com/vojawijeri/edit?html,js,output
总结一点是：animate（）方法对于css的颜色设置如background等不起作用。
题目8： 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content{
margin-bottom: 5px;
}
.content>div{
border:1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
font-size: 15px;
color: #241f1f;
}
.content>div:hover{
background-color: blanchedalmond;
cursor: pointer;
}
.button{
text-align: center;
}
.button a{
width: 80px;
display:inline-block;
padding:10px;
text-decoration: none;
background-color: crimson;
color: #fff;
font-size: 14px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
</div>
</div>
<div class="button">
<a href="javascript:void(0)">加载更多</a>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var content=$(".content");
var pageindex=0;
var length=5;
$(".button").on('click',function(){
$.ajax({
method:'get',
url:'/news',
data:{ index1:pageindex,len:length}
}).done(function(msg){
console.log(msg);
show(msg);
pageindex+=5;
}).fail(function(){
console.log("信息发送失误");
});
});
function show(msg){
for(var i=0;i<msg.length;i++)
{var box=$('<div></div>');
box.text(msg[i]);
$(".content").append(box);
}
}
</script>
</body>
</html>
后台代码：
app.get("/news",function (req,res) {
var f1=req.query.index1;
var length=req.query.len;
var data=[];
console.log(f1,length);
for(var i=1;i<=length;i++)
{ var newNum=i+parseInt(f1);
var news="新闻"+newNum;
console.log(news);
data.push(news);
}
res.send(data);
});
ScreenGif.gif
网友评论