整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
、返回頂部按鈕
通過使用jQuery中的animate 和scrollTop 方法，不用插件就可以創(chuàng)建一個滾動到頂部的簡單動畫：
// Back to top$('.top').click(function (e) {e.preventDefault();$('html, body').animate({scrollTop: 0}, 800);});<!-- Create an anchor tag --><a class="top" href="#">Back to top</a>
改變scrollTop 的值可以更改你想要放置滾動條的位置。所有你真正需要做的是在800毫秒的時間內(nèi)設(shè)置文檔主體的動畫，直到它滾動到文檔的頂部。
注：小心scrollTop的一些錯誤行為。
2、預(yù)加載圖像
如果你的網(wǎng)頁要使用大量開始不可見的（例如，懸停的）圖像，那么可以預(yù)加載這些圖像：
$.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、檢查圖像是否加載
有時為了繼續(xù)腳本，你可能需要檢查圖像是否全部加載完畢：
$('img').load(function () {console.log('image load successful');});
你也可以用ID或類替換<img>標(biāo)簽來檢查某個特定的圖像是否被加載。
4、自動修復(fù)破壞的圖像
逐個替換已經(jīng)破壞的圖像鏈接是非常痛苦的。不過，下面這段簡單的代碼可以幫助你：
$('img').on('error', function () {if(!$(this).hasClass('broken-image')) {$(this).prop('src', 'img/broken.png').addClass('broken-image');}});
即使沒有任何斷掉的鏈接，加上這一段代碼也不會讓你有任何損失。
5、懸停切換類
假設(shè)你希望當(dāng)用戶將鼠標(biāo)懸停在可點擊的元素上時，它會改變顏色。那么你可以在用戶懸停的時候添加類到元素中，反之則刪除類：
$('.btn').hover(function () {$(this).addClass('hover');}, function () {$(this).removeClass('hover');});
你只需要添加必要的CSS即可。更簡單的方法是使用toggleClass 方法：
$('.btn').hover(function () {$(this).toggleClass('hover');});
注：可能在這種情況下，CSS這種解決方案更快，不過了解這個方法很有必要。
6、禁用輸入字段
有時候，你可能想要禁用表格的提交按鈕或它的某一項文字輸入直到用戶執(zhí)行了特定操作（例如，勾選“我已閱讀相關(guān)條款”復(fù)選框）。添加 disabled屬性到你的輸入就可以在你想要的時候才啟用它：
$('input[type="submit"]').prop('disabled', true);
然后你只需要運行輸入的prop 方法就可以了，不過disabled 的值要設(shè)置為false：
$('input[type="submit"]').prop('disabled', false);
7、停止加載鏈接
有時候，你既不需要鏈接到某個特定的網(wǎng)頁，也不想要重新加載頁面——你可能希望鏈接做點別的事情，例如說觸發(fā)一些其他腳本。這就要在阻止默認動作上做文章了：
$('a.no-link').click(function (e) {e.preventDefault();});
8、淡入/滑動切換
滑動和淡入都是我們用jQuery做動畫的時候大量運用的東西。如果你只是想在用戶點擊之后展示一個元素的話，那么用fadeIn 和slideDown 方法就很完美。但是，如果你想要元素在第一次點擊的時候出現(xiàn)，然后在第二次點擊的時候消失的話，那么可以試試下面的代碼：
// Fade$('.btn').click(function () {$('.element').fadeToggle('slow');});// Toggle$('.btn').click(function () {$('.element').slideToggle('slow');});
9、簡單的手風(fēng)琴
這是一個可快速生成手風(fēng)琴的簡單方法：
// 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無論包含什么內(nèi)容都擁有相同的高度：
$('.div').css('min-height', $('.main-div').height());
設(shè)置 min-height，這意味著它可以比主div大但絕對不能比主div小。不過，還有一種更靈活的方法是遍歷一組元素，然后將高度設(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());});
11、在新標(biāo)簽頁/窗口打開外部鏈接
在一個新的瀏覽器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中無效。修復(fù)的時候要小心這個問題。
12、通過文本查找元素
通過使用jQuery中的contains() 選擇器，你可以找到元素內(nèi)容的文本。如果文本不存在，那就隱藏該元素：
var search=$('#search').val();$('div:not(:contains("' + search + '"))').hide();
13、在改變Visibility時觸發(fā)
當(dāng)用戶不再關(guān)注某個tab，或重新聚焦原來的那個tab上時，觸發(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!');}});
14、AJAX調(diào)用錯誤處理
當(dāng)Ajax調(diào)用返回404或500錯誤時，就執(zhí)行錯誤處理程序。如果沒有定義處理程序，其他的jQuery代碼或會就此罷工。定義一個全局的Ajax錯誤處理程序：
$(document).ajaxError(function (e, xhr, settings, error) {console.log(error);});
15、鏈式插件調(diào)用
jQuery允許“鏈式”插件的方法調(diào)用，以減輕反復(fù)查詢DOM并創(chuàng)建多個jQuery對象的過程。比方說，下面的代碼片段代表了你的插件方法調(diào)用：
$('#elem').show();$('#elem').html('bla');$('#elem').otherStuff();
通過使用鏈式，可以大大改善：
$('#elem').show().html('bla').otherStuff();
還有一種方法是在（前綴$）變量中高速緩存元素：
var $elem=$('#elem');$elem.hide();$elem.html('bla');$elem.otherStuff();
鏈式和高速緩存的方法都是jQuery中可以讓代碼變得更短和更快的代最佳做法。
最后，我自己是一名從事了多年開發(fā)的Java老程序員，辭職目前在做自己的Java私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的Java學(xué)習(xí)干貨，可以送給每一位喜歡Java的小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：01，即可免費獲取。
面我們從幾方面對兩款框架進行了對比評測，幫助你了解 Kendo UI 和 jQuery Mobile 在相同的業(yè)務(wù)領(lǐng)域里之間的差異。
依據(jù)支持的平臺市場的定位來區(qū)分
jQuery Mobile 和Kendo UI 在方向上是有一點不同的。Kendo UI 將它本身定位成為："當(dāng)代web和手機app開發(fā)所需的綜合 HTML5/JavaScript 框架。Telerik's Kendo UI是每一位需要創(chuàng)建HTML5站點和手機apps的專業(yè)開發(fā)人員所需要的。如今，HTML/jQuery 開發(fā)人員的生產(chǎn)效率受困于將那些毫不相干的JavaScript 庫和插件構(gòu)成一個"弗蘭肯斯坦"（ps:一個電影的人名）。Kendo UI 卻擁有全部：豐富的jQuery的窗體部件，簡單并且始終如一的程序接口、穩(wěn)定可靠的數(shù)據(jù)源、驗證、國際化、MVVM框架、主題、模板等等一系列"。
jQuery Mobile將它本身定位為："jQuery Mobile:智能機和平板上觸摸體驗最好的Web Framework。一個統(tǒng)一的，以HTML5為基礎(chǔ)的面向所有流行的手機設(shè)備平臺的用戶接口系統(tǒng)，構(gòu)建在穩(wěn)定可靠的jQuery和jQuery UI 上。它的輕量級代碼逐漸增強并且擁有靈活自由，容易的主題設(shè)計...."。
Kendo UI
Kendo UI擴展支持了所有受歡迎的移動平臺上的頂級HTML桌面瀏覽器，支持全球幾乎所有受歡迎的移動平臺，而且是一次性交付的，不需要針對每個平臺都去構(gòu)建一次。
jQuery Mobile
這個框架沒有將自己定位到任何解決HTML 框架的Web開發(fā)者所需要的戰(zhàn)略。強有力的支持所有有名的桌面瀏覽器和移動平臺，因此有時會產(chǎn)生更多問題。
用戶界面與視覺印象的不同
界面外觀是值得討論的重要方面，兩個框架在這一方面又是非常貼近。假如你需要與自己的應(yīng)用程序保持平臺一致性，那么建議選用 jQuery Mobile，因為它使用了平臺無關(guān)的用戶界面。UI 中包含了大量的組件，它們被快速響應(yīng)，并受到大量第三方的鼎力支持。
如果你從視覺美觀角度考慮這兩個框架，那么 Kendo UI 比 jQuery Mobile 超出更多，因為 Kendo UI 中有多種主題可以適合各種場景，而 jQuery Mobile 僅有一個主題，用于所有樣本塊。至于 Kendo UI，布局設(shè)計與 jQuery Mobile 非常相似，但只要你更仔細的觀察兩者，就可以分辨出不同。如果你希望從 jQuery Mobile 切換到 Kendo UI 或者反過來，是非常快的，你無須擔(dān)心，因為你可以很快就輕松地創(chuàng)建出復(fù)雜的用戶界面設(shè)計。
Kendo UI
擁有豐富的UI組件
在iOS中，外觀和感覺具有更好的原生體驗
如果你需要在不通的平臺上體現(xiàn)獨特的外觀的感覺，有許多主題供選擇
在所有的移動設(shè)備上均有很好的UI性能，在所有的動畫轉(zhuǎn)換上能產(chǎn)生原生的感覺。但性能會隨著布局的復(fù)雜度提升而有所降低。
jQuery Mobile
這個框架有相同的用戶接口，不區(qū)分你工作的平臺
UI看起來更像iOS
有許多內(nèi)置組件，并且有大量的第三方插件
jQuery Mobile和Kendo UI相比，在不同的分辨率和CCS方面，有更好的頁面響應(yīng)性
和Kendo UI一樣，你能很方便的修改UI
如果在性能方面比較jQuery Mobile和Kendo UI，有時應(yīng)用程序?qū)⒆兊猛耆В驗閖Query在移動設(shè)備上會遇到許多麻煩。
贏家：在這個方面Kendo UI勝出，因為它有更好的移動性能
在易用性和可用性上的區(qū)別
我們在這方面區(qū)別二者的第一個觀點也將是一個非常接近的結(jié)果，因為 Kendo UI 和jQuery Mobile都是標(biāo)記驅(qū)動的框架，他們都依賴于jQuery使其易于使用和發(fā)揮。很不幸的是，jQuery Mobile 并沒有優(yōu)化以支持MVC(模型－視圖－控制器）架構(gòu)，而 Kendo UI 則是建立在MVC架構(gòu)上。
Kendo UI
雖然JavaScript語法與jQuery語法比較不同，但這個框架也易于使用
你可以修改widgets，還可用豐富的主題改變應(yīng)用的外觀
支持 MVC
jQuery Mobile
JavaScript的語法和標(biāo)準jQuery相似，使它易于無縫使用
雖然不支持MVC，但你能通過 Knockout.js 或 Backbone.js 來解決這個極佳的主題支持
你不需要任何IDE來構(gòu)建移動Web應(yīng)用程序
贏家： Kendo UI 在這方面勝出，因為它支持 MVC
綜上所述，jQuery Mobile更多提到移動端的使用，而Kendo UI是一個混合的 jQuery 用戶接口，jQuery Mobile則更傾向服務(wù)器端支持。在界面的豐富性和UI性能上，Kendo UI更勝一籌。在易用性上，jQuery Mobile和Kendo UI都基于jQuery，所以非常便于操作，但Kendo UI支持MVC架構(gòu)，而jQuery Mobile不支持。
創(chuàng)： zzz
一、ajax的簡介
Ajax被認為是(Asynchronous(異步) JavaScript And Xml的縮寫）。現(xiàn)在，允許瀏覽器與服務(wù)器通信而無須刷新當(dāng)前頁面的技術(shù)都被叫做Ajax.
同步是指：發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應(yīng)以后才發(fā)下一個數(shù)據(jù)包的通訊方式。
異步是指：發(fā)送方發(fā)出數(shù)據(jù)后，不等接收方發(fā)回響應(yīng)，接著發(fā)送下個數(shù)據(jù)包的通訊方式 。
二、ajax的缺陷
AJAX大量使用了JavaScript和AJAX引擎，而這個取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程序必須測試針對各個瀏覽器的兼容性。
AJAX更新頁面內(nèi)容的時候并沒有刷新整個頁面，因此，網(wǎng)頁的后退功能是失效的；有的用戶還經(jīng)常搞不清楚現(xiàn)在的數(shù)據(jù)是舊的還是已經(jīng)更新過的。這個就需要在明顯位置提醒用戶“數(shù)據(jù)已更新”。
對流媒體的支持沒有FLASH好。
一些手持設(shè)備（如手機、PDA等）現(xiàn)在還不能很好的支持Ajax。
三、ajax的四種type類型：
1、GET請求會向數(shù)據(jù)庫發(fā)索取數(shù)據(jù)的請求，從而來獲取信息，該請求就像數(shù)據(jù)庫的select操作一樣，只是用來查詢一下數(shù)據(jù)，不會修改、增加數(shù)據(jù)，不會影響資源的內(nèi)容，即該請求不會產(chǎn)生副作用。無論進行多少次操作，結(jié)果都是一樣的。
2、與GET不同的是，PUT請求是向服務(wù)器端發(fā)送數(shù)據(jù)的，從而改變信息，該請求就像數(shù)據(jù)庫的update操作一樣，用來修改數(shù)據(jù)的內(nèi)容，但是不會增加數(shù)據(jù)的種類等，也就是說無論進行多少次PUT操作，其結(jié)果并沒有不同。
3、POST請求同PUT請求類似，都是向服務(wù)器端發(fā)送數(shù)據(jù)的，但是該請求會改變數(shù)據(jù)的種類等資源，就像數(shù)據(jù)庫的insert操作一樣，會創(chuàng)建新的內(nèi)容。幾乎目前所有的提交操作都是用POST請求的。
4、DELETE請求顧名思義，就是用來刪除某一個資源的，該請求就像數(shù)據(jù)庫的delete操作。
簡單的說就是
get理解為查詢 delete就是刪除 post就是新增 put就是更新數(shù)據(jù)
四、ajax的原生寫法
window.onload=function () {
var oBtn=document.getElementById("btn1");
oBtn.onclick=function () {
//1.創(chuàng)建ajax對象
//只兼容非ie6的瀏覽器，在ie6瀏覽器上運行會提示沒有被定義
//var oAjax=new XMLHttpRequest();//這才是ajax實際的請求
//alert(oAjax);
//ie6瀏覽器下按照下面方法寫,但是在別的瀏覽器中不能用，會報錯。
//var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
//alert(oAjax);
//鑒于上面出現(xiàn)的問題，可以采取下面的方法解決，用if判斷是否為IE6瀏覽器
if (window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6瀏覽器。()里面加window的原因下面會有描述。
{
var oAjax=new XMLHttpRequest();//創(chuàng)建ajax對象
}
else//如果沒有XMLHttpRequest，那就是IE6瀏覽器
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創(chuàng)建ajax對象
}
//2.連接服務(wù)器
//open(方法、文件名、異步傳輸）
//方法：
//傳輸方式是get方式還是post方式。
//文件名
//告訴服務(wù)器要讀哪個文件
//異步傳輸
//異步：多件事一件一件的做
//同步：多件事情一起進行
//但是js里面的同步和異步和現(xiàn)實的同步異步相反。
//同步：多件事一件一件的做
//異步：多件事情一起進行
//ajax天生是用來做異步的
oAjax.open("GET", "a.txt?t='+new Date().getTime()", true);//加上t='+new Date().getTime()"的目的是為了消除緩存，每次的t的值不一樣。
//3.發(fā)送請求
oAjax.send();
//4.接收返回
//客戶端和服務(wù)器端有交互的時候會調(diào)用onreadystatechange
oAjax.onreadystatechange=function () {
//oAjax.readyState //瀏覽器和服務(wù)器，進行到哪一步了。
//0->（未初始化）：還沒有調(diào)用 open() 方法。
//1->（載入）：已調(diào)用 send() 方法，正在發(fā)送請求。
//2->載入完成）：send() 方法完成，已收到全部響應(yīng)內(nèi)容。
//3->（解析）：正在解析響應(yīng)內(nèi)容。
//4->（完成）：響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用。
if (oAjax.readyState==4) {
if (oAjax.status==200)//判斷是否成功,如果是200，就代表成功
{
alert("成功" + oAjax.responseText);//讀取a.txt文件成功就彈出成功。后面加上oAjax.responseText會輸出a.txt文本的內(nèi)容
}
else {
alert("失敗");
}
}
};
}
};
五、ajax的jquery寫法：
$.ajax({
url: "http://www.microsoft.com", //請求的url地址
dataType: "json", //返回格式為json
async: true, //請求是否異步，默認為異步，這也是ajax重要特性
data: {
"id": "value"
}, //參數(shù)值
type: "GET", //請求方式
processData: false, //對表單data數(shù)據(jù)是否進行序列化
contentType: false, //dataType設(shè)置你收到服務(wù)器數(shù)據(jù)的格式
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 () {
//請求出錯處理
}
});
當(dāng)然，jquery還有很多簡單變形的寫法。
最后，我自己是一名從事了多年開發(fā)的Java老程序員，辭職目前在做自己的Java私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的Java學(xué)習(xí)干貨，可以送給每一位喜歡Java的小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：01，即可免費獲取。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
