學習jQuery核心內容這一篇就夠了
jQuery
1. 介紹
jQuery是JavaScript的工具庫，對原生JavaScript中的DOM操作、事件處理、數據處理等進行封裝,提供更便捷的方法。
讓我們用更少的代碼完成我們的js操作 類似于python當中的模塊
jQuery有很多個版本.不一定越新越好.可能有的時候用到的都是舊版本的代碼,這時候可以不引入新版本
2. 引入
先引入jquery文件，才能使用jquery語法
https://www.bootcdn.cn/
https://jquery.cuishifeng.cn/
3. 工廠函數 - $()
"$()"函數用于獲取元素節點，創建元素節點或將原生JavaScript對象轉換為jquery對象,返回 jQuery 對象。jQuery對象實際是一個類數組對象，包含了一系列 jQuery操作的方法。
原生JavaScript對象與jQuery對象的屬性和方法不能混用?？梢愿鶕枰?，互相轉換 :
-
原生JavaScript轉換jQuery對象
$(原生對象)，返回 jQuery 對象
-
jQuery對象轉換原生JavaScript對象
方法一 : 根據下標取元素,取出即為原生對象
var div = $("div")[0];方法二 : 使用jQuery的get(index)取原生對象
var div2 = $("div").get(0);
4. jQuery獲取元素
-
基礎選擇器
標簽選擇器：$("div") ID 選擇器：$("#d1") 類選擇器：$(".c1") 群組選擇器：$("body,p,h1") -
層級選擇器
后代選擇器： $("div .c1") 子代選擇器： $("div>span") 相鄰兄弟選擇器： $("h1+p") 匹配選擇器1后的第一個兄弟元素,同時要求兄弟元素滿足選擇器2 通用兄弟選擇器： $("h1~h2") 匹配選擇器1后所有滿足選擇器2的兄弟元素 -
過濾選擇器，需要結合其他選擇器使用。
對象:first 匹配第一個元素 例:$("p:first") :last 匹配最后一個元素 例:$("p:last") :odd 匹配奇數下標對應的元素 :even 匹配偶數下標對應的元素 :eq(index) 匹配指定下標的元素 :lt(index) 匹配下標小于index的元素 :gt(index) 匹配下標大于index的元素 :not(選擇器) 否定篩選,除()中選擇器外,其他元素
5. 操作元素內容
html() //設置或讀取標簽內容,等價于原生innerHTML,可識別標簽語法
text() //設置或讀取標簽內容,等價于innerText,不能識別標簽
val() //設置或讀取表單元素的值,等價于原生value屬性
6. 操作標簽屬性
-
attr("attrName","value")
設置或讀取標簽屬性
-
prop("attrName","value")
設置或讀取標簽屬性
注意 :在設置或讀取元素屬性時,attr()和prop()基本沒有區別;但是在讀取或設置表單元素(按鈕)的選中狀態時,必須用prop()方法,attr()不會監聽按鈕選中狀態的改變,只看標簽屬性checked是否書寫 -
removeAttr("attrName")
移除指定屬性
7. 操作標簽樣式
- 為元素添加id/class屬性,對應選擇器樣式
- 針對類選擇器,提供操作class屬性值的方法
addClass("className") //添加指定的類名
removeClass("className")//移除指定的類型,如果參數省略,表示清空class屬性值
toggleClass("className")//結合用戶行為,實現動態切換類名.如果當前元素存在指定類名,則移除;不存在則添加
- 操作行內樣式
css("屬性名","屬性值") //設置行內樣式
8. 元素的創建,添加,刪除
- 創建：使用$("標簽語法")，返回創建好的元素
var div = $("<div></div>"); //創建元素
div.html("動態創建").attr("id","d1").css("color","red"); //鏈式調用，設置內容和屬性
var h1 = $("<h1 id='d1'>一級標題</h1>"); //創建的同時設置內容，屬性和樣式
- 作為子元素添加
$obj.append(newObj); //在$obj的末尾添加子元素newObj
$obj.prepend(newObj); //作為第一個子元素添加至$obj中
- 作為兄弟元素添加
$obj.after(newObj); //在$obj的后面添加兄弟元素
$obj.before(newObj); //在$obj的前面添加兄弟元素
- 移除元素
$obj.remove(); //移除$obj
9. 動畫效果
-
顯示和隱藏
show(speed,callback)/hide(speed,callback)- speed可選。規定元素從隱藏到完全可見的速度。默認為 "0"。
- callback 可選。show 函數執行完之后，要執行的函數
-
下拉和上推效果，顯示隱藏的被選元素（ 只針對塊元素 ）
slideDown(speed,callback)/slideUp(speed,callback) -
通過使用淡隱淡現方式顯示效果，顯示隱藏的被選元素
fadeOut(speed,callback)/fadeIn(speed,callback)
10. 數據與對象遍歷
-
$(selector).each() 方法規定為每個匹配元素規定運行的函數
$(selector).each(function(index,element){})必需。為每個匹配元素規定運行的函數。
- index - 選擇器的 index 位置
- element - 當前的元素
-
$.each()函數是框架提供的一個工具類函數，通過它，你可以遍歷對象、數組的屬性值并進行處理
$.each(Object, function(index, data){});必需。為每個匹配元素規定運行的函數。
- index - 選擇器的 index 位置
- data- 當前的數據
浙公網安備 33010602011771號