本教程版權歸小圓和饑人谷所有，轉載須說明來源
問答
1. Jquery 中， $(document).ready()是什么意思？和window.onload 的區別？ 還有其他什么寫法或者替代方法？
$(document).ready()：當 DOM（文檔對象模型） 已經加載，并且頁面（包括圖像）已經完全呈現時，會發生 ready 事件。由于該事件在文檔就緒后發生，因此把所有其他的 jQuery 事件和函數置于該事件中是非常好的做法。
區別：
$(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢?？梢酝瑫r編寫多個，并且都可以得到執行。有簡寫方法。
window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。不能同時編寫多個，如果有多個window.onload方法，只會執行一個 。沒有簡寫方法。
其他寫法：
以下均為$(document).ready()的簡寫方法。
$().ready(function(){
//do something...
})
$(function(){
//do something...
})
2. $node.html()和$node.text()的區別?
$node.html():取得第一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔。
$node.text():取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效。
3. $.extend 的作用和用法?
$.extend用一個或多個其他對象來擴展一個對象，返回被擴展的對象。
用法：
$.extend(dest,src1,src2,src3...);
它的含義是將src1,src2,src3...合并到dest中,返回值為合并后的dest,由此可以看出該方法合并后，是修改了dest的結構的。如果想要得到合并的結果卻又不想修改dest的結構，可以如下使用：
var newSrc=$.extend({},src1,src2,src3...)//也就是將"{}"作為dest參數。
這樣就可以將src1,src2,src3...進行合并，然后將合并結果返回給newSrc了。
3、
$.extend(boolean,dest,src1,src2,src3...)
第一個參數boolean代表是否進行深度拷貝，其余參數和前面介紹的一致
4. JQuery 的鏈式調用是什么？
鏈式調用就是分步驟地對jQuery對象實現各種操作。它的原理在于每一步的jQuery操作，返回的都是一個jQuery對象，所以不同操作可以連在一起。例如：
$("#Test").css('color','red').show(200).removeClass('style');
上面的例子就是鏈式操作，在一行代碼里，對id為Test的對象進行了三項操作：先設置其字體顏色為紅色，再顯示對象，最后移除對象的“style”這個樣式。
5. JQuery ajax 中緩存怎樣控制?
如果沒有進行額外設置的話，如果請求的地址和參數及參數的值完全一樣，就會發生jquery ajax使用緩存的情況。
jquery ajax禁用緩存的解決方案：
- 在請求的url后面加上一個隨機參數（***.do?random=Math.random）這不失為一個好方法，缺點就是在所有的jquery ajax請求的地方都要加上這個隨機參數，新項目還行，老項目的話，這是個巨大的工作量。
- 給jquery ajax請求設置禁用緩存的全局設置我們都知道在jquery ajax的的方法中有個cache參數，如果設置為false，那么就不進行緩存。用ajaxSetup() 方法，該方法可以為所有的ajax請求統一設置默認參數。那么可以設置如下代碼：
$(function(){ $.ajaxSetup ({
cache: false //關閉AJAX緩存
});
});
6. jquery 中 data 函數的作用
data()函數就是向元素中附加數據，然后在需要的時候取出數據
- 第一種寫法，傳遞參數key(string)，value(除undefined的任意數據類型)
$('body').data('name','hunger')//在body上綁定key為name value為xianyu的值
$('body').data('name') //取出值 得到hunger
- 2 .第二種寫法,傳遞一個對象
$('body').data({
name:'hunger',
age:2
})
$('body').data().age //取出值 得到2
- 第三種寫法,傳遞三個參數，第一個參數為綁定的對象，第二個參數為key，第三個對象為的value
$.data('body','name','hunger')
$.data('body','name')//得到name的值 為hunger
代碼
- 寫出以下功能對應的 Jq 方法：
- 給元素 $node 添加 class
active，給元素 $noed 刪除 classactive
$node.addClass('active');
$node.removeClass('active');
- 展示元素$node, 隱藏元素$node
$node.show();
$node,hide();
- 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
$node.attr('id');//獲取id
$node.attr('src');//獲取src
$node.attr('title');//獲取title
$node.attr('id','value');//修改id
$node.attr('src','value');//修改src
$node.attr('title','value');//修改title
- 給$node 添加自定義屬性
data-src
$node.attr('data-src','value');
- 在$ct 內部最開頭添加元素$node
$ct.pretent($node);
- 在$ct 內部最末尾添加元素$node
$ct.append($node);
- 刪除$node
$node.remove();
- 把$ct里內容清空
$ct.empty();
- 在$ct 里設置 html
<div class="btn"></div>
$ct.html('<div class="btn"></div>');
- 獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
//不包括內邊距
$node.width();//獲取寬度
$node.height();//獲取高度
$node.width('value');//設置寬度
$node.height('value');//設置高度
//包括內邊距
$node.innerWidth();//獲取包括內邊距的寬度
$node.innerHeight();//獲取包括內邊距的高度
$node.innerWidth('value');//設置包括內邊距的寬度
$node.innerHeight('value');//設置包括內邊距的高度
//包括邊框
$node.outerWidth();//獲取包括邊框寬度
$node.outerHeight();//獲取包括邊框高度
$node.outerWidth('value');//設置包括邊框寬度
$node.outerHeight('value');//設置包括邊框高度
//包括外邊距
$node.outerWidth(true);//獲取包括外邊距寬度
$node.outerHeight(true);//獲取包括外邊距高度
- 獲取窗口滾動條垂直滾動距離
$node.scollTop();
- 獲取$node 到根節點水平、垂直偏移距離
$node.offset();//返回到根節點的top和left值
- 修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({
'color': 'red',
'font-size': '14px';
});
- 遍歷節點，把每個節點里面的文本內容重復一遍
$node.each(function(idx,val){
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.index();
