Web前端基礎(10):JavaScript(四)

時間 2019-11-18

標籤 web 前端基礎 javascript 欄目 HTML 简体版

原文原文鏈接

1. 僞數組arguments

arguments表明的是實參。有個講究的地方是：arguments只在函數中使用。javascript

1.1 返回參數個數

返回函數實參的個數：arguments.lengthcss

例子：html

fn(2,4);
fn(2,4,6);
fn(2,4,6,8);

function fn(a,b,c) {
    console.log(arguments);
    console.log(fn.length);         //獲取形參的個數
    console.log(arguments.length);  //獲取實參的個數

    console.log("----------------");
}

結果：java

1.2 只能修改元素，不能修改長短

之因此說arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。ios

例子：數組

fn(2,4);
fn(2,4,6);
fn(2,4,6,8);

function fn(a,b) {
    arguments[0] = 99;  //將實參的第一個數改成99
    arguments.push(8);  //此方法不經過，由於沒法增長元素
}

清空數組的幾種方式：瀏覽器

var array = [1,2,3,4,5,6];

array.splice(0);      //方式1：刪除數組中全部項目
array.length = 0;     //方式1：length屬性能夠賦值，在其它語言中length是隻讀
array = [];           //方式3：推薦

2. DOM的時間操做

2.1 JavaScript的組成

JavaScript基礎分爲三個部分：函數

ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。spa

DOM：文檔對象模型，操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。code

BOM：瀏覽器對象模型，操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。

2.2 事件

JS是以事件驅動爲核心的一門語言。

2.2.1 事情的三要素

事件的三要素：事件源、事件、事件驅動程序。

好比，我用手去按開關，燈亮了。這件事情裏，事件源是：手。事件是：按開關。事件驅動程序是：燈的開和關。

再好比，網頁上彈出一個廣告，我點擊右上角的X，廣告就關閉了。這件事情裏，事件源是：X。事件是：onclick。事件驅動程序是：廣告關閉了。

因而咱們能夠總結出：誰引起的後續事件，誰就是事件源。

總結以下：

事件源：引起後續事件的html標籤。

事件：js已經定義好了（見下圖）。

事件驅動程序：對樣式和html的操做。也就是DOM。

代碼書寫步驟以下：

（1）獲取事件源：document.getElementById(「box」); //相似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];

（2）綁定事件：事件源box.事件onclick = function(){ 事件驅動程序 };

（3）書寫事件驅動程序：關於DOM的操做

代碼舉例：

<body>
<div id="box1"></div>

<script type="text/javascript">
    // 一、獲取事件源
    var div = document.getElementById("box1");
    // 二、綁定事件
    div.onclick = function () {
        // 三、書寫事件驅動程序
        alert("我是彈出的內容");
    }
</script>

</body>

常見事件以下：

下面針對這事件的三要素，進行分別介紹。

2.2.2 獲取事件源的方式（DOM節點的獲取）

獲取事件源的常見方式以下：

var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤
 
var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s
 
var arr2 = document.getElementsByClassName("hehe");  //方式三：經過 類名 得到 標籤數組，因此有s

2.2.3 綁定事件的方式

方式1：直接綁定匿名函數

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //綁定事件的第一種方式
    div1.onclick = function () {
        alert("我是彈出的內容");
    }
</script>

方式2：先單獨定義函數，再綁定

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //綁定事件的第二種方式
    div1.onclick = fn;   //注意，這裏是fn，不是fn()。fn()指的是返回值。
    //單獨定義函數
    function fn() {
        alert("我是彈出的內容");
    }
</script>

注意上方代碼的註釋。綁定的時候，是寫fn，不是寫fn()。fn表明的是整個函數，而fn()表明的是返回值。

方式3：行內綁定

<!--行內綁定-->
<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是彈出的內容");
    }

</script>

注意第一行代碼，綁定時，是寫的"fn()"，不是寫的"fn"。由於綁定的這段代碼不是寫在js代碼裏的，而是被識別成了字符串。

2.2.4 事件驅動程序

咱們在上面是拿alert舉例，不只如此，咱們還能夠操做標籤的屬性和樣式。

舉例以下：

<style>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>

<body>

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

<script type="text/javascript">
    var oDiv = document.getElementById("box");
    //點擊鼠標時，本來粉色的div變大了，背景變紅了
    oDiv.onclick = function () {
        oDiv.style.width = "200px";   //屬性值要寫引號
        oDiv.style.height = "200px";
        oDiv.style.backgroundColor = "red";   //屬性名是backgroundColor，不是background-Color
    }
</script>

上方代碼的注意事項：

在js裏寫屬性值時，要用引號

在js裏寫屬性名時，是backgroundColor，不是CSS裏面的background-Color。記得全部的像css屬性的text-*，line-*、backgroun-*等在js中都寫成駝峯

2.2.5 onload事件

當頁面加載（文本和圖片）完畢的時候，觸發onload事件。

舉例：

<script type="text/javascript">
    window.onload = function () {
        console.log("小馬哥");  //等頁面加載完畢時，打印字符串
    }
</script>

有一點咱們要知道：js的加載是和html同步加載的。所以，若是使用元素在定義元素以前，容易報錯。這個時候，onload事件就能派上用場了，咱們能夠把使用元素的代碼放在onload裏，就能保證這段代碼是最後執行。

建議是：整個頁面上全部元素加載完畢在執行js內容。因此，window.onload能夠預防使用標籤在定義標籤以前。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。