1.jQuery 選擇器
2021年8月10日
11:04
1.1 jQuery 基礎選擇器
原生JS獲取元素很多，很雜，而且兼容性情況不一致，因此jQuery給我們做了封裝，使獲取元素統一標準，
$(”選擇器“) //里面選擇器直接寫CSS選擇器即可，但是要交引號
| 名稱 | 用法 | 描述 |
| ID選擇器 | $(“ #id ”) | 獲取指定ID的元素 |
| 全選選擇器 | $(“ * ”) | 匹配所有元素 |
| 類選擇器 | $(“ .class ”) | 獲取同一類的class的元素 |
| 標簽選擇器 | $(“ div ”) | 獲取同一類標簽的所有元素 |
| 并集選擇器 | $(“ div,p,li ”) | 選取多個元素 |
| 交集選擇器 | $(“ li.current ”) | 交集元素 |
1.2 jQuery 層級選擇器
| 名稱 | 用法 | 描述 |
| 子代選擇器 | $(“ ul>li ”) | 使用>號，獲取親兒子層級的元素；注意，并不會獲取孫子層級的元素 |
| 后代選擇器 | $(“ ul li ”) | 使用空格，代表后代選擇器，獲取ul下的所有li元素，包括孫子等 |
1.3 隱式迭代（重要）
遍歷內部DOM元素（偽陣列形式存盤）的程序叫做隱式迭代
簡單理解：給匹配到的所有元素進行回圈遍歷，執行相應的方法，而不用我們再進行回圈，簡化我們的操作，方便我們呼叫，
1.4 jQuery 篩選選擇器
| 語法 | 用法 | 描述 |
| :first | $(“ li:first ”) | 獲取第一個li元素 |
| :last | $(“ li:last ”) | 獲取最后一個li元素 |
| :eq(index) | $(“ li:eq(2) ”) | 獲取到的li元素中，選擇器引號為2的元素，索引號index從0開始， |
| :odd | $(“ li:odd ”) | 獲取到的li元素中，選擇器引號為偶數的元素 |
1.5 jQuery 篩選方法（重點）
| 語法 | 用法 | 說明 |
| parent() | $(“ li ”).parent(); | 查找父級 |
| children(selector) | $(“ ul ”).chidren("li") | 相當于$(“ ul li ”)，最近一級（親兒子） |
| find(selector) | $(“ ul ”).find("li"); | 相當于$(“ ul li ”).后代選擇器 |
| siblings() | $(“ ul ”).siblings("li"); | 查找兄弟節點，不包括自己本身 |
| nextAtt([expr]) | $(“ .last ”).nextAll() | 查找當前元素之后所有的同輩元素 |
| prevtAll([expr]) | $(“ div”).hasClass(“protected”) | 檢測當前的元素是否含有某個特定的類，如果有，側回傳true |
| eq(index) | $(“ li ”).eq(2); | 相當于$(“ li:eq ”)index從0開始 |
1.6 鏈接編程
鏈接編程是為了節省代碼量，看起來更優雅
$(this).css('color','red').sibling().css('css','');
2. jQuery 樣式操作
2.1 操作css方法
jQuery 可以使用css方法來修改簡單元素樣式；也可以操作類，修改多個樣式，
- 引數只寫屬性名，則是回傳屬性值
$(this).css("color");
- 引數是屬性名，屬性值，逗號分隔，是設定一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號
$(this).css("color","red");
- 引數可以是物件形式，方便設定多組樣式，屬性名和屬性值用冒號隔開，屬性可以不用加引號
$(this).css{("color":"white","font-size":"20px"});
2.2 設定類樣式方法
作用等于以前的classList,可以操作類樣式，注意操作類里面的引數不要加點，
- 添加類
$("div").addClass("current");
- 移除類
$("div").remove("current");
- 切換類
$("div").toggleClass("current");
2.3 類操作與className區別
原生JS中className會覆寫元素原先里面的類名，
jQuery里面類操作只是對指定類進行操作，不影響原先的類名，
3. jQuery 效果
2021年8月11日
17:44
3.1 顯示隱藏效果
- 隱藏語法規范
hide([speed,[easing]],[fn])
- 隱藏引數
- 引數都可以省略，無影片直接顯示，
- speed：三種預定速度之一的字串("slow","normal",or "fast")或表示影片時長的毫秒數值(如：1000);
- easing：(Optional)用來指定切換效果，默認是“swing”,可用引數“linear”，
- fn：回呼函式，在影片完成是執行的函式，每一個元素執行一次，
3.2 滑動效果
1.下滑效果語法規范
slideDown([speed,[easing]],[fn])
2.下滑效果引數
- 引數都可以省略，
- speed：三種預定速度之一的字串("slow","normal",or "fast")或表示影片時長的毫秒數值(如：1000);
- easing：(Optional)用來指定切換效果，默認是“swing”,可用引數“linear”，
- fn：回呼函式，在影片完成是執行的函式，每一個元素執行一次，
1.上滑效果語法規范
slideUp([speed,[easing]],[fn])
2.上滑效果引數
- 引數都可以省略，
- speed：三種預定速度之一的字串("slow","normal",or "fast")或表示影片時長的毫秒數值(如：1000);
- easing：(Optional)用來指定切換效果，默認是“swing”,可用引數“linear”，
- fn：回呼函式，在影片完成是執行的函式，每一個元素執行一次，
1.滑動切換效果語法規范
slideToggle([speed,[easing]],[fn])
2.滑動切換效果引數
- 引數都可以省略，
- speed：三種預定速度之一的字串("slow","normal",or "fast")或表示影片時長的毫秒數值(如：1000);
- easing：(Optional)用來指定切換效果，默認是“swing”,可用引數“linear”，
- fn：回呼函式，在影片完成是執行的函式，每一個元素執行一次，
3.3 事件切換
hover([over,]out)
- over:滑鼠移動元素上要觸發的函式（相當于mouseenter）
- out:滑鼠移出元素要觸發的函式（相當于mouseleave）
3.4 影片佇列及其停止排隊方法
1.影片或效果佇列
影片或者效果一旦觸發就會執行，如果多次觸發，就造成多個影片或者效果排隊執行，
2.停止排隊
stop()
- stop() 方法用于停止影片或效果
- 注意：stop()寫到影片效果的前面，相當于停止結束上一次的影片，
3.5 淡入淡出效果
1.漸進方式調整到指定的不透明度
fadeTo（[[speed],opacity,[easing],[fn]]）
2.效果引數
- opacity透明度必須寫，取值0~1之間，
- speed：三種預定速度之一的字串("slow","normal",or "fast")或表示影片時長的毫秒數值(如：1000)，必須寫
- easing：(Optional)用來指定切換效果，默認是“swing”,可用引數“linear”，
- fn：回呼函式，在影片完成是執行的函式，每一個元素執行一次，
3.6 自定義影片 animate
1.語法
animate(params,[speed],[easing],[fn])
2.引數
- params:想要更改的樣式屬性，一物件形式傳遞，必須寫，屬性名可以不用帶引號，如果是復合屬性測需要采取駝峰命名法borderLeft，其余引數都可以省略，
- speed：三種預定速度之一的字串("slow","normal",or "fast")或表示影片時長的毫秒數值(如：1000);
- easing：(Optional)用來指定切換效果，默認是“swing”,可用引數“linear”，
- fn：回呼函式，在影片完成是執行的函式，每一個元素執行一次，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293622.html
標籤：其他
下一篇：JavaScript-陳述句