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

jquery介紹

官網(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?q=keywords: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-development/learning-jquery-fourth-edition
https://www.manning.com/books/jquery-in-action-third-edition
https://www.syncfusion.com/ebooks/jquery
一本都看不懂。蜂科。顽决。
js基金會(huì) https://js.foundation/ 是滴短条，js也擁有基金會(huì)了，和linux一樣
目前js基金會(huì)下屬項(xiàng)目 https://js.foundation/community/projects
好啦才菠，有點(diǎn)小亂茸时。大概也就這些了。
其中jquery的最出色的地方在于對(duì)元素的選擇鸠儿。

jQuery Mobile 介紹

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

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/jquery-mobile/builds/313129853?utm_source=github_status&utm_medium=notification

╮(╯▽╰)╭
唉

下載jquery

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

使用npm安裝

npm install --save jquery 

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

node_modules/jquery/dist/

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

使用bower

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

bower install jquery

將會(huì)在

bower_components/jquery/dist/

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

關(guān)于測(cè)試

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

以及chrome官方提供的https://developers.google.com/web/tools/lighthouse/?hl=zh-cn

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

關(guān)于CDN

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

由bootcdn提供的jquery

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

由百度云CDN提供

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

又拍云提供

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

七牛云提供

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

谷歌

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

總結(jié)

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

jquery基礎(chǔ)

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

$

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

如果在自己代碼中使用變量，讓其指向原始值

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

var divs = $('div');

獲得全部元素

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

頁(yè)面引入jquery

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

書寫獲得全部div
<script async src="http://jsfiddle.net/melovemingming/3uw4y5tz/8/embed/"></script>

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()函數(shù)

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

選擇的方式

第一種

傳遞css選擇器（字符串）給()會(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 = $('<img/>', 
        {
            src:url,    // 創(chuàng)建一個(gè)屬性,該屬性為src
            css: { borderWidth:5 }, // 創(chuàng)建css樣式
            click: handleClick  // 創(chuàng)建事件處理程序
        }
    );

image

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

第四種

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

jQuery(
    () => {}
)

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

一些術(shù)語(yǔ)

函數(shù)

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

對(duì)象

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

選中元素

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

jQuery函數(shù)

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

jQuery方法

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

查詢與查詢結(jié)果

$()返回值為一個(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()

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

// 下方將會(huì)獲取所有的dvi元素，并將其打印出來(lái)
$('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;  // 如果是隱藏元素麻献，直接跳過
})

getter 和 setter

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)用

獲取和設(shè)置HTML屬性

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"; 
});

獲取和設(shè)置css屬性

使用的是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)加上單位

獲取和設(shè)置css類

// 添加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

獲取設(shè)置表單值

$('#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)值

設(shè)置和獲取元素內(nèi)容

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ù)

獲取和設(shè)置元素的位置的高和寬

var elt = $('#sprite'); // 選擇元素
var position = elt.offset();    // 獲取當(dāng)前位置,相對(duì)于文檔宇立，不是相對(duì)于視窗
position.top += 100;    // 改變y的值
elt.offset(position);   // 設(shè)置新位置
// 將所有的<h1>元素向右移動(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ù)頁(yè)面數(shù) n 來(lái)滾動(dòng)窗口鄙信。n 可以為分?jǐn)?shù) 或 負(fù)數(shù)
function page(n) {
    var w = $(window);  // 將window封裝為jquery對(duì)象
    var pagesize = w.height();  // 得到頁(yè)面的大小（文檔的大谢荡瘛）
    var current = w.scrollTop();    // 得到當(dāng)前滾動(dòng)條的位置
    w.scrollTop(current + n*pagesize);  // 設(shè)置新的滾動(dòng)條的位置
}

獲取和設(shè)置元素的位置高寬

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

修改文檔結(jié)構(gòu)

插入和替換元素

下面是正著

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

下面是倒著

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

復(fù)制元素

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

包裝元素

// 用<i>元素包裝所有的<h1>元素
$('h1').wrap(document.createElement('i'));  // 產(chǎn)生<i><h1></h1></i>
// 包裝所有<h1>元素的內(nèi)容，使用字符串參數(shù)更簡(jiǎn)單
$('h1').wrapInner('<i/>');  // 產(chǎn)生 <h1><i></i></h1>
// 將第一個(gè)段落包裝在一個(gè)錨點(diǎn)和div里
$('body > p:first').wrap('<a name="lead"><div class="first"></div></a>');
// 將所有的其他段落包裝在另一個(gè)div里
$('body > p:not(:first)').warpAll('<div class="rest"></div>')