web前端學習總結--JQuery
jQuery
什麽是jQuery
jQuery是一個優秀的JavaScript框架，一個輕量級的JS庫。
它封裝了JS、CSS、DOM，提供了一致的、簡潔的API。
兼容CSS3，及各種瀏覽器
使用戶更方便地處理HTML、Events、實現動畫效果，並且方便為網站提供AJAX交互
使用戶的HTML頁面保持代碼和HTML內容分離
註：jQuery2.x開始不再支持Internet Explorer6,7,8
jQuery是一個JS框架，極大的簡化了JS編程
jQuery的核心理念是write less，do more
2006年1月發布
jQuery的使用步驟
1.引入jQuery的js文件
2.使用選擇定位器定位要操作的節點
3.調用jQuery的方法進行操作
jQuery對象
jQuery對象與DOM對象的關系
jQuery對象本質上是一個DOM對象數組，它在該數組上擴展了一些操作數組中的元 素的方法
可以直接操作這個數組：
obj.length：獲取數組長度
obj.get(index)：獲取數組中的某一個DOM對象
obj[index]：等價於obj.get(index)
DOM對象可以直接轉換為jQuery對象
$(DOM象)
什麽是jQuery選擇器
jQuery選擇器類似於CSS選擇器(定位元素，施加樣式)，實現定位元素，施加行為
使用jQuery選擇器能夠將內容與行為分離
選擇器的種類
jQuery選擇器包含如下種類：
基本選擇器
|
元素選擇器：依據標簽名定位元素 |
$("標簽名") |
|
類選擇器：根據class屬性定位元素 |
$(".class屬性名") |
|
id選擇器：根據id屬性定位元素 |
$("#id") |
|
選擇器組：定位一組選擇器所對應的所有元素 |
$("#id,.importent")
|
層次選擇器
|
在select1元素下，選中所有滿足select2的子孫元素 |
$("select1 select2") |
|
在select1元素下，選中所有滿足select2的子元素 |
$("select1 > select2") |
|
選中select1元素的，滿足select2的下一個弟弟 |
$("select1 + select2") |
|
選中select1元素的，滿足select2的所有弟弟 |
$("select1 ~ select2") |
|
例子: |
$("#d1 .importent")
|
過濾選擇器
|
基本過濾選擇器:根據元素的基本特征定位元素，常用於表格和列表 |
|
|
:first |
第一個元素 |
|
:last |
最後一個元素 |
|
:not(selector) |
把selector排除在外 |
|
:even |
挑選偶數行 |
|
:odd |
挑選奇數行 |
|
:eq(index) |
下標等於index的元素 |
|
:gt(index) |
下標大於index的元素 |
|
:lt(index) |
下標小於index的元素 |
|
例子: |
$("tr:first") |
|
內容過濾選擇器:根據文本內容定位元素 |
|
|
:contains(text) |
匹配包含給定文本的元素 |
|
:empty |
匹配所有不包含子元素或文本的空元素 |
|
例子: |
$("p:contains(‘月餅‘)") |
|
可見性過濾選擇器:根據可見性定位元素 |
|
|
:hidden |
匹配所有不可見元素，或type為hidden的元素 |
|
:visible |
匹配所有的可見元素 |
|
例子: |
$("input:hidden") |
|
屬性過濾選擇器:根據屬性定位元素 |
|
|
[attribute] |
匹配具有attribute屬性的元素 |
|
[attribute=value] |
匹配屬性等於value的元素 |
|
[attribute!=vlaue] |
匹配屬性不等於value的元素 |
|
例子: |
$("input[value=‘你好‘]") |
|
狀態過濾選擇器:根據狀態定位元素 |
|
|
:enabled |
匹配可用的元素 |
|
:disabled |
匹配不可用的元素 |
|
:checked |
匹配選中的checkbox |
|
:selected |
匹配選中的option |
|
例子: |
$("input:selected") |
表單選擇器
|
:text |
匹配文本框 |
|
:password |
匹配密碼框 |
|
:radio |
匹配單選框 |
|
:checkbox |
匹配多選框 |
|
:submit |
匹配提交按鈕 |
|
:reset |
匹配重置按鈕 |
|
:button |
匹配普通按鈕 |
|
:file |
匹配文件框 |
|
:hidden |
匹配隱藏框 |
|
例子: |
$(":text") |
讀寫節點
讀寫節點的HTML內容
obj.html() / obj.html("123")
讀寫節點的文本內容
obj.text() / obj.text("123")
讀寫節點的value屬性值
obj.val() / obj.val("abc")
讀寫節點的屬性
obj.attr("屬性名") / obj.attr("屬性名","屬性值")
增刪節點
創建DOM節點
$("節點內容")
$("<span>你好</span>")
插入DOM節點
parent.append(obj) 作為最後一個子節點添加進來
parent.prepend(obj) 作為第一個子節點添加進來
brother.after(obj) 作為下一個兄弟節點添加進來
brother.before(obj) 作為上一個兄弟節點添加進來
刪除DOM節點
obj.remove() 刪除節點
obj.remove(selector) 只刪除滿足selector的節點
obj.empty() 清空節點
樣式操作
addClass("") 追加樣式
removeClass("") 移除指定樣式
removeClass() 切換所有樣式
toggleClass("") 切換樣式
hasClass("") 判斷是否有某個樣式
css("") 讀取css的值
css(""，"") 設置多個樣式
遍歷節點
children() / children(selector) 直接子節點
next() / next(selector) 下一個兄弟節點
prev() / prev(selector) 上一個兄弟節點
siblings() / siblings(selector) 所有兄弟
find(selector) 查找滿足選擇器的所有後代
parent() 父節點
事件處理
使用jQuery實現事件綁定
$obj.bind(事件類型，事件處理函數)
如：$obj.bind(‘click‘,fn);
簡寫形式$obj.click(fn);
註：$obj.click()則代表觸發了click事件。
獲得事件對象event
只需要為事件處理函數傳遞任意一個參數
如：$obj.click(function(e){...})
e就是事件對象，但已經經過jQuery對底層事件對象的封裝
封裝後的事件對象可以方便的兼容各瀏覽器
事件對象的常用屬性
獲取事件源e.target, 返回值是DOM對象
獲取鼠標點擊的坐標
e.pageX
e.pageY
事件冒泡
什麽是事件冒泡
子節點產生的事件會一次向上拋給父節點
如何取消事件冒泡
e.stopPropagation()可以取消事件冒泡
$(‘a‘).click(function(e){ alert(‘點擊了一個鏈接‘); e.stopPropagation(); });
合成事件
jQuery的合成事件種類
鼠標鍵入和離開的時候
hover(mouseenter,mouseleave) 模擬光標懸停事件
toggle() 在多個事件響應中切換
模擬操作
模擬操作的語法
$obj.trigger(事件類型)
如：$obj.trigger("focus")
簡寫形式$obj.focus()
jQuery動畫
顯示、隱藏的動畫效果
show() / hide()
作用：通過同時改變元素的寬度和高度來實現顯示或者隱藏
用法：$obj.show(執行時間，回調函數);
執行時間：slow , normal , fast或毫秒數
回調函數：動畫執行完畢之後要執行的函數
上下滑動式的動畫實現
slideDown() / slideUp()
作用：通過改變高度來實現顯示或者隱藏的效果
用法同 show() / hide()
淡入淡出式動畫效果
fadeIn() / fadeOut()
作用：通過改變不透明度opacity來實現顯示或者隱藏
用法同show() / hide()
自定義動畫效果
animate(偏移位置，執行時間，回調函數)*
偏移位置：{} 描述動畫執行之後元素的樣式
執行時間：毫秒數
回調函數：動畫執行結束後要執行的函數
web前端學習總結--JQuery