jQuery總結

本文轉載自查看原文 2019-07-11 11:51 447 Web

第一節 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()

<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
   $(function(){
       alert(“jQuery 你好!”);
   });
</script>

講解$(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(){ //.. }); 推薦寫法：$(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

<script type="text/javascript"></script>
寫第一個JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
    $(function(){
        alert(“jQuery 你好!”);
    });
</script>

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

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

$()和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

代理對象$()
- 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

檢索范圍的限制（$('字符串',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選擇器速度最快，其次是類型選擇器。
- 多用ID選擇器
- 少直接使用class選擇器
- 多用父子關系，少用嵌套關系
- 緩存jQuery對象
使用過濾器
- jQuery提供了2種選擇文檔元素的方式：選擇器和過濾器
- 類過慮器：根據元素的類屬性來進行過濾操作。
- 下標過濾器：精確選出指定下標元素
- 表達式過濾器
- 映射 map(callback)：將一組元素轉換成其他數組
- 清洗 not(expr)：刪除與指定表達式匹配的元素
- 截取 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元素的屬性
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);

$(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);

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);

二、插入內容

內部插入
- 向元素最后面插入節點：
  - 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()里面，並且一定要規定數據格式
    - 沒有緩存問題

enctype: "application/x-www-form-urlencoded"

url
是否異步
- 同步(false)：阻塞
- 異步(true)：非阻塞
正式發送請求
ajax請求處理過程

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

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);
            
        }
    }
        
    };

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 請求返回的內容
    //textStatus 請求狀態 ：sucess、error、notmodified、timeout
    //XMLHttpRequest 
})

load方法參數

參數名稱	類型	說明
url	String	請求HTML頁面的URL地址
data(可選)	Object	發送至服務器的key / value數據
callback(可選)	Function	請求完成時的回調函數，無論是請求成功還是失敗

$.get()和$.post()方法

load()方法通常用來從web服務器上獲取靜態的數據文件。在項目中需要傳遞一些參數給服務器中的頁面，那么可以使用$.get()和$.post()或$.ajax()方法

注意：$.get()和$.post()方法是jquery中的全局函數
$.get()方法
- $.get()方法使用GET方式來進行異步請求
- 結構為：$.get(url,[data],callback,type)
  - 如果服務器返回的內容格式是xml文檔，需要在服務器端設置Content-Type類型代碼如下：header("Content-Type:text/xml:charset=utf-8") //php
$.get()方法參數解析

參數	類型	說明
url	String	請求HTML頁的地址
data(可選)	Object	發送至服務器的key/ value 數據會作為QueryString附加到請求URL中
callback(可選)	Function	載入成功的回調函數（只有當Response的返回狀態是success才調用該方法）
type(可選)	String	服務器返回內容的格式，包括xml、html、script、json、text和_default

$.post()方法
- 它與$.get()方法的結構和使用方式相同，有如下區別
- - GET請求會將參數跟張乃URL后進行傳遞，而POST請求則是作為Http消息的實體內容發送給web服務器，在ajax請求中，這種區別對用戶不可見
總結
- 使用load()、$.get()和$.post()方法完成了一些常規的Ajax程序，如果還需要復雜的Ajax程序，就需要用到$.ajax()方式

$.ajax()方法

$.ajax()方法是jquery最底層的Ajax實現，它的結構為$.ajax(options)
該方法只有一個參數，但在這個對象里包含了$.ajax()方式所需要的請求設置以及回調函等信息，參數以key / value存在，所有參數都是可選的
$.ajax()方式常用參數解析

參數	類型	說明
url	String	(默認為當前頁地址)發送請求的地址
type	String	請求方式（POST或GET）默認為GET
timeout	Number	設置請求超時時間（毫秒）
dataType	String	預期服務器返回的類型。可用的類型如下 xml:返回XML文檔，可用jquery處理 html:返回純文本的HTML信息，包含的script標簽也會在插入DOM時執行 script：返回純文本的javascript代碼。不會自動緩存結果，除非設置cache參數。注意：在遠程請求時，所有的POST請求都將轉為GET請求 json:返回JSON數據 jsonp:JSONP格式，使用jsonp形式調用函數時，例如：myurl?call back=?,jquery將自動替換后一個？為正確的函數名，以執行回調函數 text:返回純文本字符串
beforeSend	Function	發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請求。XMLHttpRequest對象是唯一的參數 function(XMLHttpRequest){ this;//調用本次Ajax請求時傳遞的options參數 }
complete	Function	請求完成后的回調函數（請求成功或失敗時都調用）參數：XMLHttpRequest對象和一個描述成功請求類型的字符串 function(XMLHttpRequest,textStatus){ this;//調用本次Ajax請求時傳遞的options參數 }
success	Function	請求成功后調用的回調函數，有兩個參數 (1)由服務器返回，並根據dataTyppe參數進行處理后的數據 (2)描述狀態的字符串 function(data,textStatus){ //data可能是xmlDoc、`jsonObj、html、text等<br>         this;//調用本次Ajax請求時傳遞的options`參數 }
error	Function	請求失敗時被調用的函數
global	Boolean	默認為true。表示是否觸發全局Ajax事件，設置為false將不會觸發。AjaxStart或AjaxStop可用於控制各種Ajax事件

第九節插件

什么是插件
- 插件(Plugin)也稱為jQuery的擴展。以jQuery核心代碼為基礎編寫的符合一定規范的應用程序。通過js文件的方式引用。
插件分為哪幾類
- UI類、表單及驗證類、輸入類、特效類、Ajax類、滑動類、圖形圖像類、導航類、綜合工具類、動畫類等等
引入插件的步驟
- 引入jquery.js文件，而且在所以插件之前引入
- 引入插件
- 引入插件相關文件，比如皮膚、中文包
如何自定義插件：
- 插件形式分為3類：
  - 封裝對象方法插件
  - 封裝全局函數插件
  - 選擇器插件(類似於.find())
自定義插件的規范（解決各種插件的沖突和錯誤，增加成功率）
- 命名：jquery.插件名.js
- 所有的新方法附加在jquery.fn對象上面，所有新功能附加在jquery上
- 所有的方法或插件必須用分號結尾，避免出問題
- 插件必須返回jQuery對象，便於鏈式連綴
- 避免插件內部使用$，如果要使用，請傳遞jQuery($並不是總等於jQuery，另外其他js框架也可能使用$)
- 插件中的this應該指向jQuery對象
- 使用this.each()迭代元素
自定義插件案例
- 為了方便用戶創建插件，jQuery提供了 jQuery.extend() 和 jQuery.fn.extend()
- jQuery.extend()：創建工具函數或者是選擇器
- jQuery.fn.extend()：創建jQuery對象命令（fn相當於prototype的別名）
jQuery官方提供的插件開發模板

;(function($){
    $.fn.plugin=function(options){
        var defaults = {
            //各種參數 各種屬性
        }
        var options = $.extend(defaults,options);

        this.each(function(){
            //實現功能的代碼
        });

        return this;
    }
})(jQuery);

自定義jQuery函數：

(function($){
    $.extend({
        test: function(){
            alert("hello plugin");
        }
    })
    })(jQuery);

自定義jQuery命令：

形式1：

(function($){
    $.fn.extend({
        say : function(){
         alert("hello plugin");
    }
    })
})(jQuery);

形式2：

(function($){
    $.fn.say = function(){
        alert("hello plugin");
    };
    
})(jQuery);

附錄一 jQuery各個版本新增的一些常用的方法

jQuery1.3新增常用的方法

方法	說明
.closest()	從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素
die()	從元素中刪除先前用live()方法綁定的所有的事件
live()	附加一個事件處理器到符合目前選擇器的所有元素匹配

jQuery1.4新增常用的方法

方法	說明
.first()	獲取集合中第一個元素
last()	獲取集合中最后一個元素
has(selector)	保留包含特定后代的元素，去掉那些不含有指定后代的元素
detach()	從DOM中去掉所有匹配的元素。detach()和remov()一樣，除了detach()保存了所有jquery數據和被移走的元素相關聯。當需要移走一個元素，不久又將該元素插入DOM時，這種方法很有用
delegate()	為所有選擇器匹配的元素附加一個處理一個或多個事件
undelegate()	為所有選擇器匹配的元素刪除一個處理一個或多個事件

jQuery1.6新增常用的方法

方法	說明
prop(proptyName)	獲取在匹配元素集合中的第一個元素的屬性值
removeProp(proptyName,value)	為匹配的元素刪除設置的屬性
:focus	選擇當前獲取焦點的元素

附錄二 jQuery性能優化

性能優化
- 使用最新版的jQuery類庫
- 使用合適的選擇器
  - $(#id)
    - 使用id來定位DOM元素是最佳的方式，為了提高性能，建議從最近的ID元素開始往下搜索
  - $("p") , $("div") , $("input")
    - 標簽選擇器性能也不錯，它是性能優化的第二選擇。因為jQuery將直接調用本地方法document.getElementsByTagName()來定位DOM元素
  - $(".class")
    - 建議有選擇性的使用
  - $("[attribute=value]")
    - 對這個利用屬性定位DOM元素，本地JavaScript並沒有直接實現。這種方式性能並不是很理想。建議避免使用。
  - $(":hidden")
    - 和上面利用屬性定位DOM方式類似，建議盡量不要使用
  - 注意的地方
    - 盡量使用ID選擇器
    - 盡量給選擇器指定上下文

緩存對象
- 如果你需要在其他函數中使用jQuery對象，你可以把他們緩存在全局環境中
數組方式使用jQuery對象
- 使用jQuery選擇器獲取的結果是一個jQuery對象。在性能方面，建議使用for或while循環來處理，而不是$.each()

事件代理
- 每一個JavaScript事件（如：click、mouseover）都會冒泡到父級節點。當我們需要給多個元素調用同個函數時這點很有用。比如，我們要為一個表單綁定這樣的行為：點擊td后，把背景顏色設置為紅色
- - $("#myTable td").click(function(){$(this).css("background","red");});
  - 假設有100個td元素，在使用以上的方式時，綁定了100個事件，將帶來性能影響
  - 代替這種多元素的事件監聽方法是，你只需向他們的父節點綁定一次事件，然后通過event.target獲取到點擊的當前元素
    - $("#myTable td").click(function({$(e.target).css("background","red")});
    - e.target捕捉到觸發的目標

將你的代碼轉化成jQuery插件
- 它能夠使你的代碼有更好的重用性，並且能夠有效的幫助你組織代碼

使用join()方法來拼接字符串
- 也許你之前使用+來拼接字符串，現在可以改了。它確實有助於性能優化，尤其是長字符串處理的時候
合理使用HTML5和Data屬性
- HTML5的data屬性可以幫助我們插入數據，特別是后端的數據交換。jQuery的Data()方法有效利用HTML5的屬性
  - 例如：<div id="dl" data-role="page" data-list-value="43" data-options='{"name:""John"}'>
  - 為了讀取數據，你需要使用如下代碼
    - $("#dl').data("role';//page)
    - $("#dl').data("lastValue';//43)
    - $("#dl').data("options';//john)

盡量使用原生的JavaScript方法
壓縮JavaScript代碼
- 一方面使用Gzip；另一方面去除JavaScript文件里面的注釋、空白

附錄三常用的jQuery代碼片段

附錄四常見CND加速服務

Bootstrap中文網開源項目免費 CDN 服務
百度靜態資源公共庫
360網站衛士常用前端公共庫CDN服務--已停止服務
開放靜態文件 CDN
微軟CDN服務
阿里雲
百度開放雲平台
jQuery CDN
jQuery cdn加速
新浪CDN

附錄五 jQuery的一些資源

速查手冊
- jQuery API 中文文檔--css88
- jQuery-overapi
- 在線桌面版API
- 更多詳情---一份實用的API參考手冊集合
jQuery插件
- 基礎常用
  - 滾動固定在某個位置
  - jQuery圖片滾動插件全能版
  - jQuery Wookmark Load 瀑布流布局
  - jQuery Jcrop 圖像裁剪
  - jQuery kxbdMarquee 無縫滾動
  - jQuery lightBox 燈箱效果
  - Lazy Load Plugin for jQuery
- 更多插件-動效庫整理
- - 插件動效庫

擴展閱讀

jQuery源碼分析系列

參考

鋒利的jQuery

本文md源文件

來源： https://www.cnblogs.com/xuxiuyu/p/5989278.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Jquery 總結~~~ JQuery+Bootstrap總結 jquery鍵盤事件總結實現jQuery擴展總結 jquery slide使用總結 jQuery使用總結 jQuery $.extend()用法總結 jQuery常用案例總結 jquery的add()用法總結 JQuery的基本用法總結