首先,來了解一下jQuery
學習的整體思路
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()
- 解釋:在
-
<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(){ //.. }); <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
<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對象)
- 如果是一個字符串參數並且沒有標籤對(選擇器)
- 代理模式以及代理內存結構
代理內存結構1
代理內存結構2
第二節 選擇器
- 來回顧一下
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
對象
- a. 多用
-
使用過濾器
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()
方法刪除後,還是可以繼續使用刪除後的引用
- 當某個節點用此方法刪除後,該節點所包含的所有後代節點將同時被刪除,用
- jQuery提供了三種刪除節點的方法
-
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
方法- 這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離
- 一些圖總結以上的位置關係(項目中很常用-必須要弄清楚)
[圖片上傳失敗...(image-a15e6f-1545535283020)]
HTML & JavaScript 中的位置和尺寸
- 更多介紹詳情
第六節 jQuery動畫
回顧上節
- 操作DOM
- a.什麼是
DOM
:Document Object Model
縮寫,文檔對象模型 - b.理解頁面的樹形結構
- c.什麼是節點:是DOM結構中最小單元,包括元素、屬性、文本、文檔等。
- a.什麼是
一、創建節點
- 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)
;
本節新知識
JavaScrip
t語言本身不支持動畫設計,必須通過改變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 );
}
};
-
onreadystatechange
:當處理過程發生變化的時候執行下面的函數 -
readyState
:ajax
處理過程- 0:請求未初始化(還沒有調用
open()
)。 - 1:請求已經建立,但是還沒有發送(還沒有調用
send()
)。 - 2:請求已發送,正在處理中(通常現在可以從響應中獲取內容頭)。
- 3:請求在處理中;通常響應中已有部分數據可用了,但是服務器還沒有完成響應的生成。
- 4:響應已完成;您可以獲取並使用服務器的響應了。
- 0:請求未初始化(還沒有調用
-
responseText
:請求服務器返回的數據存在該屬性裏面 -
status
:http
狀態碼
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
請求中,這種區別對用戶不可見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 |
預期服務器返回的類型。可用的類型如下<br /><br /> xml:返回XML 文檔,可用jquery 處理<br />html:返回純文本的HTML 信息,包含的script 標籤也會在插入DOM 時執行<br />script:返回純文本的javascript 代碼。不會自動緩存結果,除非設置cache 參數。注意:在遠程請求時,所有的POST 請求都將轉爲GET 請求<br />json:返回JSON 數據<br />jsonp:JSONP 格式,使用jsonp 形式調用函數時,例如:myurl?call back=?,jquery 將自動替換後一個? 爲正確的函數名,以執行回調函數<br />text:返回純文本字符串 |
beforeSend |
Function |
發送請求前可以修改XMLHttpRequest 對象的函數,例如添加自定義HTTP 頭。在beforeSend 中如果返回false 可以取消本次Ajax 請求。XMLHttpRequest 對象是唯一的參數<br /> function(XMLHttpRequest){<br /> this ;//調用本次Ajax 請求時傳遞的options 參數} |
complete |
Function |
請求完成後的回調函數(請求成功或失敗時都調用)<br /> 參數:XMLHttpRequest 對象和一個描述成功請求類型的字符串<br />function(XMLHttpRequest,textStatus){this ;//調用本次Ajax請求時傳遞的options 參數} |
success |
Function |
請求成功後調用的回調函數,有兩個參數<br />(1)由服務器返回,並根據dataTyppe 參數進行處理後的數據<br />(2)描述狀態的字符串<br />function (data,textStatus){// data 可能是xmlDoc、``jsonObj 、html 、text 等this ;//調用本次Ajax 請求時傳遞的options 參數<br />} |
error |
Function |
請求失敗時被調用的函數 |
global |
Boolean |
默認爲true 。表示是否觸發全局Ajax 事件,設置爲false 將不會觸發。AjaxStart 或AjaxStop 可用於控制各種Ajax 事件 |
第九節 插件
-
什麼是插件
- 插件(
Plugin
)也稱爲jQuery
的擴展。以jQuery
核心代碼爲基礎編寫的符合一定規範的應用程序。通過js
文件的方式引用。
- 插件(
-
插件分爲哪幾類
UI
類、表單及驗證類、輸入類、特效類、Ajax
類、滑動類、圖形圖像類、導航類、綜合工具類、動畫類等等
- 引入插件的步驟
- 引入
jquery.js
文件,而且在所以插件之前引入 - 引入插件
- 引入插件相關文件,比如皮膚、中文包
-
如何自定義插件:
- 插件形式分爲3類:
- 封裝對象方法插件
- 封裝全局函數插件
- 選擇器插件(類似於.
find()
)
- 插件形式分爲3類:
-
自定義插件的規範(解決各種插件的衝突和錯誤,增加成功率)
- 命名:
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
、mouseove
r)都會冒泡到父級節點。當我們需要給多個元素調用同個函數時這點很有用。比如,我們要爲一個表單綁定這樣的行爲:點擊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;
});
});
- 新窗口打開頁面
$(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>
- 判斷瀏覽器類型
$(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
}
- 輸入框文字獲取和失去焦點
$(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);
}
})
}
- 獲取鼠標位置
$(document).ready(function(){
$(document).mousemove(function(e){
$("#XY").html("X:" + e.pageX+ "| Y" + e.pageY);
});
});
- 判斷元素是否存在
$(document).ready(function(){
if($("#id").length){
// do some thing
}
})
- 點擊div也可以跳轉
$("div").click(function(){
window.location = $(this).find("a").attr("href");
})
//use
<div><a href="index.html">home</a></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();
});
- 關閉所有動畫效果
$(document).ready(function(){
jQuery.fx.off = true;
});
- 檢測鼠標的右鍵和左鍵
$(document).ready(function(){
$("#xy").mousedown(function(e){
alert(e.which);//1 = 鼠標左鍵 2= 鼠標中間 3 = 鼠標右鍵
});
});
- 回車提交表單
$(document).ready(function(){
$("input").keyup(function(e){
if(e.which == "13"){
alert("回車提交");
}
})
});
- 設置全局的Ajax參數
$("#load").ajaxStart(function(){
showLoading();//顯示loading
disableButtons() //禁用按鈕
})
$("#load").ajaxComplete(function(){
hideLoading();//隱藏loading
enableButtons();//啓用按鈕
})
- 獲取選中的下拉框
$("#someElement").find('option:selected');
$("#someElement option:selected");
- 切換複選框
var tog = false;
$("button").click(function(){
$("input[type=checkbox]').attr("checked",!tog);
tog = !tog;
});
- 個性化鏈接
$(document).ready(function(){
$("a[href$='pdf']").addClass("pdf");
$("a[href$='zip']").addClass("zip");
$("a[href$='psd']").addClass("psd");
});
- 在一段時間後自動隱藏或關閉元素
setTimeOut(function(){
$("div").fadeIn(400);
},3000);
//而在1.4之後的版本可以用delay()來實現
$("div").slideUp(300).delay(3000).fadeIn(400);
- 使用事件代理綁定元素
//爲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");
})
- 預加載圖片
(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");
- 讓頁面中的每個元素都適合在移動設備上展示
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'
});
};
- 圖像等比例縮放
$(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
});
- 返回頁面頂部
// 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>
- 使用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();
}
});
}
};
- 使用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);
})
})
})
- 自動替換丟失的圖片
// Safe Snippet
$("img").error(function () {
$(this).unbind("error").attr("src", "missing_image.gif");
});
// Persistent Snipper
$("img").error(function () {
$(this).attr("src", "missing_image.gif");
});
- 預防對錶單進行多次提交
$(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;
}
});
});
- 動態添加表單元素
//change event on password1 field to prompt new input
$('#password1').change(function() {
//dynamically create new input and insert after password1
$("#password1").append("");
});
- 在窗口滾動時自動加載內容
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);
});
- 導航菜單背景切換效果
<ul id='nav'>
<li>導航一</li>
<li>導航二</li>
<li>導航三</li>
</ul>
//注意:代碼需要修飾完善
$('#nav').click(function(e) {
// 要知道siblings的使用
$(e.target).addClass('tclass').siblings('.tclass').removeClass('tclass');;
});
- 解決
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,先後順序不可錯
- jQuery 判斷元素上是否綁定了事件
//jQuery event封裝支持判斷元素上是否綁定了事件,此方法只適用於jQuery綁定的事件
var $events = $("#foo").data("events");
if( $events && $events["click"] ){
//your code
}
- 如何正確地使用
toggleClass
//切換(toggle)類允許你根據某個類的//是否存在來添加或是刪除該類。
//這種情況下有些開發者使用:
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
//toggleClass允許你使用下面的語句來很容易地做到這一點
a.toggleClass('blueButton');
- 如何設置IE特有的功能
if ($.browser.msie) {
// Internet Explorer就是個虐待狂
}
- 如何驗證某個元素是否爲空
// 方法一
if (! $('#keks').html()) {
//什麼都沒有找到;
}
// 方法二
if ($('#keks').is(":empty")) {
//什麼都沒有找到;
}
- 訪問IFrame裏的元素
var iFrameDOM = $("iframe#someID").contents();
//然後,就可以通過find方法來遍歷獲取iFrame中的元素了
iFrameDOM.find(".message").slideUp();
- 管理搜索框的值
- 現在各大網站都有搜索框,而搜索框通常都有默認值,當輸入框獲取焦點時,默認值消失。而一旦輸入框失去焦點,而輸入框裏又沒有輸入新的值,輸入框裏的值又會恢復成默認值,如果往輸入框裏輸入了新值,則輸入框的值爲新輸入的值。這種特效用
JQuery
很容易實現
- 現在各大網站都有搜索框,而搜索框通常都有默認值,當輸入框獲取焦點時,默認值消失。而一旦輸入框失去焦點,而輸入框裏又沒有輸入新的值,輸入框裏的值又會恢復成默認值,如果往輸入框裏輸入了新值,則輸入框的值爲新輸入的值。這種特效用
$("#searchbox") .focus(function(){
$(this).val('')
}) .blur(function(){
var $this = $(this);
// '請搜索...'爲搜索框默認值
($this.val() === '')? $this.val('請搜索...') : null;
});
- 部分頁面加載更新
- 爲了提高
web
性能,有更新時我們通常不會加載整個頁面,而只是僅僅更新部分頁面內容,如圖片的延遲加載等。頁面部分刷新的特效在JQuery
中也很容易實現
- 爲了提高
setInterval(function() {
//每隔5秒鐘刷新頁面內容 //獲取的內容將增加到 id爲content的元素後
$("#content").load(url); }, 5000);
- 採配置JQuery與其它庫的兼容性
- 如果在項目中使用
JQuery
,$
是最常用的變量名,但JQuery
並不是唯一一個使用$
作爲變量名的庫,爲了避免命名衝突,你可以按照下面方式來組織你的代碼
- 如果在項目中使用
//方法一: 爲JQuery重新命名爲
$jvar $j = jQuery.noConflict();$j('#id').... //
方法二: 推薦使用的方式
(function($){ $(document).ready(function(){
//這兒,你可以正常的使用JQuery語法 });
})(jQuery);
- 測試密碼的強度
- 在某些網站註冊時常常會要求設置密碼,網站也會根據輸入密碼的字符特點給出相應的提示,如密碼過短、強度差、強度中等、強度強等。這又是怎麼實現的呢?看下面代碼:
<input type="password" name="pass" id="pass" /> <span id="passstrength"></span>
//下面的正則表達式建議各位收藏哦,項目上有可能會用得着
$('#pass').keyup(function(e) {
//密碼爲八位及以上並且字母數字特殊字符三項都包括
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
//密碼爲七位及以上並且字母、數字、特殊字符三項中有兩項,強度是中等
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters'); }
else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok';
$('#passstrength').html('Strong!'); }
else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!'); }
else {
$('#passstrength').className = 'error';
$('#passstrength').html('Weak!');
}
return true;
});
附錄四 常見CND加速服務
- Bootstrap中文網開源項目免費 CDN 服務
- 百度靜態資源公共庫
- 360網站衛士常用前端公共庫CDN服務--已停止服務
- 開放靜態文件 CDN
- 微軟CDN服務
- 阿里雲
- 百度開放雲平臺
- jQuery CDN
- jQuery cdn加速
- 新浪CDN
附錄五 jQuery的一些資源
- 速查手冊
jQuery
插件- 基礎常用
- 更多插件-動效庫整理
擴展閱讀
參考
- 鋒利的
jQuery