jQuery筆記 (完整詳細版)
阿新 • • 發佈：2018-12-11
2018.9.17 星期一
jQuery
第一章 初識jQuery 第二章 jQuery的事件和API 第三章 jQuery中的動畫
第一章 初識jQuery
一、jQuery簡介 1.什麼是jQuery？
jQuery是一個優秀的JavaScript庫，是一個憑藉簡潔的語法和跨平臺的相容性，極大地簡化了JavaScript開發人員遍歷HTML文件，操作DOM，執行動畫和開發Ajax的操作。jQuery封裝了很多預定義的物件和函式。其理念：write less,do more.
2.常見的javascript庫?
Prototype:是最早成型的JS庫之一，對於JS的內建物件做了大量的擴充套件。 Do jo：提供了很多奇特JS庫沒有提供的功能。例如：離線儲存的API，生成圖示的元件等等。 YUI：是由Yahoo公司開發的一套完備的，擴充套件性良好的富互動網頁程式工作集。 Ext JS：原本是對YUI的一個擴充套件，主要用於建立前端使用者介面。 Moo Tools：是一套輕量、簡潔、模擬化和麵向物件的JS框架。 jQuery：同樣是一個輕量級的庫，擁有強大的選擇器等更多優點，吸引了更多開發者去學習使用它。
二、jQuery的特性 jQuery能做以下事情：
HTML元素選取
HTML元素操作
CSS操作
HTML事件函式
JavaScript特效和動畫
HTML DOM遍歷和修改
AJAX
Utilities
三、jQuery介紹 1.jQuery的使用方式 下載後引入
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
2.編寫簡單的 HelloWorld
<html> <head> <meta charset="UTF-8"> <title>dom操作</title> <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script> <script> $(function(){ alert('Hello World'); }); </script> </head> </html>
3.jQuery函式 jQuery庫只提供了一個叫jQuery的函式，該函式中以及該元素的原型中定義了大量的方法。jQuery函式具有四種引數：
1）選擇器（字串） jQuery函式通過該選擇器獲取對應的DOM，然後將這些DOM封裝到一個人jQuery物件中並返回。 2）DOM物件（即Node例項） jQuery函式將該DOM封裝成jQuery物件並返回。 3）HTML文字字串 jQuery函式根據傳入的文字建立好HTML元素並封裝成jQuery物件並返回。 $("<div class="one">one</div>"); 4）一個匿名函式 $(function(){}); 當文當載入完畢之後jQuery函式呼叫匿名函式。
4.jQuery物件
jQuery物件是jQuery函式的一個例項，是一個類陣列物件，陣列中存放的是DOM物件，而DOM物件是Node的例項。
對jQuery物件的操作實際上是對jQuery陣列中的DOM物件的批量操作。jQuery物件和DOM物件可以相互轉化。
jQuery物件的獲取通常是使用選擇器來獲取的。比如，獲取所有clss為one元素:$(".one");
四、jQuery選擇器 1.基本選擇器：
所有選擇器 *
標籤選擇器 標籤名
ID選擇器 #id
類選擇器 .className
群組選擇器 .one,.two 多個選擇器使用都好分隔，取並集
複合選擇器 .one.two 多個選擇器組合使用，取交集
2.層次選擇器：
後代選擇器 .one .two
兩個選擇器使用空格隔開，表示可以獲取當前元素的子代以及孫子代等等後代元素。
子代選擇器 .one>.two
兩個選擇器使用>隔開，表示只能獲取當前選中元素的子代元素。
3.兄弟選擇器：
下一個兄弟選擇器 .one+.two
兩個選擇器使用+隔開，表示可以獲取當前元素的下一個兄弟元素，下一個兄弟元素要能符合.two。
之後所有子代選擇器 .one~.two
兩個選擇器使用~隔開，表示可以獲取當前元素之後的所有兄弟元素，只有所有兄弟元素要能符合.two。
五、jQuery過濾器 jQuery的過濾器必須用在jQuery選擇器後，表示對通過前面的jQuery選擇器選擇到的內容的過濾。是建立在前面選擇器已經選擇到的元素的基礎之上。 語法：selector:過濾器
1.基本過濾器：
selector:first 獲取所有已選擇到的元素中的第一個元素
selector:last 獲取所有已選擇到的元素中的最後一個元素
selector:even 獲取所有已選擇到的元素中的索引為偶數的元素
selector:odd 獲取所有已選擇到的元素中的索引為奇數的元素
selector:eq(index) 獲取所有已選擇到的元素中的索引為index的元素
selector:lt(num) 獲取所有已選擇到的元素中的索引值小於num的元素
selector:gt(num) 獲取所有已選擇到的元素中的索引值大於num的元素
selector1:not(selector2) 獲取所有已選擇到的元素中的除了selector2的元素
selector:header 獲取所有已選擇到的元素中的標題元素(h1~h6)
2.內容過濾器：
selector:contains(text)
獲取所有已選擇到的元素中文字包含text的元素
selector:empty
獲取所有已選擇到的元素中的空元素(沒有子節點)
selector:parent
獲取所有已選擇到的元素中的非空元素(有子節點)，如$("div:parent");
selector1:has(selector2)
獲取所有已選擇到的元素中包含selector2的元素，如$("div:has('span')");
3.可見性過濾器： 隱藏型別分兩種：
1）不佔據螢幕空間
display:none;
<input type="hidden">
2）佔據螢幕空間
visibility:hidden;
opacity:0;//透明度為0
使用：
:visible 選擇所有佔據螢幕空間的元素
:hidden 選擇所有不佔據螢幕空間的元素
4.屬性過濾器：
selector[attrKey]
獲取所有已選擇到的元素中具有屬性attrKey的元素
selector[attrKey=attrVal]
獲取所有已選擇到的元素中具有屬性attrKey，並且屬性值為attrVal的元素
selector[attrKey^=attrVal]
獲取所有已選擇到的元素中具有屬性attrKey，並且屬性值為以attrVal開頭的元素
selector[attrKey$=attrVal]
獲取所有已選擇到的元素中具有屬性attrKey，並且屬性值為以attrVal結尾的元素
selector[attrKey*=attrVal]
獲取所有已選擇到的元素中具有屬性attrKey，並且屬性值為包含attrVal的元素
selector[attrKey!=attrVal]
獲取所有已選擇到的元素中具有屬性attrKey，並且屬性值不為以attrVal的元素或者沒有屬性attrVal的元素
5.後代選擇器：
selector:nth-child(index)
獲取每個selector元素中索引為index的子元素。【注意】index從1開始
selector:first-child
獲取每一個selector元素中的第一個子元素（每個父元素的第一個子元素）
selector:last-child
獲取每一個selector元素中的最後一個子元素（每個父元素的最後一個子元素）
selector:only-child
獲取每一個selector元素中的獨生子子元素（每個父元素如果只有一個孩子元素，獲取該元素）
selector:first-of-type
獲取每個selector元素中每種型別子元素中的第一個
selector:last-of-type
獲取每個selector元素中每種型別子元素中的最後一個
6.表單過濾器：
:checked 選取所有被選中的元素，用於複選框、單選框、下拉框
:selected 選取所有被選中的元素，該選擇器只適用於<option>
:focus 選取當前獲取焦點的元素
:text 選取所有的單行文字框(<input type="text">)
:password 選取所有的密碼框
:input 選取所有的<input>,<textarea>,<select>,<button>元素。
*注意，$(":input")是選中可以讓使用者輸入的標籤元素；而$("input")是選擇名字為input的標籤元素。*
:enable 選取所有可用元素，該選擇器僅可用於支援disable屬性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>)
:disable 選取所有不可用元素，該選擇器也僅可用於支援disable屬性的html元素。
:radio 選取所有的單選框
:checkbox 選取所有的多選框
:submit 選取所有的提交按鈕
:image 選取所有的input型別為image的表單元素
:reset 選取所有的input型別為reset的表單元素
:button 選取所有的input型別為button的表單元素
:file 選取所有的input型別為file的表單元素
六、jQuery中的Dom操作 1.查詢節點 通過jQuery選擇器來完成
2.建立節點
建立元素節點：var newTd = $("<td></td>")
建立文字節點：var newTd = $("<td>文字內容</td>")
3.插入節點
1) $A.append(B)
將B追加到A的末尾處，作為它的最後一個子元素
2) $A.appendTo(B)
將A追加到B的末尾，作為它的最後一個子元素
3) prepend()
$A.prependTo(B)
將A追加到B的前面，作為它的第一個子元素
$A.after(B)
在A之後追加B，作為它的兄弟元素
$A.insertAfter(B)
在B之後追加A，作為它的兄弟元素
$A.before(B)
在A之前追加B，作為它的兄弟元素
$A.insertBefore(B)
在B之前追加A，作為它的兄弟元素
4.刪除節點
remove([selector])
從DOM中刪除所有匹配的元素，返回值是一個指向已經被刪除的節點的引用，可以在以後再使用這些元素。
該方法會移除元素，同時也會移除元素內部的一切，包括繫結的事件及與該元素相關的jQuery資料。
detach([selector])
與remove()類似，但是detach()儲存所有jQuery資料和被移走的元素的相關聯事件。
empty()
無引數。從DOM中清空集合中匹配元素的所有的子節點。
5.複製節點
$("#id").clone(false);
該方法返回的是一個節點的引用，引數預設為false，為淺複製；
引數是true,為深複製，含義是：複製元素的同時複製元素中所繫結的事件。
6.替換節點
replaceWith(newContent);
用新內容替換集合中所有匹配的元素，並且返回被刪除的元素的集合。
該方法會刪除與節點相關聯的所有資料和事件處理程式。
replaceAll(target);
用集合的匹配元素替換每個目標元素。顛倒了replaceWith()操作效果。
7.包裹節點
wrap([wrappingElement])
在每個匹配的元素外層包上一個html元素
warpAll([wrappingElement])
將所有匹配的元素用一個元素來包裹，在所有匹配元素外面包裹一層HTML結構
warpInner([wrappingElement])
每個匹配元素裡面內容(子元素)都會被這種結構包裹
8.節點遍歷
children([selector])
用於取得匹配元素的子元素集合(只考慮子元素而不考慮任何後代元素)
$('.content.inner')=>$('.content').children('.inner');
find(selector)
在當前物件元素中的子元素查詢，和引數所匹配的所有的後代元素
next([selector])
取得匹配的元素集合中每一個元素緊鄰的後面兄弟元素
nextAll([selector])
查詢當前元素之後所有的同輩元素
prev([selector])
取得匹配元素前面緊鄰的兄弟元素
prevAll([selector])
取得當前元素之前所有的同輩元素
silibinng([selector])
取得匹配元素的前後所有的兄弟元素
closest(selector)
取得和引數匹配的最近的元素，如果匹配不上繼續向上查詢父元素
filter(selector)
把當前所選擇的所有元素再進行篩選過濾
parent([selector])
取得匹配元素的集合中，每個元素的父元素
parents([selector])
獲得集合中每個匹配元素的祖先元素
第二章 jQuery的事件和API
一、事件
on()
在選定的元素上繫結一個或多個事件處理函式。
off()
移除一個事件處理函式。
trigger()
根據繫結到匹配元素的給定的事件型別執行所有的處理程式和行為。
二、滑鼠事件
click() 單擊
dblclick() 雙擊
hover() 懸停
mousedown() 按下
mouseup() 擡起
mouseenter() 移入 不支援子元素
mouseleave() 離開 不支援子元素
mouseout() 離開 支援子元素
mouseover() 進入 支援子元素
mousemove() 移動
三、鍵盤事件
keypress() 按鍵按下
keyup() 按鍵擡起
keydown() 按鍵按下
四、表單事件
focus() 聚焦事件
blur() 失去焦點事件
change() 當元素的值發生改變時激發的事件
select() 當textarea或文字型別的input元素中的文字被選擇時觸發的事件
submit() 表單提交事件，繫結在form上
五、jQuery中常用的API 1.jQuery中的html(),text(),val()方法
html()
無參：獲取html的值
有引數html：設定html的值
text()
無參：獲取文字值
有引數text：設定文字值
val()
無參：獲取value的值
有引數value：設定value的值
2.jQuery中的工具方法
1) get(); //以陣列的形式返回DOM節點。
console.log($('div').get());
2) toArray(); //返回一個包含jQuery物件結合中的所有DOM元素陣列。
console.log($('div').toArray());
3) eq(index); //返回index位置上的jQuery物件。
console.log($('div').eq(1).get(0));
4) filter(function(index,item){}); //過濾器函式，返回jQuery物件。
var $result = $('div').filter(function(index,item){
return index == 2;
});
5) map(function(index,item){}); //用於獲取或設定元素集合中的值。
var $result = $('div').map(function(index,item){
return $(item).html()
});
6) each(function(index,item){}); //遍歷一個jQuery物件。
$('div').each(function(index,item){
console.log(index,'--',item);
});
7) slice(0,3); //擷取
var $result = $('div').slice(0,3);
console.log($result.get());
});
8) not()
9) first()
10) last()
11) is()
12) has()
3.jQuery中屬性設定函式
//獲取屬性值
attr(key)
prop(key)
//刪除屬性
removeAttr(attributeName)
removeProp(propertyName)
//批量設定屬性
css(key)
//新增類
addClass(className)
//判斷有沒有指定的類，有，返回true，否則返回false
hasClass(className)
//刪除類
removeClass(className)
第三章 jQuery中的動畫
一、jQuery樣式相關方法
寬度 = width + 2padding + 2border + 2margin
//獲取視口區的寬高：
1、$(window).height()
2、$(window).width()
//獲取內容區的寬高：
$('div').width();
$('div').height();
//獲取內容+padding區的寬高：
3、$('div').innerHeight()
4、$('div').innerWidth()
//獲取內容+padding+border區的寬高：
5、$('div').outerHeight()
6、$('div').outerWidth()
//獲取內容+padding+border+margin區的寬高：
$('div').outerWidth(true);
$('div').outerHeight(true);
//獲取相對於文件的偏移
7、.offset()
//獲取相對於定位父元素的偏移
8、.position()
//橫向滾動條左側的偏移
9、.scrollLeft()
//橫向滾動條上側的偏移
10、.scrollTop()
//獲取離它最近的父定位元素
11、.offsetParent()
二、效果
1.基本效果
1）隱藏 hide()
2）顯示 show()
3）隱藏與顯示 toggle()
2.淡入淡出效果
1）淡入 fadeIn()
2）淡出 fadeOut()
3）淡入到 fadeTo()
4）淡入與淡出 fadeToggle()
3.滑動效果
1）滑下 slideDown()
2）滑上 slideUp()
3）滑上與滑下 slideToggle()
4.自定義效果
animate()