題目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