1. 程式人生 > >jq要注意的點

jq要注意的點

查詢下標

JQ物件查詢指定下標的方法為:eq()
DOM物件的為:get()
eg:今天寫一個導航條繫結滑鼠進入事件時播放指定音樂,因為JQ中沒有封裝audio 和 video de 的方法,所以play的方法要繫結在DOM元素上 : ( " a u d

i o " ) . g e t ( ("audio").get(
(this).index()).play(); 這時如果要是使用eq的話就不對了。

一個報錯

但是這時報錯了Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.
原來在Chrome 4月份更新了版本後,autoplay政策做了更改
解決方法:開啟chrome://flags/#autoplay-policy
把Default修改為 No user gesture is required

prop方法

對於一些特殊的屬性 eg:checked, selected ,disabled 這些值為布林值的屬性,如果使用attr方法設定,執行一次後就不再執行,因為JQ對於未設定的這些特殊屬性會返回undefined,所以要用prop方法
用法和attr相同 eg:prop(“checked”,“true”)

動畫佇列

JQ中會把動畫放在一個動畫佇列中。如果呼叫多個動畫,它也會按照順序挨個執行,不會覆蓋,也會把動畫儲存好,但同時不好的地方也出現了。如果有一個滑鼠進入觸發動畫的函式,使用者多次觸發並速度很快,那麼滑鼠離開後 ,它仍然會執行,直到動畫佇列中的動畫執行完。
解決方法:stop()方法 停止正在執行的動畫
在動畫方法前呼叫此方法就可以解決動畫佇列的問題。
stop(clearQueue,jumpToEnd) 引數值都為布林型
clearQueue :是否清除動畫佇列
jumpToEnd :是否跳轉到當前動畫的最終效果
不傳參預設都為 false。

index()方法

JQ中的index()方法會返回當前元素在所有兄弟元素中的索引

<li><a href=""></a>
<li><a href=""></a>
<li><a href=""></a>
如果給a標籤使用index()方法就只會顯示0,要對li標籤使用此方法