jQuery的介紹
為什么要使用jQuery
在用js寫代碼時，會遇到一些問題：
window.onload 事件有事件覆蓋的問題，因此只能寫一個事件。
代碼容錯性差。
瀏覽器兼容性問題。
書寫很繁瑣，代碼量多。
代碼很亂，各個頁面到處都是。
動畫效果很難實現。
jQuery的出現，可以解決以上問題。
什么是 jQuery
jQuery 是 js 的一個庫，封裝了我們開發過程中常用的一些功能，方便我們調用，提高開發效率。
js庫是把我們常用的功能放到一個單獨的文件中，我們用的時候，直接引用到頁面里即可。
jQuery 的兩大特點
鏈式編程：比如.show()和.html()可以連寫成.show().html()。
隱式迭代：隱式 對應的是 顯式。隱式迭代的意思是：在方法的內部進行循環遍歷，而不用我們自己再進行循環，簡化我們的操作，方便我們調用。
使用 jQuery 的基本步驟
（1）引包
（2）入口函數
（3）功能實現代碼（事件處理）
jQuery 的入口函數和 $ 符號
寫法一：
//1.文檔加載完畢，圖片不加載的時候，就可以執行這個函數。
$(document).ready(function () {
alert(1);
})
寫法二：
// 2.文檔加載完畢，圖片不加載的時候，就可以執行這個函數。
$(function() {
alert(1);
});
寫法三：
// 3.文檔加載完畢，圖片也加載完畢的時候，在執行這個函數。
$(window).ready(function(){
alert(1);
})
jQuery入口函數與js入口函數的區別：
區別一：書寫個數不同：
Js 的入口函數只能出現一次，出現多次會存在事件覆蓋的問題。
jQuery 的入口函數，可以出現任意多次，並不存在事件覆蓋問題。
區別二：執行時機不同：
Js的入口函數是在所有的文件資源加載完成后，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。
jQuery的入口函數，是在文檔加載完成后，就執行。文檔加載完成指的是：DOM樹加載完成后，就可以操作DOM了，不用等到所有的外部資源都加載完成。
文檔加載的順序：從上往下，邊解析邊執行。
jQuery的$符號
jQuery 使用 $ 符號原因：書寫簡潔、相對於其他字符與眾不同、容易被記住。
js中的DOM對象 和 jQuery對象 比較
其本質jQuery 就是把 DOM 對象重新包裝了一下，讓其具有了 jQuery 方法。
二者的相互轉換
jQuery的選擇器
jQuery 的基本選擇器
層級選擇器
基本過濾選擇器
屬性選擇器
篩選選擇器
jQuery動畫效果
顯示動畫
方式一：
$("div").show();
方式二：
$('div').show(3000);
方式三：
$("div").show("slow");
方式四：
//show(毫秒值，回調函數;
$("div").show(5000,function () {
alert("動畫執行完畢！");
});
隱藏動畫
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});
開關式顯示隱藏動畫
$('#box').toggle(3000,function(){});
顯示和隱藏的來回切換采用的是toggle()方法：就是先執行show()，再執行hide()。
滑入和滑出
1、滑入動畫效果：（類似於生活中的卷簾門）
$(selector).slideDown(speed, 回調函數);
2、滑出動畫效果：
$(selector).slideUp(speed, 回調函數);
3、滑入滑出切換動畫效果：
$(selector).slideToggle(speed, 回調函數);
淡入淡出動畫
1、淡入動畫效果：
$(selector).fadeIn(speed, callback);
2、淡出動畫效果：
$(selector).fadeOut(1000);
3、淡入淡出切換動畫效果：
$(selector).fadeToggle('fast', callback);
自定義動畫
$(selector).animate({params}, speed, callback);
作用：執行一組CSS屬性的自定義動畫。
第一個參數表示：要執行動畫的CSS屬性（必選）
第二個參數表示：執行動畫時長（可選）
第三個參數表示：動畫執行完后，立即執行的回調函數（可選）
停止動畫
$(selector).stop(true, false);
第一個參數：
true：后續動畫不執行。
false：后續動畫會執行。
第二個參數：
true：立即執行完成當前動畫。
false：立即停止當前動畫。
PS：參數如果都不寫，默認兩個都是false。實際工作中，直接寫stop()用的多。
jQuery的屬性操作
jquery的屬性操作模塊分為四個部分：html屬性操作，dom屬性操作，類樣式操作和值操作
html屬性操作：是對html文檔中的屬性進行讀取，設置和移除操作。比如attr()、removeAttr()
DOM屬性操作：對DOM元素的屬性進行讀取，設置和移除操作。比如prop()、removeProp()
類樣式操作：是指對DOM屬性className進行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是對DOM屬性value進行讀取和設置操作。比如html()、text()、val()
設置屬性值或者 返回被選元素的屬性值
attr()
移除屬性
removeAttr()
prop()
關於attr()和prop()的區別
什么時候使用attr()，什么時候使用prop()？
1.是有true,false兩個屬性使用prop();
2.其他則使用attr();
addClass（添加多個類名）
removeClass從所有匹配的元素中刪除全部或者指定的類。（可以通過添加刪除類名，來實現元素的顯示隱藏）
toggleClass如果存在（不存在）就刪除（添加）一個類。//toggleClass('box')
html
html() 是獲取選中標簽元素中所有的內容
text
text() 獲取匹配元素包含的文本內容
val
val()用於表單控件中獲取值，比如input textarea select等等
使用jQuery操作input的value值
jQuery的文檔操作
插入操作
父元素.append(子元素)
解釋：追加某元素，在父元素中添加新的子元素。子元素可以為：stirng | element（js對象） | jquery元素
子元素.appendTo(父元素)
解釋：追加到某元素 子元素添加到父元素
父元素.prepend(子元素)；
解釋：前置添加， 添加到父元素的第一個位置
父元素.prependTo(子元素)；
解釋：后置添加， 添加到父元素的最后一個位置
父元素.after(子元素)；
子元素.inserAfter(父元素)；
解釋：在匹配的元素之后插入內容
父元素.before(子元素)；
子元素.inserBefore(父元素)；
解釋：在匹配的元素之后插入內容
克隆操作
$(選擇器).clone();
解釋：克隆匹配的DOM元素
修改操作
$(selector).replaceWith(content);
將所有匹配的元素替換成指定的string、js對象、jquery對象。
$('<p>哈哈哈</p>')replaceAll('h2');
解釋：替換所有。將所有的h2標簽替換成p標簽。
刪除操作
$(selector).remove();
解釋：刪除節點后，事件也會刪除（簡言之，刪除了整個標簽）
$(selector).detach();
解釋：刪除節點后，事件會保留
$(selector).empty();
解釋：清空選中元素中的所有后代節點
jQuery的位置信息
寬度和高度
獲取寬度 .width()
設置寬度 .width( value )
高度
獲取高度 .height()
設置高度 .height( value )
innerHeight()和innerWidth()
獲取內部寬 .innerWidth()
設置內部寬 .innerWidth(value);
獲取內部高 .innerHeight()
設置內部寬 .innerHeight(value);
outWidth和outHeight()
獲取外部寬 .outerWidth( [includeMargin ] )
設置外部寬 .outerWidth( value )
獲取外部高 .outerHeight( [includeMargin ] )
設置外部高 .outerHeight( value )
偏移
獲取 .offset()
設置 .offset( coordinates )
元素坐標 .position()
滾動距離
獲取：
水平方向 .scrollLeft()
描述：獲取匹配的元素集合中第一個元素的當前水平滾動條的位置（頁面卷走的寬度）
設置：
.scrollLeft( value )
描述：設置每個匹配元素的水平方向滾動條位置。
垂直方向
獲取：
.scrollTop()
描述：獲取匹配的元素集合中第一個元素的當前遲滯滾動條的位置（頁面卷走的高度）
設置：
.scrollLeft( value )
描述：設置每個匹配元素的垂直方向滾動條位置。
JS的事件流的概念
什么是事件流
事件流描述的是從頁面中接收事件的順序
1、DOM事件流
“DOM2級事件”規定的事件流包括三個階段：
① 事件捕獲階段；
② 處於目標階段；
③ 事件冒泡階段
document、documentElement和document.body三者之間的關系：
document代表的是整個html頁面；
document.documentElement代表的是<html>標簽；
document.body代表的是<body>標簽；
三階段示意圖：
jquery的常用事件
事件對象
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件流的由來
微軟和網景亂搞
關於event對象
jQuery的事件綁定和解綁
綁定事件
語法
bind(type,data,fn)
描述：為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。
參數解釋：
type (String) : 事件類型
data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象
fn ( Function) : 綁定到每個匹配元素的事件上面的處理函數
解綁事件
語法
unbind(type,fn);
描述：
bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。
如果沒有參數，則刪除所有綁定的事件。
如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除。
參數解釋：
type (String) : (可選) 事件類型
fn(Function) : (可選) 要從每個匹配元素的事件中反綁定的事件處理函數
把所有段落的所有事件取消綁定
$("p").unbind()
自定義事件
語法
trigger(type,data);
描述：在每一個匹配的元素上觸發某類事件，它觸發的是由bind()注冊的自定義事件。
參數解釋：
type (String) : 要觸發的事件類型
data (Array) : (可選)傳遞給事件處理函數的附加參數
一次性事件
語法
one(type,data,fn)
描述：
為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。在每個對象上，這個事件處理函數只會被執行一次。其他規則與bind()函數相同
參數解釋：
type (String) : 事件類型
data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象
fn (Function) : 綁定到每個匹配元素的事件上面的處理函數
事件委托（事件代理）
什么是事件委托
通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。
原理：
利用冒泡的原理，把事件加到父級上，觸發執行效果。
作用：
1.性能要好
2.針對新創建的元素，直接可以擁有事件
事件源:
跟this作用一樣(他不用看指向問題，誰操作的就是誰), event對象下的
使用情景：
為DOM中的很多元素綁定相同事件；
為DOM中尚不存在的元素綁定事件；
語法：
on(type,selector,data,fn);
描述：在選定的元素上綁定一個或多個事件處理函數
參數解釋
events( String) : 一個或多個空格分隔的事件類型
selector( String) : 一個選擇器字符串，用於過濾出被選中的元素中能觸發事件的后代元素
data: 當一個事件被觸發時，要傳遞給事件處理函數的event.data。
fn:回調函數
輪播圖實現 網上到處都有，改改就行了
jQuery的ajax
什么是ajax
AJAX = 異步的javascript和XML（Asynchronous Javascript and XML）
簡言之，在不重載整個網頁的情況下，AJAX通過后台加載數據，並在網頁上進行顯示。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。
jQuery的load()方法
load()方法從服務器加載數據，並把返回的數據放入被選元素中。
語法
$("selector").load(url,data,callback);
jquery的getJSON方法
jQuery的AJAX中使用getJSON()方法異步加載JSON格式數據。獲取服務器中的數據，並對數據進行解析，顯示到頁面中
語法:
$.getJSON(url,[data],[callback])
參數解釋：
url參數：為請求加載json格式文件的服務器地址
可選項data參數：為請求時發送的數據
callback參數：為數據請求成功后執行的函數
jquery的$.get()方法
$.get() 方法通過 HTTP GET 請求從服務器上請求數據
語法：
$.get(URL,callback);
url參數：規定你請求的路徑，是必需參數
callback參數：為數據請求成功后執行的函數
jquery的post()方法
post()方法多用於以POST方式向服務器發送數據，服務器接收到數據之后，進行處理，並將處理結果返回頁面
語法：
$.post(URL,data,callback);
url參數：規定你請求的路徑，是必需參數，可選的data參數是連同請求發送的數據
可選的callback參數：為數據請求成功后執行的函數
基本格式
//get()方式
$.ajax({
url:'./data/index.txt',
type:'get',
dataType:'text',
success:function(data){
$('p').html(data);
},
error:function(error){
console.log(error)
}
//post()方式
$.ajax({
url:'/index',
type:'post',
data:{name:'張三',age:12},
success:function(data){
$('p').html(data);
},
error:function(error){
console.log(error)
}
XMLHttpRequest自己學去吧
jquery還包含：
jquery 插件 https://www.oschina.net/project/tag/273/jquery
jqueryUI https://jqueryui.com/ http://www.jqueryui.org.cn/
