jQuery 中， $(document).ready()是什么意思？

• 等页面文档加载完毕后，执行该函数。

$node.html()和$node.text()的区别?

• $node.html(): 返回该节点下的HTML内容
• $node.text(): 返回该节点下的文本内容（不包含HTML标签）

$.extend 的作用和用法?

• 语法: $.extend([deep,]target[,object1][,objectN])
• 作用:
  • 当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。
  • 如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样我们可以在jQuery的命名空间下添加新的功能。
• 用法:
  demo

jQuery 的链式调用是什么？

• 使用jQuery方法，返回的对象仍旧是本身，可以再次调用jQuery对象的其他方法，实现连续调用多个方法的目的。

jQuery中data函数的作用

• data函数的作用是对选择的元素进行存储与读取数据，数据都是临时的，刷新页面后会消失。
• demo

写出以下功能对应的 jQuery 方法

1. 给元素 $node 添加 class active，给元素 $noed 删除 class active

  $node.addClass('active') //添加class名为active
  $node.removeClass('active') //移除class名为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', value);
$node.attr('src',value);
$node.attr('title',value);

4. 给$node 添加自定义属性data-src

 $node.attr('data-src', value)

5. 在$ct 内部最开头添加元素$node

 $ct.prepend($node);
 $node.prependTo($ct);

6. 在$ct 内部最末尾添加元素$node

$ct.append($node);
$node.appendTo($ct);

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();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度

11. 获取窗口滚动条垂直滚动距离

  $(window).scrollTop();

12. 获取$node 到根节点水平、垂直偏移距离

$node.offset()

13. 修改$node 的样式，字体颜色设置红色，字体大小设置14px

$node.css({'color':'red','font-size':'14px'})

14. 遍历节点，把每个节点里面的文本内容重复一遍

$node.each(function(idx,obj){console.log(idx + '=' + obj.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;
 $node.size();

19. 获取当前元素在兄弟中的排行

 $node.index();

用jQuery实现以下操作

代码预览
代码

用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面

ajax.gif
前端代码
后端模拟