js-day18

A.我今天學了什么

1.首字母轉化


       var str = "how are you"

       var reg = /(^|\s)(\w)/g

       // var s = str.match(reg)

      var s = str.replace(reg,function(m,p1,p2){ 
        return p1+p2.toUpperCase();
      })

       /*
    函數參數的規定:
  1. 第一個參數為每次匹配的全文本($&)。
  2. 中間參數為子表達式匹配字符串,個數不限.( $i (i:1-99))
  3. 倒數第二個參數為匹配文本字符串的匹配下標位置。
  4. 最后一個參數表示字符串本身。


2.事件委托

      <body>
          <script type="text/javascript">

            /*-------事件委托 (委派)----------
            
            利用事件冒泡在機制,給父級綁定事件,子集也會接收到 

            1、動態添加 li  也會接受父級d事件
            2、循環綁定事件 性能好

     var ul = document.getElementById("ul");
     var btn = document.getElementById("btn");
       //把本來應該給li注冊的事件,委托給ul,只需要給一個元素注冊事件
       //動態創建的li,也會執行預期的效果
     ul.addEventListener("click", test, false);     //注冊點擊事件
     btn.onclick = function () {     //點擊同樣會有alert
         var li = document.createElement("li");
         li.innerHTML = "我是新插入的li標簽";
         ul.appendChild(li);
     };
 //函數寫在注冊事件代碼之外,提高性能
     function test(e) {
         alert(e.target.innerText);
     }
 </script>

             */
 
<!-- ———————————————— -->
      <ul id="ul">
     <li>我是第1個li標簽</li>
     <li>我是第2個li標簽</li>
     <li>我是第3個li標簽</li>
     <li>我是第4個li標簽</li>
 </ul>
 <input type="button" value="insertLi" id="btn">

 </body>

3.鍵盤事件

      document.onkeydown=function(event){
            var e = event || window.event;
            // if(e && e.keyCode==27){ // 按 Esc 
            //     //要做的事情
            //   }
            // if(e && e.keyCode==113){ // 按 F2 
            //      //要做的事情
            //    }  
           //              
            // ctrlKey shiftKey altKey   返回true;
            // 
            if(e.ctrlKey && e.keyCode == 13){
                alert(1)
            }
            //   if(e && e.keyCode==38){ // enter 鍵
            //      alert(1)
            // }
            // 
            // alert(e.keyCode)
        }; 
        document.onclick = function (){
            window.location.hash = "#a1"
        }

4.分頁

    // var str = window.location.search.slice(1);

    // var s1 = str.replace(/=/,"\":\"")
    // // var s2 ="\"" + s1 + "\"";
    // // es6方法 不用字符串拼接  就 `--${變量}----`
    // var s2 =`{"${s1}"}`
    // // 字符串轉為對象
    // var obj = JSON.parse(s2)["a"]

      
     
       
            var lis = document.getElementsByTagName("li")
            var pageSize = 25;
            var page = Math.ceil(lis.length/pageSize)
              // 頁碼 
              for(var i =1;i<=page;i++){
                var a = document.createElement("a");
                a.innerHTML = i;
                a.href = "09-分頁.html?a="+i;
                document.getElementById("d").appendChild(a)            
            }
            // 獲取頁碼
             var PAGE = getPage("a");
             // 剛開始 頁面中沒有 location.search  需要做判斷
             if(!PAGE){
                PAGE = 1;
             }
             var start = (PAGE-1)*pageSize;  //(1-1)10  從0開始 

             var end = start+pageSize;  //(1)10  到10結束

            for(var i = start;i<end;i++){
                // 做判斷
                if(lis[i]){
                    lis[i].className = "show" 
                }
                
            }

            
       
          function getPage(PageName){
                // 剛開始沒有 ?  做判斷
                 if(location.search.indexOf("?")==-1){
                    return false;
                  }

                // 去除?
                var str = window.location.search.slice(1);
                // 去除 "=" 替換成 ":"
                var s1 = str.replace(/=/,"\":\"")
                // var s2 ="\"" + s1 + "\"";
                // es6方法 不用字符串拼接  就 `--${變量}----`
                var s2 =`{"${s1}"}`
                // 字符串轉為對象
                return JSON.parse(s2)[PageName]
        }

5.JSON.parse

       /*JSON.parse用于從一個字符串解析出對象,如*/   
    // var str = '{"ne":"張三"}'
    // var obj = JSON.parse(str)
    // JSON.parse("[1, 2, 3, 4, ]");
    // JSON.parse('{"foo" : 1, }');



    /*JSON.stringify()用于從一個對象解析出字符串,如*/
    // var  obj = {
    //     "ne":"張三",
    //     "age":20
    // }
    // var str = JSON.stringify(obj)
    // 
 
    // 可以解析 執行 字符串
    // eval()
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,501評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,673評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,610評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,939評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,668評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,004評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,001評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,173評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,705評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,426評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,656評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,139評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,833評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,247評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,580評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,371評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,621評論 2 380

推薦閱讀更多精彩內容