初級JS

唐太宗  李世民  殺了大哥 和弟弟  登上的皇位    一我的當皇帝

排他性是指一種物品具備能夠阻止其餘人使用該物品的特性。

排他性思想：

在程序中但凡是遇到只讓本身怎麼樣，不讓別人怎麼樣的效果，都要用到排他性思想。而排他性思想每每須要使用到for循環進行羣控制。

步驟：必定是先排他，再控制本身。

排他思想：  首先先清除全部人，  再剩下我本身。

<script>

    var btns = document.getElementsByTagName("button");

    for(var i=0;i<btns.length;i++) {  // 遍歷全部的按鈕

        btns[i].onclick = function() {

            // 當咱們每次點擊， 首先先清除全部人

            for(var j=0;j<btns.length;j++) {

                btns[j].className = "";

            }

            // 剩下我本身

            this.className = "current";

        }

    }

</script>

1.1.1    js 自定義屬性

var  index = 10;  變量

var arr = [];

arr.index = 20;   //  自定義屬性

本質上，index   和  arr.index  他們 同樣 的， 都是變量 。

index   變量      miss   女士   自由自在的 

arr.index  屬性     mrs   夫人    index  屬於arr  只有在arr 纔可使用

 

1.2   tab欄切換

 咱們要千方百計的知道，當前盒子的索引號

1  <script>

2      var btns = document.getElementsByTagName("button");   // 獲得了全部的btn

3      var lis = document.getElementsByTagName("li");   // 獲得了全部的btn

4      // alert(lis.length);

5      for(var i=0; i<btns.length;i++) {   // 遍歷按鈕

6           // 給每一個小按鈕指定一個 索引號

7           btns[i].index = i;

8           btns[i].onclick = function() {

9               // alert(this.index);    索引號 按鈕

10              //  清除全部人，剩下我本身   li 也是所有都隱藏  剩下 當前li

11               for(var j = 0;j < btns.length; j++)

12               {

13                   btns[j].className = "";

14                   lis[j].className = "";

15               }

16               this.className = "current";    //  單擊的對象

17               lis[this.index].className = "show";   // 留下當前的一個  li  this.index

18           }

19      }

20  </script>

1.3   switch 多分支語句

這個語句和 if   else if  else  if  .....  相等的，可是switch 的效率更好，優先考慮使用。 break;

語法格式：

1    switch(參數) {

2        case 「參數1」:

3         語句;

4         break;    //  退出的意思

5         case 「參數2」:

6         語句;

7         break;    //  退出的意思

8         .....

9         default:    // 默認的    能夠寫也能夠不寫

10          語句;

11      }

最終，就是從多個 case 裏面選擇一個來執行， 由於有break 退出switch，所以只能執行一次。效率更高。  若是case參數裏面都沒有，就 執行 default 語句。

注意：  裏面的漢字必需要加引號哦！

1.4   選擇事件 （下拉列表）

下拉列表 不一樣於其餘的表單，由於他有多個值，  可是隻能選擇一個 ，

這是時候咱們用  選擇改變事件   onchange      change 改變     

 select.onchange = function() {}      

後面的屏幕縮放事件也是用onchange 

1.5   頁面加載事件

window.onload 是等到頁面徹底加載完成纔會觸發事件，頁面徹底下載後,頁面中全部的DOM元素都是能夠訪問的.這種方式有一個很大的優勢:不用考慮DOM元素加載的順序。

<script>

    window.onload = function() {

        var demo = document.getElementById("demo");

        demo.style.backgroundColor = "red";

    }

</script>

後面追加 push  

push 推  送     從後面推   

push()  從後面追加 內容  

push() 方法可向數組的末尾添加一個或多個元素，並返回新的數組長度。

var arr = [1,3,5,7];   // 原數組

arr.push(9);  //把 9 添加 arr 的最後面

console.log(arr);   //  13579

a.push(b)      把 b  添加到 a 的最後面       同時 a 變了 

<script>

    var arr = [1,3,5,7];   // 原數組

    arr.push(9);  //把 9 添加 arr 的最後面

    console.log(arr);   //  13579

    console.log(arr.push(11));  // 返回的是數組的長度 6 

    console.log(arr);  // 1.3.5.7.9.11

</script>

 

從前面加內容

unshift() 方法可向數組的開頭添加一個或更多元素，並返回數組新的長度

// unshift 組

var  arr1 = ["a","b","c"];

arr1.unshift("你好");

console.log(arr1);  // ["你好", "a", "b", "c"]

console.log(arr1.unshift("今天"));  // 返回數組的長度  5

 

刪除數組內容

咱們能夠添加內容，也能夠刪除內容。

pop()   移除最後一個元素

   pop()  移除最後一個元素    和 push 正好相反   

   返回值 是 返回最後一個值 

   並且它每次，只刪除一個，所以他的括號裏面是沒有參數的。

   返回的是，刪除的最後一個元素

#ff0000      rgb

// pop()  刪除最後一個元素   而且返回最後一個值

var arrpop = [1,2,3,4,5];

arrpop.pop();  // 刪除一次  把 5刪掉了   [1,2,3,4]

console.log(arrpop);  // [1,2,3,4]

console.log(arrpop.pop());  // 把 4 刪掉   剩下  [1,2,3]  返回的是 4

console.log(arrpop);  // [1,2,3]

 

  刪除第一個元素 shift()

 shift  和  unshift 正好相反   

 shift  刪除第一個                    上檔

 unshift 從第一個開始添加

 shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值

 // shift 刪除第一個元素    而且返回第一個值

var arrshift = ["a","b","c"];

console.log(arrshift.shift()); //  a

console.log(arrshift);  // [b,c]

arrshift.shift();  // 吧b  刪掉了， 而且返回 b

console.log(arrshift);  // 只剩下一個c

 

  添加     a.push(b)   把b 推到a 的最後面      unshift 前面加

  pop()   後面刪    shift()   括號裏面沒有 參數  只操做一個

鏈接數組

a.concat(b)     把 a數組和b數組鏈接   併成一個新數組。  

   concat()

 該方法用於鏈接兩個或多個數組。它不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本 

   // 鏈接數組

 var aa = [1,2,3];

 var bb = ["a","b","c"];

 console.log(aa.concat(bb));  // 新的數組 [1, 2, 3, "a", "b", "c"]

 console.log(aa);

 console.log(bb);

join() 將數組轉換爲字符串

做用是將數組各個元素是經過指定的分隔符進行鏈接成爲一個字符串。

語法

arrayObject.join(separator)

數組名.join(「分隔符」)

數組轉換爲字符串

參數 separator 可選。指定要使用的分隔符。若是省略該參數，則使用逗號做爲分隔符。

// join  將數組轉換爲字符串

 var arrjoin = ["2015","12","2"];

 console.log(arrjoin.join("-"));  //  2015-12-2   字符串

 console.log(arrjoin.join("+")); //  2015+12+2

 console.log(arrjoin.join("*")); //  2015*12*2

 console.log(arrjoin);  //  結果是原數組   不影響本數組

split() 將字符串轉換爲數組

split() 方法用於把一個字符串分割成字符串數組

語法

stringObject.split(separator,howmany)

字符串.split(「字符串的分隔符」，[最大長度]);

參數 separator 可選。指定要使用的分隔符。若是省略該參數，則使用逗號做爲分隔符。

howmany 可選。該參數可指定返回的數組的最大長度

// split 將字符串轉換爲數組

var txt = "2015-12-2";

var text = "中國 山東 威海 小漁村";

console.log(txt.split("-"));

console.log(text.split(" "));

  

JavaScript 組成

1. 核心（ECMAScript）          

     描述了JS的語法和基本對象。好比變量區分大小寫等

2. 文檔對象模型（DOM）    重點

     處理網頁內容的方法和接口    好比怎麼獲得某個表單的值 怎麼去關閉某個div

3. 瀏覽器對象模型（BOM）

     與瀏覽器交互的方法和接口     前進， 後退  彈出窗口   跳轉頁面

 ECMA  歐洲計算機制造商協會 

DOM  (document object model) 文檔對象模型

樓房 蓋房子以前 先建模  。    dom  模型  

DOM 爲文檔提供告終構化表示，並定義瞭如何經過腳原本訪問文檔結構。

目的其實就是爲了能讓js操做html元素而制定的一個規範。

DOM樹的根統一爲文檔根—  document 

 

節點（Node）

由結構圖中咱們能夠看到，整個文檔就是一個文檔節點。

而每個HMTL標籤都是一個元素節點。

標籤中的文字則是文字節點。

標籤的屬性是屬性節點。

一切都是節點……

咱們用的最多的就是 元素節點    

 元素 就是 標籤  就是標記   就是 div  span  a  .....

 

獲取節點

好比頁面中有不少的div  span 這些標籤  元素  咱們怎麼獲得這些 元素節點呢？  

 全部的div 

 這裏有個 div  ID  爲  demo的，咱們怎麼得到 div 元素節點？

咱們前面學過： 

1. 1.   document.getElementById(「demo」)     id 爲標記的    #demo 
2. 2.   document.getElementsByTagName(「div」)   全部的div    div
3. 3.   document.getElementsByClassName(「one」)  全部類名爲one 的   .one

 得到類名這個語法 ie678是不支持的。 咱們只能本身去寫兼容性的寫法。

 

  第一層寫法：

12         //  分兩部分 ，首先是瀏覽器支持de

13      function getClassName(classname) {   // 形參

14          //  先看看瀏覽器支不支持

15          if(document.getElementsByClassName) {   // 若是支持這個寫法

16              return document.getElementsByClassName(classname);  // 直接返回全部元素

17          }

18          // 下面的語句是ie678 執行

19          // 核心思想   把全部的標籤都取過來， 而後一個一個的判斷當前元素的類名是否是  classname

20          //是就留下，不是 就走開

21          // alert(11);

22          var arr = [];  //數組用來存儲知足條件的 元素

23          var dom = document.getElementsByTagName("*");  // 把全部的標籤都取過來 *  全部的

24          for(var i=0;i<dom.length;i++) {  // 開始遍歷

25              if(dom[i].className == classname) {    // 判斷

26                  arr.push(dom[i]);  // 往  數組後面追加

27              }

28          }

29          return arr;  // 返回總的數組

30      }

 

第二層寫法： 

31     //  分兩部分 ，首先是瀏覽器支持de

32      function getClassName(classname) {   // 形參

33          //  先看看瀏覽器支不支持

34          if(document.getElementsByClassName) {   // 若是支持這個寫法

35              return document.getElementsByClassName(classname);  // 直接返回全部元素

36          }

37          // 下面的語句是ie678 執行

38          // 核心思想   把全部的標籤都取過來， 而後一個一個的判斷當前元素的類名是否是  classname

39          //是就留下，不是 就走開

40          // alert(11);

41          var arr = [];  //數組用來存儲知足條件的 元素

42          var dom = document.getElementsByTagName("*");  // 把全部的標籤都取過來 *  全部的

43          // 去過全部的標籤以後， 把 每個標籤的類名 （字符串） 轉換爲數組 ， 只有數組才能夠遍歷

44          for(var i=0;i<dom.length;i++) {  // 遍歷每個標籤

45              // 把每個標籤的類名 轉換爲數組

46              var arrName = dom[i].className.split(" "); // "demo nav test"   = ["demo","nav","test"];

47              // var arrName = ["demo","nav","test"];  // 用來存儲每個 類名的數組

48              for(var j=0;j<arrName.length;j++) {  // 遍歷 arrname

49                  if(arrName[j] == classname) { // 判斷

50                      arr.push(dom[i]); // 把當前知足條件的元素  給 arr

51                  }

52              }

53          }

54          return arr;  // 返回總的數組

55      }

節點的訪問

  DOM的節點並非孤立的，所以能夠經過DOM節點之間的相對關係對它們進行訪問    

 

 

 

 

 

 

父級   兄弟    孩子       

 父級  parentNode 

這裏特指  父親  的意思  ， 親的父親

就是當前元素的上一級。    就是親爹   爺爺不算 。

 

<script>

    window.onload = function() {

        var x = document.getElementById("x");   // 事件源

        x.onclick = function() {

            this.parentNode.style.display = "none";  // 關閉的是他的爸爸

        }

    }

</script>

 

 兄弟節點

nextSibling           下一個兄弟     ie 678 寫法  

nextElementSibling

previousSibling            上一個兄弟    ie678 

previousElementSibling      谷歌 火狐等  

 

nextSibling 下一個兄弟的意思， 再ie678裏面是正常的，可是在谷歌，火狐瀏覽器裏面，默認的下一個兄弟， 是空格或者是換行。 

因此，再谷歌等瀏覽器裏面，咱們使用： nextElementSibling   這個單詞有效的避免了 下一個兄弟是換行等問題。

綜合兼容性的寫法：     || 

56    <script>

57      var two = document.getElementById("two");

58      // two.nextSibling.style.backgroundColor = "red";

59      var next = two.nextElementSibling || two.nextSibling;

60      next.style.backgroundColor = "purple";

61  </script>

  注意： 必定先寫  nextElementSibling  ，由於谷歌認識nextSibling，可是谷歌會報錯，因此咱們優先執行 nextElementSibling 。

 第一個和最後一個孩子

 第一個和最後最後一個孩子很特殊的。  站在父親的角度來考慮問題，這裏的孩子，其實特指 兒子。 親兒子 

 firstChild    第一個孩子        lastChild  最後一個孩子

 以上 是   ie 6 7 8

firstElementChild    谷歌和火狐等瀏覽器的寫法。

兼容性的寫法：

<script>

  var father = document.getElementById("father");

    // father.firstChild.style.backgroundColor = "gray";

    var first = father.firstElementChild || father.firstChild;

    var last = father.lastElementChild || father.lastChild;

    first.style.backgroundColor = "gray";

    last.style.backgroundColor = "gray";

</script>

 

  孩子們

咱們想要獲得全部的孩子 ， 全部的， 親生兒子 。  其餘的孫子輩的不算。

1. 1.  childNodes    獲得全部的親孩子節點      嫡出      w3c 推薦使用的  。

      可是會有一些問題。    再谷歌等瀏覽器裏面， 會把 折行 也看作是一個孩子。

  

     這樣作，是不能夠的，  由於咱們獲得它的全部孩子的目的是爲了遍歷， 咱們得想一個辦法？

     nodetype 這個屬性的做用是用來檢測 元素節點類型的。   

      <a href=」http://www.biadu.com」 >  百度 </a> 

 其中 a  咱們成爲  元素節點       href  成爲屬性節點    百度 文字節點

      平時咱們只須要操做元素節點。

 

      nodeType  ==  1  表示 的是 元素節點      記住   元素就是標籤

      nodeType  ==  2  表示是屬性節點   瞭解

      nodeType  ==  3  是文本節點   瞭解

<script>

    var demo = document.getElementById("demo");

    // alert(demo.childNodes.length);

    var nodes = demo.childNodes;  // 獲取了全部的孩子節點  包含 div  包含 換行等等 7

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

        if(nodes[i].nodeType == 1) {

            nodes[i].style.backgroundColor = "red";

        }

    }

</script>

 

2. children         這個是庶出       ie 發明的   咱們如今用最多的。 幾乎沒有兼容性 。  其餘瀏覽器都支持

     children  得到是某個盒子裏面全部的 元素節點。   提倡使用

  只得到標籤。

     由於children  再 ie678 裏面  包含註釋節點    要注意一下。 能夠避免開的。

    <script>

    var demo = document.getElementById("demo");

    // alert(demo.children.length);

    var child = demo.children;   // demo 裏面全部的 標籤

    alert(child.length);

    child[0].style.backgroundColor = "red";   // 第一個孩子

    child[child.length-1].style.backgroundColor = "red";   // 最後一個孩子

</script>

 

DOM節點操做  ★★★

咱們的元素節點不少是動態生成的。

好比 ：  輪播圖 下面的小圓點 ，是根據 圖片的張數動態生成的。

DOM節點操做 ， 添加 刪除   克隆     建立  .....

上面咱們講的都是屬性，  第一個孩子  孩子們   顏色  大小  

下面咱們開始講的，  咱們建立節點  等等 都是操做 帶有動詞的特性，都是方法。  是方法帶有括號。

建立節點  createElement

沒有的，咱們能夠給它生成 ， 建立節點是從無到有的過程，不一樣於 顯示和隱藏。  

var test = document.createElement("div");  // 建立了一個新的div 

 

 document.createElement(「標籤名」) 

document.createElement("span")   建立新span標籤

建立完畢，要添加到咱們的dom 頁面中。

 添加節點

添加節點就是把咱們建立的節點 放到某個地方 。

1. appendChild()           append 追加的意思       追加一個子節點
   a.appendChild(b);   把b放到 a 的裏面 而且是 a的孩子們最後面 
      後追加 。  b 必定是a 的孩子 。  必須的 

 

2. insertBefore()

   insertBefore(插入的節點，參照節點)

     insertBefore() 方法 ，若是不是在末尾插入節點，而是想放在特定的位置上，用這個方法，該方法接受2個參數，第一個是要插入的節點，第二個是參照節點，返回要添加的元素節點

  若是 第二個參數 爲null   則默認插入到後面  不能省略

demo.appendChild(newDiv);

var newSpan = document.createElement("span");

demo.insertBefore(newSpan,newDiv);  // 1 參數  插入的子節點   2 參數 參照節點

  屬性的相關設定

getAttribute(「屬性」)    get  得到   attribute  屬性的意思   得到屬性值

demo.getAttribute(「id」)   能夠得到 demo的id名字 是 demo 

setAttribute(「屬性」,」值」)   設置屬性值      

demo.setAttribute(「class」,」box」);    給demo 添加一個 class 爲  box  

demo.className = 「box」  等價的

removeAttribute(「屬性名」) ;    刪除某個屬性

demo.removeAttribute(「class」)   就把demo 的class 屬性刪掉了

其中 以上寫法， ie67.不支持.

兼容性寫法： 

    demo.className = 「one」 ;

 cssText 

 cssText  能夠更改多個屬性設置

 

 刪除節點  removeChild()

  刪除子節點   

a.removeChild(b)    刪除a 裏面的 孩子 b 節點 。

   克隆 節點 (cloneNode)  

用於複製節點， 接受一個布爾值參數， true 表示深複製（複製節點及其全部子節點）， false 表示淺複製（複製節點自己，不復制子節點）

<script>

    var demo = document.getElementById("demo");

    // demo.cloneNode(true);  // 克隆節點

    demo.parentNode.appendChild(demo.cloneNode(true));

</script>

獲取日期和時間

getDate()               獲取日 1-31      

getDay ()              獲取星期 0-6     

getMonth ()             獲取月 0-11

getFullYear ()           獲取完全年份（瀏覽器都支持）

getHours ()          獲取小時 0-23

getMinutes ()            獲取分鐘 0-59

getSeconds ()            獲取秒  0-59

getMilliseconds ()   獲取毫秒         1s  =  1000ms

getTime ()            返回累計毫秒數(從1970/1/1午夜)    時間戳

1.6   定時器之 setInterval

 

咱們頁面中有不少的效果，是本身的運動的。 這個是用什麼作的呢？

for 循環的效果，可是他一會兒就執行完畢，咱們看到這個輪播圖有什麼效果，每隔n秒 ，就運動一次，是有規律的。

手機有鬧鈴， 天天的 8：30分， 鬧鈴就會響。  定鬧鈴 。

咱們js 裏面也能夠定鬧鈴， setInterval 

window.setInterval(「執行的代碼串」,間隔時間);

大部分狀況下， window 都是省略  。 

意義：  每隔必定時間，就會去執行一次 代碼串。  永不停歇 。 連續型。

setInterval("console.log('你好嗎')",1000);

  後面的時間   單位是  毫秒       1000 ms     ==  1s 

每隔 1秒就去調用一次  console.log 這個語句,  只不過直接寫語句會很是少，咱們大部分都是用函數來代替。

1.  setInterval(「fun()」,1000); 

2.  setInterval(fun,1000);     //  最爲經常使用  

3.  setInterval(function() {},1000)

 總結： 

      必須說明，定時器的一個重要用途就是它能夠不斷刷新某個區域！ 不在初始化中執行； 並且是有時間可控的。

1.6.1    設定本身的時間

咱們再2015年12月12日 作一個活動 ， 就要開始倒計時 。 

設定目標時間 纔對 。

var endTime = new Date(「2015/12/12 17:30:00」)

1.6.2    獲得過去的毫秒數

咱們計算機裏面時間，都是用毫秒來計算的。 精確。

咱們計算機的時間是從 1970年1月1日  開始 的。

累加的毫秒數

var date = new Date();

console.log(date.getTime());

console.log(date.valueOf());

console.log(Date.now());

console.log(+new Date());

1.7    倒計時

咱們計算的是還剩下多少時間。   2015年12月12

用未來的時間  -  如今的時間  ===  剩下的時間 

咱們的思路 ： 把他們轉換爲 毫秒    各類計算。   

總結：  

  用未來時間的毫秒數 （2015.12.12距離 1970年1.1 的毫秒數） 減去

如今時間的毫秒數    ==  一共 還剩下多少毫秒。

咱們前面學過那些運算符。

 

一元操做符 ++， -- ，+ -        加加 減減   正號 負號   +a   -a

 

邏輯操做符   !    &&      ||  

 

基本運算符  +, -, *, /, %

 

關係操做符 >, <, >=, <=, ===, ==, !=, !==

 

條件操做符 （三元運算符） a ?  b :  c 

 

賦值運算符 +=, -=, *=, /=, %=         a+=2    a = a+2 ;

 

逗號運算符 ,         var a=10,c=10;

優先級

1    ()

2    !、-、++、--          一元

3    *、/、%

4    +、-

5    <、<=、<、>=    

6    ==、!=、===、!==、

7    &&

8    ||

9    ?:

10   =、+=、-=、*=、/=、%=        賦值        計算完畢，再給值

幾個面試題

var aa  =   0&&1;

alert(aa)    0

var bb =  1&&0;

alert(bb);    0

var cc =  1&&10;

alert(cc);  10

與 && 使用規則 

a&&b      

  若是 a 爲假       則返回a 的值     0&&1   返回0

  若是a 爲真，     則返回 b 的值    1&&10  返回 10 

var a = 1 && 2 && 3;

console.log(a);   3

var b = 0 && 1 && 2;

console.log(b);  0

var c = 1 && 0  && 2;

console.log(c);  0

或 ||  運算規則

 a || b

  若是a 爲假   則返回的是  b 的值  。

  若是a 爲真   則返回的是  a 的值 （本身的值）

console.log(0||1);

console.log(1||0);

console.log(1||5);

console.log(5||1);

   var first = father.firstElementChild  ||  fathter.firstChild;

 

 var a = 0 || 1 || 2;

 var b = 1 || 0 || 3;

 console.log(a),console.log(b);

 

var a = 3 && 0 || 2;

var b = 3 || 0 &&  2;

var c= 0 || 2 && 3;

alert(a),alert(b),alert(c);

結果是：   必定先算 &&  後 算 ||       2  3  3 

  0 && 1  ==  0       0 與 任何數 都的 0 

  0  || 1   = =  1         0 或 任何數 都的 任何數

最後：

var a = 1+4&&3

var b = 0&& 3+1；

var c= 1 || 2 && 5-1;

alert(a),alert(b),alert(c);

d = d>10 ? -d : d    

轉換爲字符串 (理解)

咱們前面學過轉換爲字符串 

1. + 」」  轉換爲字符串    var num = 10;  console.log(「num」)；  console.log(num+ 「」); 

2. String()  構造函數    String(num);

3. toString()，內置轉換方法（進制基數）

     var num = 10;   console.log(num.toString());

console.log(demo.toString(2));    // 把 demo 裏面值 轉換爲 2進制

  根據位置返回字符（重點）

1 charAt，獲取相應位置字符（參數： 字符位置）

註釋：字符串中第一個字符的下標是 0。若是參數 index 不在 0 與 string.length 之間，該方法將返回一個空字符串。

2 charCodeAt獲取相應位置字符編碼（參數： 字符位置）  索引號

charAt()方法和charCodeAt()方法用於選取字符串中某一位置上的單個字符

區別：

charCodeAt()方法，它並不返回指定位置上的字符自己，而是返回該字符在Unicode字符集中的編碼值

 

 

 

my name is andy   big5  gb2313       unicode      

var txt = "abcdefg";

alert(txt.charAt(3));  // 返回 索引號3 的 字符    d

var demo = "今天是週末";

alert(demo.charAt(2));  //   返回   是

alert(txt.charCodeAt(3));  // 返回的是相應的 字符 的 unicode 編碼

alert(demo.charCodeAt(2));

根據字符返回位置(重點)

 

 1 indexOf，從前向後索引字符串位置（參數： 索引字符串）

從前面尋找第一個符合元素的位置  找不到則返回 -1

 2 lastIndexOf，從後向前索引字符串位置（參數：索引字符串）

從後面尋找第一個符合元素的位置

找不到則返回 -1

從後面往前面找， 找到後，索引號 數的時候從前面日後數

 

 他們是根據字符返回位置 。

  aa.jpg    aa.jpeg 

 var  aa = 「abcdefg」       aa.indexOf(「c」) ; 

 

62  <script>

63      function $(id) {return document.getElementById(id)}

64      $("btn1").onclick = function() {

65          //  asdf.indexOf("a");

66             alert($("all").value.indexOf($("index").value));

67      }

68      $("btn2").onclick = function() {

69          //  asdf.indexOf("a");

70             alert($("all").value.lastIndexOf($("index").value));

71      }

72  </script>

 url 編碼和解碼（瞭解）

URI (Uniform ResourceIdentifiers,通用資源標識符)進行編碼，以便發送給瀏覽器。有效的URI中不能包含某些字符，例如空格。而這URI編碼方法就能夠對URI進行編碼，它們用特殊的UTF-8編碼替換全部無效的字 符，從而讓瀏覽器可以接受和理解。

 var url = 「http://www.itcast.cn?name=andy」

encodeURIComponent() 函數可把字符串做爲 URI 組件進行編碼

decodeURIComponent() 函數可把字符串做爲 URI 組件進行解碼

<script>

    var url = "localhost:itcast.cn? name=andy";

    var str = encodeURIComponent(url);  // 編碼的過程

    console.log(str);

    console.log(decodeURIComponent(str));   

</script>

截取字符串(重點)

咱們從一串字符裏面， 取某幾個 。  截取字符串

concat 鏈接字符

var txt = 「123」;

console.log(txt.concat(「abc」));

slice

slice，截取字符串（參數：1，截取位置【必須】，2終結點）

 

asdf.slice(2);     //   df

意思：  從 索引號2 的位置 開始截取，若是沒有結束位置，則會一直截取到最後。

asdf.slice(2,3)   // d  

結束位置，   從最左邊數的個數    這裏從a開始數 3個 。

asdf.slice(-1) //    f

負號 表示 從右邊開始往左邊取    -1 就是取最後一個  -2 就是取最後兩個的意思。

substr

 substr，截取字符串（參數：1，截取位置【必須】，2截取長度）

截取的長度   從當前位置開始數   截取的長度

 asdf.substr(2,2);   //  df   第一個2 從 索引號2 開始取， 第2個2

從當前開始數2個。

 substr(-1)   負值是有兼容性問題的。  ie8如下的版本  會直接返回全部字符串。  因此，咱們不建議使用 substr負值 。

 兼容性onButtonClick("btn8",div1.substr(div1.length-1,1));

substring

substring 同slice 

 

  可是若是 有兩點不一樣就是 會有參數比較大小

  substring(6,3)   它會自動轉  substring(3,6)

  substring則乾脆將負參數都直接轉換爲0   所有取過來

 

 「12345678」.slice(2,5)      345    

 「12345678」.substr(2,5)      34567

小數位數(瞭解)

var PI = 3.141592653; 

console.log(PI.toFixed(2)); 

保留兩位小數    後面小數會四捨五入

轉換大小寫

1 toUpperCase，轉換爲大寫（參數：無）

2 toLowerCase，轉換爲小寫（參數：無）

數值函數

var max = Math.max(4,2,6,7,8,3);

var min = Math.min(4,2,6,7,8,3);

若是max函數沒有給出任何參數，返回-Infinity

若是有NaN或者非數字類型的參數，返回NaN

alert(Math.max(1,3,4,'10'));

 

alert(Math.max(1,3,4,'10abc'));

alert(Math.max(1,3,4,NaN));

alert(Math.max(1,3,4,undefined));

第一個是 10  後面三個都是  NaN      只有裏面 不是數值型的， 返回的結果 就是 NaN.

 

 

 

定時器之 setTimeout

 咱們前面學了 setinterval  如今學習  setTimeout

 setTimeout 纔是真正意義上的  定時炸彈。  就結束了

 

 

setInterval(fn,1000)   每隔1秒 就執行一次 fn 函數

setTimeout(fn,1000)  1秒鐘以後，去執行一次 fn 函數， 就over了 。  一次性的。

<script>

     function $(id) { return document.getElementById(id);}  // id函數

     function hide(id) {   // 隱藏函數

         $(id).style.display = "none";

     }

     function show(id) {

         $(id).style.display = "block";

     }

     setTimeout(closeAd,5000);

     function closeAd() {

         hide("left");

         hide("right");

     }

</script>

深層看去兩定時器的區別

 

js  頁面跳轉語句  BOM

window.location.href = 「http://www.itcast.cn」;

 遞歸調動（重點）

 

函數本身調用本身，咱們成爲遞歸調用。   必定要寫退出條件，不然死循環。

 

setTimeout延遲時間爲1秒執行, 要執行的代碼須要2秒來執行,那這段代碼上一次與下一次的執行時間爲3秒.

而setInterval卻沒有被本身所調用的函數所束縛，它只是簡單地每隔必定時間就重複執行一次那個函數。

  arguments.callee （重點）

arguments.callee

返回正被執行的 Function 對象。

在使用函數遞歸調用時推薦使用arguments.callee代替函數名自己。

 

中止定時器

clearInterval(定時器的名字);

clearTimeout(定時器的名字); 

clearInterval(timer);  // 先清除之前的定時器
timer = setInterval(function() {}