首先，來了解一下jQuery學習的整體思路

• [Jquery筆記]

第一節 jQuery初步認知

jQuery概述

• JQuery概念

  • javascript概念
    
    • 基於Js語言的API和語法組織邏輯，通過內建window和document物件，來操作記憶體中的DOM元素
  • JQuery概念
    
    • 基於javascript的，同上，提高了程式碼的效率

• jQuery是什麼:

  • 是一個javascript程式碼倉庫，我們稱之為javascript框架。
  • 是一個快速的簡潔的javascript框架，可以簡化查詢DOM物件、處理事件、製作動畫、處理Ajax互動過程。
  • 它可以幫我們做什麼(有什麼優勢)
    
    • 輕量級、體積小，使用靈巧(只需引入一個js檔案)
    • 強大的選擇器
    • 出色的DOM操作的封裝
    • 出色的瀏覽器相容性
    • 可靠的事件處理機制
    • 完善的Ajax
    • 鏈式操作、隱式迭代
    • 方便的選擇頁面元素(模仿CSS選擇器更精確、靈活)
    • 動態更改頁面樣式/頁面內容(操作DOM，動態新增、移除樣式)
    • 控制響應事件(動態新增響應事件)
    • 提供基本網頁特效(提供已封裝的網頁特效方法)
    • 快速實現通訊(ajax)
    • 易擴充套件、外掛豐富

• 如何引入JQuery包

  • 引入本地的JQuery
  • 引入Google線上提供的庫檔案（穩定可靠高速）

  • 使用Google提供的API匯入 <script type=“text/javascript” src=“jquery.js”></script>

  • 寫第一個JQUery案例

  • 解釋:在JQuery庫中，$是JQuery的別名，$()等效於就jQuery()

  “`javascript

$(function(){ alert(“jQuery 你好!”); });

- **講解`$(function(){})`;**
  - `$`是`jQuery`別名。如`$()`也可`jQuery()`這樣寫,相當於頁面初始化函式，當頁面載入完畢，會執行`jQuery()`。
  - 希望在做所有事情之前，`JQuery`操作`DOM`文檔。必須確保在`DOM`載入完畢後開始執行，應該用`ready`事
 
件做處理`HTML`文檔的開始
  - `$(document).ready(function(){})`;
    - 類似於`js`的`window.onload`事件函式，但是`ready`事件要先於`onload`事件執行
    - `window.onload = function(){}`;
  - 為方便開發，`jQuery`簡化這樣的方法，直接用`$()`表示

  - `JQuery`的`ready`事件不等於`Js`的`load`：
    - 執行時機不同：`load`需要等外部圖片和視訊等全部載入才執行。`ready`是`DOM`繪制完畢後執行，先與外部檔案
    - 用法不同：`load`只可寫一次，`ready`可以多次
- **`window.onload`與`$(document).ready()`對比**

||window.onload|$(document).ready()|
|---|---|---|
|執行時機|必須等網頁中所有內容載入完後(圖片)才執行|網頁中的`DOM`結構繪製完後就執行,可能`DOM`元素相關的東西並沒有載入完|
|編寫個數|不能同時執行多個|能同時執行多個|
|簡化寫法|無|`$(document).ready(function(){ //.. });`<br /><br />推薦寫法：`$(function(){ });`|

- **`jQuery`有哪些功能(`API`)**：
  - 選擇器 
  - 過濾器 
  - 事件 
  - 效果 
  - `ajax`

- **簡單的`JQuery`選擇器**：
  - `JQuery`基本選擇器（`ID`選擇器，標籤選擇器，類選擇器，通配選擇器和組選擇器`5`種）
  - `ID`選擇器：`document.getElementById(id)`與`$("#id")`對比(改變文字大小)---`id`唯一，返回單個元素
  - 標籤選擇器：`document.getElementsByTagName(tagName)`與`$("tagname")`對比---多個標籤，返回陣列
  - 類選擇器:`$(".className")`--多個`classname`（改變背景圖片）
  - 通配選擇器：`document.getElementsByTagName("*")`與`$("*")`對比---指範圍內的所有標籤元素
  - 組選擇器：`$("seletor1,seletor2,seletor3")`----無數量限制，用逗號分割

##### 初步瞭解`JQuery`
---

- **`JQuery`是什麼**
  - `javascript`用來幹什麼的：
    - 操作`DOM`對象
    - 動態操作樣式`css`
    - 資料訪問
    - 控制響應事件等
  - `jQuery`作用一樣，只是更加快速簡潔
- **如何引用`JQuery`**
```javascript
<script type="text/javascript"></script>
寫第一個JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
    $(function(){
        alert(“jQuery 你好!”);
    });
</script>




<div class="se-preview-section-delimiter"></div>

• $()講解
  
  • $在JQuery庫中，$是JQuery的別名，$()等效於就jQuery().
  • $()是JQuery方法,贊可看作是JQuery的選擇器，與css選擇器相似（可做對比）
  • var jQuery==$ =function(){} $()本質就是一個函式也就是 jQuery的核心函式
  • 只要是jQuery的物件都這樣變數加上一個符號$方便識別：var $div = $("#")

function　$(id){
        return document.getElementById(id);
    }




<div class="se-preview-section-delimiter"></div>

• $()和document是相等的嗎

<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("id") == $("#aa"));//返回結果為false
alert(document.getElementById("id") == $("#aa").get(0));//返回true




<div class="se-preview-section-delimiter"></div>

• 代理物件$()

  • jQuery中返回的是代理物件本身
  • jQuery的核心原理是通過選擇器找到對應的代理物件
  • jQuery全都是通過方法操作
  • 樣式選擇器$(".className")
  • $(".aa").css("color","green");
  • id選擇器(“”)
  • $("#a").css("background-color","#ff0066");
  • 標籤選擇器
  • $("p").css("color","#cc3366");
  • 組選擇器
  • $("#b ul li").size();

• 物件轉換($(element))

  • 原生dom物件和jquery代理物件的相互轉換

$(傳入的原生物件);
//原生物件轉化成jQuery物件
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true




<div class="se-preview-section-delimiter"></div>

• 檢索範圍的限制（$('字串',element)）

  • 總結：三種寫法對比：

    • 方式一：不推薦 搜尋速度最慢

    • $("#nav").css();

    • $("#nav li").css();

    • 方式二：搜尋速度最快 鏈式操作

    • $("#nav").css().children().css();

    • 方式三：也常用 速度第二快

    • var $nav = $("#nav").css();

    • $("li",$nav).css(); $nav限制了搜尋範圍 速度快

• 總結： $() jquery核心方法的作用和使用場景

  • 如果是一個字串引數並且沒有標籤對（選擇器）$(ul.nav")
  • 如果是一個字串引數並且有標籤對（建立html標籤）$("<img>") –最終加到DOM樹中 $xx.append("<img>");
  • 如果是傳入一個element dom物件，直接包裝為proxy物件返回 $(DOM物件)
  • 如果第一個引數是字串，第二個是element dom物件的話，那麼就是在element這個dom物件裡面尋找選擇器對應的元素並且代理 $("li",$DOM物件)

• 代理模式以及代理記憶體結構

第二節 選擇器

• 來回顧一下CSS常用的選擇器

選擇器	語法	描述
標籤選擇器	E{css規則}	以文件元素作為選擇符
ID選擇器	#ID{css規則}	ID作為選擇符
類選擇器	E.className{css規則}	class作為選擇符
群組選擇器	E1,E2,E3{css規則}	多個選擇符應用同樣的樣式
後代選擇器	E F{css規則}	元素E的任意後代元素F

• 選擇器引擎規則($('字串'))

  • css選擇器的規則
    
    • 標籤選擇器
    • id選擇器
    • 類選擇器
    • 混合選擇器

  • css3的選擇器規則

  • 狀態和偽類（:even :odd :first :last :eq(index)）

  • 屬性（[attr=value]）

• 層級選擇器:通過DOM的巢狀關係匹配元素

  • jQuery層級選擇器—-包含選擇器、子選擇器、相鄰選擇器、兄弟選擇器4種
  • a.包含選擇器：$("a b")在給定的祖先元素下匹配所有後代元素。(不受層級限制)
  • b.子選擇器：$("parent > child")在給定的父元素下匹配所有子元素。
  • c.相鄰選擇器：$("prev + next") 匹配所有緊接在prev元素後的next元素。
  • d.兄弟選擇器：$("prev ~ siblings") 匹配prev元素之後的所有sibling元素。

過濾選擇器

• 基本過濾選擇

選擇器	說明	返回
:first	匹配找到的第1個元素	單個元素
:last	匹配找到的最後一個元素	單個元素
:eq	匹配一個給定索引值的元素	單個元素
:even	匹配所有索引值為偶數的元素	集合元素
: odd	匹配所有索引值為奇數的元素	集合元素
:gt(index)	匹配所有大於給定索引值的元素	集合元素
:lt(index)	匹配所有小於給定索引值的元素	集合元素
:not	去除所有與給定選擇器匹配的元素	集合元素
:animated	選取當前正在執行動畫的所有元素	集合元素
focus	選取當前正在獲取焦點的元素	集合元素

- 內容過濾選擇器

選擇器	描述	返回
:contains(text)	選取含有文字內容為text的元素	集合元素
:empty	選取不包含子元素獲取文字的空元素	集合元素
:has(selector)	選擇含有選擇器所匹配的元素的元素	集合元素
:parent	選取含有子元素或者文字的元素	集合元素

- 可見過濾選擇器

選擇器	描述	返回
:hidden	選擇所有不可見的元素	集合元素
:visible	選取所有可見的元素	集合元素

- 屬性過濾選擇器

選擇器	說明	返回
[attribute]	選取擁有此屬性的元素	集合元素
[attribute=value]	選取屬性值為value值的元素	集合元素
[attribue^=value]	選取屬性的值以value開始的元素	集合元素
[attribue$=value]	選取屬性的值以value結束的元素	集合元素

- 子元素過濾選擇器

選擇器	說明	返回
:nth-child(index/even/odd)	選取每個父元素下的第index個子元素或者奇偶元素（index從1算起）	集合元素
:first-child	選取每個元素的第一個子元素	集合元素
:last-child	選取每個元素的最後一個子元素	集合元素

- :nth-child()選擇器是很常用的子元素過濾選擇器，如下
- :nth-child(even)選擇每個父元素下的索引值是偶數的元素
- :nth-child(odd)選擇每個父元素下的索引值是奇數的元素
- :nth-child(2)選擇每個父元素下的索引值是2的元素
- :nth-child(3n)選擇每個父元素下的索引值是3的倍數的元素 (n從1開始)

• 表單物件屬性過濾選擇器

選擇器	說明	返回
:enabled	選取所有可用元素	集合元素
:disabled	選取所有不可用元素	集合元素
:checked	選取所有被選中的元素（單選框、複選框）	集合元素
:selected	選取所有被選中的元素（下拉列表）	集合元素

- 表單選擇器

選擇器	說明
:input	選取所有input textarea select button元素
:text	選取所有單行文字框
:password	選取所有密碼框
:radio	選取所有單選框
:checkbox	選取所有多選框
:submit	選取所有的提交按鈕
:image	選取所有的影象按鈕
:reset	選取所有的重置按鈕
:button	選取所有的按鈕
:file	選取所有的上傳域
:hidden	選取所有的不可見元素

- 特定位置選擇器
- :first
- :last
- :eq(index)

• 指定範圍選擇器

  • :even
  • :odd
  • :gt(index)
  • :lt(index)

• 排除選擇器

  • :not 非

第三節 選擇器優化

• 使用合適的選擇器表示式可以提高效能、增強語義並簡化邏輯。常用的選擇器中，ID選擇器速度最快，其次是型別選擇器。

  • a. 多用ID選擇器
  • b. 少直接使用class選擇器
  • c. 多用父子關係，少用巢狀關係
  • d. 快取jQuery物件

• 使用過濾器

  • jQuery提供了2種選擇文件元素的方式：選擇器和過濾器
  • a. 類過慮器：根據元素的類屬性來進行過濾操作。
  • hasClass(className)：判斷當前jQuery物件中的某個元素是否包含指定類名，包含返回true，不包含返回false
  • b. 下標過濾器：精確選出指定下標元素
  • eq(index)：獲取第N個元素。index是整數值，下標從0開始
  • c. 表示式過濾器
  • filter(expr)/(fn)：篩選出與指定表示式/函式匹配的元素集合。
  • 功能最強大的表示式過濾器，可接收函式引數，也可以是簡單的選擇器表示式
  • d. 對映 map(callback)：將一組元素轉換成其他陣列
  • e. 清洗 not(expr)：刪除與指定表示式匹配的元素
  • f. 擷取 slice(start,end)：選取一個匹配的子集

• 查詢

  • 向下查詢後代元素
  • children():取得所有元素的所有子元素集合（子元素）
  • find():搜尋所有與指定表示式匹配的元素(所有後代元素中查詢)
  • 查詢兄弟元素 siblings()查詢當前元素的兄弟

第四節 代理物件屬性和樣式操作

• 代理物件屬性和樣式操作

  • attr
  • prop(一般屬性值是boolean的值或者不用設定屬性值，一般使用)
  • css(最好不用，一般我用來做測試)
  • addClass / removeClass

• 操作原生DOM的時候用的方式：一次只能操作一個

  • 操作屬性：setAttribute / getAttribute
  • 操作樣式：style.xx = value
  • 操作類樣式：className=''
  • 獲取DOM的子元素children屬性
  • DOM裡面新增一個子元素appendChild()

• 操作jQuery代理物件的時候：批量操作DOM物件(全都是通過方法操作)

• 操作屬性：attr()、prop()

  • attr和prop區別：如果屬性的值是布林型別的值 用prop操作 反之attr

• 操作樣式：css()

• 操作類樣式：addClass() removeClass()
• 操作DOM子元素：children()
• 新增子元素：append()

第五節 jQuery中DOM操作

• DOM是一種與瀏覽器、平臺|語言無關的介面，使用該介面可以輕鬆的訪問 頁面中的所有的標準組件

• DOM操作的分類

  • DOM Core

    • DOM core並不專屬於JavaScript，任何支援DOM的程式都可以使用
    • JavaScript 中的getElementByID() getElementsByTagName() getAttribute() setAttribute()等方法都是DOM Core的組成部分

  • HTML-DOM

  • HTML -DOM的出現比DOM-Core還要早，它提供一些更簡明的標誌來描述HTML元素的屬性

  • 比如：使用HTML-DOM來獲取某元素的src屬性的方法

    • element.src

  • CSS-DOM

  • 針對CSS的操作。在JavaScript中，主要用於獲取和設定style物件的各種屬性，通過改變style物件的屬性，使網頁呈現不同的效果

• 查詢節點

  • 查詢屬性節點 attr() 可以獲取各屬性的值
• 建立節點
  
  • $(html)：根據傳遞的標記字串，建立DOM物件
• 插入節點

方法	說明
append()	向每個匹配元素內部追加內容
appendTo()	顛倒append()的操作
prepend()	向每個匹配元素的內容內部前置內容
prependTo()	顛倒prepend()的操作
after()	向每個匹配元素之後插入內容
insertAfter()	顛倒after()的操作
before()	在每個匹配元素之前插入內容
insertBefore()	顛倒before()的操作

- 刪除節點
- jQuery提供了三種刪除節點的方法 remove() detach() empty()
- remove()方法
- 當某個節點用此方法刪除後，該節點所包含的所有後代節點將同時被刪除，用remove()方法刪除後，還是可以繼續使用刪除後的引用
- detach()
- 和remove()方法一樣，也是從DOM中去掉所有匹配的元素，與remove()不同的是，所有繫結的事件、附加的資料等，都會被保留下來
- empty()
- empty()方法並不是刪除節點，而是清空節點，它能清空元素中所有後代節點

• 複製節點

  • 使用clone()方法來完成
  • 在clone()方法中傳遞一個引數true，同時複製元素中所繫結的事件

• 替換節點

  • jQuery提供相應的方法 replaceWidth()

• 樣式操作

  • 獲取樣式和設定樣式 attr()
  • 追加樣式 addClass()
  • 移除樣式 removeClass()
  • 切換樣式
    
    • toggle()方法只要是控制行為上的重複切換（如果元素是顯示的，則隱藏；如果元素原來是隱藏的，則顯示）
    • toggleClass()方法控制樣式上的重複切換（如何類名存在，則刪除它，如果類名不存在，則新增它）
  • 判斷是否含有某個樣式
  • hasClass()可以用來判斷元素是否含有某個class,如有返回true 該方法等價於is()

• 設定和獲取HTML、文字和值

  • html()
  • 此方法類似JavaScript中innerHTML屬性，可以用來讀取和設定某個元素中的HTML內容
  • text()方法
  • 此方法型別JavaScript中innerHTML，用來讀取和設定某個元素中的文字內容
  • val()方法
  • 此方法類似JavaScript中的value屬性，用來設定獲取元素的值。無論是文字框、下拉列表還是單選框，都可以返回元素的值，如果元素多選，返回一個包含所有選擇的值的陣列

• 遍歷節點

  • children()方法
    
    • 該方法用來取得匹配元素的子元素集合
    • childre()方法只考慮子元素而不考慮其他後代元素
  • next()方法
  • 該方法用於取得匹配元素後面緊鄰的同輩元素
  • prev()方法
  • 用於匹配元素前面緊鄰的同輩元素
  • siblings()方法
  • 用於匹配元素前後所有的同輩元素
  • parent()方法
  • 獲得集合中每個 元素的父級元素
  • parents()方法
  • 獲得集合中每個元素的祖先元素

CSS DOM操作

• CSS DOM技術簡單的來說就是讀取和設定style物件的各種屬性
• 用css()方法獲取元素的樣式屬性，可以同時設定多個樣式屬性
• CSS DOM中關於元素定位有幾個常用的方法
  
  • offset()方法
  • 它的作用是獲取元素在當前視窗的相對偏移其中返回的物件包含兩個屬性，即top和left，他只對可見元素有效
  • position()方法
  • 獲取相對於最近的一個position()樣式屬性設定為relative或者absolute的祖父節點的相對偏移，與offset()一樣，他返回的物件也包括兩個屬性，即top和left
  • scrollTop()方法和scrollLeft方法
  • 這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離
  • 一些圖總結以上的位置關係(專案中很常用-必須要弄清楚)

第六節 jQuery動畫

回顧上節

• 操作DOM
  
  • a.什麼是DOM：Document Object Model縮寫，文件物件模型
  • b.理解頁面的樹形結構
  • c.什麼是節點：是DOM結構中最小單元，包括元素、屬性、文字、文件等。

一、建立節點

• 1.建立元素
  
  • 語法：document.createElement(name);

var div = document.createElement("div");
document.body.appendChild(div);




<div class="se-preview-section-delimiter"></div>

• $(html)：根據傳遞的標記字串，建立DOM物件

• 2.建立文字

var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);

var $div = = $("<div>DOM</div>");
$(body).append($div);




<div class="se-preview-section-delimiter"></div>

• 3.設定屬性
  
  • 語法：e.setAttrbute(name,value)

var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");

var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);




<div class="se-preview-section-delimiter"></div>

二、插入內容

• 內部插入

  • 向元素最後面插入節點：
  • append():向每個匹配的元素內部追加內容
  • appendTo():把所有匹配的元素追加到指定元素集合中，$("A").append("B")等效 $("B").appendTo("A")
  • 向元素最前面插入節點：
  • prepend（）：把每個匹配的元素內部前置內容
  • prependTo（）：把所有匹配的元素前置到另一個指定的元素集合中,$("A").prepend("B") 等效 $("B").prependTo("A")

• 外部插入

  • after():在每個匹配的元素之後插入內容
  • before()：在每個匹配想元素之前插入內容
  • insertAfter()：將所有匹配的元素插入到另一個指定的元素集合後面，$A.insert($B) 等效$B.insertAfter($A);
  • insertBefore()：將所有匹配的元素插入到另一個指定的元素集合前面 $A.before($B) 等效 $B.insertBefore($A);

三、刪除內容

• 移除
  
  • remove():從DOM中刪除所有匹配元素
• 清空
  
  • empty():刪除匹配的元素集合中所有子節點內容

四、克隆內容：建立指定節點副本

• clone()
  
  • 注意：若clone（true）則是包括克隆元素的屬性，事件等

五、替換內容

• replaceWith():將所有匹配的元素替換成指定的元素

• replaceAll():用匹配的元素替換掉指定元素

  • 注意：兩者效果一致，只是語法不同 $A.replaceAll($B)等效於 $B.replaceWhith($A);

本節新知識

• JavaScript語言本身不支援動畫設計，必須通過改變CSS來實現動畫效果

顯隱動畫

• show():顯示 hide():隱藏

  • 原理：hide()通過改變元素的高度寬度和不透明度，直到這三個屬性值到0
  • show()從上到下增加元素的高度，從左到右增加元素寬度，從0到1增加透明度，直至內容完全可見
  • 引數：
    
    • show(speed,callback)
    • speed: 字串或數字，表示動畫將執行多久（slow=0.6/normal=0.4/fast=0.2）
    • callback: 動畫完成時執行的方法

• 顯示和隱藏式一對密不可分的動畫形式

• 顯隱切換

  • toggle():切換元素的可見狀態
  • 原理：匹配元素的寬度、高度以及不透明度，同時進行動畫，隱藏動畫後將display設定為none
  • 引數：
    
    • toggle(speed)
    • toggle(speed,callback)
    • toggle(boolean)
      
      • speed: 字串或數字，表示動畫將執行多久（slow=0.6/normal=0.4/fast=0.2）
      • easing： 使用哪個緩衝函式來過渡的字串(linear/swing)
      • callback： 動畫完成時執行的方法
      • boolean:true為顯示 false為隱藏

滑動

• 顯隱滑動效果

  • slideDown():滑動隱藏

  • slidUp():滑動顯示

  • 引數:

  • slideDown(speed,callback)
  • slidUp(speed,callback)

• 顯隱切換滑動

  • slideToggle():顯隱滑動切換
  • 引數:
    
    • slidUp(speed,callback)

漸變：通過改變不透明度

• 淡入淡出

  • fadeIn()

  • fadeOut()

  • 引數：

  • fadeIn(speed,callback)
  • fadeOut(speed,callback)

• 設定淡出透明效果

  • fadeTo()：以漸進的方式調整到指定透明度

  • 引數：

    • fadeTo(speed,opacity,callback)

• 漸變切換:結合fadeIn和fadeOut

  • fadeToggle()

  • 引數:

    • fadeOut(speed,callback)

• 自定義動畫：animate()

  • 注意：在使用animate方法之前，為了影響該元素的top left bottom right樣式屬性，必須先把元素的position樣式設定為relative或者absolute
  • 停止元素的動畫
    
    • 很多時候需要停止匹配正在進行的動畫，需要使用stop()
    • stop()語法結構：stop([clearQueue],[gotoEnd]);
      
      • 都是可選引數，為布林值
      • 如果直接使用stop()方法，會立即停止當前正在進行的動畫
  • 判斷元素是否處於動畫狀態
    
    • 如果不處於動畫狀態，則為元素新增新的動畫，否則不新增
      if(!$(element).is(":animated")){ //判斷元素是否處於動畫狀態}
    • 這個方法在animate動畫中經常被用到，需要注意
  • 延遲動畫
    
    • 在動畫執行過程中，如果你想對動畫進行延遲操作，那麼使用delay()

• 用animate模擬show():

  • show: 表示由透明到不透明
  • toggle: 切換
  • hide:表示由顯示到隱藏

• 動畫方法總結

方法名	說明
hide()和show()	同時修改多個樣式屬性即高度和寬度和不透明度
fadeIn()和fadeOut()	只改變不透明度
slideUp()和slideDown()	只改變高度
fadeTo()	只改變不透明度
toggle()	用來代替show()和hide()方法，所以會同時修改多個屬性即高度、寬度和不透明度
slideToggle()	用來代替slideUp和slideDown()方法，所以只能改變高度
fadeToggle()	用來代替fadeIn()和fadeOut方法，只能改變不透明度
animate()	屬於自定義動畫，以上各種動畫方法都是呼叫了animate方法。此外，用animate方法還能自定義其他的樣式屬性，例如：left marginLeft ``scrollTop等

第七節 jQuery中的事件

• 事件物件的屬性

  • event.type：獲取事件的型別
  • event.target:獲取到觸發事件的元素
  • event.preventDefault方法 阻止預設事件行為
  • event.stopPropagation()阻止事件的冒泡

  • keyCode：只針對於keypress事件，獲取鍵盤鍵數字 按下回車，13

  • event.pageX / event.pageY 獲取到游標相對於頁面的x座標和y座標

    • 如果沒有jQuery，在IE瀏覽器中用event.x / event.y;在Firefox瀏覽器中用event.pageX / event.pageY。如果頁面上有滾動條還要加上滾動條的寬度和高度

  • event.clientX：游標對於瀏覽器視窗的水平座標 瀏覽器

  • event.clientY：游標對於瀏覽器視窗的垂直座標

  • event.screenX：游標對於電腦螢幕的水平座標 電腦螢幕

  • event.screenY：游標對於電腦螢幕的水平座標
  • event.which 該方法的作用是在滑鼠單擊事件中獲取到滑鼠的左、中、右鍵，在鍵盤事件中的按鍵 1代表左鍵 2代表中鍵 3代表右鍵

• 事件冒泡

  • 什麼是冒泡
  • 在頁面上可以有多個事件，也可以多個元素影響同一個元素
  • 從裡到外
  • 巢狀關係
  • 相同事件
  • 其中的某一父類沒有相同事件時,繼續向上查詢
  • 停止事件冒泡
    
    • 停止事件冒泡可以阻止事件中其他物件的事件處理函式被執行
    • 在jQuery中提供了stopPropagation()方法
  • 阻止預設行為
    
    • 網頁中元素有自己的預設行為，例如：單擊超連結後會跳轉、單擊提交後表單會提交，有時需要阻止元素的預設行為
    • 在jQuery中提供了preventDefault()方法來阻止元素的預設行為
  • 事件捕獲
  • 事件捕獲和冒泡是相反的過程，事件捕獲是從最頂端往下開始觸發
  • 並非所有的瀏覽器都支援事件捕獲，並且這個缺陷無法通過JavaScript來修復。jQuery不支援事件捕獲，如需要用事件捕獲，要用原生的JavaScript

• bind();繫結

  • 為匹配元素繫結處理方法

  • 需要給一個元素新增多個事件 ，事件執行一樣時候

  • one()：只執行一次

• 繫結特定事件型別方法：

分類	方法名稱	說明
頁面載入	ready(fn)	當DOM載入就緒可以繫結一個要執行的函式
事件繫結	blind(type,[data],fn)	為每個匹配元素的特定事件繫結一個事件處理函式
事件繫結	unblind()	解除繫結
事件繫結	on(events,[,selector[,]data],handler)	在選擇元素上繫結一個或者多個事件處理函式
事件繫結	off()	移除on繫結的事件
事件繫結	delegate(selector,eventType,handler)	為所有選擇匹配元素附加一個或多個事件處理函式
事件繫結	undelegate()	移除繫結
事件動態	live(type,fn)	對動態生成的元素進行事件繫結
事件動態	die(type,fn)	移除live()繫結的事件
互動事件	hover()	滑鼠移入移出
互動事件	toggle(fn1,fn2,[fn3],[fn4])	每單擊後依次呼叫函式
互動事件	blur(fn)	觸發每一個匹配元素的blur事件
互動事件	change()	觸發每一個匹配元素的change事件
互動事件	click()	觸發每一個匹配元素的click事件
互動事件	focus()	觸發每一個匹配元素的focus事件
互動事件	submit()	觸發每一個匹配元素的submit事件
鍵盤事件	keydown()	觸發每一個匹配元素的keydown事件
鍵盤事件	keypress()	觸發每一個匹配元素的keypress事件
鍵盤事件	keyup()	觸發每一個匹配元素的keyup事件
滑鼠事件	mousedown(fn)	繫結一個處理函式
滑鼠事件	mouseenter(fn)	繫結一個處理函式
鍵盤事件	mouseleave(fn)	繫結一個處理函式
鍵盤事件	mouseout(fn)	繫結一個處理函式
鍵盤事件	mouseover(fn)	繫結一個處理函式
視窗操作	resize(fn)	繫結一個處理函式
視窗操作	scroll(fn)	繫結一個處理函式

第八節 jQuery與Ajax

• Ajax簡介 :
  
  • Asynchronous Javascript And XML （非同步的
    JavaScript和XML）
  • 它並不是一種單一的技術，而是有機利用一系列互動式網頁應用相關的技術所形成的結合體
• Ajax優勢與不足
  
  • Ajax優勢
    
    • 優秀的使用者體驗
      
      • 這是Ajax下最大的有點，能在不重新整理整個頁面前提下更新資料
    • 提高web程式的效能
      
      • 與傳統模式相比，Ajax模式在效能上最大的區別在於傳輸資料的方式，在傳統模式中，資料的提交時通過表單來實現的。Ajax模式只是通過XMLHttpRequest物件向伺服器提交希望提交的資料，即按需傳送
    • 減輕伺服器和頻寬的負擔
      
      • Ajax的工作原理相當於在使用者和伺服器之間加了一箇中間層，似使用者操作與伺服器響應非同步化。它在客戶端建立Ajax引擎，把傳統方式下的一些伺服器負擔的工作轉移到客戶端，便於客戶端資源來處理，減輕伺服器和頻寬的負擔
  • Ajax的不足
    
    • 瀏覽器對XMLHttpRequest物件的支援度不足
    • 破壞瀏覽器前進、後退按鈕的正常功能
    • 對搜尋引擎的支援的不足
    • 開發和除錯工具的缺乏

建立一個Ajax請求

• Ajax的核心是XMLHttpRequest物件，它是Ajax實現的關鍵，傳送非同步請求、接受響應以及執行回撥都是通過它來完成

• 建立ajax物件 var xhr = new XMLHttpRequest();

• 準備傳送請求

  • get / post

    • get
    • 傳遞的資料放在URL後面
    • 中文編碼 encodeURI( '' );
    • 快取 在資料後面加上隨機數或者日期物件或者……

    • post

    • 傳遞的資料放在send()裡面，並且一定要規定資料格式

    • 沒有快取問題

  • form表單中:

    • action:
    • method: (預設是get)
    • get: 會在url裡面以 name=value , 兩個資料之間用 & 連線
    • post:
    • enctype: "application/x-www-form-urlencoded"

  • url

  • 是否非同步

  • 同步(false)：阻塞
  • 非同步(true)：非阻塞

• 正式傳送請求

• ajax請求處理過程

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4)
    {
        alert( xhr.responseText );
    }
};




<div class="se-preview-section-delimiter"></div>

• onreadystatechange ：當處理過程發生變化的時候執行下面的函式

• readyState ：ajax處理過程

  • 0：請求未初始化（還沒有呼叫 open()）。
  • 1：請求已經建立，但是還沒有傳送（還沒有呼叫 send()）。
  • 2：請求已傳送，正在處理中（通常現在可以從響應中獲取內容頭）。
  • 3：請求在處理中；通常響應中已有部分資料可用了，但是伺服器還沒有完成響應的生成。
  • 4：響應已完成；您可以獲取並使用伺服器的響應了。

• responseText ：請求伺服器返回的資料存在該屬性裡面

• status : http狀態碼

• 案例：ajax封裝案例

//ajax請求後臺資料
var btn =  document.getElementsByTagName("input")[0];
btn.onclick = function(){

    ajax({//json格式
        type:"post",
        url:"post.php",
        data:"username=poetries&pwd=123456",
        asyn:true,
        success:function(data){
            document.write(data);
        }
    });
}
//封裝ajax
function ajax(aJson){
    var ajx = null;
    var type = aJson.type || "get";
    var asyn = aJson.asyn || true;
    var url = aJson.url;        // url 接收 傳輸位置
    var success = aJson.success;// success 接收 傳輸完成後的回撥函式
    var data = aJson.data || '';// data 接收需要附帶傳輸的資料

    if(window.XMLHttpRequest){//相容處理
        ajx = new XMLHttpRequest();//一般瀏覽器
    }else
    {
        ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
    }
    if (type == "get" && data)
    {
        url +="/?"+data+"&"+Math.random();
    }

    //初始化ajax請求
    ajx.open( type , url , asyn );
    //規定傳輸資料的格式
    ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
    //傳送ajax請求（包括post資料的傳輸）
    type == "get" ?ajx.send():ajx.send(aJson.data);

    //處理請求
    ajx.onreadystatechange = function(aJson){

    if(ajx.readState == 4){

        if (ajx.status == 200 && ajx.status<300)//200是HTTP 請求成功的狀態碼
        {
            //請求成功處理資料
            success && success(ajx.responseText);
        }else{
            alert("請求出錯"+ajx.status);

        }
    }

    };




<div class="se-preview-section-delimiter"></div>

jQuery中的Ajax [補充部分–來自鋒利的jQuery]

jquery對Ajax操作進行了封裝，在jquery中的$.ajax()方法屬於最底層的方法，第2層是load()、$.get()、$.post();第3層是$.getScript()、$.getJSON()，第2層使用頻率很高

load()方法

• load()方法是jquery中最簡單和常用的ajax方法，能載入遠端HTML程式碼並插入DOM中 結構為：load(url,[data],[callback])
  
  • 使用url引數指定選擇符可以載入頁面內的某些元素 load方法中url語法：url selector 注意：url和選擇器之間有一個空格
• 傳遞方式
  
  • load()方法的傳遞方式根據引數data來自動指定，如果沒有引數傳遞，則採用GET方式傳遞，反之，採用POST
• 回撥引數
  
  • 必須在載入完成後才執行的操作，該函式有三個引數 分別代表請求返回的內容、請求狀態、XMLHttpRequest物件
  • 只要請求完成，回撥函式就會被觸發

$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
    //respnoseText 請求