题目1： jQuery 中， $(document).ready()是什么意思？
$(document).ready()方法：为防止DOM解析完成之前运行Jquery代码，若在DOM解析完成前就运行函数，操作可能失败。必须在DOM解析完成完后执行操作，可使用ready事件，作用相当于把js写到body末尾。
$(document).ready()写法：
$(document).redy(function(){})-
$(function(){})
以上两种写法是等价的
题目2： $node.html()和$node.text()的区别?
$node.html()，返回所选择元素内的html内容，包含html标签和文本内容。
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容。
题目3： $.extend 的作用和用法?
作用：将两个或更多对象的内容合并到第一个对象。
用法：jQuery.extend( [deep ], target, object1 [, objectN ] )
-
deep
类型: Boolean
默认情况下是false，如果是true，合并成为递归（又叫做深拷贝）。 -
target
类型: Object
对象扩展。这将接收新的属性。 -
object1
类型: Object
一个对象，它包含额外的属性合并到第一个参数。 -
objectN
类型: Object
包含额外的属性合并到第一个参数
一个简单的例子：
/*定义一个对象*/
var obj={
name:'jrg',
age:27,
sex:'woman'
};
/*定义一个新对象*/
var newObj={
name:'wjt',
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链式调用：在对象上一次性调动多个方法，例如：
$(this).addClass("active").siblings().removeClass("active");
因为大部分对象方法的最后是return this，所以有了链式调用，简易代码。
题目5： jQuery 中 data 函数的作用
.data() 方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。
console.log($("#k-box").data("bkk")); //undefined
$("#k-box").data("bkk","word"); //设置bkk为word
console.log($("#k-box").data("bkk")); //word
$("#k-box").removeData("bkk"); //移除bkk设置的值
console.log($("#k-box").data("bkk")); //undefined
$("#v-box").data("test",{first:0,last:28}); //给存储名为test的对象存储内容{first:0,last:28}
console.log($("#v-box").data("test").first); //0
console.log($("#v-box").data("test").last); //28
console.log($("#v-box").data("test")); //{first: 0, last: 28}
$("#v-box").removeData("test"); //移除test设置的内容
console.log($("#v-box").data("test")); //undefined
题目6：写出以下功能对应的 jQuery 方法：
-
给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active');//给元素 $node 添加 class active
$node.removeClass('active');//给元素 $noed 删除 class active -
展示元素$node, 隐藏元素$node
$node.show();//展示元素$node
$node.hide();//隐藏元素$node -
获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr('id');//获取元素$node 的 属性 id
$node.attr('id','修改id值');//修改元素$node 的 id 值
$node.attr('src');//获取元素$node 的 属性 src
$node.attr('src','修改src值');//修改元素$node 的 src 值
$node.attr('title');//获取元素$node 的 属性 title
$node.attr('title','修改title值');//修改元素$node 的 title 值 -
给$node 添加自定义属性data-src
$node.data('data-src','自定义属性值'); -
在$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 的宽度（不包括内边距）
$node.height();//获取$node 的高度（不包括内边距）
$node.width('10px');//设置$node 的宽度（不包括内边距）
$node.height('10px');//设置$node 的高度（不包括内边距）$node.innerWidth();//获取$node 的宽度（包括内边距）
$node.innerHeight();//获取$node 的高度（包括内边距）
$node.innerWidth('10px');//设置$node 的宽度（包括内边距）
$node.innerHeight('10px');//设置$node 的高度（包括内边距）$node.outerWidth();//获取$node 的宽度（包括边框）
$node.outerHeight();//获取$node 的高度（包括边框）
$node.outerWidth('10px');//设置$node 的宽度（包括边框）
$node.outerHeight('10px');//设置$node 的高度（包括边框）$node.outerWidth(true);//获取$node 的宽度（包括边框）
$node.outerHeight(true);//获取$node 的高度（包括边框）
$node.outerWidth('10px',true);//设置$node 的宽度（包括外边距）
$node.outerHeight('10px',true);//设置$node 的高度（包括外边距） -
获取窗口滚动条垂直滚动距离
$(window).scrollTop(); -
获取$node 到根节点水平、垂直偏移距离
$node.offset().left
$node.offset().top -
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({"color": "red","font-size": "14px"}) -
遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(){
$(this).text($(this).text() + $(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 的背景色变为红色再变为蓝色
- 当窗口滚动时，获取垂直滚动距离
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
- 当选择 select 后，获取用户选择的内容
代码链接
题目8： 用 jQuery ajax 实现如下效果。当点击加载更多会加载数据展示到页面 效果预览
效果截图1
效果截图2
网友评论