javaScript之函數function對象

一，普通函數

　　在javascript中,函數是一等公民,函數在javascript是一個數據類型,而非像C#或其他描述性語言那樣僅僅作為一個模塊來使用.

函數的定義：

function 函數名 (參數){
函數體;
    return 返回值;
}

 功能說明：

• 可以使用變量、常量或表達式作為函數調用的參數
• 函數由關鍵字function定義
• 函數名的定義規則與標識符一致，大小寫是敏感的
• 返回值必須使用return

一.函數調用形式

函數調用形式是最常見的形式,也是最好理解的形式。所謂函數形式就是一般聲明函數后直接調用。例如：

//1.js中的函數的聲明  記得：有函數的聲明 就一定有調用
function add(){
  alert("函數被調用了")；
  alert(this);//當前的this指向了window
//執行的一些操作
}

//2.函數的執行
add()；

　　或者下面的聲明函數和調用函數的方式

var add = function(){
    alert('函數被調用了')；
}
add()

　　聲明函數式帶形式參數

function add3(x,y){
  return x+y;
}

var sum = add3(4,5)
alert(sum)

　　

二，創建對象的幾種常見方式

• 1.使用Object或對象字面量創建對象
• 2.工廠模式創建對象
• 3.構造函數模式創建對象
• 4.原型模式創建對象

1，使用Object或對象字面量創建對象

JS中最基本創建對象的方式：

var student = new Object();
student.name = "easy";
student.age = "20";

　　

　　這樣，一個student對象就創建完畢，擁有2個屬性name以及age，分別賦值為"easy"和20。

　　如果你嫌這種方法有一種封裝性不良的感覺。來一個對象字面量方式創建對象

var sutdent = {
  name : "easy",
  age : 20
};

　　這樣看起來似乎就完美了。但是馬上我們就會發現一個十分尖銳的問題：當我們要創建同類的student1，student2，…，studentn時，我們不得不將以上的代碼重復n次....

var sutdent1 = {
  name : "easy1",
  age : 20
};

var sutdent2 = {
  name : "easy2",
  age : 20
};

...

var sutdentn = {
  name : "easyn",
  age : 20
};

　　能不能像工廠車間那樣，有一個車床就不斷生產出對象呢？我們看”工廠模式”。

2 工廠模式創建對象

　　JS中沒有類的概念，那么我們不妨就使用一種函數將以上對象創建過程封裝起來以便於重復調用，同時可以給出特定接口來初始化對象。

function createStudent(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  return obj;
}

var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

　　

　　這樣一來我們就可以通過createStudent函數源源不斷地”生產”對象了。看起來已經高枕無憂了，但貪婪的人類總有不滿足於現狀的天性：我們不僅希望”產品”的生產可以像工廠車間一般源源不斷，我們還想知道生產的產品究竟是哪一種類型的。

　　比如說，我們同時又定義了”生產”水果對象的createFruit()函數：

function createFruit(name, color) {
  var obj = new Object();
  obj.name = name;
  obj.color = color;
  return obj;
}

var v1 = createStudent("easy1", 20);
var v2 = createFruit("apple", "green");

　　對於以上代碼創建的對象v1、v2，我們用instanceof操作符去檢測，他們統統都是Object類型。我們的當然不滿足於此，我們希望v1是Student類型的，而v2是Fruit類型的。為了實現這個目標，我們可以用自定義構造函數的方法來創建對象。

3 構造 函數模式創建對象

　　在上面創建Object這樣的原生對象的時候，我們就使用過其構造函數：

var obj = new Object();

　　在創建原生數組Array類型對象時也使用過其構造函數：

var arr = new Array(10);  //構造一個初始長度為10的數組對象

　　

在進行自定義構造函數創建對象之前，我們首先了解一下構造函數和普通函數有什么區別。

1、實際上並不存在創建構造函數的特殊語法，其與普通函數唯一的區別在於調用方法。對於任意函數，使用new操作符調用，那么它就是構造函數；不使用new操作符調用，那么它就是普通函數。

2、按照慣例，我們約定構造函數名以大寫字母開頭，普通函數以小寫字母開頭，這樣有利於顯性區分二者。例如上面的new Array()，new Object()。

3、使用new操作符調用構造函數時，會經歷(1)創建一個新對象；(2)將構造函數作用域賦給新對象（使this指向該新對象）；(3)執行構造函數代碼；(4)返回新對象；4個階段。

了解了構造函數和普通函數的區別之后，我們使用構造函數將工廠模式的函數重寫，並添加一個方法屬性：

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.alertName = function(){
    alert(this.name)
  };
}

function Fruit(name, color) {
  this.name = name;
  this.color = color;
  this.alertName = function(){
    alert(this.name)
  };
}

　　這樣我們再分別創建Student和Fruit的對象：

var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");

　　這時我們再來用instanceof操作符來檢測以上對象類型就可以區分出Student以及Fruit了：

alert(v1 instanceof Student);  //true
alert(v2 instanceof Student);  //false
alert(v1 instanceof Fruit);  //false
alert(v2 instanceof Fruit);  //true

alert(v1 instanceof Object);  //true 任何對象均繼承自Object
alert(v2 instanceof Object);  //true 任何對象均繼承自Object

　　

這樣我們就解決了工廠模式無法區分對象類型的尷尬。那么使用構造方法來創建對象是否已經完美了呢？使用構造器函數通常在js中我們來創建對象。

我們會發現Student和Fruit對象中共有同樣的方法，當我們進行調用的時候這無疑是內存的消耗。

我們完全可以在執行該函數的時候再這樣做，辦法是將對象方法移到構造函數外部：

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.alertName = alertName;
}

function alertName() {
  alert(this.name);
}

var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);

　　

在調用stu1.alert()時，this對象才被綁定到stu1上。

我們通過將alertName()函數定義為全局函數，這樣對象中的alertName屬性則被設置為指向該全局函數的指針。由此stu1和stu2共享了該全局函數，解決了內存浪費的問題。

但是，通過全局函數的方式解決對象內部共享的問題，終究不像一個好的解決方法。如果這樣定義的全局函數多了，我們想要將自定義對象封裝的初衷便幾乎無法實現了。更好的方案是通過原型對象模式來解決。

4  原型的模式創建對象

　　原型鏈甚至原型繼承，是整個JS中最難的一部分也是最不好理解的一部分，在這里由於我們課程定位的原因，如果對js有興趣的同學，可以去查閱一下相關JS原型的一些知識點。更加有助於你以后前端JS的面試。

function Student() {
    this.name = 'easy';
    this.age = 20;
}


Student.prototype.alertName = function(){
                                alert(this.name);
                              };

var stu1 = new Student();
var stu2 = new Student();

stu1.alertName();  //easy
stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函數

　　

 

三，定時器

　　在js中的定時器分兩種：1、setTimeout() 2、setInterval()

1 setTimeOut()

只在指定時間后執行一次

//定時器 異步運行  
function hello(){  
alert("hello");  
}  
//使用方法名字執行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法  
window.clearTimeout(t1);//去掉定時器

　　

2 setlnterval()

在指定時間為周期循環執行

//實時刷新時間單位為毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查詢 */  
function refreshQuery(){  
  console.log('每8秒調一次') 
}

　　

兩種方法根據不同的場景和業務需求擇而取之，

一般情況下setTimeout用於延遲執行某方法或功能，

setInterval則一般用於刷新表單，對於一些表單的假實時指定時間刷新同步，動畫效果等。

 

四，DOM對象（DHTML）

　　在JS中，所有的事物都是節點，元素、文本等都是節點。

　　應用場景：可以通過節點進行DOM對象的增刪改查。

　　DOM是W3C（萬維網聯盟）的標准，DOM定義了訪問HTML和XML文檔的標准：

　　“W3C文檔對象模型（DOM）是中立於平台和語言的接口，它允許程序和腳本動態的訪問和更新文檔的內容，結構和樣式”。

W3C DOM 標准被分為 3 個不同的部分：

• 核心 DOM - 針對任何結構化文檔的標准模型
• XML DOM - 針對 XML 文檔的標准模型
• HTML DOM - 針對 HTML 文檔的標准模型

 

• 什么是 XML DOM？  －－－－>XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法。
• 什么是 HTML DOM？－－－－>HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。

1 獲取DOM節點的方法

 

//通過id獲取，唯一的
var oDiv = document.getElementById('box');
//通過類名獲取
var oDiv = document.getElementsByClassName('.box')[0];
//通過標簽名獲取
var oDiv = document.getElementsByTagName('div')[0];

　　

根據 W3C 的 HTML DOM 標准，HTML 文檔中的所有內容都是節點(NODE)：

• 整個文檔是一個文檔節點(document對象)
• 每個 HTML 元素是元素節點(element 對象)
• HTML 元素內的文本是文本節點(text對象)
• 每個 HTML 屬性是屬性節點(attribute對象)
• 注釋是注釋節點(comment對象)

畫dom樹是為了展示文檔中各個對象之間的關系，用於對象的導航。

 

2  常用的DOM節點

語法	含義
childNodes	獲取所有的子節點，除了元素還有文本等
children	獲取所有元素子節點，不包含文本
parentNode	獲取父節點
previousSibling	獲取上一個兄弟節點，包含文本
previousElementSibling	獲取上一個兄弟元素節點，不包含文本
nextSibling	獲取下一個兄弟節點，包含文本
nextElementSibling	獲取下一個兄弟元素節點，不包含文本
firstChild	獲取第一個子節點，包含文本
firstElementChild	獲取第一個子節點，不包含文本
lastChild	獲取最后一個子節點，包含文本
lastElementChild	獲取父元素最后一個元素節點。不包含文本

節點(自身)屬性:

attributes - 節點（元素）的屬性節點
nodeType – 節點類型
nodeValue – 節點值
nodeName – 節點名稱
innerHTML - 節點（元素）的文本值
導航屬性:

parentNode - 節點（元素）的父節點 (推薦)
firstChild – 節點下第一個子元素
lastChild – 節點下最后一個子元素
childNodes - 節點（元素）的子節點 

 

3  節點的增刪改查

<div>
    <h3>戰爭熱誠</h3>
</div>
<div id="box">
    <p>james</p>

    <p>durant</p>
    <p>harden</p>
    <p>lebnal</p> 
    <a>poel</a>             
</div>
<div>
    <h3>戰爭熱誠2</h3>
</div>

　　

// 1.創建元素節點
var oH2 = document.createElement('h2');

// 設置oH2的內容，p標簽會被解析成p元素顯示到HTML頁面中
oH2.innerHTML = '<p>嘿 sariy</p>';

// 只設置元素內的文本內容，div標簽將被當做文本元素
oH2.innerText = '<div>嘿嘿</div>'

// 2.將創建好的元素節點添加到指定元素所有內容的后面
oDiv.appendChild(oH2);


// 獲取元素節點里的所有內容 包括標簽和文本
console.log(oDiv.innerHTML);

// 表示元素節點的標簽名大寫
console.log(oDiv.tagName);

// 只獲取元素內的文本內容，html標簽將被忽略
console.log(oDiv.innerText);

// 設置元素id
oH2.id = 'luffy';

// 設置類名
oH2.className = 'wusir';
oH2.className = 'wusir2';

//獲取標簽屬性
console.log(oH2.getAttribute('class'));//wusir2

// 設置標簽屬性
oA.setAttribute('href','https://www.luffycity.com');

// 刪除元素上的屬性
oA.removeAttribute('href');

// 刪除創建的對象
// oDiv.removeChild(oH2);

//如果為true 克隆當前元素與元素的所有子節點
// console.log(oDiv.cloneNode(true));


// 父節點.replaceChild(新節點,子節點) 用新節點替換某個子節點
var op = document.createElement('p');
op.innerText = '我是一個段落';
oDiv.replaceChild(op,oA);

//style屬性 ：css內聯樣式屬性值
//一般情況下， css的樣式屬性中出現“-” 號，則對應的style屬性 是：去掉“-”號，把“-”號 后面單詞的第一字母大寫。 如果沒有“-”號，則兩者 一樣。
//例如:oDiv.css.backgroundColor = 'red';

4 注意　

<div id="div1">
    <div id="div2"></div>
    <p>hello yuan</p>
</div>

<script>
    var div=document.getElementById("div2");

    console.log(div.nextSibling.nodeName);  //思考:為什么不是P?
</script>

 5 推薦導航屬性

parentElement              // 父節點標簽元素

children                        // 所有子標簽
  
firstElementChild          // 第一個子標簽元素

lastElementChild           // 最后一個子標簽元素

nextElementtSibling       // 下一個兄弟標簽元素

previousElementSibling  // 上一個兄弟標簽元素

 

節點樹中的節點彼此擁有層級關系。

父(parent),子(child)和同胞(sibling)等術語用於描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

• 在節點樹中，頂端節點被稱為根（root）
• 每個節點都有父節點、除了根（它沒有父節點）
• 一個節點可擁有任意數量的子
• 同胞是擁有相同父節點的節點

下面的圖片展示了節點樹的一部分，以及節點之間的關系：

訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素：

頁面查找：

• 通過使用 getElementById() 方法 
• 通過使用 getElementsByTagName() 方法 
• 通過使用 getElementsByClassName() 方法 
• 通過使用 getElementsByName() 方法
  

6 局部查找

<div id="div1">

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

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

////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

</script>

 

五，BOM對象

　　BOM（瀏覽器對象模型），可以對瀏覽器窗口進行訪問和操作，使用BOM，開發者可以移動窗口，改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。

　　使用JavaScript有能力與瀏覽器“對話”。

  Window對象

window對象
    所有瀏覽器都支持 window 對象。
    概念上講.一個html文檔對應一個window對象.
    功能上講: 控制瀏覽器窗口的.
    使用上講: window對象不需要創建對象,直接使用即可.

  Window對象方法

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           顯示可提示用戶輸入的對話框。

open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close()            關閉瀏覽器窗口。
setInterval()      按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數后調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的坐標。

 交互方法：

方法講解:    
        //----------alert confirm prompt----------------------------
    //alert('aaa');
    
    
    /* var result = confirm("您確定要刪除嗎?");
    alert(result); */

    //prompt 參數1 : 提示信息.   參數2:輸入框的默認值. 返回值是用戶輸入的內容.

    // var result = prompt("請輸入一個數字!","haha");
    // alert(result);



    方法講解:    
        //open方法 打開和一個新的窗口 並 進入指定網址.參數1 : 網址.
        //調用方式1
            //open("http://www.baidu.com");
        //參數1 什么都不填 就是打開一個新窗口.  參數2.填入新窗口的名字(一般可以不填).
        // 參數3: 新打開窗口的參數.
            open('','','width=200,resizable=no,height=100'); // 新打開一個寬為200 高為100的窗口
        //close方法  將當前文檔窗口關閉.
            //close();

 

1 BOM 輸出

所謂BOM指的是瀏覽器對象模型 Browser Object Model，它的核心就是瀏覽器

alert(1);//彈出框 調式使用

console.log('戰爭熱誠');//用於瀏覽器的調用 F12查看

 

prompt('message',defaultValue)
 var pro = prompt('戰爭熱誠','33333');
 console.log(pro)

 

confirm() //如果點擊確定 返回true 如果點擊取消 返回false

　　

2 open_close方法

open('https://www.baidu.com');//打開百度網頁，winodow對象可以省略
//行間的js中的window不能省略
<button onclick="window.open('https://www.百度.com/')">百度</button>

//打開空白頁面
open('about:blank',"_self")

//關閉當前頁面
close();
//行間js中的window還是不能省略
<button onclick="window.close()">關閉</button>

 

3 其他的BOM對象和方法

//返回瀏覽器的用戶設備信息
console.log(window.navigator.userAgent)


//獲取用戶本地信息
console.log(window.location)

//經常使用的一個方法，跳轉一個網址
window.location.href = 'https://www.baidu.com';

//全局刷新 后面會學習ajax來實現局部刷新操作，這才是我們要學習的重點。記住：盡量少用這個方法

setTimeout(function(){
    window.location.reload();
}

 

4 client系列

style：
     top
     left
     right
     bottom

client：
     clientTop 內容區域到邊框頂部的距離
     clientLeft 內容區域到邊框左部的距離
     clientWidth 內容區域+左右padding   可視寬度
     clientHeight 內容區域+ 上下padding   可視高度

　　

5 屏幕的可視區域

window.onload = function(){

    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);


    window.onresize = function(){

        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);
    }



}

　　

6 offset系列

//占位寬 高 Top Left  

/*
* offsetTop: 如果盒子沒有設置定位 到瀏覽器的頂部的距離,如果盒子設置定位，
那么是以父盒子為基准的top值
* offsetLeft： 如果盒子沒有設置定位 到瀏覽器的左部的距離，如果盒子設置定位，
那么是以父盒子為基准的left值
  offsetWidth 內容+padding+border
* */

　　

7 scroll系列

<body style="width: 2000px;height: 2000px;">
    <div style="height: 200px;background-color: red;"></div>
    <div style="height: 200px;background-color: green;"></div>
    <div style="height: 200px;background-color: yellow;"></div>
    <div style="height: 200px;background-color: blue;"></div>
    <div style="height: 200px;background-color: gray;"></div>
    <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
        <p>學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學
習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學
習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學
習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習學習
學習學習學習
        </p>

    </div>


</body>

 

*{
padding: 0;
margin: 0;
}

　　

window.onload = function(){

            //實施監聽滾動事件
            window.onscroll = function(){

//                console.log('上'+document.documentElement.scrollTop)
//                console.log('左'+document.documentElement.scrollLeft)
//                console.log('寬'+document.documentElement.scrollWidth)
//                console.log('高'+document.documentElement.scrollHeight)


            }

            var s = document.getElementById('scroll');

            s.onscroll = function(){
                //scrollHeight : 內容的高度+padding  不包含邊框
                console.log('上'+s.scrollTop)
                console.log('左'+s.scrollLeft)
                console.log('寬'+s.scrollWidth)
                console.log('高'+s.scrollHeight)
            }
        }

　　

8  練習

var num = Math.round(Math.random()*100);
function acceptInput(){
//2.讓用戶輸入(prompt)    並接受 用戶輸入結果
var userNum = prompt("請輸入一個0~100之間的數字!","0");
//3.將用戶輸入的值與 隨機數進行比較
        if(isNaN(+userNum)){
            //用戶輸入的無效(重復2,3步驟)
            alert("請輸入有效數字!");
            acceptInput();
        }
        else if(userNum > num){
        //大了==> 提示用戶大了,讓用戶重新輸入(重復2,3步驟)
            alert("您輸入的大了!");
            acceptInput();
        }else if(userNum < num){
        //小了==> 提示用戶小了,讓用戶重新輸入(重復2,3步驟)
            alert("您輸入的小了!");
            acceptInput();
        }else{
        //答對了==>提示用戶答對了 , 詢問用戶是否繼續游戲(confirm).
            var result = confirm("恭喜您!答對了,是否繼續游戲?");
            if(result){
                //是 ==> 重復123步驟.
                num = Math.round(Math.random()*100);
                acceptInput();
            }else{
                //否==> 關閉窗口(close方法).
                close();
            }
        }

 9 setInterval  clearInterval

<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>

<script>


    function showTime(){
           var nowd2=new Date().toLocaleString();
           var temp=document.getElementById("ID1");
           temp.value=nowd2;

    }

    var clock;

    function begin(){

        if (clock==undefined){

             showTime();
             clock=setInterval(showTime,1000);

        }

    }

    function end(){

        clearInterval(clock);
    }

</script>

 10  setTimeout clearTimeout

 

var ID = setTimeout(abc,2000); // 只調用一次對應函數.
            clearTimeout(ID);
    function abc(){
        alert('aaa');
    }

 

六 History 對象

6.1 History對象屬性

　　History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

　　History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。

length  返回瀏覽器歷史列表中的 URL 數量。

 

6.2 History對象方法

back()    加載 history 列表中的前一個 URL。

forward()    加載 history 列表中的下一個 URL。

go()    加載 history 列表中的某個具體頁面。

 例子：

<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

 

七 Location對象

　　Location 對象包含有關當前 URL 的信息。

　　Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。

Location對象方法

location.assign(URL)
location.reload()
location.replace(newURL)//注意與assign的區別

 八 HTML DOM Event（事件）

　　HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               //練習：輸入框
onblur         元素失去焦點。               
應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             
應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          
應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並松開。
onkeyup        某個鍵盤按鍵被松開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect      文本被選中。
onsubmit      確認按鈕被點擊。

 8.1 兩種為元素附加事件屬性的方法

<div onclick="alert(123)">點我呀</div>
<p id="abc">試一試!</p>

<script>
    var ele=document.getElementById("abc");


    ele.onclick=function(){
        alert("hi");
    };

</script>

 8.2 注意

<div id="abc" onclick="func1(this)">事件綁定方式1</div>
<div id="id123">事件綁定方式2</div>
<script>
    function func1(self){
        console.log(self.id)
    }

    //jquery下是$(self), 這種方式this參數必須填寫;

//------------------------------------------
    var ele=document.getElementById("id123").onclick=function(){
         console.log(this.id);
        //jquery下是$(this), 這種方式不需要this參數;
    }
    
</script>

 8.3 onload

　　onload 屬性開發中 只給 body元素加.
　　這個屬性的觸發 標志着 頁面內容被加載完成.
　　應用場景: 當有些事情我們希望頁面加載完立刻執行,那么可以使用該事件屬性.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
//          window.onload=function(){
//               var ele=document.getElementById("ppp");
//               ele.onclick=function(){
//                alert(123)
//            };
//          };



          function fun1() {
              var ele=document.getElementById("ppp");
               ele.onclick=function(){
                alert(123)
            };
          }

    </script>
</head>
<body onload="fun1()">

<p id="ppp">hello p</p>

</body>
</html>

 8.4 onsubmit

　　是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.

<form id="form">
            <input type="text"/>
            <input type="submit" value="點我!" />
</form>

<script type="text/javascript">
            //阻止表單提交方式1().
            //onsubmit 命名的事件函數,可以接受返回值. 其中返回false表示攔截表單提交.其他為放行.

            var ele=document.getElementById("form");
            ele.onsubmit=function(event) {
//                alert("驗證失敗 表單不會提交!");
//                return false;
                
            // 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動作。
             alert("驗證失敗 表單不會提交!");
             event.preventDefault();

    }

 8.5 Event對象

　　Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

　　事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.

　　比如onkeydown,我們想知道哪個鍵被按下了，需要問下event對象的屬性，這里就時KeyCode；

　　思考：onclick＝function(event){};這個方法是誰調用的？

8.6 事件傳播

<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
        <div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
        
        </div>
    </div>
    <script type="text/javascript">
    document.getElementById("abc_1").onclick=function(){
        alert('111');
    }
    document.getElementById("abc_2").onclick=function(event){
        alert('222');
        event.stopPropagation(); //阻止事件向外層div傳播.
    }
    
</script>

 九  增刪改查演示

9.1 node的CURD

增

createElement(name)創建元素

appendChild();將元素添加

測試代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div1">hello fiv</div>
    <input  id="add" type="button" value="add" src="computer_outline.jpg">
</body>
    <script>
        var ele=document.getElementById("add");
        ele.onclick = function () {
            var div1 = document.getElementsByClassName("div1")[0];
            var img =document.createElement("img")
            img.setAttribute("src","computer_outline.jpg");
            div1.appendChild(img)
        }
    </script>
</html>

 

刪

獲得要刪除的元素
獲得它的父元素
使用removeChild()方法刪除

 改

第一種方式:

      使用上面增和刪結合完成修改

第二中方式:

使用setAttribute();方法修改屬性          

使用innerHTML屬性修改元素的內容

 查：使用之前介紹的方法

<script type="text/javascript">
//在第一個div中動態增加一個a標簽. 該a標簽點擊之后跳轉到百度首頁.
    function addNode(){
        //1.獲得 第一個div
        var div = document.getElementById("div_1");
        //2.創建a標簽  createElement==>創建一個a標簽   <a></a>
        var eleA =  document.createElement("a");
        //3.為a標簽添加屬性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.為a標簽添加內容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";    
        //5.將a標簽添加到div中
        div.appendChild(eleA);
    }
    //點擊后 刪除div區域2
    function deleteNode(){
        //1 獲得要刪除的div區域
            var div = document.getElementById("div_2");
        //2.獲得父親
            var parent = div.parentNode;
        //3 由父親操刀 
            parent.removeChild(div);
    }
    //點擊后 替換div區域3 為一個美女
    function updateNode(){
        //1 獲得要替換的div區域3
        var div = document.getElementById("div_3");
        //2創建img標簽對象 <img />
        var img = document.createElement("img");
        //3添加屬性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.獲得父節點
        var parent = div.parentNode;
        //5.替換
        parent.replaceChild(img, div);
    }
    //點擊后 將div區域4 克隆一份 添加到頁面底部
    
    function copyNode(){
        //1.獲取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 參數為true 那么克隆時克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.獲得父親
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }
    
    
</script>

 9.2 修改HTML DOM

• 改變 HTML 內容 

        改變元素內容的最簡答的方法是使用 innerHTML ，innerText。

• 改變 CSS 樣式
  

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br>                             
.style.fontSize=48px

 

• 改變 HTML 屬性 

        elementNode.setAttribute(name,value)

        elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

• 創建新的 HTML 元素 

        createElement(name)

• 刪除已有的 HTML 元素 

        elementNode.removeChild(node)

• 關於class的操作 

        elementNode.className

        elementNode.classList.add

        elementNode.classList.remove