問答

1.Jquery 中， $(document).ready()是什么意思？和window.onload 的區別？ 還有其他什么寫法或者替代方法？

• $(document).ready()
• 等到HTML結構繪制完畢后就立即執行，不必等到圖片等所有資源加載完畢。
• 可以簡寫$(function(){})
• window.onload
• 必須等到當前頁面中包括圖片在內的所有元素全部加載完畢后才會執行。
• 如果有多個.onload，后面的會覆蓋前面的。

2.$node.html()和$node.text()的區別?

• .html()方法獲取該元素集合中第一個元素包含的html代碼（html標簽和文本）。.html(string)提供參數就可以設置html。
• .text()方法獲取所有匹配元素包含的文本集合。.text(string)提供參數就可以設置文本。
  如下：

      <p><span>這是一個段落</span></p>
      <p><span>這是一個段落2</span></p>

      //.html()和.text()獲取結果如下
      $('p').html()  //獲取的是第一個p中的html "<span>這是一個段落</span>"
      $('p').text()  // 獲取的是兩個p的文本集合 "這是一個段落這是一個段落2"
      $('p').html('<em>你好</em>')  //<p><em>你好</em></p>
      $('p').text('哈嘍')          //<p>哈嘍</p>

3.$.extend 的作用和用法?

$.extend( [deep ], target, object1 [, objectN ] )將兩個或更多對象的內容合并到第一個對象。
deep ：如果是true，合并成為遞歸（又叫做深拷貝）。
target：目標對象。如果我們想保留原對象，我們可以通過傳遞一個空對象作為目標對象。
object1：合并的第一個參數。
objectN ：合并的n個參數。

var d1 = {
        1:a,
        name:{height:10,width:20},
        2:b
      };
var d2 = {
        name:{width:25},
        3:c
      };

      $.extend(d1,d2); //{1:a,name:{width:25},2:b,3:c}

      //深拷貝
      $.extend(true,d1,d2); //{1:a,name:{height:10,width:25},2:b,3:c} 

      $.extend({},d1,d2); //合并 d1 和 d2 對象，并且不修改 d1 對象。

4.JQuery 的鏈式調用是什么？

• 鏈式操作就是分步驟地對jQuery對象實現各種操作

$("#Test").css('color','red').show(200).removeClass('style');

• 鏈式調用有助于簡化代碼的編寫工作，并在某種程度上可以讓代碼更加簡潔、易讀。

5.JQuery ajax 中緩存怎樣控制?

jQuery ajax方法中是利用cache參數來控制緩存。

• 如果設置為 false ，瀏覽器將不緩存此頁面（默認為true，但是datatype為script和jsonp時默認為false。）
• 每次發布的時候都可以加個后綴?t=1`每發布一次就改了序號

<script src="abc.js?t=1"></script>

6.jquery 中 data 函數的作用

.data( key, value )在匹配元素上存儲任意相關數據。
.data( key )返回匹配的元素集合中的第一個元素存儲的值。

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

代碼

1.給元素 $node 添加 class active，給元素 $noed 刪除 class active

$node.addClass('active')
$node.removerClass('active')

2.展示元素$node, 隱藏元素$node

$node.show()
$node.hide()

3.獲取元素$node 的 屬性: id、src、title， 修改以上屬性

$node.attr('id')
$node.attr('src')
$node.attr('title','title2')

4.給$node 添加自定義屬性data-src

$('.node').attr('data-src','abc.png')

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()//不包括內邊距寬度僅包括內容
$node.height()//不包括內邊距寬度僅包括內容
$node.innerWidth()//包括內容和內邊距寬度
$node.innerHeight()//包括內容和內邊距高度
$node.outerWidth()//包括內容和內邊距邊框寬度
$node.outerHeight()//包括內容和內邊距邊框高度
$node.outerWidth(ture)//包括內容和內邊距邊框外邊距寬度
$node.outerHeight(ture)//包括內容和內邊距邊框外邊距高度

11.獲取窗口滾動條垂直滾動距離

$(window).scrollTop()
$(window).scrollTop == 0 //頂端

12.獲取$node 到根節點水平、垂直偏移距離

$node.offset() //在匹配的元素集合中，獲取的第一個元素的當前坐標，坐標相對于文檔。

13.修改$node 的樣式，字體顏色設置紅色，字體大小設置14px

$node.css({
  'color':'red',
  'fot-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().find('.ct').find('.panel');

18..獲取選擇元素的數量

$node.length;

19.獲取當前元素在兄弟中的排行

$node.index();

task26-2預覽
task26-2預覽