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

、返回頂部按鈕

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

// Back to top$('.top').click(function (e) {e.preventDefault();$('html, body').animate({scrollTop: 0}, 800);});<a class="top" 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中可以讓代碼變得更短和更快的代最佳做法。

最后，我自己是一名從事了多年開發的Java老程序員，辭職目前在做自己的Java私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的Java學習干貨，可以送給每一位喜歡Java的小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：01，即可免費獲取。

面我們從幾方面對兩款框架進行了對比評測，幫助你了解 Kendo UI 和 jQuery Mobile 在相同的業務領域里之間的差異。

依據支持的平臺市場的定位來區分

jQuery Mobile 和Kendo UI 在方向上是有一點不同的。Kendo UI 將它本身定位成為："當代web和手機app開發所需的綜合 HTML5/JavaScript 框架。Telerik's Kendo UI是每一位需要創建HTML5站點和手機apps的專業開發人員所需要的。如今，HTML/jQuery 開發人員的生產效率受困于將那些毫不相干的JavaScript 庫和插件構成一個"弗蘭肯斯坦"（ps:一個電影的人名）。Kendo UI 卻擁有全部：豐富的jQuery的窗體部件，簡單并且始終如一的程序接口、穩定可靠的數據源、驗證、國際化、MVVM框架、主題、模板等等一系列"。

jQuery Mobile將它本身定位為："jQuery Mobile:智能機和平板上觸摸體驗最好的Web Framework。一個統一的，以HTML5為基礎的面向所有流行的手機設備平臺的用戶接口系統，構建在穩定可靠的jQuery和jQuery UI 上。它的輕量級代碼逐漸增強并且擁有靈活自由，容易的主題設計...."。

Kendo UI

Kendo UI擴展支持了所有受歡迎的移動平臺上的頂級HTML桌面瀏覽器，支持全球幾乎所有受歡迎的移動平臺，而且是一次性交付的，不需要針對每個平臺都去構建一次。

jQuery Mobile

這個框架沒有將自己定位到任何解決HTML 框架的Web開發者所需要的戰略。強有力的支持所有有名的桌面瀏覽器和移動平臺，因此有時會產生更多問題。

用戶界面與視覺印象的不同

界面外觀是值得討論的重要方面，兩個框架在這一方面又是非常貼近。假如你需要與自己的應用程序保持平臺一致性，那么建議選用 jQuery Mobile，因為它使用了平臺無關的用戶界面。UI 中包含了大量的組件，它們被快速響應，并受到大量第三方的鼎力支持。

如果你從視覺美觀角度考慮這兩個框架，那么 Kendo UI 比 jQuery Mobile 超出更多，因為 Kendo UI 中有多種主題可以適合各種場景，而 jQuery Mobile 僅有一個主題，用于所有樣本塊。至于 Kendo UI，布局設計與 jQuery Mobile 非常相似，但只要你更仔細的觀察兩者，就可以分辨出不同。如果你希望從 jQuery Mobile 切換到 Kendo UI 或者反過來，是非常快的，你無須擔心，因為你可以很快就輕松地創建出復雜的用戶界面設計。

Kendo UI

擁有豐富的UI組件
在iOS中，外觀和感覺具有更好的原生體驗
如果你需要在不通的平臺上體現獨特的外觀的感覺，有許多主題供選擇
在所有的移動設備上均有很好的UI性能，在所有的動畫轉換上能產生原生的感覺。但性能會隨著布局的復雜度提升而有所降低。

jQuery Mobile

這個框架有相同的用戶接口，不區分你工作的平臺
UI看起來更像iOS
有許多內置組件，并且有大量的第三方插件
jQuery Mobile和Kendo UI相比，在不同的分辨率和CCS方面，有更好的頁面響應性
和Kendo UI一樣，你能很方便的修改UI
如果在性能方面比較jQuery Mobile和Kendo UI，有時應用程序將變得完全失效，因為jQuery在移動設備上會遇到許多麻煩。

贏家：在這個方面Kendo UI勝出，因為它有更好的移動性能

在易用性和可用性上的區別

我們在這方面區別二者的第一個觀點也將是一個非常接近的結果，因為 Kendo UI 和jQuery Mobile都是標記驅動的框架，他們都依賴于jQuery使其易于使用和發揮。很不幸的是，jQuery Mobile 并沒有優化以支持MVC(模型－視圖－控制器）架構，而 Kendo UI 則是建立在MVC架構上。

Kendo UI

雖然JavaScript語法與jQuery語法比較不同，但這個框架也易于使用
你可以修改widgets，還可用豐富的主題改變應用的外觀
支持 MVC

jQuery Mobile

JavaScript的語法和標準jQuery相似，使它易于無縫使用
雖然不支持MVC，但你能通過 Knockout.js 或 Backbone.js 來解決這個極佳的主題支持
你不需要任何IDE來構建移動Web應用程序

贏家： Kendo UI 在這方面勝出，因為它支持 MVC

綜上所述，jQuery Mobile更多提到移動端的使用，而Kendo UI是一個混合的 jQuery 用戶接口，jQuery Mobile則更傾向服務器端支持。在界面的豐富性和UI性能上，Kendo UI更勝一籌。在易用性上，jQuery Mobile和Kendo UI都基于jQuery，所以非常便于操作，但Kendo UI支持MVC架構，而jQuery Mobile不支持。

創： zzz

一、ajax的簡介

Ajax被認為是(Asynchronous(異步) JavaScript And Xml的縮寫）。現在，允許瀏覽器與服務器通信而無須刷新當前頁面的技術都被叫做Ajax.

同步是指：發送方發出數據后，等接收方發回響應以后才發下一個數據包的通訊方式。

異步是指：發送方發出數據后，不等接收方發回響應，接著發送下個數據包的通訊方式。

二、ajax的缺陷

AJAX大量使用了JavaScript和AJAX引擎，而這個取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程序必須測試針對各個瀏覽器的兼容性。

AJAX更新頁面內容的時候并沒有刷新整個頁面，因此，網頁的后退功能是失效的；有的用戶還經常搞不清楚現在的數據是舊的還是已經更新過的。這個就需要在明顯位置提醒用戶“數據已更新”。

對流媒體的支持沒有FLASH好。

一些手持設備（如手機、PDA等）現在還不能很好的支持Ajax。

三、ajax的四種type類型：

1、GET請求會向數據庫發索取數據的請求，從而來獲取信息，該請求就像數據庫的select操作一樣，只是用來查詢一下數據，不會修改、增加數據，不會影響資源的內容，即該請求不會產生副作用。無論進行多少次操作，結果都是一樣的。

2、與GET不同的是，PUT請求是向服務器端發送數據的，從而改變信息，該請求就像數據庫的update操作一樣，用來修改數據的內容，但是不會增加數據的種類等，也就是說無論進行多少次PUT操作，其結果并沒有不同。

3、POST請求同PUT請求類似，都是向服務器端發送數據的，但是該請求會改變數據的種類等資源，就像數據庫的insert操作一樣，會創建新的內容。幾乎目前所有的提交操作都是用POST請求的。

4、DELETE請求顧名思義，就是用來刪除某一個資源的，該請求就像數據庫的delete操作。

簡單的說就是

get理解為查詢 delete就是刪除 post就是新增 put就是更新數據

四、ajax的原生寫法

window.onload=function () {
 var oBtn=document.getElementById("btn1");
 oBtn.onclick=function () {
 //1.創建ajax對象
 //只兼容非ie6的瀏覽器，在ie6瀏覽器上運行會提示沒有被定義
 //var oAjax=new XMLHttpRequest();//這才是ajax實際的請求
 //alert(oAjax);
 //ie6瀏覽器下按照下面方法寫,但是在別的瀏覽器中不能用，會報錯。
 //var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
 //alert(oAjax);
 //鑒于上面出現的問題，可以采取下面的方法解決，用if判斷是否為IE6瀏覽器
 if (window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6瀏覽器。()里面加window的原因下面會有描述。
 {
 var oAjax=new XMLHttpRequest();//創建ajax對象
 }
 else//如果沒有XMLHttpRequest，那就是IE6瀏覽器
 {
 var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創建ajax對象
 }
 //2.連接服務器
 //open(方法、文件名、異步傳輸）
 //方法：
 //傳輸方式是get方式還是post方式。
 //文件名
 //告訴服務器要讀哪個文件
 //異步傳輸
 //異步：多件事一件一件的做
 //同步：多件事情一起進行
 //但是js里面的同步和異步和現實的同步異步相反。
 //同步：多件事一件一件的做
 //異步：多件事情一起進行
 //ajax天生是用來做異步的
 oAjax.open("GET", "a.txt?t='+new Date().getTime()", true);//加上t='+new Date().getTime()"的目的是為了消除緩存，每次的t的值不一樣。
 //3.發送請求
 oAjax.send();
 //4.接收返回
 //客戶端和服務器端有交互的時候會調用onreadystatechange
 oAjax.onreadystatechange=function () {
 //oAjax.readyState //瀏覽器和服務器，進行到哪一步了。
 //0->（未初始化）：還沒有調用 open() 方法。
 //1->（載入）：已調用 send() 方法，正在發送請求。
 //2->載入完成）：send() 方法完成，已收到全部響應內容。
 //3->（解析）：正在解析響應內容。
 //4->（完成）：響應內容解析完成，可以在客戶端調用。
 if (oAjax.readyState==4) {
 if (oAjax.status==200)//判斷是否成功,如果是200，就代表成功
 {
 alert("成功" + oAjax.responseText);//讀取a.txt文件成功就彈出成功。后面加上oAjax.responseText會輸出a.txt文本的內容
 }
 else {
 alert("失敗");
 }
 }
 };
 }
};

五、ajax的jquery寫法：

$.ajax({
 url: "http://www.microsoft.com", //請求的url地址
 dataType: "json", //返回格式為json
 async: true, //請求是否異步，默認為異步，這也是ajax重要特性
 data: {
 "id": "value"
 }, //參數值
 type: "GET", //請求方式
 processData: false, //對表單data數據是否進行序列化
 contentType: false, //dataType設置你收到服務器數據的格式
 xhr: function () { //ajax進度條
 var xhr=$.ajaxSettings.xhr();
 if (onprogress && xhr.upload) {
 xhr.upload.addEventListener("progress", progressBar, false);
 return xhr;
 }
 },
 beforeSend: function () {
 //請求前的處理
 },
 success: function (req) {
 //請求成功時處理
 },
 complete: function () {
 //請求完成的處理
 },
 error: function () {
 //請求出錯處理
 }
});

當然，jquery還有很多簡單變形的寫法。

在線咨詢

上一篇：「SpringCloud」（四十）微服務實現單點登錄
下一篇：JavaScript返回字符位置怎么寫？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

您的項目需求