整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：kevinylzhao，騰訊音樂前端開發工程師
瀏覽器緩存策略對于前端開發同學來說不陌生，大家都有一定的了解，但如果沒有系統的歸納總結，可能三言兩語很難說明白，甚至說錯，尤其在面試過程中感觸頗深，很多候選人對這類基礎知識竟然都是一知半解，說出幾個概念就沒了，所以重新歸納總結下，溫故而知新。
瀏覽器緩存一般分為兩類：強緩存（也稱本地緩存）和協商緩存（也稱弱緩存）。
瀏覽器發送請求前，會先去緩存里查看是否命中強緩存，如果命中，則直接從緩存中讀取資源，不會發送請求到服務器。否則，進入下一步。
當強緩存沒有命中時，瀏覽器一定會向服務器發起請求。服務器會根據 Request Header 中的一些字段來判斷是否命中協商緩存。如果命中，服務器會返回 304 響應，但是不會攜帶任何響應實體，只是告訴瀏覽器可以直接從瀏覽器緩存中獲取這個資源。如果本地緩存和協商緩存都沒有命中，則從直接從服務器加載資源。
按照本地緩存階段和協商緩存階段分類：
上述代碼的作用是告訴瀏覽器當前頁面不被緩存，事實上這種禁用緩存的形式用處很有限：
a. 僅有 IE 才能識別這段 meta 標簽含義，其它主流瀏覽器僅識別“Cache-Control: no-store”的 meta 標簽。
b. 在 IE 中識別到該 meta 標簽含義，并不一定會在請求字段加上 Pragma，但的確會讓當前頁面每次都發新請求（僅限頁面，頁面上的資源則不受影響）。
在 HTTP 請求和響應的消息報頭中，常見的與緩存有關的消息報頭有：
上圖中只是常用的消息報頭，下面來看下不同字段之間的關系和區別：
a. Last-Modified 標注的最后修改只能精確到秒級，如果某些文件在 1 秒鐘以內，被修改多次的話，它將不能準確標注文件的新鮮度；
b. 某些文件也許會周期性的更改，但是它的內容并不改變(僅僅改變的修改時間)，但 Last-Modified 卻改變了，導致文件沒法使用緩存；
c. 有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器時間不一致等情形。
瀏覽器可以在內存、硬盤中開辟一個空間用于保存請求資源副本。我們經常調試時在 DevTools Network 里看到 Memory Cache（內存緩存）和 Disk Cache（硬盤緩存），指的就是緩存所在的位置。請求一個資源時，會按照優先級（Service Worker -> Memory Cache -> Disk Cache -> Push Cache）依次查找緩存，如果命中則使用緩存，否則發起請求。這里先介紹 Memory Cache 和 Disk Cache。
200 from memory cache
表示不訪問服務器，直接從內存中讀取緩存。因為緩存的資源保存在內存中，所以讀取速度較快，但是關閉進程后，緩存資源也會隨之銷毀，一般來說，系統不會給內存分配較大的容量，因此內存緩存一般用于存儲較小文件。同時內存緩存在有時效性要求的場景下也很有用（比如瀏覽器的隱私模式）。
200 from disk cache
表示不訪問服務器，直接從硬盤中讀取緩存。與內存相比，硬盤的讀取速度相對較慢，但硬盤緩存持續的時間更長，關閉進程之后，緩存的資源仍然存在。由于硬盤的容量較大，因此一般用于存儲大文件。
下圖可清晰看出差別：
200 from prefetch cache
在 preload 或 prefetch 的資源加載時，兩者也是均存儲在 http cache，當資源加載完成后，如果資源是可以被緩存的，那么其被存儲在 http cache 中等待后續使用；如果資源不可被緩存，那么其在被使用前均存儲在 memory cache。
CDN Cache
以騰訊 CDN 為例：X-Cache-Lookup:Hit From MemCache 表示命中 CDN 節點的內存；X-Cache-Lookup:Hit From Disktank 表示命中 CDN 節點的磁盤；X-Cache-Lookup:Hit From Upstream 表示沒有命中 CDN。
從上圖能感受到整個流程，比如常見兩種刷新場景：
IndexedDB 就是瀏覽器提供的本地數據庫，能夠在客戶端存儲可觀數量的結構化數據，并且在這些數據上使用索引進行高性能檢索的 API。
異步 API 方法調用完后會立即返回，而不會阻塞調用線程。要異步訪問數據庫，要調用 window 對象 indexedDB 屬性的 open() 方法。該方法返回一個 IDBRequest 對象 (IDBOpenDBRequest)；異步操作通過在 IDBRequest 對象上觸發事件來和調用程序進行通信。
常用異步 API 如下：
在 16 年曾基于 IndexDB 做過一整套緩存策略，有不錯的優化效果：
SW 從 2014 年提出的草案到現在已經發展很成熟了，基于 SW 做離線緩存，讓用戶能夠進行離線體驗，消息推送體驗，離線緩存能力涉及到 Cache 和 CacheStorage 的概念，篇幅有限，不展開了。
localStorage 屬性允許你訪問一個 Document 源(origin)的對象 Storage 用于存儲當前源的數據，除非用戶人為清除(調用 localStorage api 或者清除瀏覽器數據)， 否則存儲在 localStorage 的數據將被長期保留。
sessionStorage 屬性允許你訪問一個 session Storage 對象，用于存儲當前會話的數據，存儲在 sessionStorage 里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。
通過了解瀏覽器各種緩存機制和存儲能力特點，結合業務制定合適的緩存策略，善用緩存是基本功，可以用于時常審查負責的業務，可能就會發現個別業務并沒有運用到位，共勉。
家好，我是 Echa。
今天來分享 50 個超實用的 Chrome 瀏覽器擴展！
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之后：
JSONVue 是一個JSON數據查看器，主要用來格式化JSON數據：
Library Sniffer 是一款給開發者使用的工具，能夠探測當前網頁所使用的類庫、框架和服務器環境，為開發者提供了方便。
Wappalyzer 擴展可以用來識別網站背后的底層技術。通過此擴展，可以了解特定應用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關 Web 服務器、編程語言、框架、內容管理系統、分析的信息工具、數據庫等。
WhatRuns 擴展程序只需單擊一下即可找到任何網站上使用的技術。
使用PerfectPixel插件可以將設計圖加載至網頁中，與已成型的網頁進行重疊對比，以幫助開發和設計人員規范網頁像素精度。這是一款可以優化前端頁面顯示的Chrome插件。
可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數據和數量，包括：應用程序緩存、緩存、Cookie、下載、文件系統、表單數據、歷史記錄、索引數據庫、本地存儲、插件數據、密碼和 WebSQL。
VisBug 是一個使用 JavaScript 構建的開源網頁設計調試工具，它可以讓用戶使用點擊式和拖放式界面來查看網站的元素。
Debug CSS 是一個幫助調試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：
CSS Viewer 是一款適用于 Web 開發人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網頁上的元素的 CSS 屬性。
EditThisCookie 是一個 cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。
React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發者工具中檢查 React 組件層次結構。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome瀏覽器的用于調試Vue.js應用程序的插件，可以使得開發人員大大提高調試效率。支持用戶對DOM結構數據結構進行解析和調試功能。
Augury 可以幫助開發人員在 Google Chrome 瀏覽器中調試和分析 Angular 應用程序。
Firebug Lite是火狐瀏覽器中著名的開發者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調試網頁內容，其包含了基本的HTML、CSS以及Javascript的調試功能，用于幫助網頁前端開發工程師快速地調試網頁，以便及時地找到網頁中的BUG并及時修復。
HTML Validator 在 Chrome 的開發者工具中添加了 HTML Validator。HTML 頁面的錯誤數通過瀏覽器狀態欄中的圖標顯示，詳細信息可以在瀏覽器的開發者工具中查看。
Web Developer 擴展為帶有各種 Web 開發工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉發、修改HTTP請求和結果、插入腳本等功能。
Window Resizer 主要用來調整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發人員在開發響應式網站/應用程序時測試多個屏幕。
此插件允許直接從瀏覽器發送跨域請求，而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭，并將 Access-Control-Allow-Origin 設置為 *.
ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網頁等中選擇顏色值。
CSS Peeper 用于檢查和復制元素樣式的優秀工具，使用 CSSPeeper 可以將鼠標懸停在網頁中的任何元素上，然后單擊鼠標即可復制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對網頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關閉該插件的功能，簡單實用。
Site Palette 用于生成調色板。設計師和前端開發人員必備的工具。可以通過這款插件輕松獲取網站的配色方案。
ColorZilla 是一款功能強大地提取網頁色彩的工具；也是個快速的對顏色進行調節的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產css顏色的代碼等。
當我們想查看網頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：
Fonts Ninja 可以從任何網站識別字體、添加書簽、試用并購買它們。
使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設置 12 個瀏覽器以實現快速訪問并最大限度地減少切換瀏覽器所花費的時間。
Toby 是一款 Chrome 新標簽頁工具，能夠將未讀的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。
該擴展提供了每日熱門開發者新聞，不需要再浪費時間搜索高質量的文章了。
Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。
The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內存和 CPU。
Session Buddy是一個可以幫助用戶查看、新增、編輯當前網站Session狀態的Chrome插件。用戶可以利用該插件保存網站當前的狀態以便在關閉Chrome或關閉計算機后恢復，從而達到節省內存的作用。
Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側顯示存儲庫的目錄結構，這有助于更好地理解文件夾結構。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。
ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發的世界上最值得信賴的可訪問性測試引擎 axe-core 驅動。使用 ax DevTools 在網站開發過程中查找并修復更多可訪問性問題。
OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。
此擴展可幫助 Web 開發人員分析網頁是否違反最佳實踐。
Check My Links 是一個鏈接檢查器，它可以抓取網頁并查找損壞的鏈接。
Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務器上的單個文檔或一組文檔。它會創建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優化所有設備上的網頁、提高網頁加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網頁的meta信息并得到SEO評估的谷歌瀏覽器插件。
Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：
AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網站上攔截廣告和彈窗。
番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效
Loom 可以用來快速錄制視頻，并且能夠將錄制的視頻上傳到指定的網頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復制到粘貼板中存儲。
GoFullPage 是一款全屏截圖插件（整個網頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權限。單擊擴展程序圖標，然后將其傳輸到屏幕快照的新標簽頁中，可以在其中將其下載為圖像或PDF，甚至只需拖動即可，保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。
svg-grabber 是一個快速預覽并從網站獲取所有 svg 的工具。可以用來預覽、下載和復制網站中所有 SVG 圖標和插圖的代碼。
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
復制代碼.aa{
background-image: url(arrow.png)no-repeat right center;
background-image:url(nav-bar.jpg);
background-repeat:no-repeat;
background-position:right center;
}
復制代碼overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
復制代碼我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個月整理了一份最適合2020年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
一蒙版出現禁止頁面滾動
1 window.onscroll=function(){
document.body.scrollTop = 0
};
2 $('html,body').animate({scrollTop:'0'},100);
$(".tan").bind('touchmove',function(e){ //禁止彈出框出來時進行滑動
e.preventDefault();
});
3 document.body.style.overflow='hidden';
若鍵盤點擊的話,就要加上:
var move=function(e){
e.preventDefault && e.preventDefault();
e.returnValue=false;
e.stopPropagation && e.stopPropagation();
return false;
}
var keyFunc=function(e){
if(37<=e.keyCode && e.keyCode<=40){
return move(e);
}
}
document.body.onkeydown=keyFunc;
復制代碼var button=$(':button');
button.on('click',function(){
button.css('background-color','white');
$(this).css('background-color','#FB3336');
})
復制代碼首先聲明一下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
然后
html,body {width:100%;height:100%;overflow-x:hidden;}
復制代碼1.<body scoll=no> 全禁止
2.<body style="overflow:scroll;overflow-y:hidden"> 禁止縱向滾動條
3.<body style="overflow:scroll;overflow-x:hidden"> 禁止縱向滾動條
4.overflow屬性: 檢索或設置當對象的內容超過其指定高度及寬度時如何顯示內容
5.overflow: auto; 在需要時內容會自動添加滾動條
6.overflow: scroll; 總是顯示滾動條
7.overflow-x: hidden; 禁止橫向的滾動條
8.overflow-y: scroll; 總是顯示縱向滾動條
復制代碼.mui-bar-nav{
-webkit-box-shadow: none;
box-shadow: none;
}
復制代碼$(".shanchu").click(function(){
$(this).parent().remove()
})
復制代碼需要對元素屬性的css的cursor進行設置
1、default 默認光標（通常是一個箭頭）
2、auto 默認。瀏覽器設置的光標。
3、crosshair 光標呈現為十字線。
4、pointer 光標呈現為指示鏈接的指針（一只手）
5、move 此光標指示某對象可被移動。
6、e-resize 此光標指示矩形框的邊緣可被向右（東）移動。
7、ne-resize 此光標指示矩形框的邊緣可被向上及向右移動（北/東）。
8、nw-resize 此光標指示矩形框的邊緣可被向上及向左移動（北/西）。
9、n-resize 此光標指示矩形框的邊緣可被向上（北）移動。
10、se-resize 此光標指示矩形框的邊緣可被向下及向右移動（南/東）。
11、sw-resize 此光標指示矩形框的邊緣可被向下及向左移動（南/西）。
12、s-resize 此光標指示矩形框的邊緣可被向下移動（南）。
13、w-resize 此光標指示矩形框的邊緣可被向左移動（西）。
14、text 此光標指示文本。
15、wait 此光標指示程序正忙（通常是一只表或沙漏）。
16、help 此光標指示可用的幫助（通常是一個問號或一個氣球）。
要實現鼠標移上去顯示手形、需要在你的提交按鈕上增加css cursor屬性，并將它的值設置為pointer;
如下：<input type="submit" name="submit" value="發布留言" class="subimt" onclick="display_alert()" style="cursor:pointer" />
復制代碼$("#test tbody").html("");
復制代碼var bv=$("#tabd tr").length-1;
$("#sp4").html(bv); //動態的獲取注數
復制代碼$(".jixuan input[type=button]").toggle(function(){
$(this).css("background-color","yellow");
$(this).css("cursor","pointer")
},function(){
$(this).css("background-color","white");
$(this).css("cursor","pointer");
})
復制代碼<input type="radio" name="gender" value="男" checked />
常用屬性迅美科技整理如下:
1.type="radio"
type屬性設置為radio,表示產生單一選擇的按鈕,讓用戶單擊選擇;
2.name="gender"
radio組件的名稱,name屬性值相同的radio組件會視為同一組radio組件,而同一組內只能有一個radio組件被選擇;
3.value="男"
radio組件的值,當表單被提交時,已選擇的radio組件的value值,就會被發送進行下一步處理, radio組件的value屬性設置的值
無法從外觀上看出,所以必須在radio組件旁邊添加文字,此處的文字只是讓用戶了解此組件的意思.
4.checked
設置radio組件為已選擇,同一組radio組件的name性情值必須要相同
復制代碼1、<?php include("header.html");?>
2、使用ssi技術頁面生成shtml文件，只用在頭部文件位置加入<!--#include file="header.htm" -->，
然后修改的時候只要修改header.htm文件就可以了。使用shtml的好處是對搜索引擎比較友好，需要處理的文件在服務器端完成的，
不會加重訪問者的瀏覽器負擔。
復制代碼if (window.location.hash.indexOf('#') >= 0) {
$('html,body').animate({
scrollTop: ($(window.location.hash).offset().top - 50) + "px"
},
300);
}; //主要修復評論定位不準確BUG
$('#comments a[href^=#][href!=#]').click(function() {
var target = document.getElementById(this.hash.slice(1));
if (!target) return;
var targetOffset = $(target).offset().top - 50;
$('html,body').animate({
scrollTop: targetOffset
},
300);
return false;
}); //主要修復評論定位不準確BUG
復制代碼能用css自然不想用js解決，因為在加載方面，css總是先加載，并且速度很快。
typecho的評論HTML結構是這樣的：
<li id="comment-277" class="comment-body comment-child comment-level-odd comment-even comment-by-author">
我們給comment-body加上css
.comment-body {
position: relative;
padding-top: 50px;
margin-top: -50px;
}
/*修復評論跳轉定位問題*/
完美兼容chrome和Firefox，其他瀏覽器未測試。
復制代碼.ovfHiden{overflow: hidden;height: 100%;}
$('.bzh .l1 a').click(function(){
$(".baok").show();
$(".baod").show();
$('html,body').addClass('ovfHiden');
});
$('.baod .img1').click(function(){
$('html,body').removeClass('ovfHiden');
$(".baok").hide();
$(".baod").hide();
})；
復制代碼$("#compute").click(function(){
$('input').live('click',function(){
//alert($('input:checked').length);
$("#show").html($('input:checked').length);
});
})；
復制代碼1.js
$('footer ul li').click(function(){
var index = $(this).index();
$(this).attr('class',"content").siblings('ul li').attr('class','ss');
$('.content').eq(index).show(200).siblings('.content').hide();
});
$('.ka ul li').click(function(){
var index = $(this).index();
$(this).attr('class',"zi").siblings('ul li').attr('class','ll');
$(this).parent().next().find(".zi").hide(). eq(index).show();
});
復制代碼2.html
<div class="carindex-cnt">
<ul class="nav">
<li>續保方案</li>
<li>熱銷方案</li>
<li>自定義方案</li>
</ul>
<div class="tabcontent">
<div class="zi">
<p class="altp">此方案為您上一年的投保記錄</p>
<ul class="xiur">
<li>
<label for="saveType2">交強險</label>
<div class="right-cnt">
<input type="text" class="coverage" disabled="disabled" value="不投保"/>
<ul class="datas" style="display: none;">
<li ref="1">投保</li>
<li ref="2">不投保</li>
</ul>
</div>
</li>
<li>
<label for="saveType2">商業險</label>
<div class="right-cnt">
<input type="text" class="coverage" disabled="disabled" value="不投保"/>
<ul class="datas" style="display: none;">
<li ref="1">投保</li>
<li ref="2">不投保</li>
</ul>
</div>
</li>
</ul>
<p class="title">商業主險</p>
<ul class="xiur">
<li>
<span>車輛損失險</span>
<label for="abatement0" class="labels">
<input class="mui-checkbox checkbox-green" type="checkbox" name="abatement" >
</label>
<div class="right-cnt">
<input type="text" class="coverage" disabled="disabled" value="不投保"/>
<ul class="datas" style="display: none;">
<li ref="1">投保</li>
<li ref="2">不投保</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="zi" style="display: none">
<ul class="xiur">
<li>
<label for="saveType2">交強險</label>
<div class="right-cnt">
<input type="text" class="coverage" disabled="disabled" value="不投保"/>
<ul class="datas" style="display: none;">
<li ref="1">投保</li>
<li ref="2">不投保</li>
</ul>
</div>
</li>
<li>
<label for="saveType2">商業險</label>
<div class="right-cnt">
<input type="text" class="coverage" disabled="disabled" value="不投保"/>
<ul class="datas" style="display: none;">
<li ref="1">投保</li>
<li ref="2">不投保</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
復制代碼3.js
$('.nav li').click(function () {
var index = $(this).index();
$(this).parent().next().find(".zi").hide().eq(index).show();
})
復制代碼$(function(){
$('.main button').click(function(){
if(($('.ip1').val() !="") && ($('.ip2').val() !="")){
$('.main button').css('background','#ff8100');
$('.main button').attr('disabled', true);
}else{
$('.main button').css('background','#D0D0D0');
$('.main button').attr('disabled', false);
}
})
})
復制代碼$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滾動條距離頂部的高度
var scrollHeight =$(document).height(); //當前頁面的總高度
var windowHeight = $(this).height(); //當前可視的頁面高度
if(scrollTop + windowHeight >= scrollHeight){ //距離頂部+當前高度 >=文檔總高度 即代表滑動到底部
alert("上拉加載，要在這調用啥方法？");
}else if(scrollTop<=0){ //滾動條距離頂部的高度小于等于0
alert("下拉刷新，要在這調用啥方法？");
}
}); ——>移動端
$(function(){
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
var positionValue = (scrollTop + windowHeight) - scrollHeight;
if (positionValue == 0) {
//do something
}
});
});
復制代碼var obj;
var startx;
var starty;
var overx;
var overy;
for(var i=1;i<=$("li").length;i++){ //為每個li標簽添加事件
obj = document.getElementById(i); //獲取this元素
evenlistener(obj); //調用evenlistener函數并將dom元素傳入，為該元素綁定事件
}
function evenlistener(obj){
obj.addEventListener('touchstart', function(event) { //touchstart事件,當鼠標點擊屏幕時觸發
startx = event.touches[0].clientX; //獲取當前點擊位置x坐標
starty = event.touches[0].clientY; //獲取當前點擊位置y坐標
$(".sdf").text("x:"+startx+",y:"+starty+"") //賦值到頁面顯示
} , false); //false參數,設置事件處理機制的優先順序，具體不多說，true優先false
obj.addEventListener('touchmove', function(event) { //touchmove事件,當鼠標在屏幕移動時觸發
overx = event.touches[0].clientX; //獲取當前點擊位置x坐標
overy = event.touches[0].clientY; //獲取當前點擊位置y坐標
var $this = $(this); //將dom對象轉化為jq對象，由于項目用到jquery，直接使用其animate方法
if(startx-overx>10){ //左滑動判斷，當左滑動的距離大于開始的距離10進入
$($this).animate({marginLeft:"-55px"},150); //實現左滑動效果
}else if(overx-startx>10){ //右滑動判斷，當右滑動的距離大于開始的距離10進入
$($this).animate({marginLeft:"0px"},150); //恢復
}
} , false);
obj.addEventListener('touchend', function(event) { //touchend事件,當鼠標離開屏幕時觸發，項目中無用到，舉例
$(".sf").text("x:"+overx+",y:"+overy+"")
} , false);
}
復制代碼var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if (Sys.ie){
$("*").css({fontFamily:"微軟雅黑"});
};
if (window.ActiveXObject){
Sys.ie = ua.match(/msie ([\d.]+)/)[1];
if (Sys.ie<=9){
alert('你目前的IE版本為'+Sys.ie+'版本太低，請升級！');
location.href="http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie";
}
}
var UA=navigator.userAgent;
if(is360se = UA.toLowerCase().indexOf('360se')>-1 ){
}else{
$("*").css({fontFamily:"微軟雅黑"});
}
360瀏覽器基于IE內核的，360急速瀏覽器內核基于谷歌的
復制代碼button,input type=button按鈕在IE和w3c，firefox瀏覽器區別：
1、當在IE瀏覽器下面時，button標簽按鈕，input標簽type屬性為button的按鈕是一樣的功能，不會對表單進行任何操作。
2、但是在W3C瀏覽器，如Firefox下就需要注意了，button標簽按鈕會提交表單，而input標簽type屬性為button不會對表單進行任何操作。
為button按鈕增加一個type=”button”屬性。
復制代碼<textarea name="" id="sign" maxlength=30 onKeyUp="keypress1()"></textarea>
<div class="tish">
<span id="number">0</span><span>/30</span>
</div>
function keypress1() //text輸入長度處理
{
var text1=document.getElementById("sign").value;
var len=text1.length;
var show=len;
document.getElementById("number").innerText=show;
}
復制代碼$('#ifrme').load(function(){
$('#ifrme').contents().find('.baod .img1').click(function(){
$(.ifrme').contents().find('.baod').hide();
$('.baok',window.parent.document).hide();
$('html,body',window.parent.document).removeClass('ovfHiden');
});
})
* .ifrme父頁面的ID為iframe的父級
.baod .img1是iframe頁面里的元素
復制代碼$('.baod .bt1').click(function(){
$('.baod').hide();
$('.edit',window.parent.document).hide();
$(".baok", window.parent.document).hide();
$('html,body',window.parent.document).removeClass('ovfHiden');
});
*.baod .bt1子頁面里的元素
window.parent.document父級窗口
.edit父級頁面元素
復制代碼$('.other .pg').click(function(){
$(this).toggleClass ("pots");
$('.below').slideToggle(300);
})
* .other .pg元素名稱
pots 點擊元素要切換的圖標（以background()形式的圖標）
.below要進行toggle的內容
復制代碼$(".btnDel").click(function() {
//$(".box-mask").css({"display":"block"});
$(".box-mask").fadeIn(500);
center($(".box"));
//載入彈出窗口上的按鈕事件
checkEvent($(this).parent(), $(".btnSure"), $(".btnCancel"));
}); *center 彈框名稱
function center(obj) {
//obj這個參數是彈出框的整個對象
var screenWidth = $(window).width(), screenHeigth = $(window).height();
//獲取屏幕寬高
var scollTop = $(document).scrollTop();
//當前窗口距離頁面頂部的距離
var objLeft = (screenWidth - obj.width()) / 2;
///彈出框距離左側距離
var objTop = (screenHeigth - obj.height()) / 2 + scollTop;
///彈出框距離頂部的距離
obj.css({
left:objLeft + "px",
top:objTop + "px"
});
obj.fadeIn(500);
//彈出框淡入
isOpen = 1;
//彈出框打開后這個變量置1 說明彈出框是打開裝填
//當窗口大小發生改變時
$(window).resize(function() {
//只有isOpen狀態下才執行
if (isOpen == 1) {
//重新獲取數據
screenWidth = $(window).width();
screenHeigth = $(window).height();
var scollTop = $(document).scrollTop();
objLeft = (screenWidth - obj.width()) / 2;
var objTop = (screenHeigth - obj.height()) / 2 + scollTop;
obj.css({
left:objLeft + "px",
top:objTop + "px"
});
obj.fadeIn(500);
}
});
//當滾動條發生改變的時候
$(window).scroll(function() {
if (isOpen == 1) {
//重新獲取數據
screenWidth = $(window).width();
screenHeigth = $(window).height();
var scollTop = $(document).scrollTop();
objLeft = (screenWidth - obj.width()) / 2;
var objTop = (screenHeigth - obj.height()) / 2 + scollTop;
obj.css({
left:objLeft + "px",
top:objTop + "px"
});
obj.fadeIn(500);
}
});
復制代碼css
:nth-child(odd){background-color:#FFE4C4;}奇數行
:nth-child(even){background-color:#F0F0F0;}偶數行
復制代碼js
$("table tr:nth-child(even)").css("background-color","#FFE4C4"); //設置偶數行的背景色
$("table tr:nth-child(odd)").css("background-color","#F0F0F0"); //設置奇數行的背景色
復制代碼jquery中的live()方法在jquery1.9及以上的版本中已被廢棄了，如果使用，會拋出TypeError: $(...).live is not a function錯誤。
解決方法：
之前的用法：
.live(events， function)
新方法：
.on(eventType, selector, function)
若selector不需要，可傳入null
例子1：
之前：
$('#mainmenu a').live('click', function)
之后：
$('#mainmenu').on('click', 'a', function)
例子2：
之前：
$('.myButton').live('click', function)
之后(應使用距離myButton最近的節點)：
$('#parentElement').on('click', ‘.myButton’, function)
若不知最近的節點，可使用如下的方法：
$('body').on('click', ‘.myButton’, function)
復制代碼iframe嵌入的滾動條可以用iframe里面頁面的大小覆蓋掉iframe的滾動條
復制代碼<a class="downs" style="display:'+display+'" onclick="downimg(\''+list[i].skuTieTu+'\')">下載</a>
復制代碼js方法
/**
* 圖片單獨下載
*/
function downimg(skuTieTu){
console.log(skuTieTu)
let src = skuTieTu;
var canvas = document.createElement('canvas');
var img = document.createElement('img');
img.onload = function(e) {
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, img.width, img.height);
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
canvas.toBlob((blob)=>{
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'zzsp';
link.click();
}, "image/jpeg");
}
img.setAttribute("crossOrigin",'Anonymous');
img.src = src;
復制代碼$.ajax({
type: "post",
data:
contentType:
url:
beforeSend: function () {
if(){
}else{
};
},
success: function (data) {
alert("保存失敗");
},
error: function (data) {
alert("保存成功");
}
});
復制代碼$.ajax({
type:"post",
url: API,
data: {
'a':'project.kujiale.plan.YongliaoUser'
},
dataType: "json",
async: true,
beforeSend: function () {
layer.load(1);
},
success: function(data) {
var item =data.data;
list = item
if(data.code==0){
layer.closeAll();
var url = '/module/designplan/searchplan/searchlist.jsp';
layer.open({
type: 2,
title: "搜索方案",
shadeClose: true,
shade: 0.8,
area: ['700px','500px'],
content: [url]
});
}else{
layer.msg(data.msg);
}
}
});
復制代碼jquery
$("a[id=search]").attr("data-search")
原生js
document.querySelector("a[id=search]").getAttribute("data-search") //根據當前元素的屬性獲取該元素其他屬性的值
document.querySelector("a[id=search]").text //根據當前屬性獲取該元素的值
document.querySelector("a[id=search]").innerText //根據當前屬性獲取該元素的值
復制代碼JSON.stringify(userList)
復制代碼layer.msg('分配成功',{time: 1000},function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}）
復制代碼window.location.reload();//刷新當前頁面
window.parent.location.reload();//刷新父級頁面
復制代碼download(data.data);
function downpdf(data){
var link = document.createElement('a');
link.href = data;
link.target = '_blank';
link.click();
delete link;
}
復制代碼const isYoung = age => age < 25;
const message = msg => "He is "+ msg;
function isPersonOld(age, isYoung, message) {
const returnMessage = isYoung(age)?message("young"):message("old");
return returnMessage;
}
// passing functions as an arguments
console.log(isPersonOld(13,isYoung,message))
// He is young
復制代碼遞歸是一種函數在滿足一定條件之前調用自身的技術。只要可能，最好使用遞歸而不是循環。你必須注意這一點，瀏覽器不能處理太多遞歸和拋出錯誤。
下面是一個演示遞歸的例子，在這個遞歸中，打印一個類似于樓梯的名稱。我們也可以使用for循環，但只要可能，我們更喜歡遞歸。
復制代碼function printMyName(name, count) {
if(count <= name.length) {
console.log(name.substring(0,count));
printMyName(name, ++count);
}
}
console.log(printMyName("Bhargav", 1));
/*
B
Bh
Bha
Bhar
Bharg
Bharga
Bhargav
*/
// withotu recursion
var name = "Bhargav"
var output = "";
for(let i=0; i<name.length; i++) {
output = output + name[i];
console.log(output);
}
作者：山水有輕音
鏈接：https://juejin.im/post/6873003814065012750
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
