【JQuery】JQuery常用方法總結、大全。

重要聲明：本文章僅僅代表了作者個人對此觀點的理解和表述。讀者請查閱時持自己的意見進行討論。

本文更新不及時，請到原文地址瀏覽：【JQuery】JQuery常用方法總結、大全。

一、JQuery簡介

JQuery不是語言。jQuery是一個快速、簡潔的JavaScript框架。總歸是用js寫出來的東西。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

二、常用方法

本節介紹了jquery裏一些常用的方法。

1、Dom操作類

選擇器

選擇器通常是一個有一定規則的字符串。下面列出了一些基本常用的選擇器：

語法	作用	示列	示列含義
*	選擇所有	*	選擇所有頁面裏的節點。通常這個用在css樣式文件裏。
.	class選擇器	.cell	選擇class爲cell的所有元素。
#	id選擇器	#btnSavee	選擇id爲btnSave的所有元素。
節點名稱	節點選擇器	div	選擇節點爲div的所有元素。
[]	屬性選擇器	[userInfo]	選擇節點上有userInfo屬性的所有元素。
[=]	屬性值選擇器	[userInfo=Jack]	選擇節點上有userInfo屬性且值爲Jack的所有元素,等號後面 的值可以有雙引號、可以沒有。
空格	父子層級	.cell div #btnSave	選擇class爲cell內部的div節點內部的id爲btnSave的元素
,	分隔符	.cell,[userInfo]	選擇class爲cell的所有元素和屬性有userInfo的所有元素
+	兄弟選擇器	.cell+input	選擇和.cell同級但在其之後的所有input元素

更多選擇器請參考：CSS選擇器參考手冊。

使用$選擇dom

1. $(“選擇器”); 返回指定選擇器的所有jQuery對象。
2. $(“選擇器1”).find(“選擇器2”); 返回指定選擇器1裏面的所有符合選擇器2的所有jQuery對象。

注意：所有通過$方法得到的都節點都不是原生的dom對象，而是jquery封裝的jquery對象。它們的方法和用法均不同。應該明確具體是哪一種對象，從而調用合適的方法和屬性。可通過$dom = $(原始dom)的方式將原始dom封裝爲jquery對象。$選擇得到的返回數據，都是一個集合，取決於選擇器能夠定位到元素的多少。即使給定的選擇器沒有任何節點符合，也不會返回undefind或null。而返回的是一個空集合。要判斷是否選擇到東西了，可以這樣：

var cells = $(".cell");
if (cells.size() > 0) {
    // 選擇到了節點。
} else {
    // 沒有選擇到任何節點。
}

下文內容，均以選擇到了至少一個節點爲示列。

遍歷元素

var cells = $(".cell");
cells.each(function () {
    // each 方法的執行次數等於選擇器選擇到的節點數。

    var dom = this;     // 這裏的this是原始js的dom對象。
    var $dom = $(this); // 通過 $ 包裝，成爲jquery對象。
});

input、select、textarea取值及修改

這三種dom，在jquery裏，都可以通過 val() 方法取值，通過 val("Jack")方法修改。

var intput = $("#userName")；
var userName = input.val(); // 取值。
input.val("Jack");          // 修改。

節點內文本取值及修改

var div = $("#userDescription");
var text = div.text();  // 取值。
div.text("讓我試試！");  // 修改。

節點內html獲取及修改

var div = $("#userDescription");
var html = div.html();       // 取值。
div.html("<b>讓我試試</b>");  // 修改。

節點樣式獲取及修改

var div = $("#userDescription");
var fontSize = div.css("font-size");  // 取值。
div.css("font-size", "20px");         // 修改。

節點屬性獲取及修改

var div = $("#userDescription");
var class = div.attr("class");        // 取值。
div.attr("class", "userDesc-1");      // 修改。

節點class判斷及移除

var div = $("#userDescription");
var hasVip = div.hasClass("vipuser"); // 獲取是否有vipuser這個class。
if (hasVip) {
    div.addClass("poorUser");             // 添加class。
} else {
    div.removeClass("vipuser");           // 移除class。
}

節點移除

var div = $("#userDescription");
div.remove(); // 將自身從dom樹移除、界面上將不再存在。

div.empty();  // 將自身內部的所有dom移除，自身不移除。

節點添加

var div = $("#userDescription");
div.append("<p>66</p>");  // 將內容添加到div內部的結尾處。
div.prepend("<p>99</p>"); // 將內容添加到div內部的開始處。

div.after("<p>77</p>");   // 將內容添加到div後面，與div同級，結果p是div的兄弟節點。
div.before("<p>11</p>");  // 將內容添加到div前面，與div同級，結果是div是p的兄弟節點。

節點隱藏與顯示

var div = $("#userDescription");
div.hide();        // 隱藏
div.show();        // 顯示
div.toggle();      // 隱藏/顯示 - 來回切換。

2、工具類

數組遍歷

$.each(["Jack", "Tom", "Marry"], function (index, item) {
    // index = 元素下標。
    // item = 元素內容。
    // return false; 取消循環，
});

數組代換

var newArr = $.map(["Jack", "Tom", "Marry"], function (item, index) {
    // item = 元素內容。
    // index = 元素下標。
    // 此方法必須有返回值。否則對應newArr的對應位置爲undefined。
});

對象擴展extend

var target = {};
$.extend(target, {name: "Jack"}, {age: 20}, {age: 13});
console.log(target); // {name: "JacK", age: 13}

3、網絡請求

post/get

// post
$.post("https://www.microanswer.cn/", {name: "Jack"}, function (response) {
    // response 爲服務器響應結果。
}, "json");

// get
$.get("https://www.microanswer.cn/", {name: "Jack"}, function (response) {
    // response 爲服務器響應結果。
}, "json");

// 參數1：請求地址
// 參數2：請求參數
// 參數3：請求成功回調
// 參數4：預設服務器返回的數據類型，可填寫：xml, html, script, json, text

ajax

$.ajax({
    url: "https://www.microanswer.cn/",   // 請求地址
    type: "post",                         // 請求方法/類型
    data: {                               // 請求參數
        name: "Jack",
        age: 13
    },
    dataType: "json",                     // 預設服務器返回數據類型
    error: function (xmlHttpRequest,textStatus,exception) {                  // 請求失敗，出錯時回調。
        // 通常 textStatus 和 errorThrown 之中只有一個會包含信息
    },
    success: function (data) {
        // 服務器返回數據
    }
});

更多

沒有找到你想看的內容，不如去中文官網jquery往看看全面的介紹：jQuery API 中文手冊。