學習JQuery

1. 重要基礎

簡寫加載函數，事情必須在DOM加載之後，否則無法綁定對象

$(document).ready()
$(function(){}); //推薦縮寫

使用包括 JQuery 庫外文法類似的 JavaScript 庫時，注意命名沖突

Jquery.noConflict() 
var 
$$
 = JQuery; //換成 
$$
 調用Jquery函數

2. 基礎選擇器

(選擇器使用css1，css2的全部選擇器文法，以及部分css3文法。)

對 id 元素使用選擇器: 預設對第一個元素外的其他元素"失明"，傳回第一個對象。
調用屬性 .length 或函數 .size() 檢視對象集合的數量
擷取對象集合裡的元素 .get(0) 或加下标 [0]
群組選擇器: 逗号列舉

$("label, #text, .blue")

後代選擇器

＄("#nav h4 span")
$("#nav").find("h4").find("span")

子代選擇器(隻能是直接的父子關系)

＄("#nav > span")
$("#nav").children("span")

擷取 span 的下一個同級兄弟元素 p

$("div span + p")
$("div span").next()

擷取 span 以下的所有同級兄弟元素 p

$("div span ~ p")
$("div span").nextAll("p")

同級向上(向下)選取元素，直到找到 label 元素為止(不包括 label 元素)

.prevUntil("label") //向上
.nextUntil("label") //向下

尋找同級兄弟

.siblings("input")
.prevAll() 加上 .nextAll()

3. 過濾選擇器

第一個(最後一個)元素

:first
:last

排除滿足條件的元素

.not(.blue)

奇(偶)序元素

:odd
:even

等于/大于/小于

:eq(2)
:gt(3)
:lt(5)

标題元素(h1 ~ h6)

:header

正在執行動畫的元素

:animated

正被聚焦的元素

:focus

包含指定文本的元素

:contains(".com")

不包含文本或者無子元素的元素

:empty

包含文本或子元素的元素

:parent

具有指定類的元素

:has(".blue")

不可見(可見)的元素

:hidden
:visible

每個父元素的第一個(最後一個)子元素

:first-child
:last-child

隻有一個子元素的元素

:only-child

每個指定子元素的元素

:nth-child(odd)

比對的元素

.is(".bule")
.hasClass("blue")
.filter(".blue")
.slice(1, 4) //第二個到第四個元素

4. 表單選擇器

選擇指定元素

:input
:button

選擇不同類型的input元素

:text
:password
:radio
:checkbox
:submit
:reset
:image
:button
:file
:hidden

選擇不同屬性的元素

:enabled
:disabled
:checked
:selected

5. 基本 DOM 操作

擷取(設定)元素html内容

.html() //加參數則設定

擷取(設定)元素文本内容

.text() //加參數則設定

擷取(設定)表單元素内容

.val() //加參數則設定

擷取(設定)元素屬性值

.attr() //加參數則設定
.attr({A: a, B: b}) //設定多個參數

擷取(設定)css樣式

.css() //加參數則設定，多參數設定同上

添加css樣式

.addClass("blue")
.addClass("blue red green")

移除css樣式

.removeClass("blue") //移除多個類同上

切換css樣式

.toggleClass("blue") //切換多個類同上
.toggleClass(function(){}, [rate]) //自定義切換規則，第二個為可選參數頻率

擷取(設定)高度(寬度)

.height() //加參數則設定 
.width() //加參數則設定
.height(function(object, value){}) //object指定元素、value指定元素的高度

擷取内外邊框高度寬度

.innerWidth()
.innerHeight()
.outerWidth() //包括邊框和内邊距
.outerHeight() //同上
.outerWidth(true) //同上并包括外邊框
.outerHeight(true) //同上

相對偏移

.offset() //相對于視口
.position() //相對于父元素

滾動條相關(擷取/設定)

.scrollTop() //垂直
.scrollLeft() //水準

6. DOM節點操作

元素内部前面插入節點

.prepend(html) //插入節點html
.prepend(function(new, parent)) //向parent元素内部前面插入節點new
.prependTo(target) //将元素移至指定元素target

元素内部後面插入節點

.append(html)
.append(function(new, parent){})
.appendTo(target)

元素外部前面插入節點

.before()
.before(function(new, parent){})
.insertBefore(target)

元素外部後面插入節點

.after()
.after(function(new, parent){})
.insertAfter(target)

包裹節點

.wrap(target) //參數可為html内容或者對象節點
.wrap(function(target){})
.unwrap() //解除一層包裹

批量包裹

.wrapAll(parent) //被元素parent包裹
.wrapInner(parent) //包裹元素parent的子元素

複制節點

.clone(true) //加上true表示同時複制綁定事件、不加則隻複制元素和内容

删除節點

.remove(‘p’) //可選參數

保留事件行為的删除

.detach()

删除節點内容

.empty()

替換節點

.replaceWith('span')
.replaceAll('p')

7. 基本事件

(以下函數均含匿名函數)

點選、輕按兩下

.click()
.dbclick()

點選彈起瞬間、彈起後

.mouseup()
.mousedown()

滑鼠穿出入觸發(包括子元素)

.mouseenter()
.mouseleave()

滑鼠穿出入觸發(不包括子元素)

.mouseover()
.mouseout()

滑鼠移動

.mousemove()

鍵盤按下彈起瞬間、彈起後

.keyup()
.keydown()
.keypress()

焦點激活與丢失

.focus()
.blur()
.focusin()
.focusout()

其他事件

.select() //文本標明
.change() //值被改變
.submit //表單送出
.scroll() //滾動條拖動
.unload() //解除安裝本頁面
.hover(fun1, [fun2]) //滑鼠移入(移出)

8. 事件對象

(function(event){})

頁面坐标(屬性)

pageX //相對于頁面
pageY
screenX //相對于顯示屏
screenY
clientX //相對于視口
clientY

9. 進階事件

模拟使用者行為

.trigger("click", [param1, param2])
.trigger("click", [{paramA1 : a, paramA2 : b}, {paramB1, paramB2}])

綁定(解綁)事件

.on("click dbclick", [function(){}])
.off("click")

僅觸發一次事件

.one() //用法同.on

10. 動畫

顯示/隐藏

.show() //可選參數持續時間，如3000表示3秒，或者“slow”
.hide() //添加第二參數閉包函數則動畫完畢後執行

自定義動畫

.animate({'top': '+=88px', 'height': '200px'}, 'slow')

隊列動畫

.queue([function([next]){ ......; [next()[]}])
.dequeue() //兩個函數都是執行下一個函數

上下卷動

.slideUp()
.slideDown()
.slidToggle()

動畫操作

.delay()
.stop()

動畫屬性

.fx.interval //運作幀數
.fx.off = ture //關閉動畫效果

11. AJAX

.load()

第一個參數：目的 url 或者帶選擇器的 url (可帶get的參數)
第二個參數：不為空則為post方式
第三個參數：閉包函數（傳回資料，狀态，XMLHttpRequest對象）

.get()

.post()

.AJAX() //底層函數

(以下為傳入參數的屬性)

url
type
timeout
data
dataType
beforeSend
complete
success
error
global
cache
content
contentType
async
processData
dataFilter
ifModified
jsonp
username
password
scriptCharset
xhr
traditional

$.ajaxStart()

$.ajaxStop()

$.ajaxError()

$.ajaxSuccess()

$.ajaxComplete()

$.ajaxSend()

$.ajaxSetup() //請求預設值來初始化參數

$('form').serialize() //擷取表單所有值

$('form').serializeArray() //傳回鍵值對的Json對象

12. 工具函數

除去字元串兩邊空格

$.trim(str)

周遊數組(對象)

$.each(arr, function(index, value){})

資料篩選

$.grep(arr, function(element, index){})

修改資料

$.map(arr, function(element, index){})

合并數組

$.merge(arr1, arr2)

6.測試類型函數

$.isArray(obj)
$.isFunction(obj)
$.isEmptyObject(obj)
$.isPlainObject(obj) //純粹對象
$.isNumeric(data)
$.isWindow(data) //window對象
$.contains(obj) //包含其他節點

判斷類型函數

$.type(data)

将對象鍵值對轉換為URL字元串鍵值對

$.param(obj)

調用内部函數

$.proxy(obj, 'objFunc') //傳回obj對象裡的objFunc函數

13. 插件

1.Validate.js

(jquery.validata.js 、 jquery.validate.messages_zh.js)

相關代碼

$('form').validate()

必填項

class = “required”

郵箱

class = "email"

不得少于兩位

minlength = "2"

網址

class = "url"

2. 自動完成插件 (jquery.autocomplete.js 、 jquery-migrate-1.2.1.js)

var name = ['John', 'Jack', 'Tom', 'Kitty'];
$('form input[name=name]').autocomplete(name, {minChars: 0}) //0表示不需要輸入一個字元即可顯示所有備選資料

3. 自定義插件

插件規範

名字: jquery.[name].js
局部對象附加 jquery.fn 對象上，全局函數附加在 jquery 上
插件内部，this 指向的是目前的局部對象
可以通過 this.each 來周遊所有元素
所有的方法或插件，必須用分号結尾，避免出現問題
插件應該傳回的是 JQuery 對象，以保證可鍊式連綴
避免插件内部使用 $ ，如果要使用，請傳遞 JQuery 進去

學習JQuery

1. 重要基礎

2. 基礎選擇器

3. 過濾選擇器

4. 表單選擇器

5. 基本 DOM 操作

6. DOM節點操作

7. 基本事件

8. 事件對象

9. 進階事件

10. 動畫

11. AJAX

.load()

.get()

.post()

.AJAX() //底層函數

$.ajaxStart()

$.ajaxStop()

$.ajaxError()

$.ajaxSuccess()

$.ajaxComplete()

$.ajaxSend()

$.ajaxSetup() //請求預設值來初始化參數

$('form').serialize() //擷取表單所有值

$('form').serializeArray() //傳回鍵值對的Json對象

12. 工具函數

13. 插件

1.Validate.js

2. 自動完成插件 (jquery.autocomplete.js 、 jquery-migrate-1.2.1.js)

3. 自定義插件

分類

插件規範

繼續閱讀