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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。