jQuery(一)

jquery
jquery爲一種庫，屬於最基礎的一個庫，伴隨着h5的到來，不少jquery的規則直接融入到了規則自己了，直接使用原生的js也能達到相同的目的。雖然如此，不過依舊要繼續。

jquery介紹

官網：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?q=keywords:jquery-plugin jquery 官方插件 http://plugins.jquery.com/ 不過目前處於不更新的狀態，不推薦使用內部的插件，由於極可能沒有做者維護了。而且已經處於自讀的方式，不推薦使用，推薦使用npm的方式，使用jquery的相關插件
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基金會 https://js.foundation/ 是滴，js也擁有基金會了，和linux同樣
目前js基金會下屬項目 https://js.foundation/community/projects
好啦，有點小亂。大概也就這些了。
其中jquery的最出色的地方在於對元素的選擇。

jQuery Mobile 介紹

jquery mobile 屬於移動端的js庫

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

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

ps 該項目博客保留在2017年，提交截止在去年，測試狀態不經過 https://travis-ci.org/jquery/jquery-mobile/builds/313129853?utm_source=github_status&utm_medium=notification

╮(╯▽╰)╭
唉

下載jquery

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

使用npm安裝

npm install --save jquery

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

node_modules/jquery/dist/

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

使用bower

bower一個相似於npm的包管理

bower install jquery

將會在

bower_components/jquery/dist/

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

關於測試

瀏覽器的兼容測試，在微軟提供的在線測試進行測試
https://developer.microsoft.com/en-us/microsoft-edge/

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

谷歌web開發者 https://developers.google.com/web/ 裏面有不少新奇好玩的東東

關於CDN

因爲是國內的緣故，境外的源沒法使用，因此使用國內的緩存服務

由bootcdn提供的jquery

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

由百度雲CDN提供

貌似已經不一樣步了。

又拍雲提供

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

七牛雲提供

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

谷歌

由於某些緣故，沒法使用
https://developers.google.com/speed/libraries/

總結

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

jquery基礎

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中爲最終要的爲Jquery()方法，即$

選擇的方式

第一種

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

第二種

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

$(document) 或 $(this)

使用這種方法能夠完成對節點的操做

第三種

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

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

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

var img = $('<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對象表示匹配該選擇器的文檔元素集。

jQuery函數

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

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

each()相似於原生的for循環

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

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

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

一個栗子

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

getter 和 setter

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

獲取和設置HTML屬性

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()方法。設置樣式的時候，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類

// 添加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>元素向右移動，移動的距離取決於它們在文檔中的位置
$('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/>');    // 將br做爲h1的子節點，在尾部
$('h1').prepend('<a>'); // 在起始位置添加標籤 ，依舊爲子節點
$('h1').before('<hr/>');    // 在每一個h1的前面添加水平線
$('h1').after('<hr/>'); // 在每一個h1的後面添加標籤
$('h1').replaceWith('<br/>');   // 替換h1元素爲br元素
$('h2').each( () => {   // 進行遍歷
        var h2 = $(this);   // 獲取當前遍歷到的元素
        h2.replaceWidth('<h1>' + h2.html() + '</h1>');  // 將目標元素的內容進行替換
    });

下面是倒着

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

複製元素

// 給文檔結尾添加一個帶有linklist id 的新div
$(document.body).append('<div id="linklist"><h1>List of Links</h1></div>');
// 將文檔中的全部連接複製並插入該新div中
$('a').clone().appendTo('#linklist');   // clone不會複製事件處理程序
// 在每個連接後插入<br>元素，使其能獨立顯示
$("#linklist > a").after('<br/>');

包裝元素

// 用<i>元素包裝全部的<h1>元素
$('h1').wrap(document.createElement('i'));  // 產生<i><h1></h1></i>
// 包裝全部<h1>元素的內容，使用字符串參數更簡單
$('h1').wrapInner('<i/>');  // 產生 <h1><i></i></h1>
// 將第一個段落包裝在一個錨點和div裏
$('body > p:first').wrap('<a name="lead"><div class="first"></div></a>');
// 將全部的其餘段落包裝在另外一個div裏
$('body > p:not(:first)').warpAll('<div class="rest"></div>')