jQuery筆記總結篇

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

XMind源文件提供參考下載

[Jquery筆記]

XMind源文件提供參考下載

第一節 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方法
- 這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離
- 一些圖總結以上的位置關係(項目中很常用-必須要弄清楚)

更多介紹詳情
- JavaScript及jQuery中的各種寬高屬性圖解

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




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

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請求中，這種區別對用戶不可見
- GET方式對傳輸數據有大小限制（通常不能大於2KB），而使用POST方式傳遞的數據量要比GET方式大得多（理論不受限制）
- GET方式請求的數據會被瀏覽器緩存起來，因此其他人可以從瀏覽器的歷史紀錄中讀取這些數據，如：賬號、密碼。在某種情況下，GET方式會帶來嚴重的安全問題，而POST相對來說可以避免這些問題
- GET和POST方式傳遞的數據在服務端的獲取也不相同。在PHP中，GET方式用$_GET[]獲取；POST方式用$_POST[]獲取;兩種方式都可用$_REQUEST[]來獲取

總結
- 使用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`等 `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);




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

自定義jQuery函數：

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




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

自定義jQuery命令：

形式1：

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




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

形式2：

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

})(jQuery);




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

附錄一 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捕捉到觸發的目標
  - 在jQuery1.7中提供了一個新的方法on()，來幫助你將整個事件監聽封裝到一個便利的方法中
  - $("#myTable td").on("click",'td',function(){$(this).css("background","red");});
- 將你的代碼轉化成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代碼片段

禁用頁面的右鍵菜單

$(document).ready(functuion(){
    $(document).bind("contextmenu",function(e){
        return false;
  });  
});




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

新窗口打開頁面

$(document).ready(function(){
    //例子1：href="http://"的鏈接將會在新窗口打開鏈接
    $('a[href=^="http://"]').attr("target","_blank");

  //例子2：rel="external"的超鏈接將會在新窗口打開鏈接
    $("a[rel$='external']").click(function(){
      this.target = "_blank";
    });
});
//use
<a href="http://baidu.com" rel="external">open</a>




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

判斷瀏覽器類型


$(document).reday(function(){
    //Firefox2 and above
    if( $.browser.mozilla && $.browser.version>="1.8"){
      //do something
  }

  // Safari
  if($.browser.safari){
     //do something
  }

  // Chrome
  if($.browser.chrome){
     //do something
  }

  // Opera
  if($.browser.opera){
     //do something
  }

})

  // IE6 and blow
  if($.browser.msie && $.browser.version<=6){
     //do something
  }

  // anything above IE6
  if($.browser.msie && $.browser.version > 6){
     //do something
  }





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

輸入框文字獲取和失去焦點


$(document).ready(function(){
    $("input.text1").val("Enter you search text here");
    textFill($('input.text1'));
});

function textFill(input){//input focus text function
    var originvalue = input.val();
    input.focus(funtion(){
        if($.trim(input.val())== originvalue){
            input.val(' ');
        }
  }).blur(function(){
      if($.trim(input.val()) == ' '){
          input.val(originalvalue);
      }
  })
}





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

獲取鼠標位置


$(document).ready(function(){
  $(document).mousemove(function(e){
      $("#XY").html("X:" + e.pageX+ "| Y" + e.pageY);
  });
});





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

判斷元素是否存在

$(document).ready(function(){
    if($("#id").length){
      // do some thing  
  }
})




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

點擊div也可以跳轉

$("div").click(function(){
    window.location  = $(this).find("a").attr("href");
})

//use

<div><a href="index.html">home</a></div>





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

設置div在屏幕中央

$(document).ready(function(){
    jQuery.fn.center = function(){
        this.css("position","absolute");
        this.css("top",($(window).height() - this.lenght()) / 2 +$(window).scrollTop() + "px"); 
        this.css("left",($(window).height() - this.lenght()) / 2 +$(window).scrollLeft() + "px"); 
      return this;
  }
//use 

 $("#XY").center();
});





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

關閉所有動畫效果

$(document).ready(function(){
    jQuery.fx.off = true;
});





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

檢測鼠標的右鍵和左鍵

$(document).ready(function(){
    $("#xy").mousedown(function(e){
        alert(e.which);//1 = 鼠標左鍵  2= 鼠標中間 3 = 鼠標右鍵
  });
});





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

回車提交表單

$(document).ready(function(){
    $("input").keyup(function(e){
        if(e.which == "13"){
            alert("回車提交");
      }
  })
});





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

設置全局的Ajax參數

$("#load").ajaxStart(function(){
    showLoading();//顯示loading
    disableButtons() //禁用按鈕
})
 $("#load").ajaxComplete(function(){
    hideLoading();//隱藏loading
    enableButtons();//啓用按鈕
})




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

獲取選中的下拉框

$("#someElement").find('option:selected');
$("#someElement option:selected");




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

切換複選框

var tog = false;
$("button").click(function(){
    $("input[type=checkbox]').attr("checked",!tog);
    tog = !tog;
});




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

個性化鏈接

$(document).ready(function(){
     $("a[href$='pdf']").addClass("pdf");
     $("a[href$='zip']").addClass("zip");
     $("a[href$='psd']").addClass("psd");
});





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

在一段時間後自動隱藏或關閉元素

setTimeOut(function(){
        $("div").fadeIn(400);
  },3000);

//而在1.4之後的版本可以用delay()來實現
$("div").slideUp(300).delay(3000).fadeIn(400);





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

使用事件代理綁定元素

 //爲table裏面的td元素綁定click事件，不管td是一直存在還是動態創建的
 //jQuery 1.4.2之前使用這種方式
 $("table").each(function(){
    $("td",this).live("click",function(){
       $(this).toggleClass("hover"); 
    });
});

//jquery 1.4.2使用的方式

$("table").delegate("td","click",function(){
    $(this).toggleClass("hover");
});

//jQuery1.7.1使用的方式
$("table").on("click","td",function(){
    $(this).toggleClass("hover");
 })




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

預加載圖片

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");




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

讓頁面中的每個元素都適合在移動設備上展示

var scr = document.createElement('script');
scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
document.body.appendChild(scr);
scr.onload = function(){
    $('div').attr('class', '').attr('id', '').css({
        'margin' : 0,
        'padding' : 0,
        'width': '100%',
        'clear':'both'
    });
};




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

圖像等比例縮放

$(window).bind("load", function() {
    // IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();
        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
            ratio = maxHeight / height;
            $(this).css("height", maxHeight);
            $(this).css("width", width * ratio);
            width = width * ratio;
        }
    });
    //$("#contentpage img").show();
    // IMAGE RESIZE
});




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

返回頁面頂部

// Back To Top
$(document).ready(function(){ 
  $('.top').click(function() {  
     $(document).scrollTo(0,500);  
  });
}); 
//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>




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

使用jQuery打造手風琴式的摺疊效果

var accordion = {
     init: function(){
           var $container = $('#accordion');
           $container.find('li:not(:first) .details').hide();
           $container.find('li:first').addClass('active');
           $container.on('click','li a',function(e){
                  e.preventDefault();
                  var $this = $(this).parents('li');
                  if($this.hasClass('active')){
                         if($('.details').is(':visible')) {
                                $this.find('.details').slideUp();
                         } else {
                                $this.find('.details').slideDown();
                         }
                  } else {
                         $container.find('li.active .details').slideUp();
                         $container.find('li').removeClass('active');
                         $this.addClass('active');
                         $this.find('.details').slideDown();
                  }
           });
     }
};




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

使用jQuery和Ajax自動填充選擇框

$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '
' + j[i].optionDisplay + '
';
}
$("select#ctlPerson").html(options);
})
})
})




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

自動替換丟失的圖片

// Safe Snippet
$("img").error(function () {
    $(this).unbind("error").attr("src", "missing_image.gif");
});
// Persistent Snipper
$("img").error(function () {
    $(this).attr("src", "missing_image.gif");
});




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

預防對錶單進行多次提交

$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});




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

動態添加表單元素

//change event on password1 field to prompt new input
$('#password1').change(function() {
        //dynamically create new input and insert after password1
        $("#password1").append("");
});




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

在窗口滾動時自動加載內容

var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});
$(document).ready(function() {
    $('#loaded_max').val(50);
});




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

導航菜單背景切換效果

<ul id='nav'> 
    <li>導航一</li> 
    <li>導航二</li> 
    <li>導航三</li>
</ul>

//注意：代碼需要修飾完善

$('#nav').click(function(e) {
 // 要知道siblings的使用          

$(e.target).addClass('tclass').siblings('.tclass').removeClass('tclass');;

 });




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

解決jQuery, prototype共存，$全局變量衝突問題

<script src="prototype.js"></script>
<script src="http://blogbeta.blueidea.com/jquery.js"></script>
<script type="text/javascript"> jQuery.noConflict();</script> 

注意：一定要先引入prototype.js 再引入jquery.js，先後順序不可錯




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

jQuery 判斷元素上是否綁定了事件

//jQuery event封裝支持判斷元素上是否綁定了事件，此方法只適用於jQuery綁定的事件
var $events = $("#foo").data("events");
if( $events && $events["click"] ){　　
    //your code
} 




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

如何正確地使用toggleClass

//切換（toggle）類允許你根據某個類的//是否存在來添加或是刪除該類。
//這種情況下有些開發者使用：
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
//toggleClass允許你使用下面的語句來很容易地做到這一點
a.toggleClass('blueButton');




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

如何設置IE特有的功能

if ($.browser.msie) {
    // Internet Explorer就是個虐待狂
}




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

如何驗證某個元素是否爲空

// 方法一
if (! $('#keks').html()) {
    //什麼都沒有找到;
}
// 方法二
if ($('#keks').is(":empty")) {
    //什麼都沒有找到;
}




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

訪問IFrame裏的元素

var iFrameDOM = $("iframe#someID").contents();
//然後，就可以通過find方法來遍歷獲取iFrame中的元素了
iFrameDOM.find(".message").slideUp();




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

管理搜索框的值
- 現在各大網站都有搜索框，而搜索框通常都有默認值，當輸入框獲取焦點時，默認值消失。而一旦輸入框失去焦點，而輸入框裏又沒有輸入新的值，輸入框裏的值又會恢復成默認值，如果往輸入框裏輸入了新值，則輸入框的值爲新輸入的值。這種特效用JQuery
  很容易實現

$("#searchbox") .focus(function(){
      $(this).val('')
}) .blur(function(){
     var $this = $(this); 
    // '請搜索...'爲搜索框默認值 
    ($this.val() === '')? $this.val('請搜索...') : null; 
});




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

部分頁面加載更新
- 爲了提高web性能，有更新時我們通常不會加載整個頁面，而只是僅僅更新部分頁面內容，如圖片的延遲加載等。頁面部分刷新的特效在JQuery中也很容易實現

setInterval(function() { 
//每隔5秒鐘刷新頁面內容 //獲取的內容將增加到 id爲content的元素後 

$("#content").load(url); }, 5000);




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

採配置JQuery與其它庫的兼容性
- 如果在項目中使用JQuery，$ 是最常用的變量名，但JQuery並不是唯一一個使用$作爲變量名的庫，爲了避免命名衝突，你可以按照下面方式來組織你的代碼

“`javascript
//方法一：爲JQuery重新命名爲
jvarj = jQuery.noConflict();$j(‘#id’)…. //

方法二：推薦使用的方式

(function(){(document).ready(function(){
//這兒，你可以正常的使用JQuery語法 });
})(jQuery);

Alvin哥哥

發佈了92 篇原創文章 · 獲贊 111 · 訪問量 29萬+

私信關注

jQuery筆記總結篇

如何使用 JS 判斷用戶是否處於活躍狀態

Mono 支持LoongArch架構

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

網絡爬蟲的祕密：如何高效地抓取JD.com視頻鏈接

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

ThinkPHP5+Layui實現圖片上傳加預覽

ThinkPHP5自動生成縮略圖函數

實現添加無限極欄目名稱

thinkphp分頁bug--解決thinkphp分頁亂碼問題

支付寶退款接口（即時到帳無密退款）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結