Web前端教程3-JavaScript教程

時間  2019-12-09
標籤 web 前端 教程 javascript 欄目 HTML 简体版
原文   原文鏈接

目錄javascript

1. JavaScript介紹

前端三大塊css

  1. HTML： 頁面結構
  2. CSS: 頁面表現，元素大小，顏色，位置，隱藏或者顯示，部分動畫效果
  3. JavaScript： 頁面行爲，部分動畫效果，頁面和用戶的交互(通常不用JS，而是用JQuery)

其餘插件：html

  1. Ajax： 讀取數據，無需刷新

1.1. JS嵌入頁面的方式

<script type="text/javascript" src="../js/setting.js"></script>

2. JS基本語法

2.1. 變量類型

JS是一種弱類型語言，它的變量類型由它的值來決定前端

  • 5種基本數據類型：number, strign ,boolean, undefined, null
  • 1中複合類型： object

定義變量以下：java

var a = 123;
var d;  //這個是undefined

2.2. 獲取元素方法

方法1：（不推薦）python

/* title是屬性 */
/* 問題是：這個語句是按照上下順序執行的 */
document.getElementById('div1').title="我看到了！";
<div di="div1" class='div1' title='這是div元素哦'>這是一個div元素</div>

方法2：數組

/* 當整個文檔加載完以後，再執行這個語句 */
window.onload = function(){
  document.getElementById('div1').title="我看到了！";
}

2.3. 操做元素屬性

能夠參考任何標籤的屬性，包括linkdeng瀏覽器

操做方法主要分爲兩種：服務器

  1. .的操做
  2. []操做

屬性的寫法閉包

  1. htm屬性和js屬性要一直
  2. class屬性寫成className
  3. style屬性裏面的屬性，有橫槓的改爲駝峯式font-size改爲oA.style.fontSize

操做方法1的寫法

<script type="text/javascript">
  window.onload = function(){
    /* 寫屬性 */
    document.getElementById('div1').href="www.baidu.com";
    /* 沒有title屬性會自動添加 */
    var oA = document.getElementById('div1');
    oA.title="666";

    /* 讀屬性 */
    alert(oA.id);

  }
</script>
.....
<div id="div1">這是一個div元素</div>

操做方法2的寫法

<script type="text/javascript">
window.onload = function(){

  var oA = document.getElementById('div1');

  var attr ='color';
  /* 三種方法徹底一致 */
  oA.style.color='red';
  oA.style[attr]='red';
  oA['style'][attr]='red';
}
</script>
.....
<div id="div1">這是一個div元素</div>

2.4. innerHTML的使用

<script type="text/javascript">
window.onload = function(){

  var oA = document.getElementById('div1');

  /* 用處1：能夠讀取這個標籤包裹的元素 */
  /* 輸出：這是一個div元素 */
  alert(oA.innerHTML)

  /* 用處2：能夠塞文字 */
  oA.innerHTML = "666";
}
</script>
.....
<div id="div1">這是一個div元素</div>

3. JS函數

3.1. 函數的定義

<script type="text/javascript">
  // 定義函數
  function func_name(){
    Operations;
  }
  // 調用函數1:直接調用
  // 調用函數2：在控件中調用
  func_name();
</script>
...
<input type="button", name="", onclick="func_name()">

技巧：統一js代碼再同一塊中:實現JS和HTML分離

<script type="text/javascript">
window.onload = function(){
  var oBtn01 = document.getElementById('btn01');
  var oBtn02 = document.getElementById('btn02');

  /* 注意不要寫括號 */
  oBtn01.skin01;
}

function skin01(){
  var oLink = document.getElementById('link1')
  oLink.href = '1.css'
}
</script>
...
<input type="button", name="", value='皮膚01' id="btn01">
<input type="button", name="", value='皮膚02' id='btn02'>

3.2. 變量和函數預解析

JS解析過長分爲兩個階段，先是編譯階段，而後執行階段，在編譯階段會將Function定義的函數提早，而且將var定義的變量聲明提早(賦值不提早)，將它複製爲underfined

  • 方便JS的讀寫
<script type="text/javascript">
  // 變量的預解析
  alert(a);  //a的聲明提早，由於沒有賦值因此彈出undefined，a的值未定義

  alert(c);  //會報錯，c沒有聲明

  var a = 10;
  // 函數的預解析
  my_akert();  // 函數的預解析，這個彈出hello

  function my_akert(){
    alert('hello')!
  }
</script>

3.3. 匿名函數

沒有函數名的函數

<script type="text/javascript">
  window.onload = function (){
    var oDiv = document.getElementById('div1');

    oDiv.onclick = function (){
    alert('hello');
    }
  }
</script>

3.4.函數的參數

傳入多個參數

<script type="text/javascript">
  window.onload = function (){

    var oDiv = document.getElementById('div1');

    function changestyle(styl,val){
      oDiv.style[styl] = val;
    }

    changestyle('color', gold);
    changestyle('backgound', red);
    changestyle('width', 300px);
  }
</script>
.....
<div id="div1">這是一個div元素</div>

返回值

實現兩個輸入框，值進行相加的操做

<script type="text/javascript">
window.onload = function (){

  var oInput01 = document.getElementById('input01');
  var oInput02 = document.getElementById('input02');
  var oBtn = document.getElementById('btn');


  oBtn.onclick = function (){
    var val01 = oInput01.value;
    var val02 = oInput02.value;
    var rs = add(val01,val02);
    alert(rs)
  }

  function add(a,b){
    var c = parseInt(a) + parseInt(b)
    return c;
  }

}
</script>
.....
<input type="text" name="" value="" id="input01">
<input type="text" name="" value="" id="input02">
<input type="button" name="" value="相加" id="btn">
<input type="text" id="input01">
<input type="text" id="input02">
<input type="button" value="相加" id='btn'>

return關鍵字

  • 返回結果
  • 結束運行，return後面的語句都不會執行
  • 阻止默認行爲

4. 條件循環

運算符

  1. 算術運算符： +，-，*，/， %
  2. 條件運算符： ==, >=,<=, !=, &&(and), ||(or), |(not)
  • if-else
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .box{
        width: 300px;
        height: 300px;
        backgound:gold;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var a1 = document.getElementById('box');
        var btn = document.getElementById('btn');
        var a = 100;

        // 單條件語句
        btn.onclick = function(){
          if (a1.style.display == "none"){
            a1.style.display == "block";
          }
          else{
            a1.style.display == "none";
          }
        }

        // 多條件語句--建議用switch-case寫
        if (a>50){
          a = 50;
        } else if (a>30){
          a=30;
        } else {
          a=0;
        }

      }
    </script>
  </head>
  <body>
    <div id="div1">這是一個div元素</div>
    <input type="button" name="" value="相加" id="btn">
    <div class="box" id="box"></div>
  </body>
</html>
  • switch-case
var a ==6;
switch(a){
  case 1:
    alert('1');
    break;
  case 2:
    alert('2');
    break;
  default:
    alert('0000');
    break;
}
  • for,while
for(var i=0;i<len;i++){
  operations;
}

5.JS中的數組

5.1. 建立數組的方式

/* 定義方法1: 面向對象法 */
var aRr01 = new Array(1,2,3,4,'abc');
/* 定義方法2:建議使用  */
var aRr02 = [1,2,3,4,'abc'];

/* 獲取數組長度 */
var alen = aRr02.length;
/* 也能夠設置長度 */
aRr02.length = 10；

/* 獲取某個元素，從0開始的角標 */
var aval = aRr02[2];

/* 定義多維數組 */
var aRr03 = [[1,2,3],[4,5,6],['a','b','c']];

var aval02 = aRr03[1][2];

5.2. 數組方法

var aRr01 = [1,2,3,4];

// 數組鏈接字符串
var sTr01 = aRr01.join('-'); //輸出1-2-3-4
var sTr02 = aRr01.join('');//輸出1234

aRr01.push(5); //從尾部增長了一個成員：1,2,3,4,5
aRr01.pop(); //從尾部刪除了一個成員 1,2,3,4

aRr01.unshift(0);  //從頭部增長了一個成員
aRr01.shift();  //從頭部刪除了一個成員

aRr01.reverse(); // 將元素倒裝，4,3,2,1

aRr01.indexOf(2); // 只返回元素2第一次出現的index值

aRr01.splice(2,1,7,8,9); // 從第2個元素開始，刪除1個元素，而後在此位置增長7,8,9

5.3. 遍歷數組

  • for循環
  • foreach方法
window.onload = function (){

  for(var i=0;i<aLi.length;i++){
    aLi[i].style.backgound='gold';
  }

  var arr = [5,7,9];
  // 函數由咱們建立，不禁咱們調用，數組有幾個元素，就會執行幾回
  // 每次執行時，以實參形式傳遞進來
  // 瀏覽器在回調函數中傳遞三個參數
  //    1. value--當前正在遍歷的元素： 5,7,9
  //    2. index--當前正在遍歷的元素索引： 0,1,2
  //    3. arr ---當前正在遍歷的數組
  arr.foreach(function(value, index, arr){
        console.log("value=" + value + ", index = " + index + ", array = " + arr);
    });
}

5.4. 獲取元素的第二種方法

經過document.getElementByTagName獲取的是一個選擇集，不是數組，可是能夠經過下標方式操做選擇集中的dom元素

window.onload = function (){

  /* 選擇特定的li元素 */
  var oList = document.getElementById('list01');
  /* aLi是一個選擇集，而不是數組，獲取文檔中全部的li元素 */
  var aLi = oList.getElementByTagName('li');

  for(var i=0;i<aLi.length;i++){
    aLi[i].style.backgound='gold';
  }

}
<ul id='list01'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul id='list02'>
  <li>5</li>
  <li>6</li>
</ul>

5.4. 數組去重

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

var aList2=[];

for(vari=0;i<aList.length;i++){
  if(aList.indexOf(aList[i]==i)){
    aList2.push(aList[i]);
  }
}

5.6. 實例: 計算器

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>測試</title>
    <script type="text/javascript">
      window.onload = function(){
        var a1 = document.getElementById('input01');
        var a2 = document.getElementById('input02');
        var op = document.getElementById('fuhao');
        var btn = document.getElementById('btn');

        btn.onclick = function(){
          var v1 = a1.value;
          var v2 = a2.value;
          var fuhao = op.value;

          // 判斷輸入框是否爲空
          if (v1 == '' || v2 == ''){
            alert('不能爲空');
            return;
          }
          // 判斷輸入爲數字
          if(isNaN(v1) || isNaN(v2)){
            alert('請輸入數字');
            return;
          }

          switch(fuhao){
            case '0':
              alert(parseFloat(v1) + parseFloat(v2));
              break;
            case '1':
              alert(parseFloat(v1) - parseFloat(v2));
              break;
            case '2':
              alert(parseFloat(v1) * parseFloat(v2));
              break;
            case '3':
              alert(parseFloat(v1) / parseFloat(v2));
              break;
          }

        }

      }

    </script>
  </head>
  <body>
    <h1>計算器</h1>
    <input type="text" name="" value="" id="input01">
    <select class="" name="" id="fuhao">
      <option value="0">+</option>
      <option value="1">-</option>
      <option value="2">*</option>
      <option value="3">/</option>
    </select>
    <input type="text" name="" value="" id="input02">
    <input type="button" name="" value="計算" id="btn">
  </body>
</html>

6. JS的字符串

JS的組成

  • ECMAscript javascript的語法（變量，函數，循環語句的語法）
  • DOM文檔對象模型，操縱html和css
  • BOM瀏覽器對象模型，操做瀏覽器的方法

6.1. 字符串的處理方法

  1. 字符串合併+
  2. parseInt()將數字字符串轉化爲整數
  3. parseFloat()將數字字符串轉化爲小數
  4. split('')把一個字符串分割成字符串組成的數組
  5. charAt(index)獲取字符串中的某個字符
  6. indexOf(value)查找字符串是否含有某字符
  7. substring(start,end)截取字符串用法
  8. str.split('').reverse().join('');字符串反轉
  9. toUpperCase()字符串轉大寫
  10. toLowerCase()字符串轉小寫

7. 定時器

屬於BOM，瀏覽器的用處

定時器的做用

  1. 製做動畫
  2. 異步操做
  3. 函數緩衝和節流

用處1：異步操做

/* 定時器：
setTimeout      只執行一次定時器
clearTimeout    關閉只執行一次的定時器
setInterval     反覆執行的定時器
clearInterval   關閉反覆執行的定時器 */


/* 等1000毫秒才彈出來 */
setTimeout(myalert, 1000);

function myalert(){
  alert('Hello');
}

同時咱們能夠自定義彈框

<style type="text/css">

  .pop_con{
    display: none;
  }
  .pop{
    width:400px;
    height: 300px;
    background-color: #fff;
    border: 1px solid #000;
    position: fixed;
    left: 50%;
    top:50%;
    margin-left: -200px;
    margin-top: -150px;
    /* z-index用於設置成層級 */
    z-index=9999;
  }

  .mask{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    left: 0;
    top: 0;
    /* 設置透明 */
    opacity: 0.3;
    filter:alpha(opacity=30);
    z-index=9990;
  }
</style>


<div class="pop_con" id="pop">
  <div class="pop">
    <h3>提示信息</h3>
    <a href="#" id="shutoff">關閉</a>
  </div>

  <div class="mask"></div>
</div>
window.onload = function (){
  var oPop = document.getElementById('pop');
  var oShut = document.getElementById('shutoff');

  setTimeout(showpop,40000);

  function showpop(){
    oPop.style.display:block;
  }

  oShut.onclick = function(){
    oPop.style.display = 'none';
  }
}

關閉定時器

// 執行一次的定時器
var timer = setTimeout(function(){
  alert('hello');
},4000);

// 剛執行就關閉
clearTimeout(timer);

var timer2 = setInterval(function(){
  alert('hello');
},2000);

clearInterval(timer2);

7.1. 動畫

<style type="text/css">
  .box{
    width:100px;
    height:100px;
    background-color: gold;
    position: fixed;
    left: 20px;
    top: 20px;
  }
</style>

<script type="text/javascript">
  window.onload = function(){
    var oBox = document.getElementById('box');

    var left = 20;

    var timer = setInterval(function(){
      left++;
      oBox.style.left = left + 'px';

      if(left>700){
        clearInterval(timer);
      }
    },30);
  }
</script>


<div class="box" id="box"></div>

7.2. 製做時鐘

<script type="text/javascript">
      window.onload = function(){
        var oDiv1 = document.getElementById('div1');

        function timego()){
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth()+1;
        var date = now.getDate();
        var week = now.getDay();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();

        oDiv1.innerHTML = '當前時間是' + year + '年' + month + '月' + date + '日' +
        toweek(week) + hour + ':' + minute + ':'+ second;

      }

      timego();

      setInterval(timego,1000);


      }

      function toweek(num){
        switch(num){
          case 0:
              return '星期天';
              break;
          case 1:
              return '星期一';
              break;
          case 2:
              return '星期二';
              break;
          case 3:
              return '星期三';
              break;
          case 4:
              return '星期四';
              break;
          case 5:
              return '星期五';
              break;
          case 6:
              return '星期六';
              break;
        }
      }

    </script>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

結果是

當前時間是2019年3月12日星期二11:53:34

7.3. 製做倒計時

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>測試</title>
    <script type="text/javascript">
      window.onload = function(){
        var oDiv = document.getElementById('div1');

        function timeleft(){
        var now = new Date();
        var future = new Date(2019,10,30,24,0,0); // 實體從服務器獲取
        var left = parseInt((future-now)/1000); //轉爲秒
        var day = parseInt(left / 86400);
        var hour = parseInt((left%86400)/3600);
        var mintue = parseInt(((left%86400)%3600)/60);
        var second = left%60;

        if (left<=0){
          window.location.href = "http://www.baidu.com";
        }

        oDiv.innerHTML = '距離2019年11月30日晚上24點還有--' + day + '天' + hour +
        '時' + mintue + '分' + second + '秒';

      }

      timeleft();
      setInterval(timeleft,1000);

      }

    </script>
  </head>
  <body>
    <div class="" id="div1">

    </div>
  </body>
</html>

8. 變量做用域

  • 全局變量-函數外部頂一頂額變量，函數內部外部均可以訪問，它的值能夠共享，能夠隨意改它的值
  • 局部變量-函數內部定義的變量，函數內部能夠訪問，外部沒法訪問，內部訪問變量時，先在內部查找是否有這個變量，有的話就用內部的，沒有的話就去外部找

9. 封閉函數

函數變量化

這種方式只能在函數定義後面調用

var myalert = funtion(){
  alert('hello');
}

myalert();
/*
封閉函數的定義 (function(){...})();
1. 省去函數名
2. 局部變量不會影響其餘變量（相同名字） */

var str = "abc";

(function (){
  var str = '歡迎訪問個人主頁';

  var myfunc = function(){
    ...;
  }

  myfunc;

  alert(str);
})();

10. 閉包

函數嵌套，函數裏面再定義函數，內部函數能夠引用外部函數的參數和變量，變量存在閉包裏面不會被回收

<script type="text/javascript">
  function aa(b){
    var a=12;
    function bb(){
      alert(a);
      alert(b);
    }

    return bb;

  }

  var cc = aa(24);  // cc=bb

  cc();

</script>
  • 同時閉包也能夠改爲封閉函數
<script type="text/javascript">

var cc = (function(b){
            var a=12;
            function bb(){
              alert(a);
              alert(b);
              }

              return bb;
            })(24);

</script>

10.1. 閉包的做用

  • 能夠在循環中存索引值
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>測試</title>
    <script type="text/javascript">
      window.onload = function(){
        var aLi = document.getElementsByTagName('li');

        for(var i=0;i<aLi.length;i++){
          // 通常循環沒法保存i，此時的i是4
          // 經過閉包存i
          (function(i){
            aLi[i].onclick = function(){

            alert(i);
          }
          })(i);
        }
      }
    </script>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </body>
</html>
  • 私有變量計數器，外部沒法訪問，避免全局變量的污染

11. 內置對象

對象 方法 說明
document document.referrer 獲取上一個跳轉頁面的地址
locaiton window.location.href
window.location.search
window.location.hash		 獲取或者重定url地址
獲取地址參數部分
獲取頁面錨點或者哈希值
Math Math.random
Math.floor
Math.ceil		 獲取0-1的隨機數
向下取整
向上取整		 
<script type="text/javascript">

  var data = window.location.search;
  // 在網址輸入「..../？a=123」 的時候輸出 「？a=123」
  alert(data);

  var hash = window.location.hash;
  // 在網址輸入「....#=123」 的時候輸出 「#=123」
  alert(hash);

</script>

12. 面向對象

12.1. JS面向對象

將相關的變量和函數組合成一個總體，這個總體叫作對象，對象中的變量叫作屬性，變量中的函數叫作方法， js對象相似字典

可是JS沒有類，類是經過函數實現的

  • 內建對象
  • 宿主對象
  • 自定義對象

12.2. 自定義對象：建立對象的方法

  • 單體：
<script type="text/javascript">

  var Tom = {
    name: 'tom',
    age: 18,
    showname: function(){
      alert('my name is ' + this.name);
    },
    showage: function(){
      alert('my age is ' + this.age);
    }
  }

  alert(Tom.name);
  Tom.showname();

</script>
  • 工廠模式（少用）

經過一個函數建立對象

<script type="text/javascript">

  function Person(name, age){

    var o = new Object(); // 建立空對象
    o.name = name;
    o.age = age;
    o.showname = function(){
      alert('my name is ' + this.name);
    };
    o.showage = function(){
      alert('my age is ' + this.age);
    }

    return o;

  }

  var tom = Person('tom',18);
  tom.showname();

</script>

使用工廠方式建立的對象，使用的都是object，致使沒法區分多種不一樣類型的對象

  • 構造函數: 類型python類

構造函數就是用通常函數建立的，區別是加了new

構造函數的執行流程：

  1. 一旦調用構造函數，立刻建立一個新的對象
  2. 將新建的對象設置爲函數中的this
  3. 逐行執行函數的代碼
  4. 將新建的對象做爲返回值返回

使用同一個構造函數的對象，稱爲同一類對象，也稱爲該類的實例

<script type="text/javascript">

  function Person(name, age){

    this.name = name; // this爲新建的對象，tom, jack，向新建對象添加屬性
    this.age = age;

    this.showname = function(){  // 爲對象添加方法
      alert('my name is ' + this.name);
    };
    this.showage = function(){
      alert('my age is ' + this.age);
    }

  }

  var tom = new Person('tom',18);
  var jack = new Person('jack',20);
  tom.showname();

  console.log(tom instanceof Person); // true
  console.log(tom instanceof Object); //
  alert(tom.showname == jack.showname); // false, 浪費資源

</script>

問題： 每個對象的方法都有一個新的方法，浪費資源

  • 原型模式：比構造函數更高效

咱們所建立的每個函數，解析器都會向函數中添加一個屬性prototype, 這個屬性對應原型對象

  • 當函數以普通函數調用時，prototype沒用
  • 當函數以構造函數調用時，它所建立的對象都會有一個隱含的屬性，指向該構造函數的原型對象，咱們能夠經過__proto__訪問
  • 當調用屬性和方法時，首先在自己尋找，有就用，沒有就去prototype原型尋找，沒有就去原型對象的原型去找，直到找到Object原型
<script type="text/javascript">

  function Person(name, age){

    this.name = name;
    this.age = age;
  }

  // prototype上綁定的方法能夠被全部person對象公用
  // prototype爲原型對象，全部同一個類的實例均可以訪問到這個原型對象，
  // 能夠將共有的內容設置到這個原型對象中
  Person.prototype.showname = function(){
    alert('my name is ' + this.name);
  }

  Person.prototype.showage = function(){
    alert('my age is ' + this.age);
  }

  // toString是在打印對象的時候自動的內容，咱們能夠重寫這個方法讓它打印更詳細的信息
  // console.log(tom);   person[name=「tom」, age=20]
  Person.prototype.toString = function(){
    return "person[name = " + this.name + ", age=" + this.age + "]";
  }

  var tom = new Person('tom',18);
  var jack = new Person('jack',20);

  console.log(tom.__proto__ == Person.prototype);  // true
  console.log(tom.hasOwnProperty("name")); // false，只有自己有屬性纔會true，這個方法在原型裏
  alert(tom.showname == jack.showname); // true， 更加高效

</script>
  • 繼承
<script type="text/javascript">

  // 定義父類
  function Fclass(name, age){

    this.name = name;
    this.age = age;
  }

  Fclass.prototype.showname = function(){
    alert('my name is ' + this.name);
  }

  Fclass.prototype.showage = function(){
    alert('my age is ' + this.age);
  }

  // 定義子類，繼承父類
  function Sclass(name, age, job){
    // 繼承屬性：call或者apply
    // call：改變當前函數執行的this
    // apply和call的用法同樣，只是語法不一樣： Fclass.apply(this, [name, age]);
    Fclass.call(this, name, age);
    this.job = job;
  }

  // 繼承方法： prototype
  Sclass.prototype = new Fclass();

  Sclass.showjob = function(){
    alert('my job is ' + this.job);
  }

  var tom = new Sclass('tom',20,'engineer');
  tom.showage();

</script>

12.3. 自定義對象：this的用法

  • this就是object.window，指向的是一個對象，稱爲函數執行的上下文對象
  • 根據函數調用方式的不一樣，this會指向不一樣的對象
    • 以函數形式調用時，this爲window
    • 以方法形式調用時，this爲調用方法的對象，好比
<script type="text/javascript">

      var name ="全局";

      function fun(){
        // console.log(this.name);  // 這種方式永遠是"全局"
        console.log(this.name);    // 隨着調用的對象不一樣而變化
      }

      var obj = {
        name: "sun",
        sayName: fun
      };

     var obj2 = {
        name: "kkk",
        sayName: fun
      };

      console.log(obj.sayName == fun); // true，同一個函數
      fun();          // 以函數調用的時候，this指向對象（上下文），爲Object.window
      obj.sayName();  // 以方法調用的時候，this爲Object.object（「sun」）
      obj2.sayName();  // 以方法調用的時候，this爲Object.object（「kkk」）
    </script>

結果是

true
全局
sun
kkk

12.4. 宿主對象：Array：見5

13. 垃圾回收

  • 就像人生活的時間長了，程序運行過程當中也會產生垃圾，垃圾過多後，會致使程序運行速度過慢，須要垃圾回收機制
  • 在JS中有自動垃圾回收機制，不須要也不能進行垃圾回收的操做


  • 手動回收的方法：設置爲null
var a = new Obect();

a = null;

14.DOM

14.1. DOM簡介

  • DOM： Document Object Model文檔對象模型
    • 文檔： 一個HTML網頁文檔
    • 對象： 網頁的每一個部分都轉爲對象，好比body, head, h1..都轉爲對象（就能夠經過面向對象對他進行操做）
    • 模型： 用來表示對象之間的關係，方便獲取對象

14.2. 節點

  • 節點是構成網頁的基本節點，好比body, head, h1..
  • 節點的類型不一樣，屬性和方法也不一樣
    • 文檔節點： 整個HTML文檔
    • 元素節點： HTML的HTML標籤
    • 屬性節點： 元素的屬性
    • 文本節點： HTML標籤中的文本內容
  • 節點的屬性
節點 節點名稱 節點類型 節點值
文檔節點 #document 9 null
元素節點 標籤名 1 null
屬性節點 屬性名 2 屬性值
文本節點 #text 3 文本內容
  • 瀏覽器已經爲咱們提供了文檔節點對象，這個對象時window屬性，能夠在網頁中直接使用，文檔節點（document）表明的是整個網頁
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>測試</title>
    <script type="text/javascript">
      // 獲取button對象
      var btn = document.getElementById("btn");
      // 修改button的屬性
      btn.innerHTML = "你好啊";

    </script>
  </head>
  <body>
    <button id='btn'>我是按鈕</button>
  </body>
</html>

14.3. 事件

  • 事件就是文檔或者瀏覽器窗口中發生的一些特定的交互瞬間
  • JS和HTML之間的交互式經過事件實現的
  • 對於WEB應用來講，有下面這些表明性的事件： 點擊，移動，按鍵等
<script type="text/javascript">
  window.onload = function(){
      var btn = document.getElementById("btn");
      console.log(btn);
      btn.onclick = function(){
        alert('hello');
      }
  }
</script>
....
<input type="button" name="" value="我是按鈕" id="btn">

14.4. 文檔加載

也就是說須要使用window.onload = function(){}

14.5. DOM查詢

獲取元素節點

  • 經過document對象調用
方法 說明
getElmentById() 經過惟一id獲取元素節點對象，返回對象
getElementsByTagName() 經過標籤名獲取一組元素節點對象，返回數組
getElementByName() 經過name獲取一組節點對象，返回數組

屬性的寫法

  1. htm屬性和js屬性要一直
  2. class屬性寫成className
  3. style屬性裏面的屬性，有橫槓的改爲駝峯式font-size改爲oA.style.fontSize
  • 經過元素節點調用
方法 說明
getElmentsByTagName() 獲取當前節點的指定標籤名後代節點
屬性 說明
childNodes 當前節點的全部子節點(會獲取全部的各類節點，包括空白)
firstChild 當前節點的第一個子節點（包括其餘節點，空白等）
firstElementChild 當前節點的第一個子元素(IE8以上)
lastChild 當前節點的最後一個子節點
childern 當前節點的全部子元素（推薦）
parentNode 當前節點的父節點
previousSibling 當前節點的前一個兄弟節點（包括其餘節點，空白等）
previousElementSibling 前節點的前一個兄弟元素(IE8以上)
nextSibling 當前節點的後一個兄弟節點 
<script type="text/JavaScript">
  var btn = document.getElmentById("btn");
  btn.onclick = function(){
    // 獲取id爲city的元素
    var city = document.getElmentById("city");
    // 查找city下 的全部li節點
    var lis = city.getElementsByTagName("li");

    for(var i=0;i<lis.length;i++){
      alert(lis[i].innerHTML);
    }
  }
</script>

其餘查詢方法

// 獲取`body`標籤
var body = document.body;
// 獲取`html`標籤
var html = document.documentElement;
// 獲取頁面全部元素， body,html, head, script,...
var all = document.all;
var all = document.getElementsByTagName("*");
// 獲取class內容>IE9
var box1 = document.getElementByClassName("box1");
// 獲取含有class=「box1」的div
// querySelector： 根據CSS選擇器來選擇--只返回一個元素
var box1_div = document.querySelector(".box1 div");
// 返回符合條件的全部box
var box1_div = document.querySelectorAll(".box1");

14.6. DOM增刪改

方法 說明
appendChild() 添加新的子節點到指定節點
removeChild() 刪除子節點
replaceChild() 替換子節點
insertBefore() 在指定的子節點前面插入新的子節點
createAttribute() 建立屬性節點
createElement() 建立元素節點
createTextNode() 建立文本節點
getAttribute() 返回指定的屬性值
setAttribute() 設置屬性值爲指定的值

實例： 設計一個增長刪除表格

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>表格</title>

    <script type="text/javascript">

      function delA(){
            // 點擊後刪除超連接所在行
            // 獲取當前tr
            var tr= this.parentNode.parentNode;
            // 獲取要刪除的員工名稱
            var emp = tr.getElementsByTagName("td")[0].innerHTML;
            // 確認是否刪除
            if(confirm("真的刪除" + emp + "？")){
              // 刪除tr
              tr.parentNode.removeChild(tr);
            }

            return false;  // 讓a不要跳轉
      }

      window.onload = function(){
        // 實現刪除功能
        var allA = document.getElementsByTagName("a");
        for (var i=0; i<allA.length; i++){
          // for循環會在頁面加載完成時，當即執行，而相應函數只是在點擊的時候執行，此時for循環已經完成
          // 此時的i爲3
          // console(i) = 3;
          // 不加括號，對象賦值給this
          allA[i].onclick = delA;
        }

        // 實現添加功能
        var name = document.getElementById("empName");
        var age = document.getElementById("empAge");
        var btn = document.getElementById("addEmpButton");


        btn.onclick = function(){
          // 建立tr
          var tr = document.createElement("tr");

          console.log(name.value);
          // 設置tr內容
          tr.innerHTML = "<td>" + name.value + "</td>" +
                         "<td>" + age.value + "</td>" +
                         "<td><a href='javascript:;'>Delete</a></td>";

          var a = tr.getElementsByTagName("a")[0];
          a.onclick = delA;
          // 獲取table
          var employee_table = document.getElementById("employee_table");
          // 獲取table的tbody
          var tbody = employee_table.getElementsByTagName("tbody")[0];
          // 將tr添加到tbody中
          tbody.appendChild(tr);
        }



      }

    </script>

  </head>
  <body>
    <table id="employee_table">
      <tbody>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>Tom</td>
        <td>23</td>
        <td><a href="javascript: ;">Delete</a></td>
      </tr>
      <tr>
        <td>Jerry</td>
        <td>12</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      </tbody>
    </table>

    <hr />

    <div class="" id="formDiv">
      <h4>添加新成員</h4>

      <table>
        <tr>
          <td class="word">name: </td>
          <td class="inp">
            <input type="text" name="empName" id="empName"/>
          </td>
        </tr>
        <tr>
          <td class="word">age: </td>
          <td class="inp">
            <input type="text" name="age" id="empAge"/>
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button id="addEmpButton" value="abc">Submit</button>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

14.7. DOM操做CSS

  • 修改樣式： 元素.style.樣式名 = 樣式值
  • 讀取樣式(適用於內聯樣式): 元素.style.樣式名
  • 讀取樣式(當前正在顯示的樣式):
    • 只能用於IE： 元素.currentStyle.樣式
    • 其餘瀏覽器： css對象 = getComputedStyle(元素名，僞元素（null）)， css對象封裝了樣式信息，css.width
<script type="text/javascript">
  window.onload = function(){
      var box1 = document.getElementById("box1");
      var box2 = document.getElementById("box1");
      var btn01 = document.getElementById("btn");

      /*
      * 功能： 修改元素CSS樣式
      * 經過JS修改元素的CSS樣式
      * 語法： 元素.style.樣式名 = 樣式值
      *    注意： 若是CSS中含有-, 應該換成駝峯狀
      * 其實設置的是內聯樣式（優先級高），因此會當即顯示
      */
      btn01.onclick = function(){
        box1.style.width = "300px";
        box1.style.backgroundColor = "yellow";
      };

      // 獲取樣式表樣式（當前顯示樣式）

      btn02.onclick = function(){
        var ar = getComputedStyle(box1);
        alert(ar.width);
      }
  };

</script>

15. DOM事件

15.1. 事件的基本使用

  • 當事件的事件句柄(Event Handlers)被觸發時(e.g, onmousemove)， 瀏覽器會自動將一個事件對象(event)做爲實參傳遞給響應函數
  • 這個事件對象包含了不少信息(鼠標 / 鍵盤屬性)，比兔座標，鼠標滾輪方向，按鍵，等等...
<script type="text/javascript">
  window.onload = function(){

    // 當事件的相應函數被觸發時(onmousemove)， 瀏覽器會自動將一個事件對象(event)做爲實參傳遞給響應函數
    // 這個事件對象包含了不少信息，比兔座標，鼠標滾輪方向，按鍵，等等...

    // 爲了處理不一樣瀏覽器兼容問題
    event = event || window.event;

    btn.onmousemove = function(event){
      var x = window.event.clientX;
      var y = window.event.clientY;
    }

  }
</script>

15.2. 事件冒泡

  • 事件冒泡： 事件的向上傳導，當後代元素上的事件被觸發的時候，其祖先元素的相同事件也會被觸發
  • 大部分有用，可是能夠取消
<script type="text/javascript">
  window.onload = function(){
    var s1 = document.getElementById("s1");
    var box1 = document.getElementById("box1");

    s1.onclick = function(event){
      alert("我是span");

      // 取消事件冒泡
      event = event | window.event;
      event.cancelBubble = true;
    }

    box1.onclick = function(){
      alert("我是box1");
    }

    document.onclick = function(){
      alert("我是document");
    }
  };

</script>
  • 當點擊s1的時候，會同時觸發s1, box, docuemnt的onclick事件

15.3. 事件委派

  • 將事件統一綁定給元素的共同祖先元素，這樣後代元素上的事件觸發的時候，會一直冒泡到祖先元素
  • 事件委派： 利用了冒泡，經過委派能夠減小事件胖丁的次數，提升程序的高效性
<script type="text/javascript">

  window.onload = function(){
    var lis = document.getElementsByTagName("li");
    var ul = document.getElementById("ul");
    var btn = document.getElementById("btn");

    // 問題1： 新加入的超連接沒有綁定事件
    btn.onclick = function(){
      var li = document.createElement("li");
      li.innerHTML = "<a href='javascript:;'>連接新來的</a>";
      ul.appendChild(li);
    };

    // 問題2： 只能爲已經有的每個超連接綁定事件，新的超連接須要從新綁定，不推薦
    // 解決方法： 將其綁定給元素的共同的祖先元素
    /*
    * for(var i=0;i<lis.length;i++){
    *  lis[i].onclick = function(){
    *    alert("666");
    *  }
    * };
    */

    // 由於這是一個冒泡，點擊a，冒泡到ul---新添加的都有了
    ul.onclick = function(event){
      // 只有點擊的是link的class時
      if (event.target == "link") {
        alert("我是ul的單擊函數");
      }
    }
  };

</script>

15.4. 事件綁定

  • addEventListener
    • 參數1： 事件字符串
    • 參數2： 回調函數，當事件觸發的時候該函數執行
    • 參數3： 是否鋪貨期間觸發函數，通常爲false
  • 按照順序執行
<script type="text/javascript">

  window.onload = function(){

    btn01. addEventListener("listener", function()[
      alert(1);
    ], false);

    btn01. addEventListener("listener", function()[
      alert(2);
    ], false);
  };

</script>
  • 解決兼容性：
<script type="text/javascript">

  window.onload = function(){
    function bind(obj, eventStr, callback){

      if (obj.addEventListener) {
          // 大部分瀏覽器兼容的方式
          obj.addEventListener(eventStr, callback, false);
      } else {
          // IE8及如下
          obj.attachEvent("on" + eventStr, callback);
      }
    }
  };

</script>

16. 應用： 輪播圖

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程