收集了一些比較常用的JavaScript函數。

     1、字符串長度截取函數

     function cutstr(str,len){

           var temp,icount = 0,patrn = /[^x00-\xff]/,strre=" ";

           for(var i= 0;i<str.length;i++) {

                if (icount<len-1){

                    temp =str.substr(i,1);

                    if (patrn.exec(temp)==null){

                       icount =icount+1    

                  }else {

                     icount =icount+2

                 }

                    strre+=temp

              } else {

                   break;

               }

          }

           returen strre+"...";

      }

     2、替換全部

     String.prototype.replaceAll = function(s1,s2) {

            return this.replace(new RegExp(s1,"gm"),s2);

     }

     3、清除空格

     function trim = function() {

            var reExtraSpace = /^\s*(.*?)\s+$/;

            return this.replace(reExtraSpace,"$1");

     }

     4、清除左空格/右空格

      function  ltrim(s){

            return s.replace(/^(\s*| *)/,"");

      }

     function rtrim(s) {

           return s.replace(/(\s*| *)$/,"");

      }

      5、判斷是否以某個字符串開頭

      String.prototype.startWith = function(s) {

            return this.indexOf(s)==0;

      }

       6、判斷是否以某個字符串結束 

      String.prototype.endWith = function(s) {

            var d = this.length - s.length;

            return (d >= 0 && this.lastIndexOf(s)==d);

        }

        7、轉義HTML標簽

       function HtmlEncode(text) {

             return text.replace(/&/g,'&').replace(/\"/g,' " ').replace(/</g,'<').replace(/>/g,'>');

       }

        8、時間日期格式轉換

       Date.prototype.Format = function(formatStr){

             var str = formatStr;

             var week =['日','一','二','三','四','五','六']；

             str = str.replace(/yyyy|YYYY/,this.getFullYear());

             str = str.replace(/yy|YY,(this.getYear()%100)>9?(this.getYear()%100).toString():'0'+(this.getYear()%100));

             str = str.replace(/MM/,(this.getMonth()+1)>9?(this.getMonth()+1).toString():'0'+this.getMonth()+1));

             str = str.replace(/w|W/g,week[(this.getDay()];

             str = str.replace(/dd|DD/,(this.getDate()>9?this.getDate().toString():'0'+this.getDate());

             str = str.replace(/d|D/g,this.getDate());

             str = str.replace(/hh|HH/,this.getHours()>9?(this.getHours().toString():'0'+this.getHours());

             str = str.replace(/h|H/g,this.getHours());

             str = str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0'+this.getMinutes());

             str = str.replace(/m/g,this.getMinutes());

             str = str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0'+this.getgetSeconds());

             str = str.replace(/s|S/g,this.getSeconds());

            return str;

        }

        9、判斷是否為數字類型

        function isDigit (value){

             var patrn = /^[0-9]*$/;

             if (patrn.exec(value) == null || value=="" ) {

                   return false;  

             } else {

                  return true;

            }

        }

       10、設置cookie

       function setCookie(name,value,Hours){

              var d =new Date();

              var offset =8;

              var utc = d.getTime()+(d.getTimezoneOffset()*60000);

              var nd = utc+(3600000*offset);

              var exp = new Date(nd);

              exp.setTime(exp.getTime()+Hours*60*60*1000);

              document.cookie = name+"="+escape(value)+";domain=360doc.com;"

       }

       獲取cookie值

       function getCookie(name){

             var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));

             if (arr!=null){

               return unescape(arr[2]);

            }else {

             return null;

             }

       }

      11、加入收藏夾

       function AddFavorite(sURL,sTitle) {

            try{

               window.external.addFavorite(sURL,sTitle);

         }catch(e){

           try{

               window.sidebar.addPanel(sTitle,sURL,"");

            }catch(e){

                  alert("加入收藏夾失敗，請使用Ctrl+D進行添加");

             }

          }

       }

      12、設為首頁

      function setHomepage(){

             if(document.all){

               document.body.style.behavior='url(#default#homepage)';

               document.body.setHomePage('http://w3cboy.com')

         }else if (window.sidebar){

              if(window.netscape){

                 try{

                    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")

              }catch(e){

                 alert("該操作被瀏覽器拒絕，如果想啟用該功能，請在地址欄內輸入about:config，然后將

                 項 signed.applets.codebase_principal_support 值該為true");

             }

           }

               var prefs = Components.classes['@mozilla.org/preferences- service;1'].getService(Components.interfaces.nsIPrefBranch); 

               prefs.setCharPref('browser.startup.homepage', 'http://w3cboy.com');

         }

       }

       13、加載樣式文件

             function LoadStyle(url) {

                 try { 

                     document.createStyleSheet(url); 

                    } 

                   catch(e) { 

                      var cssLink = document.createElement('link');

                      cssLink.rel = 'stylesheet'; 

                      cssLink.type = 'text/css'; 

                      cssLink.href = url; 

                     var head = document.getElementsByTagName('head')[0]; 

                     head.appendChild(cssLink);

                    } 

                 }

            14、返回腳本內容

            function evalscript(s) { 

                   if(s.indexOf('<script') == -1) return s; 

                   var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;

                   var arr = []; 

                   while(arr = p.exec(s)) { 

                   var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i; 

                   var arr1 = []; 

                   arr1 = p1.exec(arr[0]); 

                   if(arr1) { 

                         appendscript(arr1[1], '', arr1[2], arr1[3]);

                    } else { 

                         p1 = /<script(.*?)>([^\x00]+?)<\/script>/i; 

                         arr1 = p1.exec(arr[0]); 

                         appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);

                          } 

                       } 

                      return s; 

                  }

            15、清除腳本內容

             function stripscript(s) { 

                      return s.replace(/<script.*?>.*?<\/script>/ig, ''); 

              }

              16、動態加載腳本文件

             function appendscript(src, text, reload, charset) {

                      var id = hash(src + text); 

                      if(!reload && in_array(id, evalscripts)) return; 

                      if(reload && $(id)) { $(id).parentNode.removeChild($(id));
                }

                evalscripts.push(id);

                var scriptNode = document.createElement("script"); 

                scriptNode.type = "text/javascript"; 

                scriptNode.id = id; 

                scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset); 

               try { 

                    if(src) { 

                           scriptNode.src = src; 

                           scriptNode.onloadDone = false; 

                           scriptNode.onload = function () { 

                                       scriptNode.onloadDone = true;

                                      JSLOADED[src] = 1; 

                            }; 

                         scriptNode.onreadystatechange = function () {

                         if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) { 

                                   scriptNode.onloadDone = true; JSLOADED[src] = 1; 

                                  } 

                               }; 

                          } else if(text){ 

                                scriptNode.text = text; 

                         } 

                         document.getElementsByTagName('head')[0].appendChild(scriptNode); 

                     } catch(e) {} 

                   }

           17、返回按ID檢索的元素對象
            function $(id) {

                    return !id ? null : document.getElementById(id); 

             }

           18、跨瀏覽器綁定事件

           function addEventSamp(obj,evt,fn){ 

                    if(!oTarget){

                           return;

                     } if (obj.addEventListener) { 

                              obj.addEventListener(evt, fn, false);

                         }else if(obj.attachEvent){ 

                             obj.attachEvent('on'+evt,fn); 

                           }else{

                               oTarget["on" + sEvtType] = fn; 

                            }

                    }

             19、跨瀏覽器刪除事件

                function delEvt(obj,evt,fn){ if(!obj){

                        return;

               } if(obj.addEventListener){

                      obj.addEventListener(evt,fn,false); 

                 }else if(oTarget.attachEvent){ 

                    obj.attachEvent("on" + evt,fn); 

                 }else{ 

                     obj["on" + evt] = fn; 

                  } 

               }

            20、元素添加on方法

            Element.prototype.on = Element.prototype.addEventListener;

             NodeList.prototype.on = function (event, fn) {、

                     []['forEach'].call(this, function (el) { 

                           el.on(event, fn); 

                      });

                      return this; 

               };

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1.背景介紹


我們為什么要選擇合適的網頁設計單位


隨著Web的發展，對新的解決方案的需求也會繼續增大，對網頁的要求更高。


網頁設計單位是涉及到我們布局的效果，使用不同的單位會對最終的demo，會有影響。


現在都是要求響應式設計，需要適配各種設備，電腦，手機，平板。如果單位不合適，可能在這個設備顯示良好，那個設備就會打亂布局。


所以需要我們選擇合適的單位來進行開發，設計。
2.知識剖析


1、px


px就是pixel的縮寫，意為像素。px就是設備或者圖片最小的一個點，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。


是我們網頁設計常用的單位，也是基本單位。通過px可以設置固定的布局或者元素大小，缺點是沒有彈性。


特點是1. em的值并不是固定的； 2. em會繼承父級元素的字體大小。




2、em


參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
特點是1. em的值并不是固定的； 2. em會繼承父級元素的字體大小。
3、rem


rem是相對于根元素html，這樣就意味著，我們只需要在根元素確定一個參考值，可以設計HTML為大小為10px，到時設置1.2rem就是12px.以此類推。


優點是，只需要設置根目錄的大小就可以把整個頁面的成比例的調好。


4、%


一般來說就是相對于父元素的，


1、對于普通定位元素就是我們理解的父元素 2、對于position: absolute;的元素是相對于已定位的父元素 3、對于position: fixed;的元素是相對于ViewPort（可視窗口），
5、vw


css3新單位，view width的簡寫，是指可視窗口的寬度。假如寬度是1200px的話。那10vw就是120px


舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。


6、vh


css3新單位，view height的簡寫，是指可視窗口的高度。假如高度是1200px的話。那10vh就是120px


舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。


7、vm


css3新單位，相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm 舉個例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。


兼容性太差 ，現在基本上沒人用，我試了一下Chrome就用不了。


3.常見問題


假如使用em來設置文字大小要注意什么？


4.解決方案


注意父元素的字體大小，因為em是根據父元素的大小來設置的。比如同樣是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px.


特別是在多重div嵌套里面更要注意。


5.擴展思考


css還有哪些長度單位？


in:寸


cm:厘米


mm:毫米


t:point，大約1/72寸


pc:pica，大約6pt，1/6寸


6.更多問題
1.pc pt ch一般用在什么場景?
這些我們網頁設計基本上用不到，在排版上會有用處。


2.如何使 1rem=10px
在設置HTML{font-size：62.5%；}即可


3.如果父元素沒有指定高度，那么子元素的百分比的高度是多少？
會按照子元素的實際高度，設置百分比已經沒有效果了。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

      關于UI界面的切圖命名規范，U妹覺得關鍵是在于團隊能夠有一個統一的規則，所以這里只介紹一種通用的命名規則，當然大家也可以根據自己的實際情況去制定，這里只提供一種方法與思路，僅供參考。

      規范的命名方式可以提高開發人員的的開發效率和整個開發團隊的友好合作。U妹覺得要盡可能用最少的字符而又能完整的表達標識符的含義。

      一、切圖命名英文縮寫的3個原則

      1.較短的單詞可以通過去掉“元音”形成縮寫

       2.較長的單詞可去單詞的頭部幾個字母形成縮寫

       3.還有一些約定成俗的英文單詞縮寫

      二、命名規則

          模塊_類別_功能_狀態.png

        U妹舉個例子：nav_button_search_default.png

        釋義為：導航_按鈕_搜索_默認.png

     啟動界面

        啟動圖片 default.png

         啟動logo default.png

         如：default.png\defoult@2x.png\default-568@2x.png

  登錄界面

   登錄背景    login_bg.png

         登錄logo   login_logo.png 

         輸入框       login_input.png 

         輸入框選中狀態       login_input_pre.png

         登錄按鈕       login_btn.png

         登錄按鈕選中狀態  login_btn_pre.png

     導航欄按鈕 (nav) 命名 

         nav_功能描述.png

         如：nav_menu.png\nav_menu_pre.png（同按鈕選中前后兩種狀態命名 ）

     按鈕命名（btn可重復使用按鈕)

        一般   normal   btn_xxx_normal.png

        點擊  highlight btn_xxx_highlight.png

        不能點擊  disabled  btn_xxx_disable.png

        按下  pressed btn_xxx_pressed.png

        選中  selected btn_xxx_selected.png 做為復數選擇出現機會不高

        btn_功能屬性或色彩均可.png

        如：btn_blue.png\btn_blue.9.png   藍色按鈕

    其他命名

       圖標 icon_xxx.png

       圖片 pic_xxx.png或是img_xxx.png

       照片 pho_xxx.png

       左側導航 命名 leftbar_功能描述.png

       如：leftbar_info.png\leftbar_info_pre.png   個人中心 

   底部選項卡按鈕（TabBar）

      命名 Tab_功能描述.png  

       如：tab_set.Png\nav_set_pre.png  設置 

   主頁命名

      命名 home_功能屬性＋描述.png

       如：home_menu_recommended.png  熱門推薦 

       ps：描述可用英文或拼間開頭字母組合等

   列表頁命名規則

      命名 List_功能屬性＋描述.png

       如：list_menu_collect.png  列表頁收藏按鈕

   UI文件命名規范常用詞

      常用狀態 

       正常 normat

       按下 pressed 

       選中 selected

       禁用 disabled

       已訪問 visited

       懸停 hover

    控件＆部件

       控件：較獨立的可操作界面元素 

        部件：描述屬于某控件一部分

        按鈕（可點） Btn

       圖標 Icon不可點、非點擊主體、圖案部件

       標記 Sign  列表

       List  菜單 Menu 

       視圖 View

       面板 Panel

       薄板 Sheet

       底部彈出菜單 欄 Bar 

       狀態欄 StatusBar

       導航欄 NaviBar

       標簽欄  TabBar

       工具欄 ToolBar

       切換開關 Switch

       滑動器 Slider

       單選框 Radio

       復選框 CheckBox

       背景 Bg

       蒙版、遮罩 Mask

       收藏 collect

       評論 comment

       廣告 ad

       時間 time

       音頻 audio

       視頻 viedio

       不喜歡 dilike

       用戶 user

       首頁 hone

       排名 ranked

       搜索 search

       標志 logo

       進度條 progress bar

       默認圖片 def_

       分隔圖片 seg_

       選擇 sel_

       關閉 close

       返回 back

       編輯 eidt

       內容 content

       左  中  右 left  center   right

       提示信息 msg

       個人資料 porfile

       彈出 pop

       刪除 delete

       下載 download

       登錄 login

       注冊 regsiter

       標題title

       注釋 note

       鏈接 link

       圖片 image（img)

       刷新 refresh

   常用補充描述

      頂部 Top 

       中間 Middle 

       底部 Bottom 

       第一 First 

       第二 Second

       最后 Last

       頁頭 Header

       頁腳  Footer 

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

原因

出于安全考慮，瀏覽器有一個同源策略。瀏覽器中，異步請求的地址與目標地址的協議、域名和端口號三者與當前有不同，就屬于跨域請求。

限制跨域訪問是瀏覽器的一個安全策略，因為如果沒有這個策略，那么就有被跨站攻擊的危險。比如，攻擊者在自己的網站A放置一個表單，這個表單發起DELETE請求，刪除某個用戶在B網站上的個人資料。如果沒有同源策略保護，那么在同一個瀏覽器內，如果用戶已經登錄了B網站，這個刪除的請求就會被接受，導致在用戶不知情的情況下自己在B網站中的資料被刪除。

解決方式

瀏覽器的同源策略提升了安全性，但是給需要在不同域名下開發的開發者帶來了跨域問題。

解決跨域的問題主要有： 
jsonp和cors。jsonp是利用 script 標簽可以跨域加載的特性而創造出來的一種非正式的跨域解決方案。在實際開發中，推薦使用cors，即在服務端返回時加入允許跨域的請求頭，允許指定域名的跨域訪問。

千萬要小心！這種直接加 * 號的做法是相當危險的，千萬別這么做！

response.addHeader("Access-Control-Allow-Origin", "*"); 


    

        1
    

/**
 * 使用Filter的方式解決跨域問題
 */ public class CorsFilter implements Filter { private static final List<String> ALLOW_ORIGINS = Config.getListString("allowOrigins", ","); private static final String REQUEST_OPTIONS = "OPTIONS"; @Override public void init(FilterConfig filterConfig) throws ServletException {
    } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        String orgHeader = request.getHeader(HttpHeaders.ORIGIN); if (orgHeader != null && ALLOW_ORIGINS.contains(orgHeader)) { // 允許的跨域的域名 response.addHeader("Access-Control-Allow-Origin", orgHeader); // 允許攜帶 cookies 等認證信息 response.addHeader("Access-Control-Allow-Credentials", "true"); // 允許跨域的方法 response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PATCH, PUT, HEAD"); // 允許跨域請求攜帶的請求頭 response.addHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With"); // 返回結果可以用于緩存的最長時間，單位是秒。-1表示禁用 response.addHeader("Access-Control-Max-Age", "3600"); // 跨域預檢請求，直接返回 if (REQUEST_OPTIONS.equalsIgnoreCase(request.getMethod())) { return;
            }
        }
        filterChain.doFilter(request, response);
    } @Override public void destroy() {

    }
} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

<filter> <filter-name>corsfilter</filter-name> <filter-class>com.bj58.crm.plus.filter.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>corsfilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> </filter-mapping> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

let axios = require("axios"); let qs = require("qs");
axios.defaults.withCredentials = true;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; function post(url, param) { return axios.post(url, qs.stringify(param))
} function get(url, param) { axios.get(url, {params: param})
}

export default {
  get,
  post
};

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

      web前端開發工程是是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過五年。web前端開發，是從網頁制作演變而來的，名稱上有很明顯的時代特征。隨著人們對用戶體驗的要求越來越高，前端開發的技術難度越來越大，web前端開發工程師這一職業終于從設計和制作不分的局面中獨立出來。

       早期的前端其實就是table布局，后來發展到所謂的div+css網站重構，再到現在的讓人眼花繚亂的各種各樣的新技術，web前端技術發展是非?？焖俚?，因此選擇了前端這個行業就意味著不停的學習吧。讓我們先看看張克軍繪制的前端知識體系結構：

      前端開發的核心是HTML+CSS+JavaScript。本質上他們構成了一個MVC框架，即HTML作為信息模型（Model），css控制樣式（View），JavaScript負責調度數據和實現某種展現邏輯（Controller）。

      HTML

      1.標簽的分類，

      2.標簽表示一個元素

      3.按性質分類：block-level 和 inline-level

      4.按語義分類：

            Headings:h1,h2,h3,h4,h5,h6

            paragraphs:p

            Text formatting:em,strong,sub,del,ins,small

            Lists:ul,li,ol,dl,dt,dd

            Tables:table,thead,tbody,tr,th,td

            Forms and input: form,input,select,textarea

            Others:div,span,a,img,<!---->

            HTML5:header,footer,article,section

       XHTML

       XHTML于2000年的1月26日成為W3C標準。W3C將XHTML定義為的HTML版本，XHTML將逐漸取代HTML。XHTML是通過把HTML和XML各自的長處加以結合形成的。XHTML語法規則如下：

      屬性名和標簽名稱必須小寫

      屬性值必須加引號

      屬性不能簡寫

      用ID屬性代替name屬性

      XHTML元素必須被正確地嵌套

      XHTML元素必須被關閉

     標簽語義化

     為表達語義而標記文檔，而不是為了樣式，結構良好的文檔可以向瀏覽器傳達盡可能多的語義，不論是瀏覽器位于掌上電腦還是時髦的桌面圖形瀏覽器。結構良好的文檔都能向用戶傳達可視化的語義即使是在老的瀏覽器，或是在被用戶關閉了CSS的現代瀏覽器中。同時結構良好的HTML代碼也有助于搜索引擎索引你的網站。

      不要使用table布局，table是用來表格顯示的。

      不要到處濫用div標簽，div是用來分塊用的。

      不要使用樣式標簽，如font，center，big，small，b，i，樣式可以用CSS來控制，b和i可以用strong和em來代替。

      不要使用換行標簽<br />和空格來控制樣式，請用CSS。

      盡量不要使用內聯CSS

      CSS

      1.css基礎知識

        層疊和繼承

        優先級

        盒模型

        定位

        浮動

     2.css進階

        css sprite

        瀏覽器兼容性

        IE haslayout和block format content

        css frameworks 

        css3

        css性能優化

        less and sass

        css sprite主要用于前端性能優化的一種技術，原理是通過多張背景圖合成在一張圖片上從而減少http請求，加快載入速度。

        瀏覽器兼容性

        絕大部分情況下，我們需要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本非常多，IE6，IE7，IE8，IE9，IE10，Chrome，Firefox，Safari。

        IE haslayout和block format content

        IE haslayout是一個Internet explore for Windows的私有概念，他決定了一個元素如何顯示以及約束其包含的內容、如何與其他元素交互和建立聯系、如何響應和傳遞應用程序事件、用戶事件等。而有些HTML元素則默認就有layout。目前只有IE6和IE7有這個概念。BFC是W3C css2.1規范中的一個概念，他決定了元素如何應對其內容進行定位。以及與其他元素的關系和相互作用。這個其實和瀏覽器的兼容性有關，因為決大部分的兼容性問題都是他們引起的。參考：css BFC和IE haslayout介紹。

        css framework

        css框架是一系列css文件的集合體，包含了基本的元素重置，頁面排版、網格布局、表單樣式，通用規則等代碼塊，用于簡化web前端開發的工作，提高工作效率。目前常見框架有：

       960 grid system

       blueprint css

       bluetrip

       minimum page

       還是一個比較出名的和特殊的框架是Twitter的bootstrap，bootstrap是快速開發web應用程序前端的工具包。它是一個css和HTML的集合，它使用了的瀏覽器技術，給你的web開發提供了時尚的版式，表單，buttons，表格，網格系統等等。它是基于less開發的，不支持IE6，在IE7和IE8里效果也不咋地。

       css3

       雖然css3還沒有正式成為標準，但是IE9+，Chrome，Firefox等現代瀏覽器都支持css3。css3提供了好多以前需要用JavaScript和切圖才能搞定的功能，目前主要功能更有：圓角、多背景、@font-face、動畫與漸變、漸變色、box陰影、RGBa-加入透明色、文字陰影。

       css性能優化

       css代碼是控制頁面顯示樣式與效果的最直接“工具”  ，但是在性能調優時他們通常會被web開發工程師所忽略，而事實上不規范的css會對頁面渲染的效率有嚴重影響，尤其是對于結構復雜的web2.0頁面，這種影響更是不可磨滅的。所以，寫出規范的、高性能的css代碼會極大地提高應用程序的效率。

       less and sass

       less和sass都是css預處理器，用來為css增加一些編輯的特性，無需考慮瀏覽器的兼容問題，例如你可以在css中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可以讓你的css更加簡潔。適應性更強，代碼更直觀等諸多好處。

        sass基于ruby開發，less既可以在客戶端運行，也可以借助node.js或者rhino在服務器端運行。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ECharts"> <meta name="author" content="kener.linfeng@gmail.com"> <title>ECharts · Example</title> <script src="./js/echarts.js"></script> </head> <body> <div id="main" class="main" style="width: 800px;height: 800px"></div> <script src="./echartsExample.js"></script> </body> </html> 

3.echartsExample.js

var myChart; var domMain = document.getElementById('main'); function requireCallback (ec) { echarts = ec; if (myChart && myChart.dispose) { myChart.dispose();
    } myChart = echarts.init(domMain); window.onresize = myChart.resize; myChart.setOption(option, true); window.onresize = myChart.resize;
} var option = { title : { text: '人物關系：喬布斯', subtext: '數據來自人立方', x:'right', y:'bottom'  }, tooltip : { trigger: 'item', formatter: '{a} : '  }, toolbox: { show : true, feature : { restore : {show: true}, magicType: {show: true, type: ['force', 'chord']}, saveAsImage : {show: true}
        }
    }, legend: { x: 'left', data:['家人','朋友']
    }, series : [
        { type:'force', name : "人物關系", ribbonType: false, categories : [
                { name: '人物'  },
                { name: '家人'  },
                { name:'朋友'  }
            ], itemStyle: { normal: { label: { show: true, textStyle: { color: '#333'  }
                    }, nodeStyle : { brushType : 'both', borderColor : 'rgba(255,215,0,0.4)', borderWidth : 1  }, linkStyle: { type: 'curve'  }
                }, emphasis: { label: { show: false  // textStyle: null      // 默認使用全局文本樣式，詳見TEXTSTYLE  }, nodeStyle : { //r: 30  }, linkStyle : {}
                }
            }, useWorker: false, minRadius : 15, maxRadius : 25, gravity: 1.1, scaling: 1.1, roam: 'move', nodes:[
                {category:0, name: '喬布斯', value : 10, label: '喬布斯\n（主要）'},
                {category:1, name: '麗薩-喬布斯',value : 2},
                {category:1, name: '保羅-喬布斯',value : 3},
                {category:1, name: '克拉拉-喬布斯',value : 3},
                {category:1, name: '勞倫-鮑威爾',value : 7},
                {category:2, name: '史蒂夫-沃茲尼艾克',value : 5},
                {category:2, name: '奧巴馬',value : 8},
                {category:2, name: '比爾-蓋茨',value : 9},
                {category:2, name: '喬納森-艾夫',value : 4},
                {category:2, name: '蒂姆-庫克',value : 4},
                {category:2, name: '龍-韋恩',value : 1},
            ], links : [
                {source : '麗薩-喬布斯', target : '喬布斯', weight : 1, name: '女兒'},
                {source : '保羅-喬布斯', target : '喬布斯', weight : 2, name: '父親'},
                {source : '克拉拉-喬布斯', target : '喬布斯', weight : 1, name: '母親'},
                {source : '勞倫-鮑威爾', target : '喬布斯', weight : 2},
                {source : '史蒂夫-沃茲尼艾克', target : '喬布斯', weight : 3, name: '合伙人'},
                {source : '奧巴馬', target : '喬布斯', weight : 1},
                {source : '比爾-蓋茨', target : '喬布斯', weight : 6, name: '競爭對手'},
                {source : '喬納森-艾夫', target : '喬布斯', weight : 1, name: '愛將'},
                {source : '蒂姆-庫克', target : '喬布斯', weight : 1},
                {source : '龍-韋恩', target : '喬布斯', weight : 1},
                {source : '克拉拉-喬布斯', target : '保羅-喬布斯', weight : 1},
                {source : '奧巴馬', target : '保羅-喬布斯', weight : 1},
                {source : '奧巴馬', target : '克拉拉-喬布斯', weight : 1},
                {source : '奧巴馬', target : '勞倫-鮑威爾', weight : 1},
                {source : '奧巴馬', target : '史蒂夫-沃茲尼艾克', weight : 1},
                {source : '比爾-蓋茨', target : '奧巴馬', weight : 6},
                {source : '比爾-蓋茨', target : '克拉拉-喬布斯', weight : 1},
                {source : '蒂姆-庫克', target : '奧巴馬', weight : 1}
            ]
        }
    ]
}; var echarts; require.config({ paths: { echarts: './js'  }
}); launchExample(); var isExampleLaunched; function launchExample() { if (isExampleLaunched) { return;
    } // 按需加載  isExampleLaunched = 1; require(
        [ 'echarts', 'echarts/chart/force', 'echarts/chart/chord',
        ], requireCallback  );
}

     話不多說，先上代碼：

     for(var j=0;j<10;J++){

         setTimeout(function(){console.log(j);},5000)

     }

     看到這三行代碼，你也許會不耐煩道：又要講閉包？要吐槽了好么？別急，讓我們先來思考一下，這段代碼在瀏覽器中的執行結果是什么？

     <!-- more -->

     甲：順序打印0到9？

     乙：這題我見過，打印十個10！

     哪個答案正確？

     執行結果顯示，瀏覽器打印出十個10，貌似乙對了，但是如果你足夠細心，你會發現幾個問題：為什么會循環打印十個10,而不是0到9？

     從結果來看，for循環執行完跳出之后，才開始執行setTimeout（所以j才等于10），為什么不是每次迭代都執行一次setTimeout呢？

1、為什么會循環打印十個10？

      許多人習慣用第二個問題中的執行結果來回答這個問題：“for循環執行完畢跳出之后才開始執行setTimeout，所以才打印了十個10”。這樣的答案，只能說是既應付了自己，又應付了別人。其實，要解答第一個問題，首先要解答第二個問題。

2、為什么不是每一次迭代都執行一次setTimeout？

     大家都知道，JavaScript在ES6出現以前，是沒有塊狀作用域的，這就意味著，在for循環中用var定義的變量j，其實是屬于全局的，那其實整個全局作用域中只有一個j，每次for循環都是更新這個j。

       那么現在的關鍵問題在于，為什么整個for循環會先于setTimeout執行，而不是我們正常理解的，一次迭代執行一次。這就涉及到了JavaScript的核心特性：單線程。

       JavaScript設計的初衷，是瀏覽器用來與用戶進行交互和DOM操作的，這就決定了它必須是單線程的。設想JavaScript同時有兩個線程，一個線程在DOM節點內添加內容，一個線程刪除該節點，瀏覽器就會出現混亂。所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成為了這門語言的核心特征，將來也不會改變。

      單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行下一個任務，如果前一個任務耗時很長，后一個任務就不得不一直等著。

      為了優化單線程的性能，JavaScript將任務分成兩種，一種是同步任務（synchronous），另一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務指的是，不進入主線程，而進入“任務隊列（task queue）”的任務，只用主線程中的同步任務執行完畢，異步任務才會進入執行隊列執行。只要主線程空了，就會去讀取“任務隊列”，這就是JavaScript的運作機制。這個過程會不斷重復。

       而setTimeout就被JavaScript定義為異步任務。每次for循環的迭代，都將setTimeout中的回調函數加入任務隊列等待執行。也就是說，只有同步任務中的for循環完全結束，主線程中才會去任務列表中找到尚未執行的十個setTimeout（十次迭代）回調函數并順序執行（先進先出）。而此時，j已經經過循環結束變成了10，所以此時主線程執行的，是十個一模一樣的打印i的回調函數，即打印十個10,。至此完美回答了第一和第二個問題，文章開頭的代碼與下面的代碼其實是等價的：

       for(var i=0;i<10;i++){

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

}

       小小的一個setTimeout，牽扯出了很多JavaScript的深層次問題，可見JavaScript還有許多地方是值得深入探究的。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

HTML條件注釋用法詮釋

注釋內容以樣式為例，如下：

1、支持所有IE瀏覽器

<!--[if IE]>
<link rel="stylesheet" href="all-ie-only.css" type="text/css"/>
<![endif]--> 


    

        1
    

    

        2
    

    

        3
    

<!--[if !IE]>
<link rel="stylesheet" href="not-ie.css" type="text/css"/>
<![endif]--> 


    

        1
    

    

        2
    

    

        3
    

<!--[if !IE]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]--> 


    

        1
    

    

        2
    

    

        3
    

<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]--> 


    

        1
    

    

        2
    

    

        3
    

<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]--> 


    

        1
    

    

        2
    

    

        3
    

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]--> 


    

        1
    

    

        2
    

    

        3
    

<!--[if gt IE 9]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]--> 


    

        1
    

    

        2
    

    

        3
    

<!--[if gte IE 10]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]--> 


    

        1
    

    

        2
    

    

        3
    

<!--[if (IE 6)|(IE 7)|(IE 8)]>
<link rel="stylesheet" type="text/css" href="ie6-7-8.css">
<![endif]--> 


    

        1
    

    

        2
    

    

        3
    

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1、首先理解一下“深拷貝”和“淺拷貝”的區別：

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1:獲取所有的<p>元素，對<p>元素繼續循環，因為獲取的是數組對象，給每個<p>元素添加行為事件

var items=document.getElementsByTagName("p"); for(var i=0;i<items.length;i++){
    items[i].onclick=function(){ //do something  }
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

var item=docuement.getElementById("tb"); var tbody=item.getElementsByTagName("tbody")[0]; var trs=tbody.getElementByTagName("tr"); for(var i=0;i<trs.length;i++){ if(i%2==0){
      trs[i].style.backgroundColor="#888";
   }
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

var btn=document.getElementById("btn");
btn.onclick=function(){ var array=new Array(); var items=document.getElementsByName("check"); for(i=0;i<items.length;i++){ if(items[i].checked){ array.push(items[i].value);
     }
  }
  alert(array.length);  
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

    

#id  $("#test")選取id為test的元素 .class $(".test")選取所有class為test的元素 element $("p")選取所有的<p>元素 $("div,span,p.myClass") 選取所有的<div>，<span>和擁有class為myClass的<p>標簽的一組元素
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

    

$("ancestor  descendant") $("div span")選取<div>里面所有的<span>元素 $("parent>child") $("div >span")選取<div>元素下元素名為<span>的子元素 $("prev+next") $(".one+div")選取class為one的下一個<div>同輩元素 $("#two~div")選取id為two的元素后面的所有<div>同輩元素

后面兩個用得少，因為在jQuery里可以用更加簡單的方法代替 $(".one+div") $(".one").next("div"); $("prev~div") $("#prev").nextAll("div");