Javascript 小技能

来源:http://www.cnblogs.com/redvito/archive/2016/06/02/5552005.html
-Advertisement-
Play Games

/* @@截取字元串長度，漢字算2個字元 @@return [string]+'...' */ var subString = function(str, len) { var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\x ...


 /* @@截取字元串長度，漢字算2個字元 @@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; }
 /* @@對可見元素 進行隱藏 @@: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();   } } 
/* @@對持有不同設備的 設備 引用不同的樣式 @@ if判斷是否 某種設備 */ <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>
/* @@回到頂部動畫 @@ */ $('a.top').click(function (e) {    e.preventDefault();    $(document.body).animate({scrollTop: 0}, 800);  });
/* @@檢查圖片是否載入完畢 @@有時你或許要檢查圖片是否完全載入完畢，才能在腳本中進行後續操作： @@你也可以通過把 img 標簽替換成 ID 或 class，來檢查特定圖片是否載入完成。 */ $('img').load(function () {    console.log('image load successful');  });
/* @@動修複損壞的圖片 @@如果你發現自己網站的圖片鏈接掛了，一個一個替換很麻煩。這段簡單的代碼可以幫上大忙； @@即使你沒有任何損壞的鏈接，增加這段代碼也不會有什麼影響。 */ $('img').on('error', function () {    $(this).prop('src', 'img/broken.png'); });
/* @@Hover 上的 Class 切換 @@如果用戶的滑鼠懸停在頁面上某個可點擊元素時，你想要改變這個元素的視覺表現。可以使用下麵這段代碼，當用戶懸停時，為該元素增加一個 class；當用戶滑鼠離開後移除這個 class： */ $('.btn').hover(function () {    $(this).addClass('hover');  }, function () {    $(this).removeClass('hover');  });   -----------或--------- $('.btn').hover(function () {   $(this).toggleClass('hover');  });
/* @@禁用 input 欄位 @@有時你也許想讓表單的提交按鈕或其文本輸入框變得不可用，直到用戶執行了一個特定行為（例如確認 “我已經閱讀該條款” 的覆選框）。增加 disabled attribute 到你的 input，就可以實現自己想要的效果 */ $('input[type="submit"]').prop('disabled', true); $('input[type="submit"]').prop('disabled', false);
/* @@停止鏈接載入 @@有時你不想鏈接跳轉到某個頁面或重載入該頁面，而希望可以做一些其他事情，比如觸發其他腳本。下麵的代碼是禁止預設行為的一個小訣竅 */ $('a.no-link').click(function (e) {   e.preventDefault();  });
/* @@淡入淡出/滑動開關 @@淡入淡出與滑動是我們經常使用 jQuery 做成的動畫效果。或許你只是想在用戶點擊某物時展現一個元素，使用 fadeIn 和 slideDown 都很棒。但如果想讓該元素在第一次點擊時顯現，第二次點擊時消失，下麵的代碼可以很好地完成 */ // Fade $('.btn').click(function () {   $('.element').fadeToggle('slow'); });   // Toggle $('.btn').click(function () {   $('.element').slideToggle('slow'); });
/* @@簡單的手風琴效果 @@這是一個快速實現手風琴效果的簡單方法 */ // 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; });
/* @@使兩個 Div 高度一樣 @@有時你也許想讓兩個 div 擁有同樣高度，不管它們裡面有什麼內容： */ $('.div').css('min-height', $('.main-div').height()); 該例設置了 min-height，意味著它可以比主要 div 更大，但永遠不能更小。但有一個更加靈活的方法是遍歷一組元素的設置，然後將高度設為元素中的最高值： var $columns = $('.column'); var height = 0; $columns.each(function () {   if ($(this).height() &gt; height) {     height = $(this).height();   } }); $columns.height(height); 如果你想讓所有列都有相同高度：  var $rows = $('.same-height-columns');      $rows.each(function () {      $(this).find('.column').height($(this).height());     }); 
/* @@在新標簽/視窗打開站外鏈接 @@在一個新標簽或者新視窗中打開外置鏈接，並確保站內鏈接會在相同的標簽或視窗中打開： */ $('a[href^="http"]').attr('target', '_blank'); $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
/* @@通過文本找到元素 @@通過使用 jQuery 中的 contains() 選擇器，你可以找到某個元素中的文本。如果文本不存在，該元素將會隱藏： */  var search = $('#search').val();  $('div:not(:contains("' + search + '"))').hide();
/* @@視覺改變觸發 @@當用戶焦點在另外一個標簽上，或重新回到標簽時，觸發 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 調用的錯誤處理 @@當某次 Ajax 調用返回 404 或 500 錯誤，就會執行錯誤處理。但如果沒有定義該處理，其他 jQuery 代碼或許會停止工作。可以通過下麵這段代碼定義一個全局 Ajax 錯誤處理 */ $(document).ajaxError(function (e, xhr, settings, error) {     console.log(error); });
/* @@插件鏈式調用 @@jQuery 支持鏈式調用插件，以減緩反覆查詢 DOM，並創建多個 jQuery 對象。看下麵示例代碼 */  $('#elem').show();  $('#elem').html('bla');  $('#elem').otherStuff(); 上面這段代碼，可以通過鏈式操作大大改進：  $('#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 如果當前為選中 就設置為 不選中 反之相同     $("#tabVouchList tr").each(function () {         if ($("td:eq(0) input[name='check']", $(this)).is(':checked')) {             $(this).attr('checked', false);         } else {             $(this).attr('checked', true);         }     });
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Java8 新特性----函數式介面，以及和Lambda表達式的關係
    這裡來講解一下Java8 新特性中的函數式介面， 以及和Lambda 表達式的關係。看到過很多不少介紹Java8特性的文章，都會介紹到函數式介面和lambda表達式，但是都是分別介紹，沒有將兩者的關係說明清楚，在這裡,把自己的理解整理如下： 一、函數式介面: 函數式介面其實本質上還是一個介面，但是它 ...
  • 分散式文件系統FastDFS設計原理
    FastDFS是一個開源的輕量級分散式文件系統，由跟蹤伺服器（tracker server）、存儲伺服器（storage server）和客戶端（client）三個部分組成，主要解決了海量數據存儲問題，特別適合以中小文件（建議範圍：4KB < file_size <500MB）為載體的線上服務。 S ...
  • 淺談 SOLID 原則的具體使用
    SOLID 是面向對象設計5大重要原則的首字母縮寫，當我們設計類和模塊時，遵守 SOLID 原則可以讓軟體更加健壯和穩定。那麼，什麼是 SOLID 原則呢？本篇文章我將談談 SOLID 原則在軟體開發中的具體使用。 單一職責原則（SRP） 單一職責原則（SRP）表明一個類有且只有一個職責。一個類就像 ...
  • 第三章 微服務之間的調用 + 服務發現 + 負載均衡 + retrofit通信
    微服務與微服務之間通信。 一、通信協議 我們選用的通信協議是http，其實現工具是retrofit。 特點：實現簡單，但是速度相較於tcp協議是慢一些 如果對速度要求很高，可以使用tcp協議，實現產品可選用mina2/netty 特點：實現簡單，但是速度相較於tcp協議是慢一些 二、服務路由 說明： ...
  • 第二章 微服務架構搭建 + 服務啟動註冊
    一、首先編寫微服務基礎項目framework 1、pom.xml 1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...
  • JavaScript來實現打開鏈接頁面（轉載）
    在頁面中的鏈接除了常規的方式以外，如果使用javascript，還有很多種方式，下麵是一些使用javascript，打開鏈接的幾種方式： 1.使用window的open方法打開鏈接，這裡可是在制定頁面中打開鏈接，也可以定製打開頁面的尺寸等等。<a href=”javascript:window.op ...
  • angular.js
    angular.js 從來沒有接觸過 現在大家一起來學習 ng-app 指令定義一個 AngularJS 應用程式。 ng-model 指令把元素值（比如輸入域的值）綁定到應用程式。 ng-bind 指令把應用程式變數 name 綁定到某個段落的 innerHTML。 ...
  • EXT中單擊button按鈕，grid添加一行（游標位置可設置）
    1.創建一個添加按鈕，listeners事件中button的單擊事件，{ id:'button1', xtype : 'button', margin : '6', text : '添加', name : 'btn-add', iconCls: 'btn-add', listeners:{ clic ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類