jQuery 常用方法 & ajax

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() 返回该元素包含的文本

例子：

  
html and text
  

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 里设置

  $ct.html('
');

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()

task26-2 预览
task26-3 预览-已测试通过