JQuery高級

1.動畫

? ? ? ? 1.三種顯示方式和隱藏元素

? ? ? ? ? ? ? ? 1.默認顯示和隱藏方式

? ? ? ? ? ? ? ? ? ? ? ? 1.show([speed,[easing],[fn]])

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1.參數：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1.speed：動畫的速度。三個預定義的值("slow","normal","fast")或表示動畫時長的毫秒數值(如：1000)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.easing：用來指定切換效果，默認是"swing",可用參數"linear"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? swing:動畫執行時效果是 先慢，中間快，最后又慢

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? linear：動畫執行的速度是勻速的

? ? ? ? ? ? ? ? ? ? ? ? 2.hide([speed,[easing],[fn]])

? ? ? ? ? ? ? ? ? ? ? ? 3.toggle([speed],[easing],[fn])

? ? ? ? ? ? ? ? 2.滑動顯示和隱藏方式

? ? ? ? ? ? ? ? ? ? ? ? 1.slideDown([speed],[easing],[fn])

? ? ? ? ? ? ? ? ? ? ? ? 2.slideUp([speed,[easing],[fn]])

? ? ? ? ? ? ? ? ? ? ? ? 3.slideToggle([speed],[easing],[fn])

? ? ? ? ? ? ? ? 3.淡入淡出顯示和隱藏方式

? ? ? ? ? ? ? ? ? ? ? ? 1.fadeIn([speed],[easing],[fn])

? ? ? ? ? ? ? ? ? ? ? ? 2.fadeOut([speed],[easing],[fn])

? ? ? ? ? ? ? ? ? ? ? ? 3.fadeToggle([speed,[easing],[fn]])

2.遍歷：

? ? ? ? 1.js的遍歷

? ? ? ? ? ? ? ? for(初始化值;循環結束條件;步長)

? ? ? ? 2.jq的遍歷方式

? ? ? ? ? ? ? ? 1.jq對象.each(callback)

?得到的element是JS對象，使用JQuery方法必須轉換

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

? ? ? ? ? ? ? ? ? ? ? ? 1中方法只能傳遞JQuery對象。2中既可以使用JQuery對象也可以使用JS對象

? ? ? ? ? ? ? ? 3.for..of:JQuery3.0 版本之后提供的方式

???????????????????????????????

3.事件綁定

? ? ? ? 1.jquery的標準綁定方式

? ? ? ? ? ? ? ? jq對象.事件方法(回調函數);

? ? ? ? ? ? ? ? 注：如果調用事件方法，不傳遞回調函數，則會觸發瀏覽器默認行為。

? ? ? ? ? ? ? ? ? ? ? ? 表單對象.submit();//讓表單提交

? ? ? ? 2.on綁定事件/off接觸綁定事件

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

? ? ? ? ? ? ? ? jq對象.off("事件名稱")

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

? ? ? ? 3.事件切換

? ? ? ? ? ? ? ? jq對象.toggle(fn1,fn2...)

? ? ? ? ? ? ? ? ? ? ? ? 當單擊jq對象對應的組件后，會執行fn1。第二次點擊會執行fn2 。

注意：1.9版本? .toggle()方法刪除， jQuery Migrate (遷移) 插件可以恢復此功能

?12_JQuery_案例2_抽獎_實現 （還有很多優化 自己再看一遍）?

提高變量作用域才能在兩個單擊事件顯示

5.插件：增強JQuery的功能

? ? ? ? 1.實現方式：

? ? ? ? ? ? ? ? 1.JQuery.fn.extend(object) = $.fn.extend(object)

? ? ? ? ? ? ? ? ? ? ? ? 增強通過Jquery獲取的對象的功能? ? ? ? $("#id")

? ? ? ? ? ? ? ? 2.$.extend.(object)

? ? ? ? ? ? ? ? ? ? ? ? 增強JQuery對象自身的功能? ? ? ? $/jQuery

總結

以上是生活随笔為你收集整理的1.19 JQuery高级的全部內容，希望文章能夠幫你解決所遇到的問題。

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