jquery中有許多常用的函數（方法），感覺進入了新世界！！現在就來總結學習以下。
Jquery 中， $(document).ready()是什麼意思？和window.onload 的區別？ 還有其他什麼寫法或者替代方法？
$(document).ready()：在所有DOM節點加載完成後運行括號內的內容，此時圖片、視頻、音頻可能還沒加載完成。可以同時寫多個該函數。其他寫法還有：$().ready(function(){})或`$(function(){})window.onload：當頁面所有內容加載完成後運行後面的代碼，此時圖片、視頻等必須加載完畢，只能寫一個window.onload，後寫的會覆蓋之前的。
$node.html()和$node.text()的區別?
$node.html()：獲取節點內所有內容，包括文本和html標籤。$node.text()：獲取節點內所有文本內容，只包括文本。
$.extend 的作用和用法?
- 當我們提供兩個或多個對象給
$.extend()，對象的所有屬性都添加到目標對象（target參數）。 - 如果只有一個參數提供給
$.extend()，這意味着目標參數被省略。在這種情況下，jQuery對象本身被默認爲目標對象。這樣，我們可以在jQuery的命名空間下添加新的功能。這對於插件開發者希望向 jQuery 中添加新函數時是很有用的 - 例子：將一個或多個對象合併到目標對象中：
var obj1 = {a:0,b:10};
var obj2 = {a:100,c:200};
var obj3 = $.extend(obj1,obj2);
console.log(obj1); // {a:100,b:10,c:200}
console.log(obj3); // {a:100,b:10,c:200}extend()會修改目標對象，如果我們不希望改動對象，，則可以將目標對象設爲空對象，例子：
var obj1 = {a:0,b:10};
var obj2 = {a:100,c:200};
var obj3 = $.extend({},obj1,obj2);
console.log(obj1); // {a:0,b:10}
console.log(obj3); // {a:100,b:10,c:200}extend()所進行的合併操作是淺拷貝，如果對象的屬性中有對象和數組，需要使用深拷貝，則可以給其加一個參數true，例子：
// 不使用true參數，淺拷貝，將obj2.banana的指針複製給obj1.banana，只有price屬性
var obj1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var obj2 = {
banana: { price: 200 },
durian: 100
};
$.extend( obj1, obj2 ); // {apple: 0, banana: { price: 200 }, cherry: 97, durian: 100}
// 使用true參數，深拷貝，將obj2.banana的屬性再添加給obj1.banana，即有新的新的price屬性，也有原來的weight屬性
var obj1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var obj2 = {
banana: { price: 200 },
durian: 100
};
$.extend( obj1, obj2 ); // {apple: 0, banana: { price: 200 }, cherry: 97, durian: 100}JQuery 的鏈式調用是什麼？
- 當JQuery的方法的返回值仍然爲當前對象的時候，可以繼續調用該對象的方法，就叫做鏈式調用，如
$(ele).parents().find().addClass().hide();就是典型的鏈式調用
JQuery ajax 中緩存怎樣控制?
- 通過
cache屬性進行控制，其值默認爲true(dataType爲”script”和”jsonp”時默認爲false)，如果將其設置爲false，瀏覽器將不會緩存此頁面。 - 它的工作原理是在GET請求參數中附加
_={timestamp}
jquery 中 data 函數的作用
.data(key,value)函數匹配的JQ對象上儲存任意相關數據，或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值- 通過
data()函數存儲的數據都是臨時數據，頁面刷新後，之前存放的數據都將不存在。 - 例子如下：
$("body").data("ReedSun", "shuai");
console.log($("body").data("ReedSun"));一些小例子
以下功能對應的 Jq 方法：
給元素 $node 添加 class active，給元素 $noed 刪除 class active
//添加class
$node.addClass("active");
//刪除class
$noed.removeClass("active");展示元素$node, 隱藏元素$node
//展示元素
$node.show();
//隱藏元素
$node.hide();獲取元素$node 的 屬性: id、src、title， 修改以上屬性
- 獲取元素屬性：
var id = $node.attr("id");
var src = $node.attr("src");
var title = $node.attr("title");- 修改元素屬性：
$node.attr({
id: "header",
src: "www.jirengu.com",
title: "ReedSun"
});給$node 添加自定義屬性data-src
//添加自定義屬性
$node.attr("data-src", "www.jirengu.com");在$ct 內部最開頭添加元素$node
//開頭添加元素
$ct.append($node);在$ct 內部最末尾添加元素$node
//末尾添加元素
$ct.prepend($node);刪除$node
//刪除元素
$node.remove();把$ct裏內容清空
//清空元素
$ct.empty();在$ct 裏設置 html <div class="btn"></div>
//設置html
$ct.html("<div class="btn"></div>);獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
//獲取寬度（不包括內邊距、邊框、外邊距）
$node.width();
//獲取寬度（包括內邊距）
$node.innerWidth();
//獲取寬度（包括內邊距和邊框）
$node.outerWidth();
//獲取寬度（包括內邊距、邊框和外邊距）
$node.outerWidth(true);
//獲取高度（不包括內邊距、邊框、外邊距）
$node.height();
//獲取高度（包括內邊距）
$node.innerHeight();
//獲取高度（包括內邊距和邊框）
$node.outerHeight();
//獲取高度（包括內邊距、邊框和外邊距）
$node.outerHeight(true);獲取窗口滾動條垂直滾動距離
$(window).scrollTop();獲取$node 到根節點水平、垂直偏移距離
$node.offset();修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({
"color", "red",
"font-size", "14px"
});遍歷節點，把每個節點裏面的文本內容重複一遍
$node.each(function(){
$(this).text($(this).text+$(this).text);
});從$ct 裏查找 class 爲 .item的子元素
$ct.find(".item");獲取$ct 裏面的所有孩子
$ct.children();對於$node，向上找到 class 爲’.ct’的父親，在從該父親找到’.panel’的孩子
$node.parents(".ct").find(".penel");獲取選擇元素的數量
$ct.size();獲取當前元素在兄弟中的排行
$ct.index();一些操作的實現
當點擊$btn 時，讓 $btn 的背景色變爲紅色再變爲藍色
當窗口滾動時，獲取垂直滾動距離
當鼠標放置到$div 上，把$div 背景色改爲紅色，移出鼠標背景色變爲白色
當鼠標激活 input 輸入框時讓輸入框邊框變爲藍色，當輸入框內容改變時把輸入框裏的文字小寫變爲大寫，當輸入框失去焦點時去掉邊框藍色，控制檯展示輸入框裏的文字
當選擇 select 後，獲取用戶選擇的內容
加載更多（使用jquery中的ajax方法）
版權聲明：本博客版權歸ReedSun和飢人谷所有，轉載須說明來源!