摘要：又拍云提供同樣版本也不同步了七牛云提供同樣版本穩定在谷歌因為某些緣故，無法使用總結唯一一個能用的只有了。查詢與查詢結果返回值為一個對象，對象為類數組。

jquery
jquery為一種庫，屬于最基礎的一個庫，伴隨著h5的到來，很多jquery的規則直接融入到了規則本身了，直接使用原生的js也能達到相同的目的。雖然如此，不過依舊要繼續。

官網：https://jquery.com/
github: https://github.com/jquery/jquery
blog：https://blog.jquery.com/
學習中心：https://learn.jquery.com/ 推薦使用學習中心學習jquery
文檔：https://api.jquery.com/ 推薦使用文檔進行相關的查詢
封裝jquery插件 http://plugins.jquery.com/ 官網推薦使用npm包的方式，帶上jquery-plugin
相關插件：npm包 https://www.npmjs.com/search?...:jquery-plugin jquery 官方插件 http://plugins.jquery.com/ 不過目前處于不更新的狀態，不推薦使用內部的插件，因為很可能沒有作者維護了。并且已經處于自讀的方式，不推薦使用，推薦使用npm的方式，使用jquery的相關插件
jquery官方推薦圖書 https://www.packtpub.com/web-...
https://www.manning.com/books...
https://www.syncfusion.com/eb...
一本都看不懂。。。
js基金會 https://js.foundation/ 是滴，js也擁有基金會了，和linux一樣
目前js基金會下屬項目 https://js.foundation/communi...
好啦，有點小亂。大概也就這些了。
其中jquery的最出色的地方在于對元素的選擇。

jquery mobile 屬于移動端的js庫

ps 移動端的兼容問題，沒有客戶端的兼容問題的嚴重

官網 https://jquerymobile.com/
文檔 https://api.jquerymobile.com/

ps 該項目博客保留在2017年，提交截止在去年，測試狀態不通過 https://travis-ci.org/jquery/...

╮(╯▽╰)╭
唉

打開 https://jquery.com/download/
在開發和調試的時候使用未壓縮的文件，在上線的時候使用壓縮的文件，節省空間。

npm install --save jquery 

上方將會保存在依賴項中
將會在

node_modules/jquery/dist/

中找到生產環境的版本和開發版本

bower一個類似于npm的包管理

bower install jquery

將會在

bower_components/jquery/dist/

中找到生產環節版本和開發版本

瀏覽器的兼容測試，在微軟提供的在線測試進行測試
https://developer.microsoft.c...

以及chrome官方提供的https://developers.google.com...

谷歌web開發者 https://developers.google.com... 里面有很多新奇好玩的東東

由于是國內的緣故，境外的源無法使用，所以使用國內的緩存服務

https://www.bootcdn.cn/jquery/
這個使用比較多

貌似已經不同步了。

http://jscdn.upai.com/
同樣版本也不同步了

http://www.staticfile.org/
同樣版本穩定在2.0

因為某些緣故，無法使用
https://developers.google.com...

唯一一個能用的只有bootcdn了。無奈。
很無奈，不可控的服務，唉

jquery定義了一個全局函數，由于使用頻繁定義了一個別名即

$

其中$和jQuery()為相同的。

如果在自己代碼中使用$作為變量，為了避免沖突，通過調用
jQuery.noConflict()
釋放$變量，讓其指向原始值

其擁有兩個名字的全局方法為jquery的核心查詢方法。
即

var divs = $("div");

由于需要引入庫，在本地寫及其的不方便，如果學習直接在線書寫 http://jsfiddle.net/ 即可 或者 https://codepen.io 即可 下面使用http://jsfiddle.net/

頁面引入jquery

https://cdn.bootcss.com/jquery/3.3.1/jquery.js

書寫獲得全部div

var divs = $("div");

或者

var divs = jQuery("div")

其中

$ 和 jQuery 

等價
其中Jquery為工廠函數，將會返回一個新創建的對象。

找到所有擁有details類的p元素，將其高亮顯示，

$("p.datails").css("background-color", "yellow")

在Jquery中為最終要的為Jquery()方法，即$

第一種

傳遞css選擇器（字符串）給$()方法。通過這種方法調用，$()會返回當前文檔中匹配該選擇器的元素集。

第二種

傳遞一個Element，Document或Window對象給$()方法，$()將會將其封裝成對象并返回。即，可以通過這種方式完成通過Jquery方法操作元素，而不使用原生DOM的方法。
即

$(document) 或 $(this)

使用這種方法可以完成對節點的操作

第三種

傳遞字符串文本給$()方法，jQuery將會根據傳入的文本創建好HTML元素，然后將其封裝為jQuery對象返回。

ps 在這種情況下，不能使用純文本，因為jQuery會將純文本當成選擇器解析。必須為html標簽，還需有一個尖角括號

通過這種方式調用，將會接受第二可選參數，傳遞Document對象指定與所創建元素相關聯的文檔。
即

var img = $("", 
        {
            src:url,    // 創建一個屬性,該屬性為src
            css: { borderWidth:5 },    // 創建css樣式
            click: handleClick    // 創建事件處理程序
        }
    );

將會返回一個jquery對象

第四種

傳入一個函數給$()方法。此時當文檔加載完畢并且DOM可操作時，傳入的函數將會被調用。
即

jQuery(
    () => {}
)

上方當文檔加載完畢的時候將會執行一個匿名函數

jQuery函數可以創建jQuery對象，用來注冊DOM就緒時需要調用的處理程序。即全局jQuery對象

jQuery對象有jQuery函數返回的對象，一個jQuery對象表示一組文檔元素，即jQuery集，包裝集，jQuery結果

傳遞css選擇器給jQuery函數時，將會返回jQuery對象表示匹配該選擇器的文檔元素集。

hQuery函數為定義在jQuery命名空間中的函數，或者靜態方法

jQuery方法是由jQuery函數返回的jQuery對象的方法。

$()返回值為一個jQuery對象，jQuery對象為類數組。
即

$("body").length;   // 將會返回文檔中該元素的數量，從1開始
$("body")[0];   // 等同于 document.body

同樣的，size替代length屬性，get()替代方括號索引，用toArray方法將jQuery對象轉為真實數組

var bodyscript = $("script", document.body);
bodyscript.selector;    // 創建對象時的選擇器字符串,即script
bodyscript.context;    // 上下文對象 即body、
bodyscript.jquery; // 版本號

each()類似于原生的for循環

// 下方將會獲取所有的dvi元素，并將其打印出來
$("div").each(
        (idx) => {
            console.log(this);
        }
    );

類似于原生的forEach()方法，直接使用this關鍵字指代其遍歷到的對象。

ps map()方法和原生的map一致。（由于時間問題，規定吸取了jquery的一部分），都為將對象的屬性每次傳入回調函數

一個栗子

$("div").each(() => {    // 選擇div元素
    if ($(this).is(":hidden")) return;    // 如果是隱藏元素，直接跳過
})

jQuery上最簡單，最常見的操作為獲取(get),或者設置(set)的HTML屬性。
jQuery將會使用同一個方法既當getter又做setter，而不是定義一對方法，如果傳入一個新值給方法，則它將設置此值。
用做setter時，這些方法會給jquery對象中的每個元素設置值。然后返回對象，使用鏈式調用

attr()方法為jQuery中用于HTML屬性的getter/setter
一個栗子

$("form").attr("action");    // 將會獲取到form元素的action屬性
$("#icon").attr("src", "icon.gif");    // 設置src屬性
$("#banner").attr({src:"bannner.gif", alt:"Advertisement", width:720, height:64});    // 設置屬性
$("a").attr("target", "_blank");    // 將所有的鏈接在新窗口打開
$("a").attr("target", () => { // 進行選擇，使得站內鏈接在本窗口打開，讓站外的鏈接在新窗口打開
    if (this.host = location.host) return "_self";
    else return "_blank"; 
});

使用的是css()方法。設置樣式的時候，css是直接添加到style屬性中

$("h1").css("font-weight");    // 獲取第一個h1的字體寬度
$("h1").css("fontWeight");    // 同理
$("h1").css("font");    // 這個錯誤，不能使用混合樣式
$("h1").css("font-variant", "smallcaps");    // 設置css
$("div.note").css("border", "solid black 2px");    //選擇clas為note的元素，然后設置css
$("h1").css({
    background:"white",    // 一次性的設置多個屬性,由于是對象，所以這里使用逗號
    textColor:"white",    
    fontVariant:"small-caps"
});
// 使用函數
$("h1").css("fongt-size", (i, curval) => { return Math.round(1.25*parseInt(curval)); });    // 第一個參數為計數，第二個參數為其屬性值,parseInt 的作用為獲取其數字,其中jquery會自動加上單位

// 添加css類
$("h1").addClass("hilite");    // 給所有的h1元素添加一個類
$("h1+p").addClass("hilite first");    //給p的父元素為h1的元素添加兩個類
$("h1").addClass((n) => { return "section" + n; });    // 其中n表示當前遍歷到的索引值
// 刪除css類
$("p").removeClass("hilite");    // 刪除一個類
$("p").removeClass("hilite first");    // 刪除多個類
$("p").removeClass((n) => { return "section" + n });    // 通過函數刪除
$("p").removeClass();    //刪除所有的自定義類
// 切換css類,即第一次執行顯示，第二次執行消失
$("tr:odd").toggleClass("oddrow");    // 匹配列表中的奇數序列的元素，然后進行添加
$("h1").toggleClass("big bold");    //切換為這個類
$("h1").toggleClass((n) => { return "big bold h1-" + n });    //使用函數
$("h1").toggleClass("hilite", true);    // 添加
$("h1").toggleClass("hilite", false);    // 移出
// 檢測css類
$("p").hasClass("first");    // 確定是否有該類
$("#lead").is(".first");    // 同理
$("#lead").is(".first.hilite");    // 是否有兩個類

is為判斷，當是的時候選擇true，否的時候選擇false

$("#surname").val();    // 獲取surname的文本域的值
$("#usstate").val();    // 獲取值
$("select#extras").val();    // 選擇select 并且id為extras的元素
$("input:radio[name=ship]:checked").val();    // 獲取選中的單選按鈕的值
$("#email").val("設置域");    // 給文本域進行設置
$("input:checkbox").val(["opt1", "opt2"]);    // 選中帶有這些值的框
$("input:text").val(() => { return this.defaultValue; });    // 將其設置為默認值

var title = $("head title").text();    // 獲取類為head title的元素內容，類似于原生的textContent
var headline = $("h1").html();    // 獲取第一個h1元素的html 類似于原生的innerHTML
$("h1").text((n, current) => { return "&" + (n+1) + ":" + current });    // 添加章節，使用函數

var elt = $("#sprite");    // 選擇元素
var position = elt.offset();    // 獲取當前位置,相對于文檔，不是相對于視窗
position.top += 100;    // 改變y的值
elt.offset(position);    // 設置新位置
// 將所有的
元素向右移動，移動的距離取決于它們在文檔中的位置
$("h1").offset((index, curpos) => { return { left: curpos.left + 25*index, top:curpos.top }; });    // 進行偏移
// 獲取高度
var body = $("body");    
var contentWidth = body.width();    // 獲取w3c盒子的高度
var paddingWidth = body.outerWidth();    // 獲取ie盒子的高度
var borderWidth = body.outerWidth(true);    // 加上margin的寬度
var padding = paddingWidth - contentWidth;    // 左padding和右padding的值
var borders = borderWidth - paddingWidth;    // 左border和右border的和
var margins = marginWidth - borderWidth;    // 左margin和右margin的和
// 根據頁面數 n 來滾動窗口。n 可以為分數 或 負數
function page(n) {
    var w = $(window);    // 將window封裝為jquery對象
    var pagesize = w.height();    // 得到頁面的大小（文檔的大小）
    var current = w.scrollTop();    // 得到當前滾動條的位置
    w.scrollTop(current + n*pagesize);    // 設置新的滾動條的位置
}

$("div").data("x", 1);    // 此不在DOM上顯示，會直接作為屬性附上
$("div").removeData("x");    // 移出數據
var x = $("div").data("x");    // 獲取一些數據

下面是正著

$("h1").append("
");    // 將br作為h1的子節點，在尾部
$("h1").prepend("");    // 在起始位置添加標簽 ，依舊為子節點
$("h1").before("
");    // 在每個h1的前面添加水平線
$("h1").after("
");    // 在每個h1的后面添加標簽
$("h1").replaceWith("
");    // 替換h1元素為br元素
$("h2").each( () => {    // 進行遍歷
        var h2 = $(this);    // 獲取當前遍歷到的元素
        h2.replaceWidth("
" + h2.html() + "
");    // 將目標元素的內容進行替換
    });

$("
").appendTo("#log");    // 將br添加到#log中，到末尾
$(document.createTextNode("&")).prependTo("h1");    // 給所有的h1添加到起始處
$("
").insertAfter("h1");    // 在所有的h1后面插入水平線
$("
").replaceAll("hr");    // 將hr替換為br

// 給文檔結尾添加一個帶有linklist id 的新div
$(document.body).append("
List of Links
");
// 將文檔中的所有鏈接復制并插入該新div中
$("a").clone().appendTo("#linklist");    // clone不會復制事件處理程序
// 在每一個鏈接后插入
元素，使其能獨立顯示
$("#linklist > a").after("
");

// 用元素包裝所有的
元素
$("h1").wrap(document.createElement("i"));    // 產生

// 包裝所有
元素的內容，使用字符串參數更簡單
$("h1").wrapInner("");    // 產生 

// 將第一個段落包裝在一個錨點和div里
$("body > p:first").wrap("
");
// 將所有的其他段落包裝在另一個div里
$("body > p:not(:first)").warpAll("
")