jQuery
jQuery，顧名思義，也就是JavaScript和查詢（Query）極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。
-
-
輕量級(壓縮後只有幾十k)
-
強大的選擇器
-
出色的 DOM 操作的封裝
-
可靠的事件處理機制
-
完善的 Ajax使用
-
出色的多瀏覽器兼容性
-
隱式迭代：對集合對象做相同操作時不需要逐個進行遍歷，jQuery自動進行遍歷
-
文檔說明很全
-
可擴展插件
jQuery庫實際上就是一個js文件，只需要在網頁中直接引入這個文件就可以了。
-
-
$是jQuery的核心函數，jQuery的核心功能都是通過這個函數實現。$()就是調用$這個函數。
-
$函數會根據參數數據類型的不同做不同的工作, 返回一個jQuery封裝的僞數組的對象
-
-
表示：在DOM文檔載入完成後，回調函數自動執行
-
這個函數是 $(document).ready(function(){})的簡寫形式。
-
-
根據這個選擇器查找元素節點對象
-
根據此字符串在document中去匹配一組元素，並封裝成jQuery對象返回
$("#id屬性值"); 相當於通過id屬性查找標籤對象
$("標籤名"); 相當於通過標籤名查找標籤對象，返回集合
$(".class屬性值"); 相當於通過class屬性查找標籤對象，返回集合
-
-
根據這個html字符串創建元素節點對象
-
創建對應的標籤對象， 幷包裝成jQuery對象
var $liEle = $("<li>香港</li>") //相當於創建了一個標籤對象 <li>香港</li>。 $("#city").append($liEle); //將此jQuery對象添加到現有的jQuery對象中。
-
-
返回包含這個dom對象的jQuery對象。相當於把DOM對象包裝（或轉換）成jQuery對象。
-
注意：如果聲明一個變量指向jQuery對象，那麼這個變量命名習慣上要以$開頭。
-
var bjEle = document.getElementById("bj"); alert(bjEle); alert($(bjEle));
- Dom對象：通過原生js實現的DOM標準查找到的元素對象
習慣上給jQuery對象命名時，變量名前加上$，便於區分jQuery對象和js DOM對象。
-
-
jQuery對象和DOM對象的函數也不能互用，只能調用各自聲明過的函數。
-
-
使用jQuery核心函數包裝DOM對象：$(DOM對象)
-
例如：var $btnEle = $(btnEle)
-
-
jQuery對象轉DOM對象
-
使用數組下標：$btnEle[0]
-
使用get(index)方法：$btnEle.get(0)
-
-
-
jQuery對象轉爲DOM對象：有些特殊需求在框架中沒有提供，需要使用原生的js實現
它通過標籤名,id屬性,class屬性來查找匹配的DOM元素
1） id選擇器
-
用法： $("#id")
-
2） 標籤選擇器
-
用法: $("tagName")
-
返回值：根據標籤名匹配的一個或多個標籤，封裝成jQuery對象
3） class選擇器
-
用法: $(".class")
-
返回值：根據class屬性值匹配一個或多個標籤, 封裝成jQuery對象
4） *選擇器
-
用法: $("*")
-
返回值: 匹配所有標籤， 封裝成jQuery對象
5） selector1,selector2,…
-
用法: $(”div,span,.myClass”)
-
返回值: 所有匹配選擇器的標籤, 封裝成jQuery對象,用，分割
如果想通過DOM元素之間的層級關係來獲取特定元素。例如後代元素、子元素、兄弟元素等。則需要通過層級選擇器（或層次選擇器）。
1） ancestor descendant
-
用法:$(”form input”)
-
說明:在給定的祖先元素下匹配所有後代元素（包括子元素的子元素，...）
2） parent > child
-
用法: $(”form > input”)
-
-
注意：要區分好後代元素與子元素
-
3） prev + next
-
用法: $(”label + input”)
-
說明: 匹配所有緊接在prev元素後的next元素。（即相鄰的下一個）
-
注意：從平級元素中找，而不要去子元素中查找。
-
4） prev ~ siblings
-
用法: $(”form ~ input”)
-
說明: 匹配prev元素之後的所有 siblings元素，不包含該元素在內，並且siblings匹配的是和prev同輩（兄弟元素）的元素，其後輩子元素不被匹配。
過濾選擇器：基本
-
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素, 該選擇器都以 “:” 開頭
-
1） :first
-
-
說明: 匹配找到的第一個元素。
2） :last
-
用法: $(”tr:last”)
-
說明: 匹配找到的最後一個元素.與 :first 相對應。
3） :not(selector)
-
用法: $(”input:not(:checked)”)
-
說明: 去除所有與給定選擇器匹配的元素。類似於”非”，意思是沒有被選中的input(即當input的type=”checkbox”)。
4） :even
-
用法: $(”tr:even”)
-
5） :odd
-
用法: $(”tr:odd”)
-
說明: 匹配所有索引值爲奇數的元素，和:even對應，從 0 開始計數。
6） :eq(index)
-
用法: $(”tr:eq(0)”)
-
說明: 匹配一個給定索引值的元素。eq(0)就是獲取第一個tr元素。括號裏面的是索引值，不是元素排列數。從0開始
-
用法: $(”tr:gt(0)”)
-
說明: 匹配所有大於給定索引值的元素。
8） :lt(index)
-
用法: $(”tr:lt(2)”)
-
過濾選擇器：內容
1） :contains(text)
-
用法: $(”div:contains(’John’)”)
-
2） :has(selector)
-
用法: $(”div:has(p)”).addClass(”test”)
-
說明: 匹配含有選擇器所匹配的元素的元素。這個解釋需要好好琢磨，但是一旦看了使用的例子就完全清楚了:給所有包含p元素的div標籤加上class=”test”。
3） :empty
-
用法: $(”td:empty”)
-
說明: 匹配所有不包含子元素或者文本的空元素
4） :parent
-
用法: $(”td:parent”)
-
說明: 匹配含有子元素或者文本的元素。注意:這裏是”:parent”可不是”.parent”！感覺與上面講的”:empty”形成反義詞。
-
根據元素的可見和不可見狀態來選擇相應的元素
1） :hidden
-
-
說明: 匹配所有的不可見元素，有兩種情況：css中display:none和input type=”hidden”的都會被匹配到。同樣，要在腦海中徹底分清楚冒號”:”，點號”.”和逗號”,”的區別。
2） :visible
-
用法: $(”tr:visible”)
-
說明: 匹配所有的可見元素。
- 屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素。
-
用法: $(”div[id]“)
-
說明: 匹配包含給定屬性的元素。例子中是選取了所有帶id屬性的div標籤。
2） [attribute=value]
-
用法: $(”input[name='newsletter']“).attr(”checked”, true)
-
說明: 匹配給定的屬性是某個特定值的元素。例子中選取了所有name屬性是newsletter的 input 元素。
3） [attribute!=value]
-
用法: $(”input[name!='newsletter']“).attr(”checked”, true)。
-
說明：匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。此選擇器等價於:not([attr=value])，要匹配含有特定屬性但不等於特定值的元素，請使用[attr]:not([attr=value])。之前看到的 :not 派上了用場。
4） [attribute^=value]
-
用法: $(”input[name^=‘news’]“)
-
說明: 匹配給定的屬性是以某些值開始的元素。
5 ） [attribute$=value]
-
用法: $(”input[name$=‘letter’]“)
-
說明: 匹配給定的屬性是以某些值結尾的元素。
6） [attribute*=value]
-
用法: $(”input[name*=‘man’]“)
-
說明: 匹配給定的屬性是以包含某些值的元素。
7） [selector1] [selector2] [selectorN]
-
用法：$("input[id] [name$='man']]")
-
說明：複合屬性選擇器，需要同時滿足多個條件時使用。
-
用法: $(”ul li:nth-child(2)”)
-
說明: 匹配其父元素下的第N個子或奇偶元素。注意index不同於eq(index),這裏從1開始
2） :first-child
-
用法: $(”ul li:first-child”)
-
說明: 匹配第一個子元素。’:first’ 只匹配一個元素，而此選擇符將爲每個父元素匹配一個子元素。這裏需要特別的記憶一下區別。二者的調用者都是針對要操作的元素來講的。
3） :last-child
-
用法: $(”ul li:last-child”)
-
說明: 匹配最後一個子元素。’:last’只匹配一個元素，而此選擇符將爲每個父元素匹配一個子元素。
4） : only-child
-
用法: $(”ul li:only-child”)
-
說明: 如果某個元素是父元素中唯一的子元素，那將會被匹配。如果父元素中含有其他元素，那將不會被匹配。意思就是：只有一個子元素的纔會被匹配！
1） :input
-
用法: $(”:input”)
-
說明:匹配所有 text, textarea, select 和 button 元素 。
-
用法: $(”:text”)
-
說明: 匹配所有的單行文本框。
3） :password
-
用法: $(”:password”)
-
說明: 匹配所有密碼框。
4） :radio
-
用法: $(”:radio”)
-
說明: 匹配所有單選按鈕。
5） :checkbox
-
用法: $(”:checkbox”)
-
說明: 匹配所有複選框。
6） :submit
-
用法: $(”:submit”)
-
說明: 匹配所有提交按鈕。
7） :image
-
用法: $(”:image”)
-
說明: 匹配所有圖像域。
8） :reset
-
用法: $(”:reset”)
-
說明: 匹配所有重置按鈕。
9） :button
-
用法: $(”:button”)
-
說明: 匹配所有按鈕.這個包括直接寫的元素button。
10） :file
-
用法: $(”:file”)
-
說明: 匹配所有文件域。
11） :hidden
-
用法: $(”input:hidden”)
-
說明: 匹配所有不可見元素，或者type爲hidden的元素.這個選擇器就不僅限於表單了,除了匹配input中的hidden外,那些style爲hidden的也會被匹配。
過濾選擇器：表單對象屬性
-
此選擇器主要對所選擇的表單元素進行過濾
1） :enabled
-
用法: $(”input:enabled”)
-
說明: 匹配所有可用元素.意思是查找所有input中不帶有disabled=”disabled”的input.不爲disabled,當然就爲enabled啦。
2） :disabled
-
-
說明: 匹配所有不可用元素.與上面的那個是相對應的。
3） :checked
-
-
說明: 匹配所有被選中的元素(複選框、單選框等，不包括下拉列表select中的option)。
-
注意：官方文檔說明是不包括select中的option，但測試中是包含的。只是不建議大家這樣用。
-
4） :selected
-
用法: $(”select option:selected”)
-
說明: 匹配所有選中的option元素。
1） $(selector)
-
使用jQuery選擇器查詢
-
得到一個包含所有匹配的dom節點對象的jQuery對象
2） find(selector)
-
查詢jQuery對象內部數據
-
在Jquery對象中根據selector查找其中匹配的後代節點
3） eq(index)
-
根據索引值查找集合中指定位置的元素
-
index從0開始，也可以爲-1，-2，...。其中-1是最後一個元素
4） filter(expr|obj|ele|fn)
-
根據傳入的選擇器字符串等再次從調用者中篩選
5） children([expr])
-
取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。
6） parent([expr])
-
取得一個包含着多個匹配元素的唯一父元素的元素集合。
7） parents([expr])
-
取得一個包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通過一個可選的表達式進行篩選。
8） each(callback)
-
遍歷jQuery對象包含的數據：$(selector1).each(function(index, itemDom){ })
-
遍歷jQuery對象所包含的所有節點, 每取一個dom節點對象都去調用設置的回調函數, 並將取出的節點在數組中的下標和節點對象傳入函數
獲取長度
1） 屬性：length
-
jQuery 對象中元素的個數。
2） 函數：size()
-
jQuery 對象中元素的個數。與length屬性作用一樣。
1） append(content)
-
向每個匹配的元素的內部的結尾處追加內容。
2） appendTo(content)
-
把所有匹配的元素追加到另一個指定的元素集合中
3） prepend(content)
-
向每個匹配的元素的內部的開始處插入內容
4） prependTo(content)
-
將每個匹配的元素插入到指定的元素內部的開始處
外部插入節點
1） after(content)
-
在每個匹配的元素之後插入內容
2） before(content)
-
在每個匹配的元素之前插入內容
3） insertAfter(content)
-
把所有匹配的元素插入到另一個、指定的元素集合的後面
4） insertBefore(content)
-
把所有匹配的元素插入到另一個、指定的元素集合的前面
-
$(htmlString)
-
動態創建的新元素節點不會被自動添加到文檔中, 需要使用其他方法將其插入到文檔中;
-
當創建單個元素時, 需注意閉合標籤和使用標準的 XHTML 格式. 例如創建一個<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)
-
創建文本節點就是在創建元素節點時直接把文本內容寫出來; 創建屬性節點也是在創建元素節點時一起創建
刪除節點
1） empty()
-
刪除匹配的元素集合中所有的子節點(不包括本身)。
2） remove()
修改節點
1） replaceAll(selector)
-
用匹配的元素替換掉所有 selector匹配到的元素。
2） replaceWith(content|fn)
-
將所有匹配的元素替換成指定的HTML或DOM元素。
-
attr(屬性名) 返回“屬性名”對應的屬性值
-
attr(屬性名,屬性值) 將“屬性名”對應的屬性設置爲“屬性值”
2） removeAttr(name)
-
根據屬性名刪除對應的屬性
1）html([val])
-
得到元素的內容或者設置元素的內容
-
val() 讀取value屬性
-
val(value值) 設置value屬性
-
val([選項值1,選項值2,…,選項值n]) 設置單選框、多選框或下拉列表被選中的值
3）text()
-
text() 得到元素節點對象的文本內容
-
text(str) 設置元素的文本內容
CSS
1） addClass(className)
-
添加class屬性
2） removeClass()
-
移除class屬性
3） css(name,[value])
-
查看某個樣式屬性, 或設置某個樣式屬性
1） ready(fn)
-
當DOM載入就緒可以查詢及操作時，綁定一個要執行的函數
2） click([fn])
3） blur([fn])
-
blur事件會在元素失去焦點的時候觸發，既可以是鼠標行爲，也可以是按tab鍵離開的
4） change([fn])
-
change事件會在元素失去焦點的時候觸發，也會當其值在獲得焦點後改變時觸發。
綁定與解綁事件
1） bind(type, fn)
-
爲每個匹配元素的特定事件綁定事件處理函數。
2） unbind(type)
-
bind()的反向操作，從每一個匹配的元素中刪除綁定的事件
hover(over,out)
-
當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。
2） 事件冒泡
-
描述: 事件會按照 DOM 層次結構像水泡一樣不斷向上直至頂端。即：子元素事件觸發引起父元素的事件也觸發的現象
-
解決: 在事件處理函數中返回 false, 會對事件停止冒泡
基本
1） show()
-
顯示當前標籤
2） hide()
-
隱藏當前標籤
3） toggle()
-
切換當前標籤的可見性
滑動
1） slideDown()
-
這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來
2） slideUp()
-
這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來
3） slideToggle()
-
通過高度變化來切換所有匹配元素的可見性
淡入淡出
1） fadeIn()
-
通過不透明度的變化來實現所有匹配元素的淡入效果
2） fadeOut()
-
通過不透明度的變化來實現所有匹配元素的淡出效果
3） fadeToggle()
-
通過不透明度的變化來開關所有匹配元素的淡入和淡出效果