2020年JQuery課堂筆記

JQuery

JQuery簡介

概念：一個JavaScript框架，簡化js開發

JavaScript框架：本質上就是一些js文件，封裝了js的原生代碼

使用步驟：

1. 下載JQuery
2. 導入JQuery的js文件：導入min.js文件
3. 使用

JQuery對象和JS對象區別？

1. JQuery對象在操作時，更加方便
2. JQuery對象和js對象方法不通用

JQuery對象和JS對象相互轉換：

• jq --> js：jq對象[索引]或者jq對象.get(索引)
• js --> jp：$(js對象)

選擇器

選擇器作用：篩選具有相似特徵的元素

基本操作學習

1. 事件綁定

   例子：
   //1.獲取b1按鈕
   $("#b1").click(function(){
       alert("abc");
   });
   

2. 入口函數

   例子：
   $(function(){
       
   });
   

   window.onload 和$(function)區別？

   • window.onload只能定義一次，如果定義多次，後邊的會將前邊的覆蓋掉
   • $(function)可以定義多次

3. 樣式控制：css方法

   例子：$("#div1").css("background-color","red");
   

分類：

1. 基本選擇器
2. 層級選擇器
3. 屬性選擇器
4. 過濾選擇器
5. 表單過濾選擇器

基本選擇器

選擇器類型	語法	功能
標籤選擇器	$("html標籤名")	獲取所有匹配標籤名稱的元素
id選擇器	${"#id屬性值"}	獲取與指定id屬性值匹配的元素
類選擇器	$(".class屬性值")	獲取與指定class屬性值匹配的元素
並集選擇器	$("選擇器1,選擇器2...")	獲取多個選擇器選中的所有元素

層級選擇器

選擇器類型	語法	功能
後代選擇器	$("A B")	選擇A元素內部的所有B元素
子選擇器	$("A > B")	選擇A元素內部的所有B子元素

屬性選擇器

選擇器類型	語法	功能
屬性名稱選擇器	$("A[屬性值]")	包含指定屬性的選擇器
屬性選擇器	$("A[屬性名='值']")	包含指定屬性等於指定值的選擇器
複合屬性選擇器	$("A[屬性名1='值'][]...")	包含多個屬性條件的選擇器

過濾選擇器

選擇器類型	語法	功能
首元素選擇器	:first	獲得選擇的元素中的第一個元素
尾元素選擇器	:last	獲得選擇的元素中的最後一個元素
非元素選擇器	:not(selector)	不包括指定內容的元素
偶數選擇器	:even	從0開始，選取偶數位元素
奇數選擇器	:odd	從0開始，選取奇數位元素
等於索引選擇器	:eq(index)	選取等於指定索引的元素
大於索引選擇器	:gt(index)	選取大於指定索引的元素
小於索引選擇器	:lt(index)	選取小於指定索引的元素
標題選擇器	:header	選取標題元素（h1~h2）

表單過濾選擇器

選擇器類型	語法	功能
可用元素選擇器	:enabled	獲得可用元素
不可用元素選擇器	:disabled	獲得不可用元素
選中選擇器（1）	:checked	獲取單選/複選框選中的元素
選中選擇器（2）	:selected	獲得下拉框選中的元素

DOM操作

內容操作

方法	功能
html()	獲取/設置元素的標籤體內容
text()	獲取/設置元素的標籤體純文本內容
val()	獲取/設置元素的value屬性值

屬性操作

1. 通用屬性操作

方法	功能
attr()	獲取/設置元素的屬性
removeAttr()	刪除屬性
prop()	獲取/設置元素的屬性
removeProp()	刪除屬性

attr()和prop()區別：

1. 如果操作的是元素的固有元素，則使用prop()

2. 如果操作的是元素自定義元素，則使用attr()

3. 對class屬性操作

方法	功能
addClass()	添加class屬性值
removeClass()	刪除class屬性值
toggleClass()	切換class屬性值，如果不存在就添加
css()	執行css

CRUD操作

方法	功能
對象1.append(對象2)	將對象2添加到對象1元素內部的末尾
對象1.prepend(對象2)	將對象2添加到對象1元素內部的開頭
對象1.appendTo(對象2)	將對象1添加到對象2元素內部的末尾
對象1.prependTo(對象2)	將對象1添加到對象2元素內部的開頭
對象1.after(對象2)	將對象2添加到對象1後邊
對象1.before(對象2)	將對象2添加到對象1前邊
對象1.insertAfter(對象2)	將對象2添加到對象1後邊
對象1.insertBefore(對象2)	將對象2添加到對象1前邊
對象.remove()	將對象刪除掉
對象.empty()	將對象的後代元素清空，但保留當前對象及其屬性

動畫

默認顯示和隱藏方式

方法	功能
show([speed],[easing],[fn])	顯示
hide([speed],[easing],[fn])	隱藏
toggle([speed],[easing],[fn])	切換（顯示和隱藏）

參數列表：

1. speed：動畫的速度
   • slow
   • normal
   • fast
   • 表示動畫時長的毫秒數值
2. easing：用來切換效果
   • swing（默認）：動畫執行時效果是先慢，中間快，最後又慢
   • linear：動畫執行速度是勻速的
3. fn：在動畫完成執行的函數，每個元素執行一個

滑動顯示和隱藏方式

方法	功能
slideDown([speed],[easing],[fn])	滑動向下顯示
slideUp([speed],[easing],[fn])	滑動向上隱藏
slideToggle([speed],[easing],[fn])	滑動切換

淡入淡出顯示和隱藏方式

方法	功能
fadeIn([speed],[easing],[fn])	淡入淡出顯示
fadeOut([speed],[easing],[fn])	淡入淡出隱藏
fadeToggle([speed],[easing],[fn])	淡入淡出切換

JQuery的3種遍歷方式

JS的遍歷方式：for(初始值;循環結束條件;步長)

1. $.each(function(index,element){})

   • index：元素在集合中的索引
   • element：集合中的每一個元素對象
   • 填this：集合中的每一個元素對象

   function中如果有判斷語句？

   • return false：結束循環（break）
   • return true：結束本次循環，繼續下次循環（continue）

2. $.each(object,[callback])

3. for(元素對象 of 容器對象)

事件綁定

JQuery標準的綁定方式

語法：jq對象.事件方法(回調方法)

注意：如果調用事件方法，不傳遞迴調函數，則會觸發瀏覽器默認行爲

on綁定事件/off解除綁定

語法：

1. jq對象.on("事件名稱",回調函數)
2. jq對象.off("事件名稱")

注意：如果off方法不傳遞任何參數，則將組件上的所有事件全部解綁

事件切換：toggle

語法：jq對象.toggle(fn1,fn2...)

注意：

1. 當單擊jq對象對應的組件，會執行fn1，第二次點擊會執行fn2…
2. 1.9版本，toggle()刪除，jQuery Migrate插件可以實行其功能

插件機制

作用：增強JQuery的功能

實現方式

1. $.fn.extend(object)（對象級別插件）
   • 增強通過JQuery獲取的對象的功能
2. $.extend(object)（全局級別插件）
   • 增強JQuery對象自身的功能