JQuery最全常用方法指南

Attribute：
(”p”).addClass(css中定義的樣式類型); 給某個元素添加樣式

$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 給某個元素添加屬性/值，參數是map

$(”img”).attr(”src”,”test.jpg”); 給某個元素添加屬性/值

$(”img”).attr(”title”, function() { return this.src }); 給某個元素添加屬性/值

$(”元素名稱”).html(); 獲得該元素內的內容（元素，文本等）

$(”元素名稱”).html(”<b>new stuff</b>”); 給某元素設置內容

$(”元素名稱”).removeAttr(”屬性名稱”) 給某元素刪除指定的屬性以及該屬性的值

$(”元素名稱”).removeClass(”class”) 給某元素刪除指定的樣式

$(”元素名稱”).text(); 獲得該元素的文本

$(”元素名稱”).text(value); 設置該元素的文本值為value

$(”元素名稱”).toggleClass(class) 當元素存在參數中的樣式的時候取消,如果不存在就設置此樣式

$(”input元素名稱”).val(); 獲取input元素的值

$(”input元素名稱”).val(value); 設置input元素的值為value


Manipulation：

$(”元素名稱”).after(content); 在匹配元素后面添加內容

$(”元素名稱”).append(content); 將content作為元素的內容插入到該元素的后面

$(”元素名稱”).appendTo(content); 在content后接元素

$(”元素名稱”).before(content); 與after方法相反

$(”元素名稱”).clone(布爾表達式) 當布爾表達式為真時，克隆元素（無參時，當作true處理）

$(”元素名稱”).empty() 將該元素的內容設置為空

$(”元素名稱”).insertAfter(content); 將該元素插入到content之后

$(”元素名稱”).insertBefore(content); 將該元素插入到content之前

$(”元素”).prepend(content); 將content作為該元素的一部分，放到該元素的最前面

$(”元素”).prependTo(content); 將該元素作為content的一部分，放content的最前面

$(”元素”).remove(); 刪除所有的指定元素

$(”元素”).remove(”exp”); 刪除所有含有exp的元素

$(”元素”).wrap(”html”); 用html來包圍該元素

$(”元素”).wrap(element); 用element來包圍該元素

Traversing：
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)

Core：

$(html).appendTo(”body”) 相當於在body中寫了一段html代碼 $(elems) 獲得DOM上的某個元素
$(function(){………}); 執行一個函數 $(”div > p”).css(”border”, “1px solid
gray”); 查找所有div的子節點p，添加樣式 $(”input:radio”, document.forms[0])
在當前頁面的第一個表單中查找所有的單選按鈕 $.extend(prop) prop是一個jquery對象，

舉例：

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery( expression, [context] ) —$( expression, [context]); 在默認情況下，$()查詢的是當前HTML文檔中的DOM元素。

each( callback ) 以每一個匹配的元素作為上下文來執行一個函數

舉例：1

$(”span”).click(function){
    $(”li”).each(function () {
        $(this).toggleClass(”example”);
    });
});

舉例：2

$(”button”).click(function () {
    $(”div”).each(function (index, domEle) {
        // domEle == this
        $(domEle).css(”backgroundColor”, “yellow”);
        if ($(this).is(”#stop”)) {
            $(”span”).text(”Stopped at div index #” + index);
            return false;
        }
    });
});

jQuery Event:

ready(fn); $(document).ready()注意在body中沒有onload事件，否則該函數不能執行。在每個頁面中可以
有很多個函數被加載執行，按照fn的順序來執行。
bind(type, [data], fn) 為每一個匹配元素的特定事件（像click）綁定一個或多個事件處理器函數。可能的事件屬性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
one(type, [data], fn) 為每一個匹配元素的特定事件（像click）綁定一個或多個事件處理器函數。在每個對
象上，這個事件處理函數只會被執行一次。其他規則與bind()函數相同。

trigger(type, [data]) 在每一個匹配的元素上觸發某類事件。
triggerHandler(type, [data]) 這一特定方法會觸發一個元素上特定的事件(指定一個事件類型)，同時取消瀏覽器對此事件的默認行動
unbind([type], [data]) 反綁定，從每一個匹配的元素中刪除綁定的事件。
$(”p”).unbind() 移除所有段落上的所有綁定的事件
$(”p”).unbind( “click”) 移除所有段落上的click事件
hover(over, out) over, out都是方法, 當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。

$(”p”).hover(function () {
    $(this).addClass(”over”);
},
    function () {
        $(this).addClass(”out”);
    }
);

toggle(fn, fn) 如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。

$(”p”).toggle(function () {
    $(this).addClass(”selected”);
},
    function () {
        $(this).removeClass(”selected”);
    }
);

元素事件列表說明
注：不帶參數的函數，其參數為可選的 fn。jQuery不支持form元素的reset事件。
事件 描述 支持元素或對象

blur() 元素失去焦點 a, input, textarea, button, select, label, map, area
change() 用戶改變域的內容 input, textarea, select click() 鼠標點擊某個對象 幾乎所有元素
dblclick() 鼠標雙擊某個對象 幾乎所有元素 error() 當加載文檔或圖像時發生某個錯誤 window, img focus()
元素獲得焦點 a, input, textarea, button, select, label, map, area keydown()
某個鍵盤的鍵被按下 幾乎所有元素 keypress() 某個鍵盤的鍵被按下或按住 幾乎所有元素 keyup() 某個鍵盤的鍵被松開
幾乎所有元素 load(fn) 某個頁面或圖像被完成加載 window, img mousedown(fn) 某個鼠標按鍵被按下
幾乎所有元素 mousemove(fn) 鼠標被移動 幾乎所有元素 mouseout(fn) 鼠標從某元素移開 幾乎所有元素
mouseover(fn) 鼠標被移到某元素之上 幾乎所有元素 mouseup(fn) 某個鼠標按鍵被松開 幾乎所有元素
resize(fn) 窗口或框架被調整尺寸 window, iframe, frame scroll(fn) 滾動文檔的可視部分時
window select() 文本被選定 document, input, textarea submit() 提交按鈕被點擊 form
unload(fn) 用戶退出頁面 window

JQuery Ajax 方法說明:

load(url, [data], [callback]) 裝入一個遠程HTML內容到一個DOM結點。
$(”#feeds”).load(”feeds.html”); 將feeds.html文件載入到id為feeds的div中
$(”#feeds”).load(”feeds.php”, { limit: 25 }, function () {
    alert(”The last 25 entries in the feed have been loaded”);
});

jQuery.get(url, [data], [callback]) 使用GET請求一個頁面。
$.get(”test.cgi”, { name: “John”, time: “2pm” }, function (data) {
    alert(”Data Loaded: ” + data);
});

jQuery.getJSON(url, [data], [callback]) 使用GET請求JSON數據。
$.getJSON(”test.js”, { name: “John”, time: “2pm” }, function (json) {
    alert(”JSON Data: ” + json.users[3].name);
});

jQuery.getScript(url, [callback]) 使用GET請求javascript文件並執行。
$.getScript(”test.js”, function () {
    alert(”Script loaded and executed.”);
});
jQuery.post(url, [data], [callback], [type]) 使用POST請求一個頁面。

ajaxComplete(callback) 當一個AJAX請求結束后，執行一個函數。這是一個Ajax事件
$(”#msg”).ajaxComplete(function (request, settings) {
    $(this).append(”<li>Request Complete.</li>”);
});
ajaxError(callback) 當一個AJAX請求失敗后，執行一個函數。這是一個Ajax事件
$(”#msg”).ajaxError(function (request, settings) {
    $(this).append(”<li>Error requesting page ” + settings.url + “</li>”);
});

ajaxSend(callback) 在一個AJAX請求發送時，執行一個函數。這是一個Ajax事件
$(”#msg”).ajaxSend(function (evt, request, settings) {
    $(this).append(”<li<Starting request at ” + settings.url
        + “</li <”);
});

ajaxStart(callback) 在一個AJAX請求開始但還沒有激活時，執行一個函數。這是一個Ajax事件
當AJAX請求開始(並還沒有激活時)顯示loading信息
$(”#loading”).ajaxStart(function () {
    $(this).show();
});

ajaxStop(callback) 當所有的AJAX都停止時，執行一個函數。這是一個Ajax事件
當所有AJAX請求都停止時，隱藏loading信息。
$(”#loading”).ajaxStop(function () {
    $(this).hide();
});

ajaxSuccess(callback) 當一個AJAX請求成功完成后，執行一個函數。這是一個Ajax事件
當AJAX請求成功完成時，顯示信息。
$(”#msg”).ajaxSuccess(function (evt, request, settings) {
    $(this).append(”<li>Successful Request!</li>”);
});

jQuery.ajaxSetup(options) 為所有的AJAX請求進行全局設置。查看$.ajax函數取得所有選項信息。
設置默認的全局AJAX請求選項。
$.ajaxSetup({
    url: “/ xmlhttp /”,
    global: false,
    type: “POST”
});
$.ajax({ data: myData });

serialize() 以名稱和值的方式連接一組input元素。實現了正確表單元素序列
function showValues() {
    var str = $(”form”).serialize();
    $(”#results”).text(str);
}
$(”: checkbox, : radio”).click(showValues);
$(”select”).change(showValues);
showValues();

serializeArray() 連接所有的表單和表單元素(類似於.serialize()方法)，但是返回一個JSON數據格式。
從form中取得一組值，顯示出來
function showValues() {
    var fields = $(”: input”).serializeArray();
    alert(fields);
    $(”#results”).empty();
    jQuery.each(fields, function (i, field) {
        $(”#results”).append(field.value + ” “);
    });
}
$(”: checkbox, : radio”).click(showValues);
$(”select”).change(showValues);
showValues();

JQuery Effects 方法說明

show() 顯示隱藏的匹配元素。
show(speed, [callback]) 以優雅的動畫顯示所有匹配的元素，並在顯示完成后可選地觸發一個回調函數。
hide() 隱藏所有的匹配元素。
hide(speed, [callback]) 以優雅的動畫隱藏所有匹配的元素，並在顯示完成后可選地觸發一個回調函數
toggle() 切換元素的可見狀態。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，
切換為可見的。
slideDown(speed, [callback]) 通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成后可選
地觸發一個回調函數。這個動畫效果只調整元素的高度，可以使匹配的元素以
“滑動”的方式顯示出來。
slideUp(speed, [callback]) 通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成后可選地
觸發一個回調函數。這個動畫效果只調整元素的高度，可以使匹配的元素以”滑動”
的方式隱藏起來。
slideToggle(speed, [callback]) 通過高度變化來切換所有匹配元素的可見性，並在切換完成后可選地觸發一個回
調函數。 這個動畫效果只調整元素的高度，可以使匹配的元素以”滑動”的方式隱
藏或顯示。
fadeIn(speed, [callback]) 通過不透明度的變化來實現所有匹配元素的淡入效果，並在動畫完成后可選地觸
發一個回調函數。 這個動畫只調整元素的不透明度，也就是說所有匹配的元素的
高度和寬度不會發生變化。
fadeOut(speed, [callback]) 通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成后可選地觸
發一個回調函數。 這個動畫只調整元素的不透明度，也就是說所有匹配的元素的
高度和寬度不會發生變化。
fadeTo(speed, opacity, [callback]) 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成
后可選地觸發一個回調函數。 這個動畫只調整元素的不透明度，也就是說所
有匹配的元素的高度和寬度不會發生變化。
stop() 停止所有匹配元素當前正在運行的動畫。如果有動畫處於隊列當中，他們就會立即開始。
queue() 取得第一個匹配元素的動畫序列的引用(返回一個內容為函數的數組)
queue(callback) 在每一個匹配元素的事件序列的末尾添加一個可執行函數，作為此元素的事件函數
queue(queue) 以一個新的動畫序列代替所有匹配元素的原動畫序列
dequeue() 執行並移除動畫序列前端的動畫
animate(params, [duration], [easing], [callback]) 用於創建自定義動畫的函數。
animate(params, options) 創建自定義動畫的另一個方法。作用同上。

JQuery Traversing 方法說明

eq(index) 從匹配的元素集合中取得一個指定位置的元素，index從0開始
filter(expr) 返回與指定表達式匹配的元素集合，可以使用”,”號分割多個expr，用於實現多個條件篩選
filter(fn) 利用一個特殊的函數來作為篩選條件移除集合中不匹配的元素。
is(expr) 用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的
表達式就返回true。
map(callback) 將jQuery對象中的一組元素利用callback方法轉換其值，然后添加到一個jQuery數組中。
not(expr) 從匹配的元素集合中刪除與指定的表達式匹配的元素。
slice(start, [end]) 從匹配元素集合中取得一個子集，和內建的數組的slice方法相同。
add(expr) 把與表達式匹配的元素添加到jQuery對象中。
children([expr]) 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。可選的過濾器
將使這個方法只匹配符合的元素(只包括元素節點，不包括文本節點)。
contents() 取得一個包含匹配的元素集合中每一個元素的所有子孫節點的集合(只包括元素節點，不
包括文本節點)，如果元素為iframe，則取得其中的文檔元素
find(expr) 搜索所有與指定表達式匹配的元素。
next([expr]) 取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。
nextAll([expr]) 取得一個包含匹配的元素集合中每一個元素所有的后面同輩元素的元素集合
parent([expr]) 取得一個包含着所有匹配元素的唯一父元素的元素集合。
parents([expr]) 取得一個包含着所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。
prev([expr]) 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。
prevAll([expr]) 取得一個包含匹配的元素集合中每一個元素的之前所有同輩元素的元素集合。
siblings([expr]) 取得一個包含匹配的元素集合中每一個元素的所有同輩元素的元素集合。
andSelf() 將前一個匹配的元素集合添加到當前的集合中
取得所有div元素和其中的p元素，添加border類屬性。取得所有div元素中的p元素，
添加background類屬性
$(”div”).find(”p”).andSelf().addClass(”border”);
$(”div”).find(”p”).addClass(”background”);
end() 結束當前的操作，回到當前操作的前一個操作
找到所有p元素其中的span元素集合，然后返回p元素集合，添加css屬性
$(”p”).find(”span”).end().css(”border”, “2px red solid”);

JQuery Selectors 方法說明

基本選擇器
$(”#myDiv”) 匹配唯一的具有此id值的元素
$(”div”) 匹配指定名稱的所有元素
$(”.myClass”) 匹配具有此class樣式值的所有元素
$(”*”) 匹配所有元素
$(”div, span, p.myClass”) 聯合所有匹配的選擇器

層疊選擇器
$(”form input”) 后代選擇器，選擇ancestor的所有子孫節點
$(”#main > *”) 子選擇器，選擇parent的所有子節點
$(”label + input”) 臨選擇器，選擇prev的下一個臨節點
$(”#prev ~div”) 同胞選擇器，選擇prev的所有同胞節點

基本過濾選擇器
$(”tr: first”) 匹配第一個選擇的元素
$(”tr: last”) 匹配最后一個選擇的元素
$(”input: not(: checked) + span”)從原元素集合中過濾掉匹配selector的所有元素（這里有是一個臨選擇器）
$(”tr: even”) 匹配集合中偶數位置的所有元素(從0開始)
$(”tr: odd”) 匹配集合中奇數位置的所有元素(從0開始)
$(”td: eq(2)”) 匹配集合中指定位置的元素(從0開始)
$(”td: gt(4)”) 匹配集合中指定位置之后的所有元素(從0開始)
$(”td: gl(4)”) 匹配集合中指定位置之前的所有元素(從0開始)
$(”: header”) 匹配所有標題
$(”div: animated”) 匹配所有正在運行動畫的所有元素

內容過濾選擇器
$(”div: contains(’John’)”) 匹配含有指定文本的所有元素
$(”td: empty”) 匹配所有空元素(只含有文本的元素不算空元素)
$(”div: has§”) 從原元素集合中再次匹配所有至少含有一個selector的所有元素
$(”td: parent”) 匹配所有不為空的元素(含有文本的元素也算)
$(”div: hidden”) 匹配所有隱藏的元素，也包括表單的隱藏域
$(”div: visible”) 匹配所有可見的元素

屬性過濾選擇器
$(”div[id]”) 匹配所有具有指定屬性的元素
$(”input[name =’newsletter’]”) 匹配所有具有指定屬性值的元素
$(”input[name !=’newsletter’]”) 匹配所有不具有指定屬性值的元素
$(”input[name ^=’news’]”) 匹配所有指定屬性值以value開頭的元素
$(”input[name$ =’letter’]”) 匹配所有指定屬性值以value結尾的元素
$(”input[name *=’man’]”) 匹配所有指定屬性值含有value字符的元素
$(”input[id][name$ =’man’]”) 匹配同時符合多個選擇器的所有元素

子元素過濾選擇器
$(”ul li: nth - child(2)”),
$(”ul li: nth - child(odd)”), 匹配父元素的第n個子元素
$(”ul li: nth - child(3n + 1)”)

$(”div span: first - child”) 匹配父元素的第1個子元素
$(”div span: last - child”) 匹配父元素的最后1個子元素
$(”div button: only - child”) 匹配父元素的唯一1個子元素

表單元素選擇器
$(”: input”) 匹配所有的表單輸入元素，包括所有類型的input, textarea, select 和 button
$(”: text”) 匹配所有類型為text的input元素
$(”: password”) 匹配所有類型為password的input元素
$(”: radio”) 匹配所有類型為radio的input元素
$(”: checkbox”) 匹配所有類型為checkbox的input元素
$(”: submit”) 匹配所有類型為submit的input元素
$(”: image”) 匹配所有類型為image的input元素
$(”: reset”) 匹配所有類型為reset的input元素
$(”: button”) 匹配所有類型為button的input元素
$(”: file”) 匹配所有類型為file的input元素
$(”: hidden”) 匹配所有類型為hidden的input元素或表單的隱藏域

表單元素過濾選擇器
$(”: enabled”) 匹配所有可操作的表單元素
$(”: disabled”) 匹配所有不可操作的表單元素
$(”: checked”) 匹配所有已點選的元素
$(”select option: selected”) 匹配所有已選擇的元素

JQuery CSS 方法說明
css(name) 訪問第一個匹配元素的樣式屬性。
css(properties) 把一個”名 / 值對”對象設置為所有匹配元素的樣式屬性。

$(”p”).hover(function () {
    $(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
}, function () {
    var cssObj = {
        backgroundColor: “#ddd”,
        fontWeight: “”,
        color: “rgb(0,40,244)”
    }
    $(this).css(cssObj);
});

css(name, value) 在所有匹配的元素中，設置一個樣式屬性的值。
offset() 取得匹配的第一個元素相對於當前可視窗口的位置。返回的對象有2個屬性，
top和left，屬性值為整數。這個函數只能用於可見元素。
var p = $(”p: last”);
var offset = p.offset();
p.html( “left: ” + offset.left + “, top: ” + offset.top);
width() 取得當前第一匹配的元素的寬度值，
width(val) 為每個匹配的元素設置指定的寬度值。
height() 取得當前第一匹配的元素的高度值，
height(val) 為每個匹配的元素設置指定的高度值。

JQuery Utilities 方法說明
jQuery.browser
.msie 表示ie
jQuery.browser.version 讀取用戶瀏覽器的版本信息
jQuery.boxModel 檢測用戶瀏覽器針對當前頁的顯示是否基於w3c CSS的盒模型
jQuery.isFunction(obj) 檢測傳遞的參數是否為function

function stub() { }
var objs = [
    function () { },
    { x: 15, y: 20 },
    null,
    stub,
“function”
];
jQuery.each(objs, function (i) {
    var isFunc = jQuery.isFunction(objs[i]);
    $(”span: eq( ” + i + “)”).text(isFunc);
});

jQuery.trim(str) 清除字符串兩端的空格，使用正則表達式來清除給定字符兩端的空格
jQuery.each(object, callback) 一個通用的迭代器，可以用來無縫迭代對象和數組
jQuery.extend(target, object1, [objectN]) 擴展一個對象，修改原來的對象並返回，這是一個強大的實現繼承的
工具，這種繼承是采用傳值的方法來實現的，而不是JavaScript中的
原型鏈方式。
合並settings和options對象，返回修改后的settings對象

var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
jQuery.extend(settings, options);

合並defaults和options對象，defaults對象並沒有被修改。options對象中的值
代替了defaults對象的值傳遞給了empty。

var empty = {}
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = $.extend(empty, defaults, options);
jQuery.grep(array, callback, [invert]) 通過一個篩選函數來去除數組中的項
$.grep([0, 1, 2], function (n, i) {
    return n > 0;
});

jQuery.makeArray(obj) 將一個類似數組的對象轉化為一個真正的數組
將選取的div元素集合轉化為一個數組

var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);

jQuery.map(array, callback) 使用某個方法修改一個數組中的項，然后返回一個新的數組
jQuery.inArray(value, array) 返回value在數組中的位置，如果沒有找到，則返回 - 1
jQuery.unique(array) 刪除數組中的所有重復元素，返回整理后的數組

1、關於頁面元素的引用
通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級關系及dom或者xpath條件等方法，且返回的對象為jquery對象（集合對象），不能直接調用dom定義的方法。

2、jQuery對象與dom對象的轉換
只有jquery對象才能使用jquery定義的方法。注意dom對象和jquery對象是有區別的，調用方法時要注意操作的是dom對象還是 jquery對象。
普通的dom對象一般可以通過$()轉換成jquery對象。
如：$(document.getElementById("msg"))則為jquery對象，可以使用jquery的方法。
由於jquery對象本身是一個集合。所以如果jquery對象要轉換為dom對象則必須取出其中的某一項，一般可通過索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]這些都是dom對象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下幾種寫法都是正確的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何獲取jQuery集合的某一項
對於獲取的元素集合，獲取其中的某一項（通過索引指定）可以使用eq或get(n)方法或者索引號獲取，要注意，eq返回的是jquery對象，而 get(n)和索引返回的是dom元素對象。對於jquery對象只能使用jquery的方法，而dom對象只能使用dom的方法，如要獲取第三個 < div > 元素的內容。有如下兩種方法：
$("div").eq(2).html(); //調用jquery對象的方法
$("div").get(2).innerHTML; //調用dom的方法屬性

4、同一函數實現set和get
Jquery中的很多方法都是如此，主要包括如下幾個：
$("#msg").html(); //返回id為msg的元素節點的html內容。
$("#msg").html("<b>new content</b>");
//將“<b>new content</b>” 作為html串寫入id為msg的元素節點內容中,頁面顯示粗體的new content

$("#msg").text(); //返回id為msg的元素節點的文本內容。
$("#msg").text("<b>new content</b>");
//將“<b>new content</b>” 作為普通文本串寫入id為msg的元素節點內容中,頁面顯示<b>new content</b>

$("#msg").height(); //返回id為msg的元素的高度
$("#msg").height("300"); //將id為msg的元素的高度設為300
$("#msg").width(); //返回id為msg的元素的寬度
$("#msg").width("300"); //將id為msg的元素的寬度設為300

$("input").val("); //返回表單輸入框的value值
$("input").val("test"); //將表單輸入框的value值設為test

$("#msg").click(); //觸發id為msg的元素的單擊事件
$("#msg").click(fn); //為id為msg的元素單擊事件添加函數
同樣blur, focus, select, submit事件都可以有着兩種調用方法

5、集合處理功能
對於jquery返回的集合內容無需我們自己循環遍歷並對每個對象分別做處理，jquery已經為我們提供的很方便的方法進行集合的處理。
包括兩種形式：
$("p").each(function (i) { this.style.color = ['#f00', '#0f0', '#00f'][i] })
//為索引分別為0，1，2的p元素分別設定不同的字體顏色。

$("tr").each(function (i) { this.style.backgroundColor = ['#ccc', '#fff'][i % 2] })
//實現表格的隔行換色效果

$("p").click(function () { alert($(this).html()) })
//為每個p元素增加了click事件，單擊某個p元素則彈出其內容

6、擴展我們需要的功能
$.extend({
    min: function (a, b) { return a < b ? a : b; },
    max: function (a, b) { return a > b ? a : b; }
}); //為jquery擴展了min,max兩個方法
使用擴展的方法（通過“$.方法名”調用）：
alert("a=10,b=20,max=" + $.max(10, 20) + ",min=" + $.min(10, 20));

7、支持方法的連寫
所謂連寫，即可以對一個jquery對象連續調用各種不同的方法。
例如：
$("p").click(function () { alert($(this).html()) })
    .mouseover(function () { alert('mouse over event') })
    .each(function (i) { this.style.color = ['#f00', '#0f0', '#00f'][i] });

8、操作元素的樣式
主要包括以下幾種方式：
$("#msg").css("background"); //返回元素的背景顏色
$("#msg").css("background", "#ccc") //設定元素背景為灰色
$("#msg").height(300); $("#msg").width("200"); //設定寬高
$("#msg").css({ color: "red", background: "blue" });//以名值對的形式設定樣式
$("#msg").addClass("select"); //為元素增加名稱為select的class
$("#msg").removeClass("select"); //刪除元素名稱為select的class
$("#msg").toggleClass("select"); //如果存在（不存在）就刪除（添加）名稱為select的class

9、完善的事件處理功能
Jquery已經為我們提供了各種事件處理方法，我們無需在html元素上直接寫事件，而可以直接為通過jquery獲取的對象添加事件。
如：
$("#msg").click(function () { alert("good") }) //為元素添加了單擊事件
$("p").click(function (i) { this.style.color = ['#f00', '#0f0', '#00f'][i] })
//為三個不同的p元素單擊事件分別設定不同的處理
jQuery中幾個自定義的事件：
（1）hover(fn1, fn2)：一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。
//當鼠標放在表格的某行上時將class置為over，離開時置為out。
$("tr").hover(function () {
    $(this).addClass("over");
},
    function () {
        $(this).addClass("out");
    });
（2）ready(fn): 當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。
$(document).ready(function () { alert("Load Success") })
//頁面加載完畢提示“Load Success”,相當於onload事件。與$(fn)等價
（3）toggle(evenFn, oddFn): 每次點擊時切換要調用的函數。如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。隨后的每次點擊都重復對這兩個函數的輪番調用。
//每次點擊時輪換添加和刪除名為selected的class。
$("p").toggle(function () {
    $(this).addClass("selected");
}, function () {
    $(this).removeClass("selected");
});
（4）trigger(eventtype): 在每一個匹配的元素上觸發某類事件。
例如：
$("p").trigger("click"); //觸發所有p元素的click事件
（5）bind(eventtype, fn)，unbind(eventtype): 事件的綁定與反綁定
從每一個匹配的元素中（添加）刪除綁定的事件。
例如：
$("p").bind("click", function () { alert($(this).text()); }); //為每個p元素添加單擊事件
$("p").unbind(); //刪除所有p元素上的所有事件
$("p").unbind("click") //刪除所有p元素上的單擊事件

10、幾個實用特效功能
其中toggle()和slidetoggle()方法提供了狀態切換功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、幾個有用的jQuery方法
$.browser.瀏覽器類型：檢測瀏覽器類型。有效參數：safari, opera, msie, mozilla。如檢測是否ie：$.browser.isie，是ie瀏覽器則返回true。
$.each(obj, fn)：通用的迭代函數。可用於近似地迭代對象和數組（代替循環）。
如
$.each([0, 1, 2], function (i, n) { alert("Item #" + i + ": " + n); });
等價於：
var tempArr = [0, 1, 2];
for (var i = 0; i < tempArr.length; i++) {
    alert("Item #" + i + ": " + tempArr[i]);
}
也可以處理json數據，如
$.each({ name: "John", lang: "JS" }, function (i, n) { alert("Name: " + i + ", Value: " + n); });
結果為：
Name: name, Value: John
Name: lang, Value: JS
$.extend(target, prop1, propN)：用一個或多個其他對象來擴展一個對象，返回這個被擴展的對象。這是jquery實現的繼承方式。
如：
$.extend(settings, options);
//合並settings和options，並將合並結果返回settings中，相當於options繼承setting並將繼承結果保存在 setting中。
var settings = $.extend({}, defaults, options);
//合並defaults和options，並將合並結果返回到setting中而不覆蓋default內容。
可以有多個參數（合並多項並返回）
$.map(array, fn)：數組映射。把一個數組中的項目(處理轉換后)保存到到另一個新數組中，並返回生成的新數組。
如：
var tempArr = $.map([0, 1, 2], function (i) { return i + 4; });
tempArr內容為：[4, 5, 6]
var tempArr = $.map([0, 1, 2], function (i) { return i > 0 ? i + 1 : null; });
tempArr內容為：[2, 3]
$.merge(arr1, arr2): 合並兩個數組並刪除其中重復的項目。
如：$.merge([0, 1, 2], [2, 3, 4]) //返回[0,1,2,3,4]
$.trim(str)：刪除字符串兩端的空白字符。
如：$.trim(" hello, how are you? "); //返回"hello,how are you? "

12、解決自定義方法或其他類庫與jQuery的沖突
很多時候我們自己定義了$(id)方法來獲取一個元素，或者其他的一些js類庫如prototype也都定義了$方法，如果同時把這些內容放在一起就會引起變量方法定義沖突，Jquery對此專門提供了方法用於解決此問題。
使用jquery中的jQuery.noConflict(); 方法即可把變量$的控制權讓渡給第一個實現它的那個庫或之前自定義的$方法。之后應用 Jquery的時候只要將所有的$換成jQuery即可，如原來引用對象方法$("#msg")改為jQuery("#msg")。
如：
jQuery.noConflict();
// 開始使用jQuery
jQuery("div p").hide();
// 使用其他庫的 $()
$("content").style.display = 'none';