jQuery 常用方法 & ajax
2017-01-01 本文已影响57人
Timmmmmmm
jQuery 常用方法 & ajax
1. jQuery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
-
$(document).ready()方法接受一个函数作为参数，将该函数作为 document 对象 DOMContentLoaded 时间的回调函数。
当 DOM 解析完成后，该函数就执行。且可以写多个，都可以执行。
$(document).ready(fcuntion() {
console.log('success');
});
也可以简写为(直接把函数放在 jQuery 对象里面)：
$(function() {
console.log('success');
});
-
window.onload是当页面全部加载完成后（页面内容、图片等资源）执行。且不能同时写多个，若写多个，只会执行最后一个。
2. $node.html()和$node.text()的区别?
-
$node.html()返回该元素包含的 html 代码 -
$node.text()返回该元素包含的文本
例子：
<p><em>html and text</em></p>
<script>
$('p').html(); // 返回 <em>html and text</em>
$('p').text(); // 返回 html and text
</script>
3. $.extend 的作用和用法?
$.extend() 方法用于将多个对象合并为一个对象
var e1 = { a : 1, b : 2 };
var e2 = { a : 3 };
$.extend(e1, e2);
e1.a; // 3
$.extend() 的另一种用法是生成一个新对象，用来继承原有对象。这时，它的第 1 个参数应该为一个空对象
var e1 = { a : 1, b : 2 };
var e2 = { a : 3 };
var e3 = $.extend( {}, e1, e2 );
e3; // { a: 3, b : 2 }
默认情况下，.extend() 生成的对象是“浅拷贝”，也就是说，如果某个属性是对象或数组，那么只会生成指向这个对象或数组的指针，不会复制值。
如果想要“深拷贝”，可以在 .extend() 的第 1 个参数传入 true (这里不允许设置为 false，因为默认为 fal)
var e1 = { a : [1, 2] };
var e2 = $.extend( {}, e1 );
var e3 = $.extend( true, {}, e1);
e1.a[0] = 3;
e2.a; // [3,2] 浅拷贝
e3.a; // [1,2] 深拷贝
4. jQuery 的链式调用是什么？
jQuery 最方便的一点就是，它的大部分方法返回的都是 jQuery 对象，因此可以链式操作（后一个方法可以紧跟着前一个方法），连续使用 jQuery 方法
$('选择器').方法1(回调函数1).方法2(回调函数2).方法3(回调函数3);
5. jQuery ajax 中缓存怎样控制?
jQuery ajax 方法是利用 cache 参数来控制缓存
true --> 缓存
false --> 不缓存
6. jQuery 中 data 函数的作用
.data() 在匹配元素上存储任意相关数据，允许在 DOM 对象上存储任意类型的数据，避免循环引用的内容泄漏风险
另外：注意这两种方法目前并不提供在 XML 文档上跨平台设置，作为 Internet Explorer 不允许通过自定义属性附加数据。
$('body').data('foo', 52); // 存储数据
$('body').data('foo') // 读取数据
代码
1. 给元素 $node 添加 class active，给元素 $node 删除 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('title1', 'title2');
4. 给 $node 添加自定义属性 data-src
$('.node').attr('data-src', 'xxx');
5. 在 $ct 内部最开头添加元素 $node
$ct.prepend($node);
6. 在 $ct 内部最末尾添加元素 $node
$ct.append($node);
7. 删除 $node
$node.remove();
8. 把 $ct 里内容清空
$ct.empty();
9. 在 $ct 里设置 <div class="btn"></div>
$ct.html('<div class='btn'></div>');
10. 获取、设置 $node 的宽度、高度（分别不包括内边距、包括内边距、包括边框、包括外边距）
$node.width() // content
$node.height()
$node.innerWidth() // content + padding
$node.innerHeight()
$node.outerWidth() // content + padding + border
$node.outerHeight()
$node.outerWidth(true) // content + padding + border + margin
$node.outerHeight(true)
11. 获取窗口滚动条垂直滚动距离
$(window).scrollTop();
12. 获取 $node 到根节点水平、垂直偏移距离
$node.offset()
// 在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档
13. 修改 $node 的样式，字体颜色设置红色，字体大小设置 14px
$node.css( {
'color' : 'red',
'font-size' : '14px'
});
14. 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function() {
$(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
19. 获取当前元素在兄弟中的排行
$node.index()
