jQuery

jQuery

兩種對象轉換

jquery對象：$("#id")
DOM對象：document.getElementById("id")
DOM對象轉JQuery對象：$(DOM)
jQuery對象轉DOM對象：$()[n]

1. 基本選擇器

• id選擇器：
  $("#id")

• 標籤選擇器：
  $("tagName")

• class選擇器：
  $(".className")
  配合使用：

• $("div.c1") 找到有c1 class類的div標籤
  全部元素選擇器：

• $("*")

• 組合選擇器：
  $("#id, .className, tagName")

1. 層級選擇器
   x和y能夠爲任意選擇器

• $("x y")
  x的全部後代y（子子孫孫）
• $("x > y")
  x的全部兒子y（兒子）
• $("x + y")
  找到全部緊挨在x後面的y
• $("x ~ y")
  x以後全部的兄弟y

1. 基本篩選器

• :first
  第一個
• :last
  最後一個
• :eq(index)
  索引等於index的那個元素
• :even
  匹配全部索引值爲偶數的元素，從 0 開始計數
• :odd
  匹配全部索引值爲奇數的元素，從 0 開始計數
• :gt(index)
  匹配全部大於給定索引值的元素
• :lt(index)
  匹配全部小於給定索引值的元素
• :not(元素選擇器)
  移除全部知足not條件的標籤
• :has(元素選擇器)
  選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

1. 屬性選擇器

• [attribute]
• [attribute=value]// 屬性等於
• [attribute!=value]// 屬性不等於

1. 表單篩選器

• :text
• :password
• :file
• :radio

• :checkbox

• :submit
• :reset

• :button

1. 表單對象屬性

• :enabled
• :disabled
• :checked
• :selected

1. 篩選器方法

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一個元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父親元素：

$("#id").parent()
$("#id").parents()  // 查找當前元素的全部的父輩元素
$("#id").parentsUntil() // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止。
兒子和兄弟元素：

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們
查找

搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

$("div").find("p")
等價於$("div p")

篩選

篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。

$("div").filter(".c1")   從結果集中過濾出有c1樣式類的
等價於 $("div.c1")

補充：

.first()  獲取匹配的第一個元素
.last()   獲取匹配的最後一個元素
.not()    從匹配元素的集合中刪除與指定表達式匹配的元素
.has()    保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq()     索引值等於指定值的元素

1. 樣式操做

操做標籤
樣式操做
樣式類

addClass();     添加指定的CSS類名。
removeClass();  移除指定的CSS類名。
hasClass();     判斷樣式存不存在
toggleClass();  切換CSS類名，若是有就移除，若是沒有就添加。
示例：css("color","red")

1. 位置操做

offset()        獲取匹配元素在當前窗口的相對偏移或設置元素位置
position()      獲取匹配元素相對父元素的偏移
scrollTop()     獲取匹配元素相對滾動條頂部的偏移
scrollLeft()    獲取匹配元素相對滾動條左側的偏移

1. 尺寸

height()        元素自身的高
width()         元素自身的寬
innerHeight()   元素內容+padding的高
innerWidth()    元素內容+padding的寬
outerHeight()   元素+padding+邊框的高
outerWidth()    元素+padding+邊框的寬

1. 文本操做

HTML代碼：

html()       取得第一個匹配元素的html內容
html(val)    設置全部匹配元素的html內容
文本值：

text()       取得全部匹配元素的內容
text(val)    設置全部匹配元素的內容值

val()        取得第一個匹配元素的當前值
val(val)     設置全部匹配元素的值
val([val1, val2])   設置多選的checkbox、多選select的值

1. 屬性操做

用於ID等或自定義屬性：

attr(attrName) 返回第一個匹配元素的屬性值
attr(attrName, attrValue) 爲全部匹配元素設置一個屬性值
attr({k1: v1, k2:v2}) 爲全部匹配元素設置多個屬性值
removeAttr() 從每個匹配的元素中刪除一個屬性

用於checkbox和radio
prop()  獲取屬性
removeProp()  移除屬性

對於標籤上有的能看到的屬性和自定義屬性都用attr
對於返回布爾值的好比checkbox、radio和option的是否被選中都用prop。

1. 文檔處理

添加到指定元素內部的後面

$(A).append(B)      把B追加到A
$(A).appendTo(B)    把A追加到B添加到指定元素內部的前面

$(A).prepend(B)     把B前置到A
$(A).prependTo(B)   把A前置到B添加到指定元素外部的後面

$(A).after(B)       把B放到A的後面
$(A).insertAfter(B) 把A放到B的後面添加到指定元素外部的前面

$(A).before(B)      把B放到A的前面
$(A).insertBefore(B)把A放到B的前面移除和清空元素

remove()            從DOM中刪除全部匹配的元素。
empty()             刪除匹配的元素集合中全部的子節點。

替換
replaceWith()
replaceAll()

克隆
clone()

1. 經常使用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

事件綁定
.on( events [, selector ],function(){})
events： 事件
selector: 選擇器（可選的）
function: 事件處理函數

移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()綁定的事件處理程序。
events： 事件
selector: 選擇器（可選的）
function: 事件處理函數

阻止後續事件執行
return false; // 常見阻止表單提交等
e.preventDefault();

阻止事件冒泡
e.stopPropagation();

$(document).ready(function(){})與window.onload區別

window.onload()函數有覆蓋現象，必須等待着圖片資源加載完成以後才能調用
jQuery的這個入口函數沒有函數覆蓋現象，文檔加載完成以後就能夠調用（建議使用此函數）

事件委託是經過事件冒泡的原理，利用父標籤去捕獲子標籤的事件。

示例：

表格中每一行的編輯和刪除按鈕都能觸發相應的事件。

$("table").on("click", ".delete", function () {
  // 刪除按鈕綁定的事件
})

1. 動畫效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定義
animate(p,[s],[e],[fn])