JQuery高級

1.動畫

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

? ? ? ? ? ? ? ? 1.默認(rèn)顯示和隱藏方式

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1.參數(shù)：

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.easing：用來指定切換效果，默認(rèn)是"swing",可用參數(shù)"linear"

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? linear：動畫執(zhí)行的速度是勻速的

? ? ? ? ? ? ? ? ? ? ? ? 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(初始化值;循環(huán)結(jié)束條件;步長)

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

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

?得到的element是JS對象，使用JQuery方法必須轉(zhuǎn)換

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

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

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

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

3.事件綁定

? ? ? ? 1.jquery的標(biāo)準(zhǔn)綁定方式

? ? ? ? ? ? ? ? jq對象.事件方法(回調(diào)函數(shù));

? ? ? ? ? ? ? ? 注：如果調(diào)用事件方法，不傳遞回調(diào)函數(shù)，則會觸發(fā)瀏覽器默認(rèn)行為。

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

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

? ? ? ? ? ? ? ? jq對象.on("事件名稱",回調(diào)函數(shù))

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

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

? ? ? ? 3.事件切換

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

? ? ? ? ? ? ? ? ? ? ? ? 當(dāng)單擊jq對象對應(yīng)的組件后，會執(zhí)行fn1。第二次點擊會執(zhí)行fn2 。

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

?12_JQuery_案例2_抽獎_實現(xiàn) （還有很多優(yōu)化 自己再看一遍）?

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

5.插件：增強(qiáng)JQuery的功能

? ? ? ? 1.實現(xiàn)方式：

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

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

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

? ? ? ? ? ? ? ? ? ? ? ? 增強(qiáng)JQuery對象自身的功能? ? ? ? $/jQuery

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。