jQuery

 一 jQuery介紹

1.1 什麼是jQuery

jQuery 是一個高效、精簡而且功能豐富的 JavaScript 工具庫

jQuery極大的簡化了 JavaScript編程

1.2 什麼是JS類庫

它就是一些函數的集合，就是把特定效果的代碼寫好，你只須要在用的時候要用不多的代碼去調用。

起主導做用的是你的代碼，由你來決定什麼時候使用類庫

1.3 常見JS類庫

jQuery

ExtJS

prototype.js

zepto.js

1.4 jQuery的優點

開源 免費

便捷的選擇器

方便的DOM操做

方便的動畫特效

易用的ajax操做

豐富的插件擴展

解決瀏覽器兼容性效果

1.5 jQuery版本

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

二 jQuery的基本使用

2.1 安裝

下載到本地，再引入

下載地址：https://jquery.com/download/

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

2.2 文檔就緒事件

$(document).ready(function(){
    code...
})

//簡寫
$(function(){
    
})

2.3 jQueryDOM和原生DOM

jQuery 經過 $(選擇器) 獲取元素，該元素對象是jqueryDOM。 與原生DOM不一樣
jQueryDOM是在原生DOM基礎上進行的的封裝，本質上是由原生DOM組成的類數組對象，能夠 [索引] 獲得原生DOM
$(原生DOM) 轉爲 jQuery DOM

2.4 連貫操做

//對象能夠連貫調用
$(dom).find('img').css('border','1px solid #ccc').css('color', 'red').prop('src', '1.jpg').toggle()

三 jQuery 選擇器

3.1 基本選擇器

同CSS3 基本選擇器

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

3.2 層級選擇器

同CSS3 層級選擇器

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

3.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

3.4 內容選擇器

:contains(text)  包含指定文字的元素
:has(選擇器)      包含指定子元素的 元素
:empty           沒有子元素也沒有內容的 元素
:parent          有子元素或者有內容 的 元素

3.5 可見性選擇器

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

3.6 屬性選擇器

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

3.7 子元素選擇器

: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+

3.8 表單選擇器

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

3.9 表單對象選擇器

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

四 jQuery 篩選器

4.1 過濾

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

4.2 查找

查找 子元素
children([selector])  子元素
find(selector)       後代元素

查找 父元素
parent([selector])
parents([selector])
parentsUntil([selector])
offsetParent()

#兄弟元素
next([selector])  後面緊鄰的兄弟元素
nextAll([selector])  後面全部的兄弟元素
nextUntil([selector])  後面兄弟元素 指定結束條件
prev([selector])  前面緊鄰的兄弟元素
prevAll([selector])
prevUntil([selector])
siblings([selector])  全部的兄弟元素（除了本身）

4.3 串聯

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

 五 jQuery DOM操做

5.1 內部插入

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

5.2 外部插入

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

5.3 包裹

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

5.4 替換

replaceWith(content|fn)        將全部匹配的元素替換成指定的HTML或DOM元素
replaceAll(selector)        用匹配的元素替換掉全部 selector匹配到的元素

5.5 刪除

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

5.6 克隆

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

六 jQuery 屬性操做

6.1 屬性

attr(attrName[, value]) 獲取屬性的值 或者 設置屬性的值 內置屬性和自定義屬性
prop(attrName[, value]) 獲取屬性的值 或者 設置屬性的值 只能用於內置屬性
removeAttr(attrName)  從每個匹配的元素中刪除一個屬性
removeProp(attrName)  用來刪除由.prop（）方法設置的屬性集

6.2 類

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

6.3 文本值

html([html])  等同於innerHTML  沒有參數 就是獲取， 有參數就是設置
text([text])  等同於innerText  獲取或者設置
val([val])    用於表單控件 設置或獲取

七 jQuery樣式操做

7.1 CSS操做

css('屬性', '值')
css('屬性')

7.2 元素位置

offset()       相對於視口  能夠獲取能夠設置  返回對象{left: ,top:}
position()     相對於第一個定位的祖先元素，margin減掉。 只能獲取
scrollLeft()   控制裏面內容的滾動 水平
scrollTop()    控制裏面內容的滾動 垂直

7.3 元素尺寸

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

 八 jQuery事件

8.1 事件的綁定和解除綁定

on(事件名，fn)
off()  解除事件綁定
one(事件名，fn） 僅僅綁定一次

8.2 事件委派

$('.list li').on('click', fn)
$('.list').on('click', 'li', fn)

8.3 特殊事件

ready()  事件  相似於onload     
hover()  事件  mouseenter 和 mouseleave 相結合的事件

8.4 事件列表

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.5 事件對象

屬性
offsetX, offsetY     鼠標在本元素上的位置
pageX, pageY         鼠標在頁面上的位置座標
clientX, clientY     鼠標在視口上的位置
which               按鍵的值(ASCII)或鼠標按鍵的值 （1，2,3）
target

#方法
stopPropagation()    防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函數
preventDefault()    阻止默認事件行爲的觸發    

九 jQuery動畫

9.1 基本效果

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

參數詳解

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

9.2 滑動效果

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

9.3 淡入淡出

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

9.4 自定義動畫

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

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

9.5 動畫控制

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