<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>

          是時候和 jQuery 說拜拜了么?

          時間:?2017-11-09閱讀:?1468標簽:?jquery

          自從2006年,jQuery發布以來,瀏覽器的API和DOM取得了長足的發展。在網絡上也時不時會看到,“是時候和jQuery說拜拜了”,最著名的莫過于在2013年的這篇文章You Might Not Need jQuery。這里就不再重復的再說這個陳舊的話題,不過自從那篇文章發表后,瀏覽器確實在一點一點的改變著,發展著。瀏覽器繼續發布和更新它們的API,有的是直接從jQuery那借鑒過來的。

          下面就來看看一些新的可以代替jQuery方法的瀏覽器的API。

          從頁面刪除一個元素

          在以前如果你要使用瀏覽器提供的API來刪除一個元素,你不得不采用迂回的方法來達到目的。比如el.parentNode.removeChild(el);,現在就不用使用這樣迂回的方法了。下面就來比較下jQuery和瀏覽器新的API刪除一個元素的使用方法。

          jQuery:

          var $elem = $(".someClass") //選中元素
          $elem.remove(); //刪除元素
          

          使用瀏覽器新API:

          var elem = document.querySelector(".someClass"); //選中元素
          elem.remove() //刪除元素
          

          這里提醒下,如果使用了$elem這種表示方法,代表使用了jQuery;如果是elem,則表示使用的是瀏覽器原生的方法。

          插入一個元素

          jQuery:

          $elem.prepend($someOtherElem);
          

          使用瀏覽器新API:

          elem.prepend(someOtherElem);
          

          在指定元素前插入內容

          jQuery:

          $elem.before($someOtherElem);
          

          使用瀏覽器新API:

          elem.before(someOtherElem);
          

          替換元素

          jQuery:

          $elem.replaceWith($someOtherElem);
          

          使用瀏覽器新API:

          elem.replaceWith(someOtherElem);
          

          找到最近的一個元素

          jQuery:

          $elem.closest("div");
          

          使用瀏覽器新API:

          elem.closest("div");
          

          看到了么,在新的瀏覽器中,提供了和jQuery幾乎一模一樣的方法。隨著瀏覽器技術的發展,jQuery遲早會光榮的退出歷史的舞臺,在web的發展史上也會留下濃墨重彩的一筆。

          下面看看各個瀏覽器對這些新的DOM的操作方法的支持情況,數據來自Caniuse

          可以發現在桌面上支持的也還不錯,主要是IE的支持情況不是很理想;而在移動端支持的比較好,可以放心大膽的使用了。

          隱藏一個元素

          jQuery:

          $elem.fadeIn();
          

          為了使動畫更自然,通過CSS配合js,可以做一個簡單的過渡漸隱漸顯的效果。

          .thingy {
            display: none;
            opacity: 0;
            transition: .8s;
          }
          

          使用瀏覽器新API:

          elem.style.display = "block";
          requestAnimationFrame(() => elem.style.opacity = 1);
          

          只觸發一次事件

          jQuery:

          $elem.one("click", someFunc);
          

          在以前當遇到這樣只觸發一次事件的時候,需要用到一個回調方法來刪除事件。

          function dostuff() {
            alert("some stuff happened");
            this.removeEventListener("click", dostuff);
          }
          var button = document.querySelector("button");
          button.addEventListener("click", dostuff);
          

          現在有更加方便的方法了,只需要給addEventListener方法傳入一個布爾參數就可以達到這樣的目的。

          elem.addEventListener('click', someFunc, { once: true, });
          

          如果你仍然想捕獲這個事件并且也只調用一次,那么你依然可以通過傳入一個參數來搞定:

          elem.addEventListener('click', myClickHandler, {
            once: true,
            capture: true
          });
          

          動畫

          雖然jQuery提供了animate的方法,但是它的功能非常有限。

          $elem.animate({
            width: "70%",
            opacity: 0.4,
            marginLeft: "0.6in",
            fontSize: "3em",
            borderWidth: "10px"
          }, 1500);
          

          在jQuery的文檔中有說明,所以能被運動的屬性的值,應該都是可以使用數字來表示的;如上所屬,如果一個屬性的值,不能夠用數字來表示,則不能使用jQuery的animate方法。比如當你要用transform和顏色來實現動畫效果的時候,就不能使用jQuery的animate方法了。不過,瀏覽器提供一個新的方法Web Animations API來制作動畫效果。

          var elem = document.querySelector('.animate-me');
          elem.animate([
            { 
              transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)', 
              transformOrigin: '50% 0', 
              filter: 'blur(40px)', 
              opacity: 0 
            },
            { 
              transform: 'translateY(0) scaleY(1) scaleX(1)',
              transformOrigin: '50% 50%',
              filter: 'blur(0)',
              opacity: 1 
            }
          ], 1000);
          

          Ajax

          在過去jQuery一個關鍵的賣點就是它的Ajax方法,jQuery把XMLHttpRequest進行了很好的封裝,提供了優雅的Ajax方法,使用起來也確實非常方便:

          $.ajax('https://some.url', {
            success: (data) => { /* do stuff with the data */ }
          });
          

          當然現在瀏覽器提供fetch API來代替XMLHttpRequest,并且現在所有的瀏覽器都支持它。

          fetch('https://some.url')
            .then(response => response.json())
            .then(data => {
              // do stuff with the data
            });
          

          當然fetch方法可能沒有想象中的那么簡單。但是,它比在以XMLHttpRequest上來建立任何功能要更加的通用和方便。

          當然,我們如果要想更加的易于使用它,那可以借助與一些第三方的封裝好的微型的類庫...

          Axios是一個非常流行的專門用來進行Ajax操作的庫。非常輕量,它只專注與一件事即Ajax。雖然它們不會像jQuery一樣被大規模的測試使用,但是它們確實為替代jQuery提供了可代替的選擇。

          雖然,按現在瀏覽器技術的發展,使用它們提供的DOM操作方法完全可以應付web開發工作!但還是有很多的顧慮,比如各個瀏覽器廠商支持程度不一樣,很多的開發者為了保險起見,還是覺得使用jQuery更安全一些。大多數時候,你完全不用顧慮這么多,盡管用就是了,很多的時候只要在你的頁面中引用一個 polyfill就能很好的處理那些不兼容新方法的瀏覽器。

          只需要引入這個簡單的腳步,就可以處理任何兼容問題。詳細可以去它的官網看看polyfill.io

          jQuery很慢嗎?

          當然,jQuery可能比那些寫的糟糕的js要快,但是這也是你要更加好好學習javascript的理由!作為一個jQuery的主要貢獻者Paul Irish曾說道:

          為了有更好的性能,不要使用jQuery的hide()方法

          作為jQuery的創建者,在它的一本書中Secrets of the JavaScript Ninja曾經說過這樣一段話:

          如果你在使用一個第三方的javascript的庫的時候,你需要了解它的一個原理。最主要的一個原因是性能。了解一個庫的工作原理,可以使你寫出更加高性能的代碼。

          真的可以和jQuery說拜拜了么?

          真的可以和jQuery說拜拜了么?還真不是那么容易,特別是jQuery發展了這么多年,已經形成了一個龐大的生態圈。所以現在有很多的微型庫試圖模仿jQuery的風格,來增加對開發者們的親切感。

          • W3C的專家Lea Verou寫過一篇文章jQuery Considered Harmful并且寫了一個Bliss.js微型庫。它就是模仿jQuery的語法風格$
          • Paul Irish也寫過一個Bling.js腳本也是用來模仿模仿jQuery的語法風格$
          • Remy Sharp提供了一個微型腳本庫min.js

          當然我并不是一個jQuery反對者。現在依然還有很多非常棒的開發者選擇使用jQuery。如果你已經習慣了使用它,當然可以繼續使用它。現在很多的企業在招聘的時候,仍然把它作為一個必備的技能要求。不過,微軟宣布了一個消息,Internet Explorer 11將是IE瀏覽器的最后一個版本,一旦IE退出了web的舞臺,那么jQuery也可能隨著IE的消亡也會推出歷史舞臺。到時候,jQuery可能就真多沒有存在的必要了。

          本文主要是從You Might Not Need jQuery這篇文章整理而來,有刪減,有疏漏或者理解不到位的地方,還請多多指教!

          站長推薦

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

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

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

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

          利用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

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

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