一、 jQuery 中， $(document).ready()是什么意思？
为了防止文档在完全加载（就绪）之前运行jQuery代码，如果在文档没有加载之前就运行函数，可能操作失败。必须在文档加载完成后再执行操作，可使用ready事件，作用相当于把js写到body的末尾。
$(document).ready(function() {
//your code here
})
$().ready(function() {
$("p").hide();
})
$(function() {
$('#btn').on('click', function() {
$('p').show();
})
})
二、$node.html()和$node.text()的区别?
- $node.text()
text() 设置或返回所选元素的文本内容。 - $node.html()
html() 设置或返回所选元素的内容（包括 HTML 标记）。
三、$.extend 的作用和用法?
jQuery.extend([deep,] target [, object1 ] [, objectN ] )
- 两个或者多个参数
当提供两个或者多个对象给$.extend(),相当于文件的拷贝。
var obj = {};
var obj1 = {
name: 'christina',
sex: 'male'
};
var obj2 = {
name: 'cttin',
age: 18
}
$.extend(obj, obj1, obj2) // 把obj1和obj2拷贝到obj，同名的将会被obj2覆盖
- 一个参数
如果只提供一个参数，则以为着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。 -
$.extend(src)
将src合并到jQuery的全局对象中。
$.extend({
hello:function(){alert('hello');}
});
-
$.fn.extend(src)
该方法将src合并到jQuery的实例对象中。
$.fn.extend({
hello:function(){alert('hello');}
});
- 第一个参数
[deep,]代表是否进行深拷贝。
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
深拷贝
var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);
浅拷贝
四、 jQuery 的链式调用是什么？
使用jQuery方法时对象方法返回的是对象本身，可以继续调用此对象的其他方法，实现连续调用多个方法。
$('#btn').on('click', function() {
$('.main').fadeIn('slow').animate({height: '100px'}, 500);
})
五、jQuery 中 data 函数的作用
jQuery.data()允许我们在DOM元素上附加任意类型的数据，避免了循环引用的内存泄漏风险。
-
jQuery.data(element, key, value)
存储任意数据到指定的元素,返回设置的值。 -
jQuery.data( element, key )
返回用jQuery.data(element, name, value)储存在元素上的相应名字的数据，或者元素上完整的数据存储。 -
$().data(key)、$().data()
从jQuery对象上读数据。
六、写出以下功能对应的 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('src');
$node.attr('title');
// 修改
$node.attr('id', 'wrap');
$node.attr('src', 'https://github.com');
$node.attr('title', 'welcome');
- 给$node 添加自定义属性data-src
$node.attr('data-src', wrap);
- 在$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 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width(); // content
$node.height(); // content
$node.innerWidth(); // content+padding
$node.innerHeight(); // content+padding
$node.outWidth(); // content+padding+border
$node.outHeight(); // content+padding+border
$node.outWidth(true); // content+padding+border+margin
$node.outHeight(true); // content+padding+border+margin
- 获取窗口滚动条垂直滚动距离
$(window).scrollTop();
- 获取$node 到根节点水平、垂直偏移距离
$node.offset();
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({'color': 'red'; 'font-size': '14px'})
- 遍历节点，把每个节点里面的文本内容重复一遍
$.each(function () {
console.log($(this).text());
})
- 从$ct 里查找 class 为 .item的子元素
$ct.find('.item');
- 获取$ct 里面的所有孩子
$ct.children();
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parent('.ct').find('.panel');
- 获取选择元素的数量
$node.length;
- 获取当前元素在兄弟中的排行
$(this).index();
七、用jQuery实现以下操作：
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
- 当窗口滚动时，获取垂直滚动距离
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
- 当选择 select 后，获取用户选择的内容
DEMO
八、用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览
这个之前已经写过，参见代码二
