必知的 15 個jQuery小技巧
返回頂部按鈕
你可以利用animate和scrollTop來實現返回頂部的動畫,而不需要使用其他插件。
改變scrollTop的值可以調整返回距離頂部的距離,而animate的第二個參數是執行返回動作需要的時間(單位:毫秒)。
預載入圖片
如果你的頁面中使用了很多不可見的圖片(如:hover顯示),你可能需要預載入它們:
檢查圖片是否載入完成
有時候你需要確保圖片完成載入完成以便執行後面的操作:
你可以把img替換為其他的ID或者class來檢查指定圖片是否載入完成。
自動修改破損圖像
如果你碰巧在你的網站上發現了破碎的圖像鏈接,你可以用一個不易被替換的圖像來代替它們。添加這個簡單的代碼可以節省很多麻煩:
即使你的網站沒有破碎的圖像鏈接,添加這段代碼也沒有任何害處。
滑鼠懸停(hover)切換Class屬性
假如當用戶滑鼠懸停在一個可點擊的元素上時,你希望改變其效果,下面這段代碼可以在其懸停在元素上時添加class屬性,當用戶滑鼠離開時,則自動取消該class屬性:
你只需要添加必要的CSS代碼即可。如果你想要更簡潔的代碼,可以使用toggleClass方法:
註:直接使用CSS實現該效果可能是更好的解決方案,但你仍然有必要知道該方法。
禁用input欄位
有時你可能需要禁用表單的submit按鈕或者某個input欄位,直到用戶執行了某些操作(例如,檢查「已閱讀條款」複選框)。可以添加 disabled屬性,直到你想啟用它時:
你要做的就是執行removeAttr方法,並把要移除的屬性作為參數傳入:
阻止鏈接載入
有時你不希望鏈接到某個頁面或者重新載入它,你可能希望它來做一些其他事情或者觸發一些其他腳本,你可以這麼做:
切換fade/slide
fade和slide是我們在jQuery中經常使用的動畫效果,它們可以使元素顯示效果更好。但是如果你希望元素顯示時使用第一種效果,而消失時使用第二種效果,則可以這麼做:
簡單的手風琴效果
這是一個實現手風琴效果快速簡單的方法:
讓兩個DIV高度相同
有時你需要讓兩個div高度相同,而不管它們裡面的內容多少。可以使用下面的代碼片段:
這段代碼會循環一組元素,並設置它們的高度為元素中的最大高。
css3實現div的淡入淡出效果
引入動畫效果
Jquery遍歷一組checkbox複選框,取出選中的值放在數組裡
jquery的ajax錯誤error方法查看狀態值代碼
超出部分截取字元,顯示「...」(超出的文字自動+省略號)
游標定位到字元最後(使用場景:input=text文本框獲取焦點後,游標顯示在字元最後)
JS判斷是否為數組
文章來源:
http://www.tuicool.com/articles/J32iIb7
點擊展開全文
※《摔跤吧,爸爸!》 有你這麼傻逼的嗎?
※超完整的Chrome瀏覽器客戶端調試大全
※PHP如何應對秒殺搶購高並發思路
※請不要對我喜新厭舊
※寫給前端工程師的DNS基礎知識
TAG:優才學院 |
※Python開發者必知的13個Python GUI庫
※打賭!這個技巧90%更新了iOS 11的iPhone用戶都未必知道
※學習Python必知的Numpy函數
※建站初學者必知的wordpress在Nginx/Apache/IIS中的偽靜態規則
※MySQL「必知必會」的36個知識點
※前阿里丁奇:學習MySQL「必知必會」的36個知識點
※遊戲廣告變現必知:Ad Network和Ad Exchange全揭秘
※2019 必知的 10 大頂級 python 庫
※Homie必知!哪些ins最夯潮牌的帽子好看?Supreme、Off-White.....來看看你有沒有你的心頭好
※勞力士 Sea-Dweller用50年回到單紅起點的故事!想買勞必知!
※看展必知!2018ChinaJoy展前預覽正式發布
※10件已入Switch坑必知的進階事項
※力量訓練愛好者必知的Starting Strength訓練計劃
※Oculus Go開發移植必知,支持Gear VR應用,不支持谷歌Play、舊SDK
※WiFi新夥伴802.11AY來了,你必知的3件事
※Oculus Go開發移植必知,支持Gear VR應用,不支持谷歌Play
※59秒Get 五個必知的計算機常識
※賣家必知的5點Promotions經驗,促銷不要「走彎路」!
※用了8年iPhone的果粉都未必知道的冷技巧
※2018年10位中韓台必知人氣童星,每周話題王Jasper