摘要：又拍云提供同樣版本也不同步了七牛云提供同樣版本穩(wěn)定在谷歌因?yàn)槟承┚壒剩瑹o法使用總結(jié)唯一一個(gè)能用的只有了。查詢與查詢結(jié)果返回值為一個(gè)對(duì)象，對(duì)象為類數(shù)組。

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

官網(wǎng)：https://jquery.com/
github: https://github.com/jquery/jquery
blog：https://blog.jquery.com/
學(xué)習(xí)中心：https://learn.jquery.com/ 推薦使用學(xué)習(xí)中心學(xué)習(xí)jquery
文檔：https://api.jquery.com/ 推薦使用文檔進(jìn)行相關(guān)的查詢
封裝jquery插件 http://plugins.jquery.com/ 官網(wǎng)推薦使用npm包的方式，帶上jquery-plugin
相關(guān)插件：npm包 https://www.npmjs.com/search?...:jquery-plugin jquery 官方插件 http://plugins.jquery.com/ 不過目前處于不更新的狀態(tài)，不推薦使用內(nèi)部的插件，因?yàn)楹芸赡軟]有作者維護(hù)了。并且已經(jīng)處于自讀的方式，不推薦使用，推薦使用npm的方式，使用jquery的相關(guān)插件
jquery官方推薦圖書 https://www.packtpub.com/web-...
https://www.manning.com/books...
https://www.syncfusion.com/eb...
一本都看不懂。。。
js基金會(huì) https://js.foundation/ 是滴，js也擁有基金會(huì)了，和linux一樣
目前js基金會(huì)下屬項(xiàng)目 https://js.foundation/communi...
好啦，有點(diǎn)小亂。大概也就這些了。
其中jquery的最出色的地方在于對(duì)元素的選擇。

jquery mobile 屬于移動(dòng)端的js庫

ps 移動(dòng)端的兼容問題，沒有客戶端的兼容問題的嚴(yán)重

官網(wǎng) https://jquerymobile.com/
文檔 https://api.jquerymobile.com/

ps 該項(xiàng)目博客保留在2017年，提交截止在去年，測(cè)試狀態(tài)不通過 https://travis-ci.org/jquery/...

╮(╯▽╰)╭
唉

打開 https://jquery.com/download/
在開發(fā)和調(diào)試的時(shí)候使用未壓縮的文件，在上線的時(shí)候使用壓縮的文件，節(jié)省空間。

npm install --save jquery 

上方將會(huì)保存在依賴項(xiàng)中
將會(huì)在

node_modules/jquery/dist/

中找到生產(chǎn)環(huán)境的版本和開發(fā)版本

bower一個(gè)類似于npm的包管理

bower install jquery

將會(huì)在

bower_components/jquery/dist/

中找到生產(chǎn)環(huán)節(jié)版本和開發(fā)版本

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

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

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

由于是國(guó)內(nèi)的緣故，境外的源無法使用，所以使用國(guó)內(nèi)的緩存服務(wù)

https://www.bootcdn.cn/jquery/
這個(gè)使用比較多

貌似已經(jīng)不同步了。

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

http://www.staticfile.org/
同樣版本穩(wěn)定在2.0

因?yàn)槟承┚壒剩瑹o法使用
https://developers.google.com...

唯一一個(gè)能用的只有bootcdn了。無奈。
很無奈，不可控的服務(wù)，唉

jquery定義了一個(gè)全局函數(shù)，由于使用頻繁定義了一個(gè)別名即

$

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

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

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

var divs = $("div");

由于需要引入庫，在本地寫及其的不方便，如果學(xué)習(xí)直接在線書寫 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 

等價(jià)
其中Jquery為工廠函數(shù)，將會(huì)返回一個(gè)新創(chuàng)建的對(duì)象。

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

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

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

第一種

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

第二種

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

$(document) 或 $(this)

使用這種方法可以完成對(duì)節(jié)點(diǎn)的操作

第三種

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

ps 在這種情況下，不能使用純文本，因?yàn)閖Query會(huì)將純文本當(dāng)成選擇器解析。必須為html標(biāo)簽，還需有一個(gè)尖角括號(hào)

通過這種方式調(diào)用，將會(huì)接受第二可選參數(shù)，傳遞Document對(duì)象指定與所創(chuàng)建元素相關(guān)聯(lián)的文檔。
即

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

將會(huì)返回一個(gè)jquery對(duì)象

第四種

傳入一個(gè)函數(shù)給$()方法。此時(shí)當(dāng)文檔加載完畢并且DOM可操作時(shí)，傳入的函數(shù)將會(huì)被調(diào)用。
即

jQuery(
    () => {}
)

上方當(dāng)文檔加載完畢的時(shí)候?qū)?huì)執(zhí)行一個(gè)匿名函數(shù)

jQuery函數(shù)可以創(chuàng)建jQuery對(duì)象，用來注冊(cè)DOM就緒時(shí)需要調(diào)用的處理程序。即全局jQuery對(duì)象

jQuery對(duì)象有jQuery函數(shù)返回的對(duì)象，一個(gè)jQuery對(duì)象表示一組文檔元素，即jQuery集，包裝集，jQuery結(jié)果

傳遞css選擇器給jQuery函數(shù)時(shí)，將會(huì)返回jQuery對(duì)象表示匹配該選擇器的文檔元素集。

hQuery函數(shù)為定義在jQuery命名空間中的函數(shù)，或者靜態(tài)方法

jQuery方法是由jQuery函數(shù)返回的jQuery對(duì)象的方法。

$()返回值為一個(gè)jQuery對(duì)象，jQuery對(duì)象為類數(shù)組。
即

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

同樣的，size替代length屬性，get()替代方括號(hào)索引，用toArray方法將jQuery對(duì)象轉(zhuǎn)為真實(shí)數(shù)組

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

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

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

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

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

一個(gè)栗子

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

jQuery上最簡(jiǎn)單，最常見的操作為獲取(get),或者設(shè)置(set)的HTML屬性。
jQuery將會(huì)使用同一個(gè)方法既當(dāng)getter又做setter，而不是定義一對(duì)方法，如果傳入一個(gè)新值給方法，則它將設(shè)置此值。
用做setter時(shí)，這些方法會(huì)給jquery對(duì)象中的每個(gè)元素設(shè)置值。然后返回對(duì)象，使用鏈?zhǔn)秸{(diào)用

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

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

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

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

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

is為判斷，當(dāng)是的時(shí)候選擇true，否的時(shí)候選擇false

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

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

var elt = $("#sprite");    // 選擇元素
var position = elt.offset();    // 獲取當(dāng)前位置,相對(duì)于文檔，不是相對(duì)于視窗
position.top += 100;    // 改變y的值
elt.offset(position);    // 設(shè)置新位置
// 將所有的
元素向右移動(dòng)，移動(dòng)的距離取決于它們?cè)谖臋n中的位置
$("h1").offset((index, curpos) => { return { left: curpos.left + 25*index, top:curpos.top }; });    // 進(jìn)行偏移
// 獲取高度
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的和
// 根據(jù)頁面數(shù) n 來滾動(dòng)窗口。n 可以為分?jǐn)?shù) 或 負(fù)數(shù)
function page(n) {
    var w = $(window);    // 將window封裝為jquery對(duì)象
    var pagesize = w.height();    // 得到頁面的大?。ㄎ臋n的大?。?    var current = w.scrollTop();    // 得到當(dāng)前滾動(dòng)條的位置
    w.scrollTop(current + n*pagesize);    // 設(shè)置新的滾動(dòng)條的位置
}

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

下面是正著

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

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

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

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

// 包裝所有
元素的內(nèi)容，使用字符串參數(shù)更簡(jiǎn)單
$("h1").wrapInner("");    // 產(chǎn)生 

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