jQuery-ajax

题目1： jQuery 中， $(document).ready()是什么意思？

$(document).ready()：当DOM加载完后执行js。也可以编写多个。简写为(function(){})。

题目2： $node.html()和$node.text()的区别?

.html() 是返回或设置所选元素的内容包括HTML标记。

.text() 是返回或设置所选元素的文本内容。

相当于原生js中的.innerHtml() 和 .innerText()

题目3：$.extend 的作用和用法?

作用：将多个对象合并到第一个对象上。

用法：

3.png

题目4： jQuery 的链式调用是什么？

使用jQuery方法时，对象的方法返回的是对象的本身，因此能接着使用本对象的其他jQuery方法，这就是链式调用。链式调用可以提高代码效率，使代码更优雅。如：

$div.slideDown().fadeOut();

题目5： jQuery 中 data 函数的作用

作用：对js对象或DOM对象的额外属性做一个集中管理，来避免内存泄漏。

$.data(ele, name, data)是对ele元素附加数据
$().data(key, value),$().data(obj)是为jQuery对象中的所有DOM对象分别附加数据
$().data(key),$().data()从jQuery对象上读数据

题目6：

• 写出以下功能对应的 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', '值');
  $node.attr('src', '值');
  $node.attr('title', '值');
  

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

  $node.data('src','值');
  

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

  $ct.prepend('$node');
  

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

  $ct.appdend('$node');
  

  • 删除$node

  $node.remove();
  

  • 把$ct里内容清空

  $ct.empty();
  

  • 在$ct里设置 html <div class="btn">>/div>

  $ct.html('<div class="btn"></div>');
  

  • 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

  不包括内边距：
  获取$node 的宽度:$node.width();
  获取$node 的高度:$node.height();
  设置$node 的宽度:$node.width('值');
  设置$node 的高度:$node.height('值');
  包括内边距：
  获取$node 的宽度:$node.innerWidth();
  获取$node 的高度:$node.innerHeight();
  设置$node 的宽度:$node.innerWidth('值');
  设置$node 的高度:$node.innerHeight('值');
  包括边框：
  获取$node 的宽度:$node.OuterWidth();
  获取$node 的高度:$node.OuterHeight();
  设置$node 的宽度:$node.OuterWidth('值');
  设置$node 的高度:$node.OuterHeight('值');
  包括外边框：
  获取$node 的宽度:$node.OuterWidth(true);
  获取$node 的高度:$node.OuterHeight(true);
  设置$node 的宽度:$node.OuterWidth('值',true);
  设置$node 的高度:$node.OuterHeight('值',true);
  

  • 获取窗口滚动条垂直滚动距离

  $(window).scrollTop();
  

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

  $node.offset();
  

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

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

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

  $node.each(function(){
    console.log($(this).text());
  })
  

  • 从$ct 里查找 class 为 .item的子元素

  $ct.find('.item');
  

  • 获取$ct 里面的所有孩子

  $ct.children();
  ```  ​
  - 对于`$node`，向上找到 class 为'`.ct`'的父亲，在从该父亲找到'`.panel`'的孩子
  

  $node.parents('.ct').find('.panel');

  - 获取选择元素的数量
  

  $node.length;
  $node.size();

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

  $node.index();

题目7：

• 用jQuery实现以下操作

  • 当点击$btn时，让$btn的背景色变为红色再变为蓝色
  • 当窗口滚动时，获取垂直滚动距离
  • 当鼠标放置到$div上，把$div 背景色改为红色，移出鼠标背景色变为白色
  • 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
  • 当选择 select 后，获取用户选择的内容
    预览
    代码
    (用到jQuery-UI的部分知识)
    题目8： 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览9

代码

8.png