javascript再學習

時間  2019-11-07
標籤 javascript 學習 欄目 JavaScript 简体版
原文   原文鏈接
好久之前系統的學過JavaScript，但有許多細節的知識已經忘了，今天再來一個全面的學習梳理、複習。

1、JavaScript基本概念

一、js 技術用在什麼地方?

  1. 地圖搜索
  2. 網頁遊戲
  3. 對用戶輸入校驗(email ,數字,身份證,ip...)
  4. 股市網站..

核心一句話；js能夠對網頁的元素進行編程控制，實現動態效果.javascript

javascript 並不須要服務器的運行，他能夠直接在瀏覽器上跑起來。php

二、js的基本介紹

① js是一種腳本語句，不能獨立運行,它每每和配合別的語言使用, 好比(html/php/jsp/asp/asp.net).css

② js 有本身的函數(系統函數,自定義函數), 變量, 有編程的控制語句(順序,分支,循環), 可是相對說,js的語法規範不是特別嚴格. 與編程語言之間最大的區別是編程語言的語法和規則更爲嚴格和複雜一些。html

③ js是解釋執行語言
js源碼 ->直接被執行(js引擎[內嵌到瀏覽器])myie開源瀏覽器java

④ js能夠對網頁元素編程，能夠改變網頁某個元素的外觀，使其動起來
⑤ js是用於bs開發.
⑥ js是客戶端技術，它運行在客戶端的瀏覽器node

java 和 javascript 沒有任何關係ajax

請注意: 由於瀏覽器的差別，可能有這樣問題，在ie中運行正常的js腳本，在ff(firefox)中運行不正常.[應當在不一樣的瀏覽器中去測試是否ok 瀏覽器兼容.] 解決這個問題的簡單方法是: 儘可能使用js通用的函數.

2、javascript變量 標識符規範

一、如何理解js是事件驅動的腳本語言

事件發生(用戶作某個操做)---[驅動]---->函數的調用正則表達式

二、第一個程序

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script language="javascript">
    //js 中   對象名.方法
    //window是js語句的內置dom對象,無需建立，能夠直接使用 有點相似於php中的超全局數組，不須要定義，

    window.alert("hellow,wrold1");
</script>
</head>

<body>
<script language="javascript">
    //js 中   對象名.方法
    //window是js語句的dom對象,無需建立，能夠直接使用 
    window.alert("hellow,wrold2");
</script>

</body>

總結: js碼能夠放在 html/php 頁面的任何地方，js碼是從上到下依次執行.編程

三、Window 對象

Window 對象表示瀏覽器中打開的窗口。
若是文檔包含框架（frame 或 iframe 標籤），瀏覽器會爲 HTML 文檔建立一個 window 對象，併爲每一個框架建立一個額外的 window 對象。
註釋：沒有應用於 window 對象的公開標準，不過全部瀏覽器都支持該對象。flask

js的變量類型是由js引擎決定，若是要查看某個變量的類型，則可使用 typeof運算符 
//js變量的類型是由js引擎來決定的.

    var name="Corwien";
    //能夠經過 typeof 來查看
    window.alert("name的類型是"+ typeof  name);
    name=123;
    //能夠經過 typeof 來查看
    window.alert("name的類型是"+ typeof name);

js是弱數據類型的語言，在定義變量時，不須要指明該變量的類型（由js引擎來決定）

var name=「Corwien」; //name是字符串
var kk=2  //kk是數
var yy //yy是undefined

若是name=234;//這時name自動變成數.

不聲明變量直接使用
 x=345; //亦可
  • js的變量是區分大小寫的
  • 若是一個方法是屬於window 對象，則能夠不帶window.而直接使用

3、javascript數據類型三大類型

一、js的基本數據類型

① 整數

<script type="text/javascript">
    var n1=0x8a;        0x  十六進制
    var n2=0010123;=83  0開頭爲八進制
    var n3=1234;
    alert(n2);
</script>

② 實數

實數就是小數，這個就不舉例說明

特殊的數值

NaN = not a number 若是提示錯誤說明，你的js代碼中把一個變量錯誤的當作一個數值來使用.
Infinity = 無窮大 

var s="abc";
    
    //parseInt() 函數是js的全局函數，能夠直接使用
    //在哪裏查詢
    alert(parseInt(s));

    var r=7/0;

    alert(r);

輸出：會報錯，無窮大

在js中提供了兩個函數來判斷是否是一個NaN 和 intinity

isNaN(判斷是否是一個數) isIninity

//正則表達式
    var s="000.000123";

    if(isNaN(s)){
        alert("不是數");
    }else{
        alert("是數");
    }

③ 布爾類型

布爾類型表示真和假
在js中 表示 假有以下:

false, 0, 「」, null  , undefined、NaN、空數組假

其它的表示真

代碼:

var a=100;    var a=0; (假)

    if(a){
        alert("真");//php  echo();
    }else{
        alert("假");
    }

ajax
    var obj1=獲取對象;
    if(!obj1){
    alert(「對象建立失敗」);
}

④ 字符型

字符串的基本用法:

var str=」aaaaaaa」;
var str2=’aakflaskf;lsakf;lsa’;

若是咱們但願在字符串中有包含特殊字符，好比 ’ 」 換行。。。考慮使用轉義符\, 用於轉義的還有:

字符串中的特殊字符，須要以反斜槓（）後跟一個普通字符來表示，例如：r、n、t、b、'、 " 、\xxx

二、js的複合數據類型

① 數組

//建立一個數組
    var arr1=[3,5,10,34.8,50,10];
    //說明，數組的下標是從[0]
    //window.alert(typeof arr1);
    //經過對象名.constructor 能夠顯示該對象的構造方法是什麼?
    //window.alert(arr1.constructor);
    //遍歷咱們的數組
    var total_weight=0;
    for(var i=0;i<arr1.length;i++){
        //document.write("<br/>"+arr1[i]);//遍歷
        total_weight+=arr1[i];
    }
document.write("整體重是="+total_weight+" 平均體重="+total_weight/arr1.length);

數組的基本使用

① 如何建立數組

方法1
var arr=[元素1,元素2......] 其實也能夠這樣建立空數組 var arr=[];

元素的個數能夠任意，元素的類型能夠任意

方法2.

var arr=new Array();

② 如何訪問數組的數據

  1. 指定訪問某個元素

數組名[下標號], 下標號默認是從0 開始編號.

  1. 遍歷數組
for(var i=0;i<數組.lenght;i++){
    數組[i];
}

☞ 若是下標越界會怎樣?

報 undefine

☞ js的數組是否可以動態的增加

var a=[2,3];
  a[2]=56;
  alert(a[2]);
   輸出： 56

說明js的數組能夠動態增加.

③ 數組在內存中怎樣存在..

php程序中，經過一個函數傳遞數組，是值傳遞，仍是引用傳遞?

結論是默認是值傳遞(拷貝.)

js代碼中，經過一個函數傳遞數組，是引用傳遞

function test2(val){
        //val[0] 訪問第一個元素.
        val[0]=900;
    }

    arr=[1,2,3];

    //調用函數
    test2(arr);
    
    for(var i=0;i<arr.length;i++){
        document.write("*****"+arr[i]);
    }

輸出是 900*23

畫圖說明;

經過下面的代碼，咱們來講明js的數組是怎樣存在內存的:

function test2(val){
  //val[0] 訪問第一個元素.  val=null;沒有改變數組內的數，故不會改變
  val[0]=900;
 }

 arr=[1,2,3];【1】 

 //調用函數
 test2(arr);
 
 for(var i=0;i<arr.length;i++){
  document.write("*****"+arr[i]);
 }

④ js數組的幾個重要應用
(1)使用 數組名.length 能夠獲得數組大小
(2)拆分字符串 字符串.split(拆分標準) 能夠獲得一個數組。
(3)其它..

① length 屬性能夠返回該數組的大小(遍歷)
② split 函數，能夠拆分字符串.

var str="abc hello boy";
var arr=str.split(" ");
document.write(arr1);

數組小結:
①數組可存聽任意類型的數據
②數組大小沒必要事先指定,能夠動態增加
③數組名能夠理解爲指向數組首地址的引用.
④數組元素默認從0開始編號的.

② 對象

三、js的特殊數據類型

① null 空
② undefined 未定義

四、數據類型的強制轉換

js中提供了兩個函數能夠把字符串強制轉成數
parseInt parseFloat
parseInt() 函數可解析一個字符串，並返回一個整數。

案例以下: 讓用戶輸入兩個數，並計算和.

var num1=window.prompt("請輸入一個數");// 10
var num2=window.prompt("請輸第二個數");// 20
//var res=num1+num2;   結果是：1020  js中會把+當作拼接符，而不會是運算符，所以得用parseInt將字符串轉換爲數
var res=parseFloat(num1)+parseFloat(num2);//php  . 字符串拼接 + 表示運算

    alert("結果是="+res);

    var num3=123;

    var str="hello"+num3;

    alert(str);

四、其餘

運算保留精度

var num1=7;
    var num2=3;

    var res=num1/num2;
    res=res+"";
    //window.alert(typeof res);
    //alert(res);//看出 小數保留精度是17位.若是你要到第二位.

    //把res當作一個字符串，看找到小數點在第幾位.

    var index=res.indexOf(".");//檢索字符串
    window.alert("保留小數兩位是"+res.substring(0,index+3));

咱們爲了更好的管理js文件，能夠把js文件 寫在一個獨立的文件中，而後再須要的使用引入便可

<script src=」js文件路徑」></script>

4、javascript面向對象編程

js面向（基於）對象編程---類（原型對象）與對象（實例）
js面向（基於）對象編程---構造方法和this

基於對象編程(object-based)和面向對象編程叫法區分

js 中咱們能夠認爲這個叫法一致.

js的面對對象編程的介紹
js是一種支持面向對象編程的腳本語句, 它有繼承，封裝，多態的特色.

由於javascript中沒有class（類），因此有人也把類也稱爲原型對象，由於這兩個概念從在編程中發揮的做用看都是一個意思，爲了統一叫法，我這裏統一叫類。

課程中 基於對象==面向對象 類==原型對象

 面向對象編程的引入
一個問題?
張老太養了兩隻貓貓:一隻名字叫小白,今年3歲,白色。還有一隻叫小花,今年10歲,花色。請編寫一個程序，當用戶輸入小貓的名字時，就顯示該貓的名字，年齡， 顏色。若是用戶輸入的小貓名錯誤，則顯示 張老太沒有這隻貓貓。

面向過程：

clipboard.png

咱們的一個解決方法是 ：（js面向對象編程的快速入門）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<script type="text/javascript">

    //定義了一個貓類，
   //php中定義一個類爲 class cat(){},而js則用構造函數function來定義

    function Cat(){
          
    }
    //建立一隻貓 [js對象的屬性能夠動態增長]
    var cat1=new Cat(); //cat1就是一個對象實例
    cat1.name="小白";  //name屬性是公開的
    cat1.age=3;
    cat1.color="白色"

    document.write(cat1.name+"--"+cat1.age+"--"+cat1.color+cat1[‘name’]);

    
    //特別說明
    // var cat1=new Cat(); //當作類（原型對象使用）
    // Cat(); //當作函數
</script>

</html>

對象公開屬性的訪問方式有
對象名.屬性名; cat1.name
對象名[’屬性名’]; cat1[‘name’]

js中自定義類(原型對象)的五種方法

  1. 工廠方法---使用new Object建立對象並添加相關性
  2. 經過構造函數來定義類(最多)
  3. 經過prototype 來定義（原型方式）
  4. 構造函數 和 prototype混合
  5. 動態建立對象模式

js中一塊兒都是對象

可用經過 instanceof 來 判斷某個對象實例是否是某個類的對象實例,
案例:
//如何判斷一個對象實例是否是某個 類的(原型對象)

if(p1 instanceof Dog){
        
        window.alert("p1是Person一個對象實例");
    }else{
        window.alert("p1是Dog一個對象實例");
    }

clipboard.png

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<script language="javascript" type="text/javascript">
    function Person(name,age,salary){
        this.name=name;//公開
        this.age=age;//公開
        var salary=salary;//私有

        //特權函數
        this.showInfo=function showInfo(){
        document.write(this.name+this.age+salary);//這裏salary是私有
        };
    }
    var p1=new Person("宋江",23,100000);
    //window.alert(p1.name+p1.age+p1.salary);
    //p1.showInfo=showInfo;
    p1.showInfo();
</script>
</head>
<body>
</body>
</html>

輸出：宋江23100000

一個類中能夠有公開的函數 

this.屬性=funciton (){};//屬性是公開的也必然形成這個函數時公開的

一個類中也能夠有私有的函數

代碼:

function Person(){
            
            this.name="abc";
            var salary=900;

            this.fun1=function (){//公開的屬性、函數
              
                //代碼
                sayHello();
            }

            this.fun2=function(){
                sayHello();
            }

            this.fun3=function(){
                sayHello();
            }

            function sayHello(){   //私有函數，只能在函數內部使用
                document.write("hello,資源打開"+this.name+" "+salary);
            }
        }

        var p1=new Person();
        p1.fun2();
//p1.sayHello();  這樣調會報錯

輸出：hello，資源打開abc 900

小結: 經過代碼咱們能夠看出.私有函數能夠被 該類的其它方法(公開)調用，同時私有函數能夠去訪問 該對象的 公開或者私有的屬性.

5、js內部類string、array

一、String類

String是動態類,提供了對字符串的各類操做，在這裏介紹幾個最經常使用的函數，其它的請你們參考javascript幫助文檔。

  1. indexOf() 返回某個字符串值在該字符串中首次出現的位置
  2. split() 把字符串分割爲字符串數組
  3. substr() 提取取從start下標開始的指定數目的字符
  4. substring() 提取字符串中介於兩個指定下標之間的子串
  5. charAt() 返回指定位置的字符
  6. length 屬性,能夠獲得字符串的長度
  7. toString() js中全部內部對象的成員方法,做用是將對象中的數據轉成某個格式的字符串，咱們在實際運用中在詳細介紹
  8. match()/replace()/search() 用的不少，涉及正則表達式

示例：

<script type="text/javascript">

    
    var txt="hello中國";
    // document.write(txt.indexOf("worldr"));

    // var arr=txt.split("");//把字符串分割按什麼標準

    // document.write(arr);


    //substring(start,length) 從start開始取，取出lenght個字符,若是不夠取，則儘可能的取
        
   // var sub=txt.substr(0,3);//下標從0開始取，取出3個字符


    //stringObject.substring(start,stop) 從start開始取，取到stop-1
    //var sub=txt.substring(0,2);

    //charAt(index) 表示取出第幾個字符
    //var sub=txt.charAt(3);

    //window.alert(sub);

    //練習 輸入文件全路徑 獲取文件名和後綴?
    var file_path="c:/abc/abc北京/helo/廣州.exe";

    //思路  找出 一個字符串最後出現的位置
    var last_index=file_path.lastIndexOf("/");

    window.alert(file_path.substr(last_index+1));
</script>

二、Array類

  1. concat() 鏈接兩個或更多的數組，並返回結果。
  2. sort() 對數組的元素進行排序
  3. toString() 把數組轉換爲字符串，並返回結果
  4. pop() 刪除並返回數組的最後一個元素
  5. push() 向數組的末尾添加一個或更多元素,並返回新的長度
  6. splice() 方法用於插入、刪除或替換數組的元素
  7. length 屬性

示例：

<script language="javascript">

    //數組的建立

  var arr=new Array();

  //靜態設置數據
  arr[0]=23;

  arr[1]="小紅";
  arr[2]="老王";

  /*
  // 動態的添加
  for(var i=0; i<3; i++){
    
    arr[i]=window.prompt("請輸入第"+(i+1)+"數");
    document.write(arr);
  }
  */

  //如何刪除數組的某個元素 

  //刪除第2個元素->下標爲1
   arr.splice(1,1); //第一個1 表示刪除第幾個元素, 第二個1表示刪除1個
   document.write(arr);

  //修改第二個 "小紅"-> "小明"
   arr.splice(1,1,"小明");//更新

  //把一個新的數據"北京"，添加到第1元素後面
  //arr.splice(1,0,"北京");

  //遍歷數組
  document.write("***********<br/>");
  for(var key in arr){
    document.write(arr[key]+"<br/>");
  }

</script>

打印：

23,老王***********
23
小明

這裏咱們須要注意: splice() 函數，他把 刪除，修改，添加 均可以完成,根據傳入的參數的個數和值，不一樣來決定進行怎樣的操做.

三、經常使用系統函數

js的函數間傳遞數據時候，按照什麼來傳遞
基本數據類型： number boolean string 是按照值傳遞
數組和對象： 引用傳遞.

  1. eval() //能夠把一個字符串當作腳原本運行,用處很大
  2. parseInt() //把字符串轉成整數
  3. parseFloat() //把字符串轉成小數
  4. isNaN() //判斷某個值是否是數(該函數不是特別完美)
  5. typeof() // 變量類型
  6. encodeURI() // 編碼某個編碼的 URI
  7. decodeURI() // 解碼

6、js事件 事件驅動機制

概述 : js是採用事件驅動(event-driven)的機制來響應用戶操做的，也就是說當用戶對某個html元素進行某個操做時，會產生一個事件,該事件會驅動某些函數來處理,
由鼠標或熱鍵引起的一連串程序的動做，稱之爲事件驅動（Event-Driver）。
對事件進行處理程序或函數，咱們稱之爲事件處理程序（Event Handler）

快速入門案例:

<script type="text/javascript">

    //事件處理函數
    function test1(event){
        window.alert("ok");
        window.alert(event.clientX);//橫座標的信息
    }


</script>

<input type="button" value="tesing" onclick="test1(event)"/>//事件源，時間發生的地方，附帶產生事件對象event，它的做用是封裝改事件的一些信息

事件源: 就是產生事件的地方(html元素)
事件: 點擊/鼠標移動/鍵按下..
事件對象: 當某個事件發生時，可能會產生一個事件對象，這個事件對象會封裝該事件的信息(好比點擊的x,y. keycode),傳遞給事件處理程序
事件處理程序: 響應用戶的事件.

clipboard.png

快速入門 ：
獲取鼠標點擊出的座標

<html> 
<head> 
<script type="text/javascript"> 
function show_coords(event) { 
x=event.clientX;
y=event.clientY;
alert(event+"X coords: " + x + ", Y coords: " + y) 
} 
</script> 
</head> 
<!--body元素響應onmousedown事件 -->
<body onmousedown="show_coords(event)"> 
<p>Click in the document. An alert box will alert the x and y coordinates of the mouse pointer.</p> 
</body> 
</html>

clipboard.png

事件的分類

clipboard.png

一、如何綁定事件監聽

  1. 直接在某個html控件上指定
  2. getElementById(‘’) 獲取控件後，再綁定.
  3. 經過 addEventListener() 或者是 attachEvent() 來綁定
  4. 一個事件能夠有多個事件監聽者(函數)

給某個html元素(控件), 綁定事件的三種方法
一、 靜態綁定

<input type="button" onclick="函數" vlaue="xx值"/>

二、動態綁定

// 獲取某個對象再綁定
getElementById("htmlid").事件=方法

實例：

<script type="text/javascript">
    
    function test1(){
    
        window.alert("test1");
        //這句話的意思就是把but2 的onclick 和 test2函數綁定
        //document.getElementById('but2').onclick=test2;//  第一種方式
        //but2.onclick=test2;//第二種方式
        $('but2').onclick=test2;//第三種方式
        
    }
    
    function $(id){
        return document.getElementById(id);
    }

    function test2(){
        
        window.alert("test2");
    }
</script>

<input type="button" id="but1" onclick="test1()" value="測試">
<input type="button" id="but2" value="測試2">

<script language="javascript" type="text/javascript">
    //動態的建立一個新按鈕
    function creNewButton(){
        var mybut=document.createElement("input");
        mybut.type="button";
        mybut.onclick=abc;//按鈕產生後就會和這個事件動態綁定
    }

    function abc(){
        window.alert("ok");
    }
</script

點擊按鈕1後，會給but2綁定一個時間，若是再點擊but2就會有信息彈出

三、經過 attachEvent 和 detachEvent 方法來（動態）綁定事件和（動態）解除事件綁定

<input type="button" id="but1"  value="投布什一票">
<script type="text/javascript">
    //動態綁定
    var but1 = document.getElementById("but1");

    // 第一個參數是事件名，也能夠是其餘事件,只有微軟的IE瀏覽器支持該寫法
    // but1.attachEvent("onclick",vote);

    // 第二種方式(火狐和其餘瀏覽器)
    but1.addEventListener("click", vote, false);

    function vote(){
        
        window.alert("你投了布什一票，之後不能再投");

        //解除綁定
        but1.detachEvent("onclick",vote);
    }

</script>

7、js dom編程

咱們在前面把js的基礎知識都瞭解完了，但是若是你認爲js只 能作相似點擊一個按鈕，顯示當前時間，那你就過小看js,實際上js更重要的做用是可讓用戶對網頁元素進行交互操做，這纔是學習js的精華之所在。

一、dom的介紹

DOM = Document Object Model(文檔對象模型)，根據W3C DOM規範，DOM是HTML與XML的應用編程接口（API），DOM將整個頁面映射爲一個由層次節點組成的文件dom的來源:

DOM的簡單映射圖：

clipboard.png

js把瀏覽器,網頁文檔和網頁文檔中的 html 元素都用相應的內置對象來表示，這些對象與對象間的層次關係構成dom模型,針對網頁(html,jsp,php,aspx.net)的dom就是html dom。咱們這講的就是html dom。

clipboard.png

這裏有幾個特別重要的概念要說清楚:
①上面說的內置對象就是dom 對象,準確的說是html dom對象。
②由於我目前講的是 html dom 編程，因此我提到的dom 編程,dom 對象都是說的 html dom 編程 和 html dom對象，請你們不要犯迷糊。
③dom 編程時，會把html文檔看作是一顆dom 樹(首先要畫出html dom圖)
④dom 編程的核心就是各個dom 對象.

Dom 爲一種模型，他的 思想是 能夠把裏邊的任何東西看爲對象。

二、dom樹

在進行 html dom 編程時，咱們把html文件當作是一個dom樹，該dom樹在內存中有層級關係，經過操做dom樹，就能夠改變html頁面的顯示效果。

clipboard.png

從上圖能夠看出：從html dom的角度看，每一個html文件的元素都會被當作一個Node節點對象來看待，就可使用它的方法，同時對於html dom說，由於元素自己就多是img/button/form同時有當作 Button ImageForm,內置對象。

示例說明：
html文件

<img id=’myimg’ src=」a.jpg」/>
<script>
var myimg=document.getElementById(‘myimg’);
// myimg被當作是Node對象同時也能夠當作img對象
</script>

myimg被當作是Node對象同時也能夠當作img對象。

xml文件

<class>
<stu id=」mystu」>
愷易
</stu>
</class>

var mystu=document.getElementById(「mystu」);
這時mystu就是Node對象

clipboard.png

三、dom層次關係dom對象

bom
bom 的全稱是瀏覽器對象模型 (bowser object model), 它規定全部的瀏覽器在設計時，要考慮支持 bom提出的規範,這樣才能正常瀏覽網頁。

dom 和 bom 的關係
bom 是一個綱領性，dom 就是具體的.( dom 對象、屬性、方法.)

bom包括瀏覽器全部對象
dom 主要是 bom（document 對象的擴展）

dom的層級關係

clipboard.png

這裏,我只列舉了經常使用的dom對象。從左圖咱們能夠看出:
dom對象自己也有層次，好比document對象是window對象的一個成員屬性，而body對象又是document對象的一個成員屬性。

重要核心思想：
在進行dom編程時，每一個html的元素被當作一個Node節點(對象)。

clipboard.png

Dom的節點和屬性

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<title>文檔標題 </title>
<script language="javascript" type="text/javascript">
    function test(obj){
        var div1=document.getElementById("div1");
        window.alert(div1.nodeName); //獲取此元素的對象,node爲一個對象,輸出元素 div
    }
</script>
</head>
<body>
<a href="blank">my link</a>
<h1>my title</h1>
<div id="div1">烏龜</div>

<input type="button" value="test" onclick="test(this)"/>
</body>
</html>

四、window對象

Window 對象表示一個瀏覽器窗口或一個框架。在客戶端 JavaScript中，Window 對象是全局對象,要引用當前窗口根本不須要特殊的語法,能夠把那個窗口的屬性做爲全局變量來用。

clipboard.png

4.1 window對象經常使用的函數和屬性

  1. alert() 顯示消息和一個確認按鈕的警告框
  2. confirm() 顯示消息以及確認按鈕和取消按鈕的對話框
  3. setInterval() 按照指定的週期(毫秒計)來循環調用函數或計算表達

② setInterval("函數名()",調用該函數的間隔時間) 定時器和 clearInterval定義和用法
setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

  1. 簡單時鐘
<html>
<head>
<title>文檔標題</title>

</head>
<body>
當前時間是, <!--讀10秒自動中止,並彈出一句話"hello.wrold"-->
<span id="myspan">???</span>
</body>
<script type="text/javascript">

    var i=0;
    var myspan=document.getElementById("myspan");
    
    function abc(){
        
        //window.alert(++i);
        var mytime=new Date()    ;        
        //對象.innterText表示在該對象對應標籤的中間放入文本
        myspan.innerText=mytime.toLocaleString();

        if(++i==10){
            window.clearInterval(mytime2);
            window.alert("hello,world,不走了");
        }
    }

    //作了一個定時器
var mytime2=window.setInterval("abc()",1000);    //每隔1秒調用一次abc函數

</script>
</html>

五、document對象

Document對象表明整個html文檔,可用來訪問頁面中的全部元素,是最複雜的一個dom對象，能夠說是學習好dom編程的關鍵所在。
Document對象是Window對象的一個成員屬性,經過window.document來訪問,固然也能夠直接使用 document

clipboard.png

  1. write() 向文檔寫文本或HTML表達式或JavaScript 代碼
  2. writeln() 等同於write()方法,不一樣的是在每一個表達式以後寫一個換行符
  3. open() 打開一個新文檔,並刪除當前文檔內容
  4. close() 關閉open()文檔流
  5. getElementById() 經過html控件的id 獲得該控件.若是有相同的id則只取第一個,返回對擁有指定id的第一個對象的引用
  6. getElementsByName() 經過html控件的名字返回帶有指定名稱的對象集合
  7. getElementsByTagName() 經過html的標籤名返回帶有指定標籤名的對象集合
  8. createElement() 建立一個指定標籤名的元素[好比:動態建立超連接]
    （注：此處對象集合與數組是有區別的）

案例：

<script type="text/javascript">
    //經過id獲取對象
    function test(){
        var a1=document.getElementById("a1");//把a1這個標籤拿到，既獲取了其全部內容
        //若是要取出某個屬性
       //a1.innerText能夠取到 鏈接到sina

        window.alert(a1.id+" "+a1.href+" "+a1.innerText);
//能夠改變其內容
        a1.innerText="鏈接到百度";
        a1.href="http://www.baidu.com";
    }

    //經過name來獲取.對象
    function test2(){
    
        //使用
        var hobbies=document.getElementsByName("hobby");
// window.hobbies(hobbies.length);//將四個hobby所有拿到，不能區分是否選了
        //遍歷這個集合
        for(var i=0;i<hobbies.length;i++){
            
            //判斷選中的爲false 、true
            //window.alert(i+ " "+hobbies[i].checked);
            if(hobbies[i].checked){
                window.alert("你的愛好是"+hobbies[i].value);
            }
        }
    }

    //經過標籤名
    function test3(){
        var inputs=document.getElementsByTagName("input");
        window.alert(inputs.length);
    }



</script>
<body>
<a id="a1" href="http://www.sina.com">鏈接到sina</a><br/>
<a id="a1" href="http://www.sohu.com">鏈接到sohu</a><br/>
<a id="a3" href="http://www.baidu.com">鏈接到baidu</a><br/>
<input type="button" value="測試" onclick="test()"/><br/>
請選擇你的愛好:
<input type="checkbox" name="hobby" value="旅遊">旅遊
<input type="checkbox" name="hobby" value="音樂">音樂
<input type="checkbox" name="hobby" value="體育">體育
<input type="checkbox" name="hobby" value="電影">電影
<input type="button" value="看看你的愛好" onclick="test2()"/><br/>
<input type="button" value="經過tagname來獲取元素" onclick="test3()"/><br/>
</body>

clipboard.png

咱們綜合運用一下前面學習到的各類知識

動態的建立元素(節點)/添加元素(節點)/刪除元素(節點)

<html>
<head>
<title>Dom 節點操做</title>
</head>
<script type="text/javascript">
function test1(){
     // 1.建立 a 元素，createElement(標籤名);
     var myhref = document.createElement("a"); // <a></a>
     myhref.innerText = "鏈接到百度";
     myhref.href = "http://www.baidu.com";
     myhref.id = "myhref";

     // 將建立的元素掛載到document.body下
     // document.body.appendChild(myhref);

     // 掛載到 div1 節點下
     div1.appendChild(myhref)
 }

 // 刪除節點
    function test2(){
        //document.getElementById('div1').removeChild(document.getElementById('myhref'));
        //上面的方法太笨，能夠用下面的方法，直接對其操做
        var node=document.getElementById('myhref');

        // 刪除單個節點
        node.parentNode.removeChild(node);   
      
    }

    // 刪除所有a節點
    function test3(){
        //document.getElementById('div1').removeChild(document.getElementById('myhref'));
        //上面的方法太笨，能夠用下面的方法，直接對其操做
        var node=document.getElementById('myhref');
        // var p = node.parentNode;

        // 刪除單個節點
        // node.parentNode.removeChild(node);   
        // console.log(p);
       
        // 刪除全部子節點
        var p = node.parentNode;
        var childs = p.childNodes; 
        console.log(childs);

        for(var i = childs.length - 1; i >= 0; i--)
        { 
            // alert(childs[i].nodeName); 
            p.removeChild(childs[i]); 
        }
    }

    // 刪除全部option元素
    function delOption()
    {
          var selParent=document.getElementById('hobby');
          var childs = selParent.childNodes;
          console.log(childs);

          for(var i = childs.length - 1; i >= 0; i--)
        { 
            // alert(childs[i].nodeName); 
            if(i >= 3)
            {
                selParent.removeChild(childs[i]); 
            }
            
        }

         console.log(selParent);   // 打印：<select name="hobby" id="hobby"></select>
    }
    
    // 將上面的刪除option 封裝爲一個函數
function delOptionFunc(eleId)
{
    var selParent=document.getElementById(eleId);
    var childs = selParent.childNodes;
    for(var i = childs.length - 1; i >= 0; i--)
    {
        // 這裏暫寫死
        if(i >= 3)
        {
            selParent.removeChild(childs[i]);
        }
    }
}


</script>

<body>
<input type="button" value="建立一個a標籤" onclick="test1()"/><br/>
<input type="button" value="刪除單個a標籤" onclick="test2()"/><br/>
<input type="button" value="刪除所有a標籤" onclick="test3()"/><br/>
<input type="button" value="刪除select 子元素" onclick="delOption()"/><br/>
<!--引入 css id  class  [dom如何去操做一個外表css]-->
<div id="div1" style="width:200px;height:200px;background-color:green">div1</div>

<select name="hobby" id="hobby">
 <option value=''>請選擇</option>
 <option value='bas'>籃球</option>
 <option value="football">足球</option>
 <option value="pai">排球</option>
</select>
</body>

</html>

clipboard.png

爲何添加的東西在原碼中看不到呢？由於在 內存中，瀏覽器真正顯示的東西不徹底是在原碼，它第一次是看原碼，後邊就會看節點樹，首先它先把原碼加載到內存中，它會以樹爲標準。

六、body對象

body 對象表明文檔的主體 (HTML body)。
body對象是document對象的一個成員屬性,經過document.body來訪問.

使用body對象，要求文檔的主體建立後才能使用,也就是說不能再文檔的body體尚未建立就去訪問body,這個後面會舉例說明.

body對象經常使用的函數和屬性，其它的參考幫助文檔：

clipboard.png

  1. appendChild() 添加元素
  2. removeChild() 刪除元素
  3. getElementsByTagName() 經過html元素名稱,獲得對象數組.
  4. bgColor 文檔背景色
  5. backgorund 文檔背景圖
  6. innerText 某個元素間的文本
  7. innerHtml 某個元素間的html代碼
  8. onload事件 文檔加載時觸發
  9. onunload事件 文檔關閉時觸發
  10. onbeforeunload事件 文檔關閉前觸發
  11. onselectstart事件 用戶選中文檔body體的內容時觸發
  12. onscroll事件 用戶拉動滾動條時觸發

七、style對象

style對象和document對象下的集合對象styleSheets有關係,styleSheets是文檔中全部style對象的集合,這裏講解的重點是style對象,styleSheets不是重點。

style對象定義:即表示當前元素的樣式設置

style對象不是針對某一個html元素,而是對全部的html元素而言的,也就是說,咱們能夠經過 document.getElementById(「id」).style.property=「值」 ,來控制網頁文檔的任何一個元素(對象)的樣式,固然這個很重要的.

對象方法：

  1. backgroundRepeat 設置是否及如何重複背景圖像
  2. border 在一行設置四個邊框的全部屬性
  3. display 設置元素顯示方式
  4. width 設置元素的寬度
  5. height 設置元素的高度
  6. visibility 屬性設置元素是否可見

實戰：
仿搜狐廣告欄：
clipboard.png

<!--特別說明 doctype html 4.0 或者不寫都可，可是用 xhtml 1.0不行由於 document.body.clientHeight爲0-->
<html >
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<head>

    <link href="my.css" type="text/css" rel="stylesheet"/>
    <title>無標題頁6</title>
    <style>
body 
{
   font-size:12px;
    margin:0;/*把body的邊距清零*/
}

.div1{
    width:132px;/*width:128px;*/
    height:160px;
    /*background-color:pink;*/
}
.navi{
    height:160px;
    width:22px;
    /*background-color:green;*/
    float:left;
}
.navi ul{
    padding:0px;
    margin-left:0px;
}
.navi ul li{
    height:50px;
    width:22px;
    background-color:#E8E8E8;
    float:left;
    list-style-type :none;
    margin-top:3px;
    text-align:center;
    padding-top:5px;
}
.content3,.content1,.content2{
    height:160px;
    width:104px;
    margin-left:2px;
    /*background-color:blue;*/
    
    float:left;
}
.content2 ul,.content3 ul,.content1 ul{
    padding:0px;
    margin-left:4px;
    margin-top:2px;
    /*background-color:green;*/
}
.content2 ul li,.content3 ul li,.content1 ul li{
    
    
    float:left;
    list-style-type :none;
    font-size:12px;
    line-height:20px;
    
}
.content2{
    display:none;
    
}
.content3{
display:none;
    
}


    </style>
    <script language="javascript" type="text/javascript">
    <!--
    function change(obj,obj2){
        //由於style在外邊css,因此這樣獲取不到，可是設置後，就能夠在本頁獲取了
        //window.alert(content1.style.display);
        //window.alert(obj.innerText.length+"="+"出國".length);
        //obj2表明你當前選擇的這個li,設置背景爲黃色
        obj2.style.backgroundColor="#FFC63D";
        if(obj=="zs"){
            //window.alert('招生');可選狀態，另外兩個位不可選
            content1.style.display="block";
            content2.style.display="none";
            content3.style.display="none";

        }else if(obj=="rz"){
            //window.alert('熱招');
            content1.style.display="none";
            content2.style.display="block";
            content3.style.display="none";
        }else if(obj=="cg"){
            //window.alert('出國');
            content1.style.display="none";
            content2.style.display="none";
            content3.style.display="block";
            
        }
    }
    function change2(obj){
        
        obj.style.backgroundColor="#E8E8E8";
    }
    //-->
    </script>
</head>
<body>
    <div class="div1">
    <div class="navi">
    <ul>
    <li onmouseover="change('zs',this)" onmouseout="change2(this)">招生</li>
    <li onmouseover="change('rz',this)" onmouseout="change2(this)">熱招</li>
    <li onmouseover="change('cg',this)" onmouseout="change2(this)">出國</li>
    </ul>
    </div>
    <div id="content2" class="content2">
    <ul>
        <li><a href='#'>熱招熱招熱招月!</a></li>
        <li><a href='#'>熱招熱招熱招月!</a></li>
        <li><a href='#'>熱招熱招熱招月!</a></li>
        <li><a href='#'>熱招熱招熱招月!</a></li>
        <li><a href='#'>熱招熱招熱招月!</a></li>
        <li><a href='#'>熱招熱招熱招月!</a></li>
        <li><a href='#'>熱招熱招熱招月!</a></li>
        <li><a href='#'>熱招熱招熱招月!</a></li>
    </ul>
    </div>
    <div id="content3" class="content3">
    <ul>
        <li><a href='#'>出國出國出國月!</a></li>
        <li><a href='#'>出國出國出國月!</a></li>
        <li><a href='#'>出國出國出國月!</a></li>
        <li><a href='#'>出國出國出國月!</a></li>
        <li><a href='#'>出國出國出國月!</a></li>
        <li><a href='#'>出國出國出國月!</a></li>
        <li><a href='#'>出國出國出國月!</a></li>
        <li><a href='#'>出國出國出國月!</a></li>
    </ul>
    </div>
    <div id="content1" class="content1">
    <ul>
        <li><a href='#'>澳洲留學高中月!</a></li>
        <li><a href='#'>澳洲留學高中月!</a></li>
        <li><a href='#'>澳洲留學高中月!</a></li>
        <li><a href='#'>澳洲留學高中月!</a></li>
        <li><a href='#'>澳洲留學高中月!</a></li>
        <li><a href='#'>澳洲留學高中月!</a></li>
        <li><a href='#'>澳洲留學高中月!</a></li>
        <li><a href='#'>澳洲留學高中月!</a></li>
    </ul>
    </div>
    </div>    
</body>
</html>

display 和 visiability 區別
這兩個屬性均可以用於設置某個區域或者控件，顯示不顯示, display 設置 none; 它不顯示同時讓出本身佔用的空間 ；
visiability 這個屬性設置成 hidden 就不顯示, 可是它不讓這個空間.

style對象的案例:

clipboard.png

<body>
<span id="myspan"  onclick="test(this);" style="border: 3px solid red;cursor:hand;
">+</span> 個人家庭
<ul id="myul" style="display:none">
<li>爸爸</li>
<li>媽媽</li>
<li>哥哥</li>
</ul>

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

    function test(obj){
        //myspan
        if(obj.innerText=="+"){
            //顯示成員
            myul.style.display="block";
            obj.innerText="-";
        }else if(obj.innerText=="-"){
        
            myul.style.display="none";
            obj.innerText="+";
        }
    }

//-->

</script>

八、form對象

forms經常使用的函數和屬性
1.lenght 設置或獲得集合大小。
2.item() 取第幾個表單

<body>

<form action="a.php" method="post">
u:<input type="text" name="username" value="hello"/><br/>
p:<input type="password" name="password" value="xxx"/><br/>
<input type="submit" value="提交"/>

</form>


<form action="b.php" method="post">
u:<input type="text" name="username"/>
</form>

<input type="button" onclick="mysubmit()" value="提交"/>
</body>
<script type="text/javascript">

<!--
 //window.alert(document.forms.length);//能夠獲得表單的數量
    //window.alert(document.forms.item(1).action);//能夠獲得第一個表單的action下的值：a.php
  

    
    //取出第一個from
    function mysubmit(){

    var form1=document.forms.item(1);
    
    //window.alert(form1.username.value);//此方法能夠得到表單裏的任何屬性和值
    //window.alert(form1.password.value);
    
    form1.submit();
    }

//-->

</script>

九、table對象

概述，table 對象表明一個 html 表格。 在HTML文檔中<table>標籤每出現一次，一個table對象就會被建立

table經常使用的屬性:

  1. id 設置或獲得該表格的id
  2. name 設置或獲得該表格name
  3. border 設置或獲得該表格的邊框
  4. width 設置或獲得該表格的寬度
  5. height 設置或獲得該表格的高度
  6. cellpadding 設置或返回單元格內容和單元格邊框之間的空白量
  7. cellspacing 設置或返回在表格中的單元格之間的空白量
  8. style 設置或獲得該表格的style對象

咱們看看table經常使用的屬性(對象集合):

  1. rows[] 表格中全部行的一個數組(針對表格)
  2. cells[] 表格中全部單元格的一個數組(針對一行)

table經常使用的方法 :
1．deleteRow() 刪除一行
2．insertRow() 插入一行

tableRow和tableCell
TableRow 對象
TableRow 對象表明一個 HTML 表格行。
在 HTML 文檔中 <tr> 標籤每出現一次，一個 TableRow 對象就會被建立。

TableCell 對象
TableCell 對象表明一個 HTML 表格單元格。
在HTML 文檔中 <td> 標籤每出現一次，一個TableCell 對象就會被建立。
[其方法和屬性參看文檔]

table對象 中的集合對象有兩個
rows[] 還有一個 cells[]

rows[] 表示全部行的一個集合
cells[] 表示一行的全部列

實例：

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<title>梁山好漢108將</title>
<script language="javascript" type="text/javascript">
    
    function test(){
        //經過id獲取宋江,在此若是不能用id，而要用table屬性來獲取
        //window.alert(document.getElementById("name").innerText);

        var mytable=document.getElementById("mytab");//mytable就是一個table對象
        // window.alert(mytable.rows[1].innerHTML);
        //上面的innerHTML代碼取出所有一行HTML的東西：<td>1</td><td id="name">宋江</td><td>及時雨</td>
        //window.alert(mytable.rows[1].innerText);
        //而innerText取出的爲一行文本里的東西：1宋江及時雨

        window.alert(mytable.rows[2].cells[2].innerHTML);//取出宋江  innerHTML=innerText二者均可以
        // innerHTML=innerText  一個是按html文件取，一個是按文本取
    }


    //添加一個英雄
    function addHero(){
        //建立一個
        //document.createElement("<tr>");//第一種方法  能夠，可是太慢
        //第二種方法  添加一行
        var mytable=document.getElementById("mytab");
        //3表示添加到表格的第幾行
        //tableRow表示一個新行，它的類型是TableRow
        var tableRow=mytable.insertRow(3);//拿到空的行<tr></tr>，可是沒有<td></td>
        //經過tableRow添加新列,tableCell類型是TableCell 
        var tableCell=tableRow.insertCell(0);//至關於<tr><td></td></tr>
        tableCell.innerHTML="3";//<tr><td>3</td></tr>

        var tableCell=tableRow.insertCell(1);
        tableCell.innerHTML="吳用";//<tr><td>3</td><td>吳用</td></tr>

        var tableCell=tableRow.insertCell(2);
        tableCell.innerHTML="智多星";//<tr><td>3</td><td>吳用</td><td>智多星</td></tr>
    }

    //刪除
    function deleteHero(){
        //刪除一個英雄
        var mytable=document.getElementById("mytab");
        mytable.deleteRow(3);

    }

    //修改
    function updateHero(){
        //找到宋江的外號這個對象<td></td> TableCell
        var mytable=document.getElementById("mytab");
        mytable.rows[1].cells[2].innerText="黑三郎";

    }



</script>
</head>
<body>
<table id="mytab" border="1">
<tr><th>排名</th><th>姓名</th><th>外號</th></tr>
<tr><td>1</td><td id="name">宋江</td><td>及時雨</td></tr>
<tr><td>2</td><td>盧俊義</td><td>玉麒麟</td></tr>
</table>
<input type="button" value="testing" onclick="test()"/>
<input type="button" value="添加" onclick="addHero()"/>
<input type="button" value="刪除" onclick="deleteHero()"/>
<input type="button" value="修改" onclick="updateHero()"/>
</body>
</html>

clipboard.png

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