Javascript小技能總結(jié)(推薦)
廢話(huà)不多說(shuō),直接上干貨。。
具體代碼如下所示:
/* @@截取字符串長(zhǎng)度,漢字算2個(gè)字符 @@return [string]+'...' */ var subString = function(str, len) { var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chineseRegex, "**").length; for (var i = 0; i < strLength; i++) { singleChar = str.charAt(i).toString(); if (singleChar.match(chineseRegex) != null) { newLength += 2; } else { newLength++; } if (newLength > len) { break; } newStr += singleChar; } if (strLength > len) { newStr += "..."; } return newStr; } -------------------------------------------------------------------------------- /* @@對(duì)可見(jiàn)元素 進(jìn)行隱藏 @@:visible 判斷是否為課件元素 */ function close_window(){ var flag=false; $(".dialog_con").each(function(){ if($(this).is(":visible")){ flag=true; } }) if(flag==true){ $(".dialog_con").hide(); $(".dialogbox").hide(); }else{ window.android.callAndroidFinish(); } } -------------------------------------------------------------------------------- /* @@對(duì)持有不同設(shè)備的 設(shè)備 引用不同的樣式 @@ if判斷是否 某種設(shè)備 */ <script type = "text/javascript" > if (/(iPad|iPod|iOS)/i.test(navigator.userAgent)) { setActiveStyleSheet("pad.css"); } else if (/(Android)/i.test(navigator.userAgent)) { setActiveStyleSheet("common.css"); }else if (/(iPhone6)/i.test(navigator.userAgent)) { setActiveStyleSheet("iphone6.css"); } function setActiveStyleSheet(filename){ document.write("<link href="+filename+" rel=stylesheet>"); } </script> -------------------------------------------------------------------------------- /* @@回到頂部動(dòng)畫(huà) @@ */ $('a.top').click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 800); }); -------------------------------------------------------------------------------- /* @@檢查圖片是否加載完畢 @@有時(shí)你或許要檢查圖片是否完全加載完畢,才能在腳本中進(jìn)行后續(xù)操作: @@你也可以通過(guò)把 img 標(biāo)簽替換成 ID 或 class,來(lái)檢查特定圖片是否加載完成。 */ $('img').load(function () { console.log('image load successful'); }); -------------------------------------------------------------------------------- /* @@動(dòng)修復(fù)損壞的圖片 @@如果你發(fā)現(xiàn)自己網(wǎng)站的圖片鏈接掛了,一個(gè)一個(gè)替換很麻煩。這段簡(jiǎn)單的代碼可以幫上大忙; @@即使你沒(méi)有任何損壞的鏈接,增加這段代碼也不會(huì)有什么影響。 */ $('img').on('error', function () { $(this).prop('src', 'img/broken.png'); }); -------------------------------------------------------------------------------- /* @@Hover 上的 Class 切換 @@如果用戶(hù)的鼠標(biāo)懸停在頁(yè)面上某個(gè)可點(diǎn)擊元素時(shí),你想要改變這個(gè)元素的視覺(jué)表現(xiàn)??梢允褂孟旅孢@段代碼,當(dāng)用戶(hù)懸停時(shí),為該元素增加一個(gè) class;當(dāng)用戶(hù)鼠標(biāo)離開(kāi)后移除這個(gè) class: */ $('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }); -----------或--------- $('.btn').hover(function () { $(this).toggleClass('hover'); }); -------------------------------------------------------------------------------- /* @@禁用 input 字段 @@有時(shí)你也許想讓表單的提交按鈕或其文本輸入框變得不可用,直到用戶(hù)執(zhí)行了一個(gè)特定行為(例如確認(rèn) “我已經(jīng)閱讀該條款” 的復(fù)選框)。增加 disabled attribute 到你的 input,就可以實(shí)現(xiàn)自己想要的效果 */ $('input[type="submit"]').prop('disabled', true); $('input[type="submit"]').prop('disabled', false); -------------------------------------------------------------------------------- /* @@停止鏈接加載 @@有時(shí)你不想鏈接跳轉(zhuǎn)到某個(gè)頁(yè)面或重加載該頁(yè)面,而希望可以做一些其他事情,比如觸發(fā)其他腳本。下面的代碼是禁止默認(rèn)行為的一個(gè)小訣竅 */ $('a.no-link').click(function (e) { e.preventDefault(); }); -------------------------------------------------------------------------------- /* @@淡入淡出/滑動(dòng)開(kāi)關(guān) @@淡入淡出與滑動(dòng)是我們經(jīng)常使用 jQuery 做成的動(dòng)畫(huà)效果。或許你只是想在用戶(hù)點(diǎn)擊某物時(shí)展現(xiàn)一個(gè)元素,使用 fadeIn 和 slideDown 都很棒。但如果想讓該元素在第一次點(diǎn)擊時(shí)顯現(xiàn),第二次點(diǎn)擊時(shí)消失,下面的代碼可以很好地完成 */ // Fade $('.btn').click(function () { $('.element').fadeToggle('slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); }); -------------------------------------------------------------------------------- /* @@簡(jiǎn)單的手風(fēng)琴效果 @@這是一個(gè)快速實(shí)現(xiàn)手風(fēng)琴效果的簡(jiǎn)單方法 */ // Close all panels $('#accordion').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; }); -------------------------------------------------------------------------------- /* @@使兩個(gè) Div 高度一樣 @@有時(shí)你也許想讓兩個(gè) div 擁有同樣高度,不管它們里面有什么內(nèi)容: */ $('.div').css('min-height', $('.main-div').height()); 該例設(shè)置了 min-height,意味著它可以比主要 div 更大,但永遠(yuǎn)不能更小。但有一個(gè)更加靈活的方法是遍歷一組元素的設(shè)置,然后將高度設(shè)為元素中的最高值: var $columns = $('.column'); var height = 0; $columns.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $columns.height(height); 如果你想讓所有列都有相同高度: var $rows = $('.same-height-columns'); $rows.each(function () { $(this).find('.column').height($(this).height()); }); -------------------------------------------------------------------------------- /* @@在新標(biāo)簽/窗口打開(kāi)站外鏈接 @@在一個(gè)新標(biāo)簽或者新窗口中打開(kāi)外置鏈接,并確保站內(nèi)鏈接會(huì)在相同的標(biāo)簽或窗口中打開(kāi): */ $('a[href^="http"]').attr('target', '_blank'); $('a[href^="http://"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); -------------------------------------------------------------------------------- /* @@通過(guò)文本找到元素 @@通過(guò)使用 jQuery 中的 contains() 選擇器,你可以找到某個(gè)元素中的文本。如果文本不存在,該元素將會(huì)隱藏: */ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); -------------------------------------------------------------------------------- /* @@視覺(jué)改變觸發(fā) @@當(dāng)用戶(hù)焦點(diǎn)在另外一個(gè)標(biāo)簽上,或重新回到標(biāo)簽時(shí),觸發(fā) JavaScript: */ $(document).on('visibilitychange', function (e) { if (e.target.visibilityState === "visible") { console.log('Tab is now in view!'); } else if (e.target.visibilityState === "hidden") { console.log('Tab is now hidden!'); } }); -------------------------------------------------------------------------------- /* @@Ajax 調(diào)用的錯(cuò)誤處理 @@當(dāng)某次 Ajax 調(diào)用返回 404 或 500 錯(cuò)誤,就會(huì)執(zhí)行錯(cuò)誤處理。但如果沒(méi)有定義該處理,其他 jQuery 代碼或許會(huì)停止工作??梢酝ㄟ^(guò)下面這段代碼定義一個(gè)全局 Ajax 錯(cuò)誤處理 */ $(document).ajaxError(function (e, xhr, settings, error) { console.log(error); }); -------------------------------------------------------------------------------- /* @@插件鏈?zhǔn)秸{(diào)用 @@jQuery 支持鏈?zhǔn)秸{(diào)用插件,以減緩反復(fù)查詢(xún) DOM,并創(chuàng)建多個(gè) jQuery 對(duì)象??聪旅媸纠a */ $('#elem').show(); $('#elem').html('bla'); $('#elem').otherStuff(); 上面這段代碼,可以通過(guò)鏈?zhǔn)讲僮鞔蟠蟾倪M(jìn): $('#elem').show().html('bla').otherStuff(); 還有另外一種方法,把元素緩存在變量中(前綴是 $ ): var $elem = $('#elem'); $elem.hide(); $elem.html('bla'); $elem.otherStuff(); -------------------------------------------------------------------------------- /* @@Jq 遍歷 全選 全不選 反選 @@ */ //全選 全不選 $('#checkAll').click(function () { //判斷是否被選中 var bischecked = $('#checkAll').is(':checked'); var fruit = $('input[name="check"]'); bischecked ? fruit.attr('checked', true) : fruit.attr('checked', false); }); //反選 遍歷checkbox 如果當(dāng)前為選中 就設(shè)置為 不選中 反之相同 $("#tabVouchList tr").each(function () { if ($("td:eq(0) input[name='check']", $(this)).is(':checked')) { $(this).attr('checked', false); } else { $(this).attr('checked', true); } });
以上所述是小編給大家提供的js小技巧總結(jié),希望對(duì)大家有所幫助!
相關(guān)文章
微信小程序?qū)崿F(xiàn)全局狀態(tài)管理的方法整理
已知微信小程序中如果要做到全局狀態(tài)共享,常用的有四種方式,分別是globalData、本地緩存、mobx-miniprogram和westore,本文將帶大家看看mobx-miniprogram是如何實(shí)現(xiàn)的小程序的全局狀態(tài)管理,需要的可以收藏一下2023-06-06js動(dòng)態(tài)修改整個(gè)頁(yè)面樣式達(dá)到換膚效果
這篇文章主要介紹了通過(guò)js動(dòng)態(tài)修改整個(gè)頁(yè)面樣式達(dá)到換膚效果,需要的朋友可以參考下2014-05-05Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能
這篇文章主要介紹了Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能,需要的朋友可以參考下2017-05-05JavaScript輸出當(dāng)前時(shí)間Unix時(shí)間戳的方法
這篇文章主要介紹了JavaScript輸出當(dāng)前時(shí)間Unix時(shí)間戳的方法,涉及javascript中Date及getTime等函數(shù)操作時(shí)間的使用技巧,需要的朋友可以參考下2015-04-04JavaScript實(shí)現(xiàn)手寫(xiě)循環(huán)滑動(dòng)效果
最近一直在做業(yè)務(wù),遇到一個(gè)需求是頁(yè)面頂部需要展示圖片,可以拖動(dòng),拖動(dòng)到最后一張的時(shí)候需要無(wú)縫切換到第一張,從而實(shí)現(xiàn)循環(huán)滑動(dòng),所以本文就來(lái)和大家分享一下實(shí)現(xiàn)方法2023-05-05JavaScript中實(shí)現(xiàn)跨標(biāo)簽頁(yè)通信的方法詳解
跨標(biāo)簽頁(yè)通信是指在瀏覽器中的不同標(biāo)簽頁(yè)之間進(jìn)行數(shù)據(jù)傳遞和通信的過(guò)程,這篇文章為大家介紹了一下常見(jiàn)的跨標(biāo)簽頁(yè)通信方式,感興趣的小伙伴可以了解下2023-11-11