第四章 前端開發——JQuery庫

第四章 前端開發學習——JQuery庫

1、jQuery基礎

2、使用選擇器獲取元素

3、使用篩選器獲取元素

4、DOM操做

5、屬性和樣式操做

6、jQuery事件機制

7、動畫效果

8、工具和其餘操做

9、jQuery插件

 

1、JQuery基礎

1.jQuery概述

什麼是jQuery（what）：

• jQuery 是一個高效、精簡而且功能豐富的 JavaScript 工具庫
• jQuery極大的簡化了JavaScript 編程

什麼是JavaScript類庫（what）：

• 它就是一些函數的集合，就是把特定效果的代碼寫好，你只須要在用的時候要用不多的代碼去調用。
• 起主導做用的是你的代碼，由你來決定什麼時候使用類庫。

常見的類庫：

• jQuery
• ExtJS
• prototype.js
• zepto.js

jQuery優點：

• 開源 免費
• 便捷的選擇器
• 方便的DOM操做
• 方便的動畫特效
• 易用的ajax操做
• 豐富的插件擴展
• 解決瀏覽器兼容性效果

jQuery版本：

• 1.x.x的版本是能夠 支持 IE6~IE8的
• 2.x.x到3.x.x 的版本，不在兼容IE8以及如下瀏覽器

JQuery庫下載：

• 官網 https://jquery.com/
• 文檔API： http://jquery.cuishifeng.cn/index.html

 

2.jQuery基本使用

（1）如何使用JQuery（how）：

方式一：下載jQuery文件到本地，再引入jQuery文件

<script src="jquery-3.3.1.min.js"></script>
<script>
    //注意，必定在引入jQuery以後，再使用jQuery提供的各類操做
</script>

方式二：直接使用CDN

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    code...
</script>
BootCDN jQuery各個版本地址： https://www.bootcdn.cn/jquery/

 

（2）jQuery對象

先來看一下原生JavaScript

再來看一下jQuery對象

$是jQuery的別名。

$對象能夠用做選擇器獲取元素，還能夠建立DOM對象

jQuery('.item').show()
//等同於
$('.item').show()

 

（3）文檔就緒事件

$(document).ready(function(){

   // 開始寫 jQuery 代碼...

});

上述寫法能夠簡寫

$(function(){

   // 開始寫 jQuery 代碼...

});

 

 

（4）連貫操做

$(dom).find('img').css('border','1px solid #ccc').css('color', 'red').prop('src', '1.jpg').toggle()

也能夠寫成這樣方便閱讀

 

（5）jQueryDOM和jsDOM的區別

①獲取元素對象的區別

經過原生js獲取的dom對象，咱們稱之爲jsDOM或者原生DOM

經過jQuery選擇器獲取的dom對象，咱們稱之爲 jQuery DOM

②修改CSS樣式的區別

原生JS：

jQuery：

 ③jquery DOM 和 原生JS DOM 互相轉換

A）原生JS DOM 轉 jQuery DOM

B）jQuery DOM 轉 原生 JS DOM

 

 

2、使用選擇器獲取元素

經過選擇器，能夠獲取到頁面元素。jQuery具備強大的選擇器，跟CSS3選擇器相似。

1.基本選擇器（同CSS3）

• #id　　  根據給定的ID匹配一個元素
• element  根據給定的元素標籤名匹配全部元素
• .class　　根據給定的css類名匹配元素。
• *      匹配全部元素
• selector1,selector2,selectorN 將每個選擇器匹配到的元素合併後一塊兒返回

2.層級選擇器（同CSS3）

• ancestor descendant 在給定的祖先元素下匹配全部的後代元素
• parent>child     在給定的父元素下匹配全部的子元素
• prev+next       匹配全部緊接在 prev 元素後的 next 元素
• prev~siblings　　  匹配 prev 元素以後的全部 siblings 元素

3.過濾選擇器

• :first      獲取第一個元素
• :not(selector) 去除全部與給定選擇器匹配的元素
• :even　　    匹配全部索引值爲偶數的元素，從 0 開始計數
• :odd       匹配全部索引值爲奇數的元素，從 0 開始計數
• :eq(index)   匹配一個給定索引值的元素
• :gt(index)   匹配全部大於給定索引值的元素
• :lang    　　選擇指定語言的全部元素。1.9+
• :last    　　獲取最後個元素
• :lt(index) 　　匹配全部小於給定索引值的元素
• :header 　　  匹配如 h1, h2, h3之類的標題元素
• :animated 　　 匹配全部正在執行動畫效果的元素
• :focus　　   匹配當前獲取焦點的元素
• :root 　　   選擇該文檔的根元素 1.9+
• :target 　　  選擇由文檔URI的格式化識別碼表示的目標元素 1.9

4.內容選擇器

• :contains(text) 匹配包含給定文本的元素
• :empty 　　  　匹配全部不包含子元素或者文本的空元素
• :has(selector)  匹配含有選擇器所匹配的元素的元素
• :parent 　　   匹配含有子元素或者文本的元素

5.可見性選擇器

• :hidden 匹配全部不可見元素，或者type爲hidden的元素
• :visible 匹配全部的可見元素

6.屬性選擇器（同CSS3）

• [attribute] 匹配包含給定屬性的元素
• [attribute=value] 匹配給定的屬性是某個特定值的元素
• [attribute!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素
• [attribute^=value] 匹配給定的屬性是以某些值開始的元素
• [attribute$=value] 匹配給定的屬性是以某些值結尾的元素
• [attribute*=value] 匹配給定的屬性是以包含某些值的元素
• [attrSel1][attrSel2][attrSelN] 複合屬性選擇器，須要同時知足多個條件時使用

7.子元素選擇器（同CSS3）

• :first-child 匹配所給選擇器( :以前的選擇器)的第一個子元素
• :first-of-type 結構化僞類，匹配E的父元素的第一個E類型的孩子 1.9+
• :last-child 匹配最後一個子元素
• :last-of-type 結構化僞類，匹配E的父元素的最後一個E類型的孩子 1.9+
• :nth-child() 匹配其父元素下的第N個子或奇偶元素
• :nth-last-child() 選擇全部他們父元素的第n個子元素。計數從最後一個元素開始到第一個 1.9+
• :nth-last-of-type() 選擇的全部他們的父級元素的第n個子元素，計數從最後一個元素到第一個 1.9+
• :nth-of-type() 選擇同屬於一個父元素之下，而且標籤名相同的子元素中的第n個 1.9+
• :only-child 若是某個元素是父元素中惟一的子元素，那將會被匹配
• :only-of-type 選擇全部沒有兄弟元素，且具備相同的元素名稱的元素 1.9+

8.表單選擇器

• :input 匹配全部 input, textarea, select 和 button 元素
• :text 匹配全部的單行文本框
• :password 匹配全部密碼框
• :radio 匹配全部單選按鈕
• :checkbox 匹配全部複選框
• :submit 匹配全部提交按鈕，匹配 type="submit" 的input或者button
• :image 匹配全部圖像域
• :reset 匹配全部重置按鈕
• :button 匹配全部按鈕
• :file 匹配全部文件域

9.表單對象選擇器

• :enabled 匹配全部可用元素
• :disabled 匹配全部不可用元素
• :checked 匹配全部選中的被選中元素(複選框、單選框等，select中的option)
• :selected 匹配全部選中的option元素

 

3、使用篩選器獲取元素

1.過濾

• eq(index|-index) 獲取當前鏈式操做中第N個jQuery對象，返回jQuery對象
• first() 獲取第一個元素
• last() 獲取最後個元素
• filter(expr|obj|ele|fn) 篩選出與指定表達式匹配的元素集合。
• not(expr|ele|fn) 從匹配元素的集合中刪除與指定表達式匹配的元素
• has(expr|ele) 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
• slice(start,[end]) 選取一個匹配的子集

2.查找（破壞性操做）

• children([expr]) 取得一個包含匹配的元素集合中每個元素的全部子元素的元素集合。
• find(e|o|e) 搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法
• parent([expr]) 取得一個包含着全部匹配元素的惟一父元素的元素集合
• parents([expr]) 取得一個包含着全部匹配元素的祖先元素的元素集合（不包含根元素）
• parentsUntil([e|e][,f]) 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止
• offsetParent() 返回第一個匹配元素用於定位的父節點。
• next([expr]) 取得一個包含匹配的元素集合中每個元素緊鄰的後面同輩元素的元素集合
• nextAll([expr]) 查找當前元素以後全部的同輩元素
• nextUntil([e|e][,f]) 查找當前元素以後全部的同輩元素，直到遇到匹配的那個元素爲止
• prev([expr]) 取得一個包含匹配的元素集合中每個元素緊鄰的前一個同輩元素的元素集合
• prevall([expr]) 查找當前元素以前全部的同輩元素
• prevUntil([e|e][,f]) 查找當前元素以前全部的同輩元素，直到遇到匹配的那個元素爲止
• siblings([expr]) 取得一個包含匹配的元素集合中每個元素的全部惟一同輩元素的元素集合
• closest(e|o|e) 1.7* 從元素自己開始，逐級向上級元素匹配，並返回最早匹配的元素

3.串聯

• add(e|e|h|o[,c]) 1.9* 把與表達式匹配的元素添加到jQuery對象中
• andSelf() 1.8- 加入先前所選的加入當前元素中
• addBack() 1.9+ 添加堆棧中元素集合到當前集合，一個選擇性的過濾選擇器。
• contents() 查找匹配元素內部全部的子節點（包括文本節點）
• end() 回到最近的一個"破壞性"操做以前

4.其餘元素處理

• is(expr|obj|ele|fn) 根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，若是其中至少有一個元素符合這個給定的表達式就返回true
• map(callback) 將一組元素轉換成其餘數組（不管是否是元素數組）

 

 

4、DOM操做

1.內部插入（如下舉例效果是實現經過按鈕給div元素內添加img元素）

• append(content|fn) 向每一個匹配的元素內部追加內容
• appendTo(content) 把全部匹配的元素追加到另外一個指定的元素元素集合中
• prepend(content|fn) 向每一個匹配的元素內部前置內容
• prependTo(content) 把全部匹配的元素前置到另外一個、指定的元素元素集合中

•  

2.外部插入

• after(content|fn) 在每一個匹配的元素以後插入內容
• before(content|fn) 在每一個匹配的元素以前插入內容
• insertAfter(content) 把全部匹配的元素插入到另外一個、指定的元素元素集合的後面
• insertBefore(content) 把全部匹配的元素插入到另外一個、指定的元素元素集合的前面

•  

3.包裹

• wrap(html|ele|fn) 把全部匹配的元素用其餘元素的結構化標記包裹起來
• unwrap() 這個方法將移出元素的父元素
• wrapAll(html|ele) 移出元素的父元素
• wrapInner(html|ele|fn) 將每個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來

•  

4.替換

• replaceWith(content|fn) 將全部匹配的元素替換（注意：是替換，原元素將不保留）成指定的HTML或DOM元素
• replaceAll(selector) 用匹配的元素替換掉全部 selector匹配到的元素

•  

5.刪除

• empty() 刪除匹配的元素集合中全部的子節點
• remove([expr]) 從DOM中刪除全部匹配的元素
• detach([expr]) 從DOM中刪除全部匹配的元素 這個方法不會把匹配的元素從jQuery對象中刪除，於是能夠在未來再使用這些匹配的元素。與remove()不一樣的是，全部綁定的事件、附加的數據等都會保留下來

6.複製（克隆）

• clone([Even[,deepEven]]) 克隆匹配的DOM元素而且選中這些克隆的副本

 

5、屬性和樣式操做

1.元素屬性操做

A）屬性

• attr(name|pro|key,val|fn) 設置或返回被選元素的屬性值
  • 設置元素屬性值：
  • 返回元素屬性值：
• removeAttr(name) 從每個匹配的元素中刪除一個屬性
• prop(n|p|k,v|f) 獲取在匹配的元素集中的第一個元素的屬性值
• removeProp(name) 用來刪除由.prop()方法設置的屬性集

B）class

• addClass(class|fn) 爲每一個匹配的元素添加指定的類名
• removeClass([class|fn]) 從全部匹配的元素中刪除所有或者指定的類
• toggleClass(class|fn[,sw]) 若是存在（不存在）就刪除（添加）一個類
• hasClass(class) 檢查當前的元素是否含有某個特定的類，若是有，則返回true

C）代碼、文本、值

• html([val|fn]) 取得第一個匹配元素的html內容
• text([val|fn]) 取得全部匹配元素的內容
• val([val|fn|arr]) 得到匹配元素的當前值

 

2.元素樣式操做

A）設置CSS

• css(name|pro|[,val|fn]) 訪問匹配元素的樣式屬性

B）元素位置

• offset() 獲取匹配元素在當前視口的相對偏移
• position() 獲取匹配元素相對父元素的偏移
• scrollLeft() 獲取匹配元素相對滾動條頂部的偏移
• scrollTop() 獲取匹配元素相對滾動條左側的偏移

C）元素尺寸（都有查看和設置的功能）

• width() 取得第一個匹配元素當前計算的寬度值（px）
  • 查看元素寬高：
  • 設置寬高：
• height() 取得匹配元素當前計算的高度值（px)
• innerWidth() 匹配元素內部區域寬度（包括補白、不包括邊框）
• innerHeight() 匹配元素內部區域高度（包括補白、不包括邊框）
• outerWidth() 匹配元素外部寬度（默認包括補白和邊框）
• outerHeight() 匹配元素外部高度（默認包括補白和邊框）

 

6、jQuery事件機制

1.事件操做

A）頁面載入事件

方式一：

$(document).ready(function(){
  // 在這裏寫你的代碼...
});

方式二：推薦

$(function($) {
  // 你能夠在這裏繼續使用$做爲別名...
});

 

2.事件綁定

• on(eve,[sel],[data],fn) 1.7+ 在選擇元素上綁定一個或多個事件的事件處理函數
• bind(type,[data],fn) 3.0- 請使用on()
• one(type,[data],fn) 爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數
•  

 

3.事件解綁

• off(eve,[sel],[fn]) 1.7+ 在選擇元素上移除一個或多個事件的事件處理函數
• unbind(t,[d|f]) 3.0- 請使用off()
• 其它：阻止事件冒泡和默認動做

•  

4.手動觸發事件

• trigger(type,[data]) 在每個匹配的元素上觸發某類事件

•  

 5.事件委派

$(document).on('click', 'button', fn)

 

6.事件切換

• hover([over,]out) 一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法
• toggle([spe],[eas],[fn]) 1.9-用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件

 

7.事件列表

• blur([[data],fn])
• change([[data],fn])
• click([[data],fn])
• dblclick([[data],fn])
• error([[data],fn])
• focus([[data],fn])
• focusin([data],fn) 當元素得到焦點時，觸發 focusin 事件。 focusin事件跟focus事件區別在於，他能夠在父元素上檢測子元素獲取焦點的狀況
• focusout([data],fn) 當元素失去焦點時觸發 focusout 事件。focusout事件跟blur事件區別在於，他能夠在父元素上檢測子元素失去焦點的狀況。
• keydown([[data],fn])
• keypress([[data],fn])
• keyup([[data],fn])
• mousedown([[data],fn])
• mouseenter([[data],fn]) 當鼠標指針穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一塊兒使用。與 mouseover 事件不一樣，只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。若是鼠標指針穿過任何子元素，一樣會觸發 mouseover 事件。
• mouseleave([[data],fn]) 當鼠標指針離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一塊兒使用。與 mouseout 事件不一樣，只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。若是鼠標指針離開任何子元素，一樣會觸發 mouseout 事件。
• mousemove([[data],fn])
• mouseout([[data],fn])
• mouseover([[data],fn])
• mouseup([[data],fn])
• resize([[data],fn])
• scroll([[data],fn])
• select([[data],fn])
• submit([[data],fn])
• unload([[data],fn])

 

8.事件對象

 A）屬性

• eve.currentTarget 在事件冒泡階段中的當前DOM元素
• eve.data 當前執行的處理器被綁定的時候，包含可選的數據傳遞給jQuery.fn.bind eve.delegateTarget 1.7+ 當currently-called的jQuery事件處理程序附加元素
• eve.namespace 當事件被觸發時此屬性包含指定的命名空間
• eve.pageX 鼠標相對於文檔的左邊緣的位置
• eve.pageY 鼠標相對於文檔的頂部邊緣的位置
• eve.relatedTarget 在事件中涉及的其它任何DOM元素
• eve.result 這個屬性包含了當前事件事件最後觸發的那個處理函數的返回值，除非值是
• undefined eve.target 最初觸發事件的DOM元素
• eve.timeStamp 返回事件觸發時距離1970年1月1日的毫秒數
• eve.type 事件類型 eve.which 針對鍵盤和鼠標事件，這個屬性能肯定你到底按的是哪一個鍵或按鈕

 B）方法

• eve.preventDefault() 阻止默認事件行爲的觸發
• eve.isDefaultPrevented() 根據事件對象中是否調用過
• event.preventDefault() 方法來返回一個布爾值
• eve.stopPropagation() 防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函數
• eve.isPropagationStopped() 檢測
• event.stopPropagation() 是否被調用過
• eve.stopImmediatePropagation() 阻止剩餘的事件處理函數執行而且防止事件冒泡到DOM樹上
• eve.isImmediatePropagation() 檢測
• event.stopImmediatePropagation() 是否被調用過

 

7、動畫效果

1.基本方法

• show([s,[e],[fn]]) 顯示隱藏的匹配元素
• hide([s,[e],[fn]]) 隱藏顯示的元素
• toggle([s],[e],[fn]) 若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的

  參數詳解

• speed : 三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
• easing : (Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"
• fn : 在動畫完成時執行的函數，每一個元素執行一次。

 

2.滑動效果

• slideDown([s],[e],[fn]) 經過高度變化（向下增大）來動態地顯示全部匹配的元素
• slideUp([s,[e],[fn]]) 經過高度變化（向上減少）來動態地隱藏全部匹配的元素
• slideToggle([s],[e],[fn]) 經過高度變化來切換全部匹配元素的可見性

  參數詳解

• speed : 三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
• easing : (Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"
• fn : 在動畫完成時執行的函數，每一個元素執行一次。

 

3.淡入淡出效果

• fadeIn([s],[e],[fn]) 經過不透明度的變化來實現全部匹配元素的淡入效果
• fadeOut([s],[e],[fn]) 經過不透明度的變化來實現全部匹配元素的淡出效果
• fadeToggle([s,[e],[fn]]) 經過不透明度的變化來開關全部匹配元素的淡入和淡出效果
• fadeTo([[s],o,[e],[fn]]) 把全部匹配元素的不透明度以漸進方式調整到指定的不透明度

  參數詳解：

• speed : 三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
• easing : (Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"
• fn : 在動畫完成時執行的函數，每一個元素執行一次。
• opacity : (用戶fadeTo)一個0至1之間表示透明度的數字。

 

4.自定義動畫

• animate(p,[s],[e],[fn])

  參數詳解：

• params : 一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合
• speed : 三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
• easing : 要使用的擦除效果的名稱(須要插件支持).默認jQuery提供"linear" 和 "swing".
• fn : 在動畫完成時執行的函數，每一個元素執行一次。

 

5.動畫控制

• stop([c],[j]) 中止全部在指定元素上正在運行的動畫
• delay(d,[q]) 設置一個延時來推遲執行隊列中以後的項目
• finish([queue]) 中止當前正在運行的動畫，刪除全部排隊的動畫，並完成匹配元素全部的動畫
•  

 

6.設置

//關閉頁面上全部的動畫
jQuery.fx.off = true;

 

8、工具和其餘操做

1.jQuery對象訪問

• each(callback) 遍歷jquery dom
• size() 1.8- 返回dom集合中的個數 同length length 返回dom集合中的個數
• selector 返回選擇器
• context 返回原生js dom
• get([index]) 獲取dom集合中一個
• index([selector|element]) 索引值
• toArray() 轉爲純數組

2.數組和對象操做

• $.each(object,[callback]) 遍歷數組 對象
• $.extend([d],tgt,obj1,[objN]) 合併對象 合併到第一個參數
• $.grep(array,fn,[invert]) 過濾數組
• $.makeArray(obj) 把類數組對象變爲數組
• $.map(arr|obj,callback) 操做數組的每一單元
• $.inArray(val,arr,[from]) 判斷值是否在數組中
• $.merge(first,second) 合併數組
• $.unique(array) 去重
• $.parseJSON(json) 解析json
• $.parseXML(data) 解析xml

3.類型檢測

• $.contains(c,c) 判斷一個元素是不是另外一個元素的後代嗎元素
• $.type(obj) 判斷類型
• $.isarray(obj) 是否爲數組
• $.isFunction(obj) 是不是function
• $.isEmptyObject(obj) 是否爲空對象
• $.isPlainObject(obj) 是否爲純粹的對象
• $.isWindow(obj) 是不是window對象
• $.isNumeric(value) 1.7+是不是number

4.其餘操做

• $.trim(str) 去除左右兩邊的空格
• $.param(obj,[traditional]) 把對象或數組 轉爲 特殊格式的字符串 序列化

 

9、jQuery插件