题目1： jQuery 中， $(document).ready()是什么意思？
$(document).ready()方法：为防止文档在完全加载（就绪）之前运行Jquery代码。若在文档未完全加载前就运行函数，操作可能失败。必须在文档加载完后执行操作，可使用ready事件，作用相当于把js写到body末尾。
$(document).ready(function(){
});
可简写为:
$(function(){
})
window.onload：必须等网页中所有的元素全部加载完毕，才能执行
不能同时写多个，否则后面覆盖前面。
**题目2： $node.html()和$node.text()的区别? **
$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容
**题目3： $.extend 的作用和用法? **
$.extend()将多个对象合并到一起，可以传入多个参数。$.extend([deep,] target,…)[deep,]为布尔值默认情况不是深拷贝，可设置true为深拷贝。
//定义一个对象
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 的链式调用是什么？
当jQuery的方法的返回值仍为当前对象时可以继续调用该对象的方法，这样就形成一种链式调用。
$(#ct).css('color','blue').show(400).hide();
**题目5： jQuery 中 data 函数的作用? **
第一种用法：
.data(key,value)：在匹配元素上存储任意相关数据
$("div").data("people",{age:16,sex:"男"});
console.log( $("div").data("people").age ); //16
第二种用法：
.data(key):返回匹配元素集合中的第一个元素给定成名的数据存储的值，通过.data(name,value)或HTML 5 data-*属性（着重）的设置。
<div data-role="page" data-last-value="43" data-hidden="true" ></div>
下面通过data()函数获取里面的值
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
以上代码的第二条语句正确是表述了该元素的data-last-value属性。 如果没有传递key参数的数据存储， jQuery将在元素的属性中搜索， 将驼峰式字符串转化为中横线字符串，然后在结果前面加上data-。 所以，该字符串lastValue将被转换为data-last-value。
**题目6： **
写出以下功能对应的 jQuery 方法：
1、给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active');//添加
$node.removeClass('active');//删除
2、展示元素$node, 隐藏元素$node
$node.show();//展示
$node.hide();//隐藏
3、获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr('id');//获取
$node.attr('id’,'值'); //修改
$node.attr('src');//获取
$node.attr('src’,'值');//修改
$node.attr('title');//获取
$node.attr('title’,'值');//修改
4、给$node 添加自定义属性data-src
$node.data("src",str)
5、在$ct 内部最开头添加元素$node
$(".ct").prepend(node);
6、在$ct 内部最末尾添加元素$node
$(".ct").append(node);
7、删除$node
$(node).remove();
8、把$ct里内容清空
$node.empty();
**9、在$ct 里设置 html <div class="btn"></div> **
$ct.html('<div class="btn"></div>')
10、获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度
11、获取窗口滚动条垂直滚动距离
$(window).scrollTop()
12、获取$node 到根节点水平、垂直偏移距离
$node.offset()
13、修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({"color":"red","font-size":"14px"})
14、遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(){
console.log($(this).text())
})
15、从$ct 里查找 class 为 .item的子元素
$(".ct").find(".item")
16、获取$ct 里面的所有孩子
$(".ct").children()
17、对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents(".ct").find(".panel")
18、获取选择元素的数量
$node.length;
$node.size();
19、获取当前元素在兄弟中的排行
$node.index();
**题目7： **
用jQuery实现以下操作
1、当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
$("#div1 .btn").on("click",function(){
$(this).css("background-color","red");
setTimeout(function(){
$("#div1 .btn").css("background-color","blue");
},500);
});
2、当窗口滚动时，获取垂直滚动距离
$(document).on("scroll",function(){
console.log($(this).scrollTop());
});
3、当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
$(".btn").on("mouseover",function(){
$(this).css("background-color","red");
});
$(".btn").on("mouseout",function(){
$(this).css("background-color","");
});
4、当鼠标激活 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());
}
});
5、当选择 select 后，获取用户选择的内容
$("#div5 .good").on("change",function(){
//console.log($(this).val());
$("#div5 span").text($(".good option:selected").text());
});
**题目8： 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览4 **
代码
本地mock成功
2.png
网友评论