前端培訓-中級階段（5）- jQuery的概念與基本使用（2019-07-11期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

前面咱們已經基本掌握常規的語法語義，以及基本的使用方法。接下來咱們講深刻進去了解其中內在的原理。
也瞭解 DOM、BOM，可是由於規範是一在變的，有沒有什麼類庫能夠方便操做這些呢？進入咱們今天的主題jQuery

jQuery

這東西出來好久了，通常來講都用過。提供一個速查地址

jQuery 簡介

jQuery 設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。
jQuery 是一個跨瀏覽器（兼容全部常見瀏覽器，包括IE6）的工具庫。
提供了元素選取、元素操做、CSS操做、事件處理、動畫、AJAX等功能。

jQuery 的特色

1. 鏈式操做（很優秀）
2. 高效、靈活的選擇器（id、class、tag、僞元素、attr、層級）
3. 插件機制
4. 兼容主瀏覽器，提供了統一的功能接口

jQuery 插件機制

1. jQuery.fn.extend(object) 對應 $('div'). 的操做。

   jQuery.fn.extend({
     check: function() {
       return this.each(function() { this.checked = true; });
     },
     uncheck: function() {
       return this.each(function() { this.checked = false; });
     }
   });
   $("input[type=checkbox]").check();
   $("input[type=radio]").uncheck();

2. jQuery.extend(object) 對應 $. 的操做。

   jQuery.extend({
     min: function(a, b) { return a < b ? a : b; },
     max: function(a, b) { return a > b ? a : b; }
   });
   jQuery.min(2,3); // => 2
   jQuery.max(4,5); // => 5

3. jQuery.extend([deep], target, object1, [objectN])
   用一個或多個其餘對象來擴展一個對象，返回被擴展的對象。

   若是不指定target，則給jQuery命名空間自己進行擴展。這有助於插件做者爲jQuery增長新方法。 若是第一個參數設置爲true，則jQuery返回一個深層次的副本，遞歸地複製找到的任何對象。不然的話，副本會與原對象共享結構。 未定義的屬性將不會被複制，然而從對象的原型繼承的屬性將會被複制。

jQuery 選擇器

1. 基本
   #id 、 element 、 .class 、 * 、 selector1,selector2,selectorN
2. 層級
   ancestor descendant 、 parent > child 、 prev + next 、prev ~ siblings
3. 基本篩選器
   :first、:not(selector)、:even、:odd、:eq(index)、:gt(index)、:lang1.9+、:last、:lt(index)、:header、:animated、:focus、:root1.9+、:target1.9+
4. 內容
   :contains(text)、:empty、:has(selector)、:parent
5. 可見性
   :hidden、:visible
6. 屬性
   [attribute]、[attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]、[attrSel1][attrSel2][attrSelN]
7. 子元素
   :first-child、:first-of-type1.9+、:last-child、:last-of-type1.9+、:nth-child、:nth-last-child()1.9+、:nth-last-of-type()1.9+、:nth-of-type()1.9+、:only-child、:only-of-type1.9+、
8. 表單
   :input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file
9. 表單對象屬性
   :enabled、:disabled、:checked、:selected
10. 混淆選擇器
    $.escapeSelector(selector)3.0+
    這個方法一般被用在類選擇器或者ID選擇器中包含一些CSS特殊字符的時候，這個方法基本上與CSS中CSS.escape()方法相似，惟一的區別是jquery中的這個方法支持全部瀏覽器。

jQuery()

核心函數，我認爲這是很優秀的一個點。小小的$函數，包含了咱們想要的大多數功能。

jQuery(Function)

等價於$.ready(Function)
當DOM載入就緒執行一個函數回調。能夠避免當頁面DOM尚未加載就操做了DOM。（會報錯）
簡單地說，這個方法純粹是對向window.load事件註冊事件的替代方法。不一樣的是能夠綁定屢次（addEventListener也能夠綁定屢次）。ready若是頁面加載完成以後，還會繼續調用（load不會）

jQuery(element)

將原生DOM轉換爲jQuery封裝的DOM。
也能夠傳入一個elementArray，來批量轉換一組原生DOM

jQuery([selector,[context]])

傳入一個選擇器，而且能夠限制範圍。返回一組匹配的元素。

jQuery(html,[ownerDocument])

據提供的原始 HTML 標記字符串，動態建立由 jQuery 對象包裝的 DOM 元素。同時設置一系列的屬性、事件等。
也能夠用來處理XML

$.fn.attr()、$.fn.prop()、$.fn.data()

$.fn.attr()

設置或返回被選元素的屬性值。好比href,src,id,class
對應attribute

$.fn.prop()

設置或返回被選元素的狀態值。能夠理解爲原始值、狀態。好比checked、disabled
對應properties

$.fn.data()

早期是直接綁定在DOM對象上的。
目前若是瀏覽器支持HTML5，會在DOM元素上data-*讀取和存儲。

data-* 也能夠DOM方法dataset來讀取或修改。

$.fn.get()、$.fn.eq、[]

1. $.fn.get()等價於[]
2. get獲取到的是真是的DOM

3. eq得到到的仍是jQuery包裹的DOM對象。相應的，還有其餘方法能夠獲取。

   1. 

html()、text()、val()

1. html()對應innerHTML
2. text()對應innerText
3. val()對應value

微信公衆號：前端linong

初級階段文章目錄

1. 前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）
2. 前端培訓-初級階段（13） - 正則表達式
3. 前端培訓-初級階段（13） - 類、模塊、繼承
4. 前端培訓-初級階段（13） - ECMAScript （內置對象、函數）
5. 前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）
6. 前端培訓-初級階段（1三、18）
7. 前端培訓-初級階段（9 -12）
8. 前端培訓-初級階段（5 - 8）
9. 前端培訓-初級階段（1 - 4）

中級階段文章目錄

1. 前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
2. 前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）
3. 前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）

資料

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃