<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          前端程序員應該知道的15個jQuery小技巧

          時間:?2017-12-21閱讀:?765標簽:?jquery

          1、返回頂部按鈕

          通過使用jQuery中的animate 和scrollTop 方法,不用插件就可以創建一個滾動到頂部的簡單動畫:

          // Back to top
          $('.top').click(function (e) {
          e.preventDefault();
          $('html, body').animate({scrollTop: 0}, 800);
          });
          <!-- Create an anchor tag -->
          <a href="#">Back to top</a>

          改變scrollTop 的值可以更改你想要放置滾動條的位置。所有你真正需要做的是在800毫秒的時間內設置文檔主體的動畫,直到它滾動到文檔的頂部。

          注:小心scrollTop的一些錯誤行為。


          2、預加載圖像

          如果你的網頁要使用大量開始不可見的(例如,懸停的)圖像,那么可以預加載這些圖像:

          $.preloadImages = function () {
          for (var i = 0; i < arguments.length; i++) {
          $('<img>').attr('src', arguments[i]);
          }
          };
          
          $.preloadImages('img/hover-on.png', 'img/hover-off.png');


          3、檢查圖像是否加載

          有時為了繼續腳本,你可能需要檢查圖像是否全部加載完畢:

          $('img').load(function () {
          console.log('image load successful');
          });

          你也可以用ID或類替換<img>標簽來檢查某個特定的圖像是否被加載。


          4、自動修復破壞的圖像

          逐個替換已經破壞的圖像鏈接是非常痛苦的。不過,下面這段簡單的代碼可以幫助你:

          $('img').on('error', function () {
          if(!$(this).hasClass('broken-image')) {
          $(this).prop('src', 'img/broken.png').addClass('broken-image');
          }
          });

          即使沒有任何斷掉的鏈接,加上這一段代碼也不會讓你有任何損失。


          5、懸停切換類

          假設你希望當用戶將鼠標懸停在可點擊的元素上時,它會改變顏色。那么你可以在用戶懸停的時候添加類到元素中,反之則刪除類:

          $('.btn').hover(function () {
          $(this).addClass('hover');
          }, function () {
          $(this).removeClass('hover');
          });

          你只需要添加必要的CSS即可。更簡單的方法是使用toggleClass 方法:

          $('.btn').hover(function () {
          $(this).toggleClass('hover');
          });

          注:可能在這種情況下,CSS這種解決方案更快,不過了解這個方法很有必要。


          6、禁用輸入字段

          有時候,你可能想要禁用表格的提交按鈕或它的某一項文字輸入直到用戶執行了特定操作(例如,勾選“我已閱讀相關條款”復選框)。添加 disabled屬性到你的輸入就可以在你想要的時候才啟用它:

          $('input[type="submit"]').prop('disabled', true);

          然后你只需要運行輸入的prop 方法就可以了,不過disabled 的值要設置為false:

          $('input[type="submit"]').prop('disabled', false);


          7、停止加載鏈接

          有時候,你既不需要鏈接到某個特定的網頁,也不想要重新加載頁面——你可能希望鏈接做點別的事情,例如說觸發一些其他腳本。這就要在阻止默認動作上做文章了:

          $('a.no-link').click(function (e) {
          e.preventDefault();
          });


          8、淡入/滑動切換

          滑動和淡入都是我們用jQuery做動畫的時候大量運用的東西。如果你只是想在用戶點擊之后展示一個元素的話,那么用fadeIn 和slideDown 方法就很完美。但是,如果你想要元素在第一次點擊的時候出現,然后在第二次點擊的時候消失的話,那么可以試試下面的代碼:

          // Fade
          $('.btn').click(function () {
          $('.element').fadeToggle('slow');
          });
          
          // Toggle
          $('.btn').click(function () {
          $('.element').slideToggle('slow');
          });


          9、簡單的手風琴

          這是一個可快速生成手風琴的簡單方法:

          // 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;
          });

          通過添加這個腳本,你真正需要做的僅僅是在頁面上添加必要的HTML元素,這樣它就可以運行工作了。


          10、讓兩個div高度相同

          有時候,你需要讓兩個div無論包含什么內容都擁有相同的高度:

          $('.div').css('min-height', $('.main-div').height());

          設置 min-height,這意味著它可以比主div大但絕對不能比主div小。不過,還有一種更靈活的方法是遍歷一組元素,然后將高度設置為最高的那個元素的高度:

          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());
          });


          11、在新標簽頁/窗口打開外部鏈接

          在一個新的瀏覽器tab或窗口中打開外部鏈接,并確保同一個來源的鏈接能在同一個tab或者窗口中打開:

          $('a[href^="http"]').attr('target', '_blank');
          $('a[href^="http://"]').attr('target', '_blank');
          $('a[href^="' + window.location.origin + '"]').attr('target', '_self');

          注意:window.location.origin 在IE10中無效。修復的時候要小心這個問題。


          12、通過文本查找元素

          通過使用jQuery中的contains() 選擇器,你可以找到元素內容的文本。如果文本不存在,那就隱藏該元素:

          var search = $('#search').val();
          $('div:not(:contains("' + search + '"))').hide();


          13、在改變Visibility時觸發

          當用戶不再關注某個tab,或重新聚焦原來的那個tab上時,觸發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!');
          }
          });


          14、AJAX調用錯誤處理

          當Ajax調用返回404或500錯誤時,就執行錯誤處理程序。如果沒有定義處理程序,其他的jQuery代碼或會就此罷工。定義一個全局的Ajax錯誤處理程序:

          $(document).ajaxError(function (e, xhr, settings, error) {
             console.log(error);
          });


          15、鏈式插件調用

          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();

          鏈式和高速緩存的方法都是jQuery中可以讓代碼變得更短和更快的代最佳做法。


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/269

          利用jQuery not()方法選取除某個元素外的所有元素

          日常的工作中可能會用到,選取處某個或者某些元素外的所有元素。這時我們可以使用 jQuery 遍歷中的 not() 方法來排除某些元素,例如根據元素的 #id ,.class 等排除,代碼如下:

          jquery中toggleClass(), index()

          toggleClass()對設置貨已出被選元素的一個或多個類進行切換。該方法檢查每個元素中指定的類,如果不存在則添加類,如果已設置則將之刪除。這就是所謂的切換效果,不過通過“switch”參數,只能夠規定只刪除或者添加類。

          js和jquery設置css的幾種方式

          js設置樣式的方法: 直接設置style的屬性 某些情況用這個設置 !important值無效、直接設置屬性(只能用于某些屬性,相關樣式會自動識別); 使用setProperty 如果要設置!important,推薦用這種方法設置第三個參數

          在jQuery中使用自定義屬性

          在jquery中 自定義屬性及值,默認以下都是在class=‘acitve‘對象中 進行自定義屬性操作:自定義屬性格式:data-xxxx;審查元素是看不到該屬性的,只能輸出控制臺可以看到該值。

          前端UI攻城獅 你們該拋棄jQuery了

          Web工程師太依賴jQuery了,某種意義上說jQuery已經成了JavaScript的同義詞。但是我們真的需要他么?或許我們應該反思一下什么時候才真的需要jQuery。對我個人而言開始使用jQuery的理由是他把我的工作變得簡單多了

          jQuery的淡入淡出

          在jQuery中的一些特效中,可以通過四個方法來實現元素的淡入淡出,這四個方法分別是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),下面為分別為大家介紹各個方式的使用。

          jQuery UI有四大功能

          jQuery UI (譯:jQuery用戶界面) 是:以 jQuery 為基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件

          jQuery常用知識總結

          jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互,能夠極大地簡化JavaScript編程

          兩種方法使vue實現jQuery調用

          vue是前端工程化使用較多的骨架,那么JavaScript就是我們的前端的細胞。MVVM模式讓我們體驗到前端開發的便攜,無需再過多的考慮DOM的操作。而jQuery需要記憶的內容頗多

          時隔一年,jQuery 發布 3.4.0 版本

          jQuery 團隊的核心開發者 Timmy Willison 今天在官網宣布了 jQuery 3.4.0,這距離上個版本 3.3.x 系列的推出已過去了一年多。Timmy 表示這可能是 3.x 分支的最后一個小版本更新,接下來的工作重心將是 jQuery 4.0 大版本的更新。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网