JAVA EE-JS

原創 Thingvellir 2020-02-22 11:01

JAVASCRIPT 筆記整理

即使是一個智慧的地獄，也比一個愚昧的天堂好些。 —— 雨果

ECMAScript

實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：
1. 核心（ECMAScript）
2. 文檔對象模型（DOM） Document object model(整合js和html和css)
3. 瀏覽器對象模型（BOM） Broswer object model(整合js和瀏覽器)

JS的架構

JS的結合方式

    1. 
<html>
  <head>
    <title>01-js結合方式01l.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <!-- 在頁面上使用script標籤. 在標籤中書寫js代碼 -->
        <script type="text/javascript">
            alert("hello world!");
        </script>
  </head>

  <body>
  </body>
</html>

2.

<html>
  <head>
    <title>01-js結合方式01l.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <!-- 使用src屬性引入外部js文件
            注意: 在引入外部js的script標籤中,不能再書寫js代碼.
         -->
        <script type="text/javascript" src="hello.js" ></script>
  </head>

  <body>
  </body>
</html>

JS的語法

需要特別注意的是，JS是弱類型語言，所有對象的聲明都通過var 關鍵字來進行。

        <script type="text/javascript">
            //1 聲明變量, 變量的類型是隨時可以變化的
            var a = 1;
                a = "haha";
                a = false;
             //2 註釋    註釋寫法與java一模一樣.沒有文檔註釋. //   /**/
             //3 聲明變量
             var b=2,c=3;
             //4 js中每行語句的結束使用 ";" 號來表示. 也可以不使用";".(推薦都加上)

             //5 聲明變量時,也可以不加var => 加var聲明,作用範圍在代碼塊中.不加var聲明,作用範圍爲全局

             //6 字母大小寫.語法區分大小寫 

             function fun1(){
                 var d = "hello"
                 e =  "heihei";
             }

             fun1();
             alert(e);//
        </script>

JS的變量

<script type="text/javascript">
            //java中的變量分類
                //1 基本數據類型 => 8個
                //2引用數據類型
            //js中的變量分類
                //1 原始類型
                //2 對象類型
    //---------------------------------------------------------------
        //js的原始類型  5種
            //1 number 數字  不分整型或浮點型
            //2 string 字符串  
            //3 boolean 布爾 
            //4 null  一般人爲來賦值爲null.  對象數據類型的佔位符.
            //5 undefined(未定義) null的衍生值. 通常是系統自動賦值.當我們創建一個變量,並且沒有初始化.

            var a = 10;
            var b = 3.14;
            var c = "hello";
            var d = 'world';
            var e = true;
            var f = null;
            var g = undefined;
            var h ;
            var i = new Object();
        //運算符=> typeof => 返回原始類型的類型

        /* alert(typeof a);
        alert(typeof b);
        alert(typeof c);
        alert(typeof d);
        alert(typeof e);
        alert(typeof f);//Object
        alert(typeof g);
        alert(typeof h); */
        alert(typeof i);
        // typeof null => object
        // 是javascript中的一個bug.後來將該bug保留了.
//----------------------------------------------------
//
        </script>

在許多語言中，字符串都被看作引用類型，而非原始類型，因爲字符串的長度是可變的。ECMAScript 打破了這一傳統。
JS中的語句

JS中的語句可以類比Java當中的。

<script type="text/javascript">
        //java中的語句
            //1 判斷
                // if  else/ switch
            //2 循環
                // for / while do / do while
        //js中的語句(語法種類等都與java的一模一樣)
            //1 判斷
                // if  else/ switch
            //2 循環
                // for / while do / do while
        //----------------------------------------------------------------
        function fun1(){
                    var num1 = 100;
                    var num2 = 100;
                    if(num1<num2){
                        alert("num1小");
                    }else if(num1==num2){
                        alert("相等");
                    }else{
                        alert("num1大");
                    }
                }
        //fun1();
    //-----------------------------------------------------------------
    //從1累加到100
    function fun2(){
        var count = 0;
        for(var i = 1 ; i<=100 ; i++){
            count += i;
        }
        alert(count);
    }
    fun2();

    </script>

JS中的運算符

    <!-- js中的語句 -->
        <script type="text/javascript">
        //java中的運算符
        var a = -2;
        var b = +2;
        //=======================================
        var c = "1234";
        alert(typeof c);
        c = -c;
        alert(typeof c);
        //js是弱類型=>js中的類型會根據需要自動變化.
        //上面的例子中因爲+是數學運算符.所以需要c是數字類型.js就會自動將c轉換爲number類型.

    </script>

關於typeof 運算符

ECMAScript 提供了 typeof 運算符來判斷一個值是否在某種類型的範圍內。可以用這種運算符判斷一個值是否表示一種原始類型：如果它是原始類型，還可以判斷它表示哪種原始類型。

對變量或值調用 typeof 運算符將返回下列值之一：

  • undefined - 如果變量是 Undefined 類型的
  • boolean - 如果變量是 Boolean 類型的
  • number - 如果變量是 Number 類型的
  • string - 如果變量是 String 類型的
  • object - 如果變量是一種引用類型或 Null 類型的

註釋：您也許會問，爲什麼 typeof 運算符對於 null 值會返回 “Object”。這實際上是 JavaScript 最初實現中的一個錯誤，然後被 ECMAScript 沿用了。現在，null 被認爲是對象的佔位符，從而解釋了這一矛盾，但從技術上來說，它仍然是原始值。


JS中的運算符

        <script type="text/javascript">
        //js中的運算符
        // && || ! => 用法與java的一模一樣

    //--------------------------------------------------
        //js會在需要什麼類型時,對類型自動進行轉換



        // number => boolean   除了+0,-0,NaN  其他都是true.
        // string => boolean   字符串不爲空,那麼其他都是true.
        // null => boolean      false
        // undefined => boolean false
        // Object   => boolean  true

    //----------------------------------------------------------------  
        /* var n = +"abc";// NaN => not a number 
        alert(n); */
    //-----------------------------------------------------------------

        if("haha"&& new Object()){
            alert("true");
        }else{
            alert("false");
        } 
    </script>

一元加法對字符串的神奇效果：

var sNum = "20";
alert(typeof sNum); //輸出 "string"
var iNum = +sNum;
alert(typeof iNum); //輸出 "number"

JS中的數字運算符

        <script type="text/javascript">
        //js中的運算符
        // 使用+法時, 如果相加的值包含字符串,會自動轉換爲字符串類型
            var a = 1+'1';
            alert(a);
        //其他數學運算符中,字符串會自動轉換爲數字
            var b = "2"-1;
        </script>

JS中的邏輯運算符？

  邏輯 AND 運算的運算數可以是任何類型的，不止是 Boolean 值。
  如果某個運算數不是原始的 Boolean 型值，邏輯 AND 運算並不一定返回 Boolean 值：
如果一個運算數是對象，另一個是 Boolean 值，返回該對象。 
如果兩個運算數都是對象，返回第二個對象。 
如果某個運算數是 null，返回 null。 
如果某個運算數是 NaN，返回 NaN。 
如果某個運算數是 undefined，返回undefined。 
     //1 false&&o  ==>         false//2 true&&o   ==> o ==> true//3 o&&true   ==>       true//4 o&&false  ==>       false//5 o1&&o2   ==>//6  null&&true == >  null//7 NaN && true == >  NaN
       //8 NaN&&null   ==>   NaN
       //9 null&&NaN   ==>   null
   
       //10 undefined&&true ==> undefined
        //11 false&&undefined == > false
與邏輯 AND 運算符相似，如果某個運算數不是 Boolean 值，邏輯 OR 運算並不一定返回 Boolean 值：
如果一個運算數是對象，並且該對象左邊的運算數值均爲 false，則返回該對象。 
如果兩個運算數都是對象，返回第一個對象。 
如果最後一個運算數是 null，並且其他運算數值均爲 false，則返回 null。 
如果最後一個運算數是 NaN，並且其他運算數值均爲 false，則返回 NaN。 
如果某個運算數是 undefined，返回undefined。
     //1  false||o  ==> o
       //2  true||o ==>true//3  o||false == > o
       //4  o||true == > o
       //5 o1||o2   ==>o1
       //6  null||false == > false//7 null||true  ==> true//8 null||undefined ==>undefined
        //9 undefined||null ==>null

JS中的比較運算符

比較數字和字符串
另一種棘手的狀況發生在比較兩個字符串形式的數字時，比如：
var bResult = "25" < "3";
alert(bResult); //輸出 "true"
上面這段代碼比較的是字符串 "25" 和 "3"。兩個運算數都是字符串，所以比較的是它們的字符代碼（"2" 的字符代碼是 50，"3" 的字符代碼是 51）。
不過，如果把某個運算數該爲數字，那麼結果就有趣了：
var bResult = "25" < 3;
alert(bResult); //輸出 "false"
這裏，字符串 "25" 將被轉換成數字 25，然後與數字 3 進行比較，結果不出所料。

JS中的等性運算符

        <script type="text/javascript">
        //js中的運算符
        // == != 

        /* alert(1 == true);//true
        alert(2==true);// false
        alert(0==false);// true
        alert(0 == null);// false 
        alert(null == undefined);//true
        alert(NaN == NaN);// false  凡是NaN參與判斷運算符 除了 ! != 其他全是false
        */
    //--------------------------------------------------------------
        // ===  比較時包括類型本身

        alert(1 === true);//false
        alert("1" === 1);// false

        alert(+"1"+1);
    </script>
如果一個運算數是 Boolean 值，在檢查相等性之前，把它轉換成數字值。false 轉換成 0，true 爲 1。 
如果一個運算數是字符串，另一個是數字，在檢查相等性之前，要嘗試把字符串轉換成數字。 
如果一個運算數是對象，另一個是字符串，在檢查相等性之前，要嘗試把對象轉換成字符串。 
如果一個運算數是對象，另一個是數字，在檢查相等性之前，要嘗試把對象轉換成數字。

JS中的三元運算符

        <script type="text/javascript">
        //js中的運算符
        var a = 100;
        var b =20;
        alert(a>b?"a厲害":"b厲害");
    </script>

JS中的賦值運算符

        <script type="text/javascript">
        //js中的運算符
        /* var a = 1;

        a+="1";

        alert(a);//11 */
        //-------------------------------------------------

        var a ="5";
        if(a>3){

            alert("haha");
        }
        alert(typeof a);//string
    </script>

JS中的Function對象

<script type="text/javascript">
    //1 對象的功能
        //Function對象=>特殊=>相當於java中的方法
                     function fun1(){
                        alert("hello");
                    }
                    alert(fun1.toString());
                    alert(fun1);
                    fun1(); 
    //2 對象的創建
        var fun2 = function (a,b){

            alert("hello2");
        };
        var fun3 = new Function("alert('hello3');");
        //fun2();
        //fun3();
    //3 對象的屬性
        alert(fun2.length);//length屬性代表函數的參數個數
    //4 對象的方法
        // toString => 打印函數的定義
</script>

JS中調用函數的特點

<script type="text/javascript">
    //函數的進階 
    function fun1(a,b){
        alert(a+b);
    }
    //調用
    fun1(1,2);//3
    fun1(1,2,3,4);//3
    fun1();//NaN
    //結論: js中的函數在調用時,只看函數名稱.不看參數.
</script>
<script type="text/javascript">
    //函數的進階 
    // arguments  => 函數運行時,參數的封裝
    function fun1(){
        //alert(arguments.length);//打印實際傳遞的參數個數
        var count = 0;

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

            count += arguments[i];
        }
        alert(count);
    }
    //調用
    fun1(1,2);//3
    fun1(1,2,3,4);//10
    fun1();//0
</script>
<script type="text/javascript">
    //函數的進階
    //與java一樣,使用return 關鍵字
    // return 也可以結束方法的調用
    function fun1(a,b){
        alert(a+b);
        return a+b;
    }

    //alert(fun1(1,2));
    //------------------------------------------------
        function fun2(){
        alert("haha");
        return "haha";
        alert("heihei");
    }
    alert(typeof fun2());//undefined
    //-------------------------------------------------
    //void運算符: 用於攔截方法的返回值.
</script>

需要特別關注的

 <body>
    <a href="javaScript:void(fun1(1,2));" >點我</a><br>
     <a href="javaScript:void(0)" onclick="alert('haha')"  >點我</a>
  </body>

其中：href="javaScript:void(0)

在做頁面時，如果想做一個鏈接點擊後不做任何事情，或者響應點擊而完成其他事情，可以設置其屬性 href = "#"，但是，這樣會有一個問題，就是當頁面有滾動條時，點擊後會返回到頁面頂端，或者是跳到設置的錨點的地方，用戶體驗不好。 
//點擊鏈接之後什麼也不做
<a href="javascript:void(0)">單擊此處看看效果</a> 
//點擊鏈接後，響應用戶自定義的點擊事件 
<a href="javascript:void(0)" οnclick="doSomething()">test</a>

JS中的三大包裝對象

<script type="text/javascript">
    //三個包裝對象
    //java中8大基本數據類型都有對應的包裝類
    //js中5個原始類型,有3個包裝類. => Number String Boolean
//------------------------------------------------------------------
    //java中  有自動拆裝箱機制來方便基本數據類型的轉換,已經包裝方法的調用.
    //js中  有僞對象的概念.原始類型可以直接調用 對應包裝類型的屬性或函數.
//-------------------------------------------------------------------   
    // String
    //1 創建
    //填寫任何類型的參數都可以.
    //也就是說構造方法具有強制數據類型轉換的功能.=>  Number String Boolean 的構造都具有強制數據類型轉換的功能
    var str = new String("hello");
    //2 屬性
    /* alert(str.length);
    alert("world".length); */
    //3 方法
    //一:沒有用的=>幫助生成Html標籤的方法
        //alert(str.anchor("haha"));
    //二:有用的 => 與java一樣
    var str2 = new String("hello world");
        //charAt
        alert(str2.charAt(1));
        //indexof
        alert(str2.indexOf("e", 0));
        //lastindexof
        //substring
        alert(str2.substring(0, 5));
        //toLowerCase/toUpperCase
    //三:有用的=>與正則結合使用的
        //split
        //replace
        //match
        //search


</script>

JS中的instance of 運算符

<script type="text/javascript">
    //Instance of 與java中 一樣, 用於判斷變量是否屬於指定類型

    var str = new String("abc");

    alert(str instanceof String);//true

    alert("abc" instanceof String);//false

</script>

JS中的Global對象

<script type="text/javascript">
    // encodeURI/decodeURI 可以將中文Url編碼 例如:  湯姆=>%E6%B1%A4%E5%A7%86
    // encodeURIComponent/decodeURIComponent 轉換的範圍更大,包括一些url中的字符. & : /
    //username=%E6%B1%A4%E5%A7%86

    var str ="http://www.baidu.com?wd=&湯?姆";
    var encodeStr = encodeURIComponent(str);
    alert(encodeStr);
//------------------------------------------    
</script>
<script type="text/javascript">
// parseInt  轉換成整數  => 從左到右依次轉換.轉換到遇到不能轉換的字符爲止
// parseFloat 轉換成浮點數

var str = "123";

var num1 = parseInt(str);
var num2 = +str;
var num3 = new Number(str);

//alert(typeof num);
//------------------------------------------
var str2 = "123a";

//alert(+str2);
//alert(parseInt(str2));//123
//-------------------------------------------
var str3 = "a123";

//alert(parseInt(str3));//NaN
//-------------------------------------------
var str4= "3.14";

//alert(parseFloat(str4));//3.14
//alert(parseInt(str4));//3
</script>
<script type="text/javascript">
//isNaN() 判斷一個值是否是NaN 
var num = NaN;

/* if(isNaN(num)){
    alert("是NaN");
}else{
    alert("不是NaN");
} */
//-------------------------------------------------
//eval() 解析運行 方法

alert(eval("1+1"));//2
alert(eval("new String('abc')"));// abc

</script>

注意，NaN==NaN爲fulse

Math對象
在Global對象中，Math相當於一個工具類。

<script type="text/javascript">
//math 數學工具類 
    //屬性
        //PI 圓周率
    //方法
        // random 隨機數
        var num = Math.random();
        //alert(num);
        // round  四捨五入
        var  num2 = Math.round(3.54);
        //alert(num2);
        //pow 計算冪
        var num3 = Math.pow(2, 3);
        //alert(num3);8
        // min/max  返回最小/最大數
        var num4 = Math.min(1,2,3);
        alert(num4);
        var num5 = Math.max(1,2,3);
        alert(num5);
</script>

Array對象

<script type="text/javascript">
    //數組
    //對象的功能
        //表達數組,類似於java中的數組. 可以存取值
    //對象的創建
        var arr1 = [1,2,3,4];
        var arr2 = new Array(1,2,3,4);
        var arr3 = new Array(4);// 如果調用數組構造,只傳遞一個參數,並且參數的值是數字.那麼該值將作爲數組初始化長度
        alert(arr3);
    //對象的屬性
        // length  長度
        //alert(arr1.length);//4
        //alert(arr2.length);//4
        //alert(arr3.length);//4
    //對象的方法
        //pop 彈棧  將0索引 的變量移除並返回
        //push 壓棧 將一個值放入數組的0索引位置
        //reverse 將數組反轉 => 會對數組本身順序進行調整
            //alert(arr1.reverse());
        //sort 排序 => 默認會按照字符串比較的方式排序.而不是數字.

        var arr5 = [100,1,5,9,2,3,8,7];

        //alert(arr5.sort(abc));

        // sort 可以傳入一個比較器 => 比較器決定排序規則

        function abc(a,b){
            return a-b;
        }
    //----------------------------------------------------------------------
    //進階  js中的array沒什麼原則
        //1 數組中元素的類型可以任意
        //2 數組的長度是可以隨時變化的.
        var arr6 = ["haha",3.14,true,null,undefined,new Object()];

        alert(arr6.length);

        arr6[10] = "itcast";
        alert(arr6[10]);//itcast
        alert(arr6.length);// 11

        alert(arr6[9]);//undefined
</script>

JS中的Date對象

<script type="text/javascript">
//Date對象  => 日期

//1 創建
    var date1 = new Date();
    var date2 = new Date(12983798123121);
//2 方法
    //1.new Date() 獲取當前時間
    //2.getFullYear() 獲取年份
    alert(date2.getFullYear());
    //3.getMonth() 獲取月份注意 1月份結果爲0
    alert(date2.getMonth());
    //4.getHours() 小時
    alert(date2.getHours());
    //5.getDate() 日期
    alert(date2.getDate());
    //6.getMinutes() 分鐘
    alert(date2.getMinutes());
    //7.getSeconds() 獲取秒
    alert(date2.getSeconds());
    //8.getTime()  獲取毫秒值.
    alert(date2.getTime());
    //9.toLocaleString() 獲取本地的時間格式字符串.
    alert(date2.toLocaleString());
</script>

參照的基準是1970年1月1日 8：00其中new Date（）當中傳的是一個距離標準時間的毫秒值。

JS中的正則對象

<script type="text/javascript">
//正則對象  =>  使用正則匹配字符串.
//表單校驗時會用到正則

    //1 創建
        //參數1: 正則表達式
        //參數2: 匹配模式. g: 全局  i: 忽略大小寫
    var reg1 = new RegExp("e","gi");
    var reg2 = /z/g;
    //2 方法
    // test 方法 => 校驗 字符串是否能與正則表達式匹配
    //alert(reg2.test("hello"));//true
//------------------------------------------------------------------------
// String 與正則結合的 4個方法
    var str = "hello world";
    //split 切割
    alert(str.split(/o/g));
    //replace 替換
    alert(str.replace(/l/g, "a"));
    //match 匹配並獲得 => 找不到就返回null
    alert(str.match(/or/g));//or
    //search 查找索引
    alert(str.search(/e/g));//1
</script>

JS中的BOM對象

Window 對象

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
        //1 如何獲得window對象
                //window對象 由瀏覽器創建.當瀏覽器加載頁面時,瀏覽器會立刻自動創建window對象.
                // 如果要獲得,直接使用即可.

            //alert(window); // 就可以拿到
        //2 window中的方法
            // alert
            // confirm  彈出確認框
            // prompt 彈出一個輸入框 返回值爲str. 點擊取消返回null.
                //---------------------------------
                //var b = confirm("您確定要刪除嗎?");
                //alert(b);
                //---------------------------------
            var str =   prompt("請輸入一個整數!","0");
            alert(typeof str);
 //-------------------------------------------------------------------------

        </script>
    <script type="text/javascript">
        //window對象
        //  close方法 => 關閉當前窗口
        function close2(){
            window.close();         
        }
        //  open方法  => 打開一個新的窗口
        //參數1: 打開的url
        //參數2: 窗口名稱=> name屬性
        //參數3: 窗口的特徵=> 長寬(其他屬性未必好使)...
        //參數4: 是否將新窗口的地址加入到瀏覽器歷史記錄中
        // 返回值: 返回一個window對象. 新打開的窗口的window對象
        function open2(){

            window.open("../猜數字.html", "",'width=100,height=100');

        }
    </script>
    <script type="text/javascript">
        //window對象
        //定時器方法
        // setInterval  設置定時器
        // clearInterval 清除定時器
        //-----------------------------------------------
        //參數1: 可以是一段string, 內容是js代碼
        //參數2: 毫秒單位的時間
        //返回值: 當前開啓的定時器id
        // 功能: 每個參數2毫秒,執行參數1代碼.
        var id = window.setInterval("alert('abc');", 2000);
        //------------------------------------------------
        function stop(){
            window.clearInterval(id);
        }
    </script>
    <script type="text/javascript">
        //window對象
        //定時器方法
        // setTimeout  設置定時器
        // clearTimeout 清除定時器
        //-----------------------------------------------
        //參數1: 可以是一段string, 內容是js代碼
        //參數2: 毫秒單位的時間
        //返回值: 當前開啓的定時器id
        // 功能:參數2毫秒後,執行參數1代碼(只執行一次).
        var id = window.setTimeout("alert('abc');", 2000);
        //------------------------------------------------
        function stop(){
            window.clearTimeout(id);
        }



    </script>

History對象

  <body>
        <a href="06-history對象02.html" >06-history對象02.html</a>
        <input type="button" onclick="window.history.forward()"  value="前進"  />
        <input type="button" onclick="window.history.go(1)"  value="前進"  />
  </body>
  <body>
        <input type="button" οnclick="window.history.back()"  value="後退"  />
        <input type="button" οnclick="window.history.go(-1)"  value="後退"  />
  </body>

Location對象

  <body>
        <input type="button" οnclick="window.location.href='01-Window對象.html'"  value="01-Window對象.html"  />
        <input type="button" οnclick="window.location.assign('01-Window對象.html')"  value="01-Window對象.html"  />
        <input type="button" οnclick="window.location.reload()"  value="刷新"  />
  </body>
</html>

DOM對象

DOM結構

 根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點(NODE)：
整個文檔是一個文檔節點
每個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每個 HTML 屬性是屬性節點
註釋是註釋節點
    <script type="text/javascript">
        //dom的所有對象會在頁面打開時,由瀏覽器負責創建.
        //我們如何獲得這些dom對象?
        // 瀏覽器把 dom的定點對象 Document對象的引用交給了 window對象
   //代碼:window.document

    //document  
        var doc = window.document;

        //alert(doc);
    //element 的獲得 (重點)
        var div1 = document.getElementsByTagName("div")[0];
        var div2 = document.getElementById("one");
        var div3 = document.getElementsByClassName("two")[0];
        var div4 = document.getElementsByName("three")[0];
        alert(div3 == div4);
    </script>

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

  <body>
        <input type="button" value="點我" id="one" οnclick="alert('heihei')" />
  </body>
    <script type="text/javascript">
        //演示 給id爲one的 按鈕 添加事件的方法
        //方式1:  
            /* //1 獲得要添加的元素對象
            var one = document.getElementById("one");
            //2 添加事件函數屬性
            one.οnclick=function(){
                alert("haha");
            } */
        //方式2:
            // <input type="button" value="點我" id="one" οnclick="alert("heihei")" />    
    </script>
</html>
    <script type="text/javascript">
            var one = document.getElementById("one");

            one.οnblur=function(){
                alert("失去焦點!");
            }
            one.οnfοcus=function(){
                alert("得到焦點!");
            }
    </script>

可以添加各種點擊事件。

  <body>
        <input type="text" id="one"  />

        <select id="two" >
            <option>大專</option>
            <option>本科</option>
        </select>
  </body>
    <script type="text/javascript">
            var one = document.getElementById("one");

            one.οnchange=function(){
                alert("被改變了!");
            }


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

        two.οnchange=function(){
                alert("被改變了!");
            }
    </script>

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

    <script type="text/javascript">
   /*  onkeydown 某個鍵盤按鍵被按下。 3 1 No Yes 
    onkeypress 某個鍵盤按鍵被按下並鬆開。 3 1 9 Yes 
    onkeyup 某個鍵盤按鍵被鬆開。 3 1 9 Yes  */

    //event =>　封裝了事件發生的詳情
        //keyCode屬性 => 按下按鍵的unicode碼

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

            one.οnkeydοwn=function(event){
                //1 獲得摁下的按鍵
                var key = event.keyCode;
                //2 判斷按鍵按下的是否是回車
                if(key==13){
                        //是=>表單提交
                    alert("表單被提交了");                    
                }
            }

    </script>
<html>
  <head>
    <title>07-dom中的事件05.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <style type="text/css">
    div{
        border:1px red solid;
        width:300px;
        height: 300px;
    }
 </style>
  </head>


  <body  >
        <div id="one">

        </div>
  </body>

   <script type="text/javascript">
   /*  onmousedown 鼠標按鈕被按下。 4 1 9 Yes 
       onmouseup 鼠標按鍵被鬆開。

        onmouseout 鼠標從某元素移開。 4 1 9 Yes 
        onmouseover 鼠標移到某元素之上。 3 1 9 Yes 

        onmousemove 鼠標被移動。 3 1 9 Yes 
          */
    var one = document.getElementById("one");

/*  one.onmousedown =function(event){
            alert(event.button);
        }
    one.onmouseout =function(event){
        alert("onmouseout");
    }
    one.onmouseover =function(event){
        alert("onmouseover");
    } */
    one.onmousemove =function(event){
        alert(event.clientX+"==>"+event.clientY);
    }
    </script>
</html>

相關節點的增刪改查

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

<title>節點的增刪改查</title>
<!--加入樣式表-->
<style type="text/css">
div {
    border:#0099FF 1px solid;
    height:60px;
    width:120px;
    margin:20px 0px 20px 20px;
    padding:10px 0px 0px 20px;
    }

#div_1{
    background-color:#00FFFF;
    }

#div_2{
    background-color:#FF3399;
    }

#div_3{
    background-color:#0000FF;
    }

#div_4{
    background-color:#FFFF66;
    }
</style>


</head>



<body>
    <div id="div_1">

    </div>

    <div id="div_2">
    div區域2
    </div>

    <div id="div_3">
     div區域3
    </div>



    <div id="div_4">
    div區域4
    </div>


    <hr />
    <input type="button" value="創建並添加節點" onclick="addNode()" />
    <input type="button" value="刪除節點" onclick="deleteNode()" />
    <input type="button" value="替換節點" onclick="updateNode()" />
    <input type="button" value="克隆節點" onclick="copyNode()" />

</body>
<script type="text/javascript">
        //創建並添加節點
        function addNode(){
                // 1 創建A標籤對象   <a></a>
                var a = document.createElement("a");
                // 2 爲創建的a標籤增加屬性
                a.setAttribute("href", "http://www.itcast.cn");
                // 3 爲a標籤添加標籤體
                a.innerHTML = "點我";
                // 4 找到div標籤
                var div_1 = document.getElementById("div_1");
                // 5 添加
                div_1.appendChild(a);

        }
        //刪除節點
        function deleteNode(){
            //1 獲得要刪除的div
            var div_2 = document.getElementById("div_2");
            //2 獲得div的父元素
            var parent = div_2.parentNode;
            //3 通過爹刪除孩子
            parent.removeChild(div_2);
        }
        //替換節點
        function updateNode(){
            //1 獲得被替換的div
            var div_3 = document.getElementById("div_3");
            //2 創建img元素對象<img />
            var img = document.createElement("img");
            //3 爲img添加屬性
            img.setAttribute("src", "mn.jpg");
            img.setAttribute("width", "300");
            //4 找到爹
            var parent = div_3.parentNode;
            //5 替換
            parent.replaceChild(img, div_3);
        }
        //克隆節點
        function copyNode(){
            // 1.獲得div4
            var div_4 = document.getElementById("div_4");
            // 2.調用克隆方法克隆
            var div_copy = div_4.cloneNode(true);
            // 3.獲得父親\
            var parent = div_4.parentNode;
            // 4.添加到最後一個div之前
            //parent.appendChild(div_copy);
            parent.insertBefore(div_copy, div_4);
        }
</script>

</html>
Thingvellir
發佈了36 篇原創文章 · 獲贊 2 · 訪問量 2萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Spring中的IOC和AOP、事務傳播行爲、MVC

什麼是Spring：   Spring是一個開源的，輕量級的IOC和AOP容器框架，簡化了開發流程，方便了對其他框架的整合 控制反轉（Inversion Of Controll）:   將相互依賴對象的創建和協調工作都交由IOC容

BigBug_500 2020-07-04 06:18:36

JAVA EE-JSP

JAVA EE-JSP 當一個人在深思的時候，他並不是在閒着。有看得見的勞動，也有看不見的勞動。 —— 雨果 什麼是JSP? java server page 運行在服務器端的頁面. ==> 本質就是servlet. 運行

Thingvellir 2020-06-28 19:28:13

JAVA EE-SESSION&COOKIE

JAVA EE-SESSION&COOKIE 應該相信，自己是生活的戰勝者。 —— 雨果 什麼是會話技術？ 會話的概念: 日常生活來講.會話就是兩個人聊天. 聊天的前提,聊天雙方需要有記憶力. 在聊的過程中,都是基於之前聊

Thingvellir 2020-06-28 19:28:12

FileZilla Sever軟件在局域網內共享文件

**知識點： 1、FileZilla Sever軟件 2、ftp 注意：小夥伴們的服務器要處於同一個局域網內 步驟： 1、打開FileZilla Sever軟件時窗口是這樣的 Host與Password輸入項是默認

菜鸟飞一般的感觉 2020-06-23 23:48:15

Spring之Bean（二）

泥陶匠 2020-02-25 15:56:36

創建struts2支持的第一個應用(二)

泥陶匠 2020-02-25 15:56:36

struts2的Action(四)

泥陶匠 2020-02-25 15:56:36

Servlet

泥陶匠 2020-02-25 15:56:36

Listener監聽器

泥陶匠 2020-02-25 15:56:36

Filter過濾器

泥陶匠 2020-02-25 15:56:36

JAVA EE-HTML/CSS

Thingvellir 2020-02-22 11:01:34

JAVA EE-REQUEST&RESPONSE

Thingvellir 2020-02-22 11:01:34

JAVA EE-SERVLET

Thingvellir 2020-02-22 11:01:34

JAVA EE-JS-表單驗證

Thingvellir 2020-02-22 11:01:34

JAVA EE-JDBC

Thingvellir 2020-02-22 11:01:34