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(偏移位置，執行時間，回調函數)*
偏移位置：{} 描述動畫執行之后元素的樣式
執行時間：毫秒數
回調函數：動畫執行結束后要執行的函數
轉載于:https://www.cnblogs.com/Kingram/p/9200929.html
總結
以上是生活随笔為你收集整理的web前端学习总结--JQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 八：MVC初始化数据库
- 下一篇： 2017年html5行业报告,云适配发布