1. jQuery 中， $(document).ready()是什么意思？
为了防止文档在完全加载（就绪）之前运行jQuery代码，如果在文档没有加载之前就运行函数，可能操作失败。必须在文档加载完成后再执行操作，可使用ready事件，作用相当于把js写到body的末尾。
$(document).ready(function() {
//do something
})
$().ready(function() {
//do something
})
$(function() {
//do something
})
2. $node.html()和$node.text()的区别?
$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容
3. $.extend 的作用和用法?
$.extend方法用于将多个对象合并进第一个对象。
var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
$.extend(o1,o2);
o1.p1 // "c"
$.extend的另一种用法是生成一个新对象，用来继承原有对象。这时，它的第一个参数应该是一个空对象。
var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
var o = $.extend({},o1,o2);
o
// Object {p1: "c", p2: "b"}
默认情况下，extend方法生成的对象是“浅拷贝”，也就是说，如果某个属性是对象或数组，那么只会生成指向这个对象或数组的指针，而不会复制值。如果想要“深拷贝”，可以在extend方法的第一个参数传入布尔值true。
var o1 = {p1:['a','b']};
var o2 = $.extend({},o1);
var o3 = $.extend(true,{},o1);
o1.p1[0]='c';
o2.p1 // ["c", "b"]
o3.p1 // ["a", "b"]
4. jQuery 的链式调用是什么？
使用jQuery方法时对象方法返回的是对象本身，可以继续调用此对象的其他方法，实现连续调用多个方法。
$('#btn').on('click', function() {
$('.main').fadeIn('slow').animate({height: '100px'}, 500);
})
5. jQuery 中 data 函数的作用
类似于html5中的data-属性，用来方便用户给标签绑定数据，jquery的data函数用于在当前jquery对象所匹配的所有元素上存取数据，data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。如果需要移除用removeData()方法。用法：可以传入两个参数，分别是key和value，或者传入一个object。需要注意是当读取数据时只以第一个匹配元素为准。
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('src');
$node.attr('title');
// 修改
$node.attr('id', 'wrap');
$node.attr('src', 'https://github.com');
$node.attr('title', 'welcome');
4.给$node 添加自定义属性data-src
$node.attr('data-src', wrap);
5.在$ct 内部最开头添加元素$node
$ct.prepend($node);
6.在$ct 内部最末尾添加元素$node
$ct.append($node);
7.删除$node
$node.remove()
8.把$ct里内容清空
$ct.empty();
9.在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
10.获取、设置$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
11.获取窗口滚动条垂直滚动距离
$(window).scrollTop();
12.获取$node 到根节点水平、垂直偏移距离
$node.offset();
13.修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({'color': 'red'; 'font-size': '14px'})
14.遍历节点，把每个节点里面的文本内容重复一遍
$.each(function () {
console.log($(this).text());
})
15.从$ct 里查找 class 为 .item的子元素
$ct.find('.item');
16.获取$ct 里面的所有孩子
$ct.children();
17.对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parent('.ct').find('.panel');
18.获取选择元素的数量
$node.length;
19.获取当前元素在兄弟中的排行
$(this).index();
网友评论