天天看點
傳回

【幹貨分享】JavaScript學習筆記分享

javascript學習~程式設計小哥令狐

1.javascript的變量類型：

  • 數值類型：number
  • 字元串類型：string
  • 對象類型：object
  • 布爾類型：boolean
  • 函數類型：function

2.JavaScript裡的特殊值：

  • undefined：未定義，所有js變量未賦初始值的時候，預設都是undefined
  • null：空值
  • NAN：全稱是Not a number 非數字，非數值。

3.JavaScript變量定義及其初始化 

var a;
    a=10;

      // var i;
      // alert(i);//undefined
       //i=12;
      // alert(i);//12
        //alert(typeof (i));
        var a=12;
        var b="abc";
        alert(a*b);//NAN,非數值

4.關系（比較）運算

  • 等于： == 數字比較
  • 全等于： === 數字比較+資料類型比較 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a=123;
        var b="123";

        alert(a==b);//數字面比較，為true
        alert(a===b);//資料類型比較，為false


    </script>
</head>
<body>

</body>
</html>

5.邏輯運算

  • 與運算【且運算】： &&
  • 或運算： ||
  • 非運算【取反運算】：！
  • 0、null、undefined、“空字元串”都認為是false 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    // var a=0;
    //   if(a){
    //     alert("0為真");
    // }else{
    //     alert("0為假");
    // }

    // var b=null;
    // if(b){
    //     alert("null為真");
    // }else{
    //     alert("null為假");
    // }

    // var c=undefined;
    // if(c){
    //     alert("undefined為真");
    // }else{
    //     alert("undefined為假");
    // }

    var d="";
    if(d){
        alert("空字元串為真");
    }else{
        alert("空字元串為假");
    }

    </script>
</head>
<body>

</body>
</html>

6.數組

  • 數組的定義： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr=[];//定義一個空數組
       // alert(arr.length);
        arr[0]=12;
       //  alert(arr[0]);
       //
         arr[2]="abc";
       //  alert(arr.length);
        
        //數組的周遊
        for (var i=0;i<arr.length;i++){
            alert(arr[i]);
        }

    </script>
</head>
<body>

</body>
</html>

7.函數

7.1函數的定義方法（一）

  • ​

    ​function​

     ​ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    //定義一個無慘函數
    //     function fun(){
    //         alert("無參函數被調用");
    //     }
    // //函數調用
    //     fun();

        function fun2(a,b) {
            alert("有參函數的調用=》a="+a+"b="+b);
        }
        fun2(1,2)

          //定義帶有傳回值的函數
        function sum(num1,num2){
            return (num1+num2);
        }
        alert(sum(1,2));
    </script>
</head>
<body>

</body>
</html>

7.2函數定義方法（二） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //無參函數
       var fun=function () {
           alert("無參函數");
       }
       fun();
        
       //有參函數
      var fun2=function(a,b){
           alert("有參函數a="+a+",b="+b);
       }
       fun2(1,2);

    //有參函數帶傳回值
     var sum=function(num1,num2){
            return num1+num2;
        }
        alert(sum(1,2));
    </script>

</head>
<body>

</body>
</html>

7.3隐形參數arguments 

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

    <script type="text/javascript">
      function fun(){
          //alert(arguments.length);//檢視參數的個數
          /*
          * 這個功能類似于數組的功能，可以通過下标檢視
          * */
          alert(arguments[0]);
          alert(arguments[1]);
          alert(arguments[2]);
          alert("無慘函數fun");
        
          for(var i=0;i<arguments.length;i++)
              alert(arguments[i]);
      }
      fun(1,"ab",true);

  //需求：編寫一個函數，用于計算所有參數相加的和并傳回
        function Total() {
            var sum=0;
            for(var i=0;i<arguments.length;i++){
                sum+=arguments[i];
            }
            return sum;
        }
        alert(Total(1,2,3,4,5,6,7,8,9));


    </script>
</head>
<body>

</body>
</html>

8.Js中的自定義對象

8.1Object形式的自定義對象 

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

        // 對象的定義：
        //     var 變量名 = new Object();   // 對象執行個體（空對象）
        //     變量名.屬性名 = 值;       // 定義一個屬性
        //     變量名.函數名 = function(){}  // 定義一個函數
        var obj=new Object();
        obj.name="令狐榮豪";
        obj.age=18;
        obj.fun=function(){
            alert("姓名是："+obj.name+"年齡是："+obj.age);
            alert("姓名是："+this.name+"年齡是："+this.age);
        }
        // 對象的通路：
        //     變量名.屬性 / 函數名();
       // alert( obj.age );
        obj.fun();


    </script>
</head>
<body>

</body>
</html>

8.2花括号形式的自定義對象 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 對象的定義：
        // var 變量名 = {          // 空對象
        //     屬性名：值,           // 定義一個屬性
        //     屬性名：值,           // 定義一個屬性
        //     函數名：function(){} // 定義一個函數
        // };
        var obj = {
            name:"國哥",
            age:18,
                fun : function () {
                alert("姓名：" + this.name + " , 年齡：" + this.age);
            }
        };
        var oobj={
            name:"令狐",
            age:18,
            fun:function () {
                alert("姓名："+oobj.name+"年齡："+oobj.age);
            }
        }

        // 對象的通路：
        //     變量名.屬性 / 函數名();
        alert(oobj.name);
        oobj.fun();
    </script>
</head>
<body>

</body>
</html>

9.javascript中的事件

  • 事件是電腦輸入裝置與頁面進行互動的響應，我們稱為事件。

9.1常用的事件

  • ​

    ​onload​

     ​加載完成事件【頁面加載完成後，常用作js代碼初始化操作】
  • ​

    ​onclick​

     ​單擊事件【常用于按鈕的點選響應操作】
  • ​

    ​onblur​

     ​失去焦點事件【常用于輸入框失去焦點後驗證其輸入内容是否會丢失】
  • ​

    ​onchange​

     ​内容發生改變事件【常用于下拉清單和輸入框内容發生改變後的操作】
  • ​

    ​onsubmit​

     ​表單送出事件【常用于表單送出前，驗證所有表單項是否合法】

9.2事件的注冊(綁定)

  • 事件的注冊(綁定)就是告訴浏覽器，當事件
  • 響應後要執行哪些操作代碼。
  • 靜态注冊事件：通過html标簽的事件屬性直接賦予事件響應的代碼，這種方式我們叫靜态注冊事件。
  • 動态注冊事件：是指先通過js代碼得到标簽的dom對象，然後再通過dom對象.事件名=function（）{}這種形式賦予事件響應後的代碼，叫動态注冊。

動态注冊基本步驟：

1.擷取标簽對象

2.标簽對象.事件名

9.21​

​onload​

 ​事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // onload事件的方法
        function onloadFun(){
            alert("靜态注冊onload事件")
        }
        // onload事件動态注冊。是固定寫法
        window.onload=function () {
            alert("動态注冊onload事件")
        }

    </script>
</head>
<!--靜态注冊onload事件
        onload事件是浏覽器解析完頁面之後就會自動觸發的事件
       <body onload="onloadFun();">
-->
<body onload="onloadFun()">

</body>
</html>

9.22​

​onclick​

 ​事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      function onclickFun() {
          alert("靜态注冊事件");
      }

        //動态注冊事件
        window.onload=function () {
            //1.擷取标簽對象
            /*
            * 1.document:表示目前整個頁面，是JavaScript語言提供的一個對象(文檔)
            * 2.get：擷取
            * 3.Element：元素【标簽】
            * 4.By：通過
            * 5.Id：id屬性
            * getElementById:通過id屬性擷取标簽元素，對象
            * */
             var btnObj=document.getElementById("btn1");
             //btnObj就是一個對象

        //    2.通過标簽對象.事件名=function(){}
                btnObj.onclick=function () {
                    alert("動态注冊事件");
                }
        }

    </script>
</head>
<body>
<!--靜态注冊事件-->
    <button onclick="onclickFun()">按鈕1</button>

<!--動态注冊事件-->
    <button id="btn1">按鈕2</button>
</body>
</html>

9.23 ​

​onblur​

 ​事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //靜态注冊事件
        function onblurFun() {
            //console是控制台對象，是JavaScript語言提供的，專門用來x向浏覽器控制台列印輸出的，用于測試使用
            //log是列印的方法
            console.log("靜态失去焦點事件");
        }

        //動态注冊onblur事件
        window.onload=function () {
            //1.擷取标簽對象
            var passwordObj=document.getElementById("password");
           
            //2.通過标簽對象.事件名=function(){};
             passwordObj.onblur=function () {
                alert("動态焦點事件");
            }
        }
    </script>
</head>
<body>
    使用者名：<input type="text" onblur="onblurFun()"><br>
    密碼：<input type="text" id="password"><br>
</body>
</html>

9.24 ​

​onchange​

 ​事件 

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

    <script type="text/javascript">
        function onchangeFun() {
            alert("女神已經改變了");
        }

        window.onload=function () {
            var onchangeObj=document.getElementById("onchangeFun");
            onchangeObj.onchange=function () {
                alert("女神已經改變了動态");
            }
        }


    </script>
</head>
<body>
  請選擇你心中的女神：
<!--  靜态注冊change事件-->
<!--   <select onchange="onchangeFun()">-->
    <select id="onchangeFun">
        <option>---女神---</option>
        <option>芳芳</option>
        <option>佳佳</option>
        <option>娘娘</option>
    </select>


</body>
</html>

9.24 ​

​onsubmit​

 ​事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >//靜态系統資料庫單送出事件
        function onsubmitFun() {
            //要驗證所有表單是否合法，如果有一個不合法就阻止送出表單
            alert("靜态系統資料庫單送出事件------發現不合法");

            return false;
        }

        window.onload=function () {
            var submitFunObj=document.getElementById("submitFun");
            submitFunObj.onsubmit=function () {
                alert("靜态系統資料庫單送出事件------發現不合法");
                return false;
            }
        }</script>
</head>
<body>
<!--return false 可以阻止表單送出-->
   <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
       <input type="submit" value="靜态注冊">
   </form>

<form action="http://localhost:8080" method="get" id="submitFun">
    <input type="submit" value="動态注冊">
</form>

</body>
</html>

10.Dom模型

  • ​

    ​DOm​

    ​全稱是 Document Object Model文檔對象模型

    大白話就是把文檔中的标簽對象，屬性，文本，轉換成對象來管理。

10.1Document對象中的方法介紹

  • ​

    ​document.getElementById(elementId)​

     ​

通過标簽的id屬性查找标簽的dom對象，elementId是标簽的id屬性值

  • ​

    ​doucument.getElementsByName(elementName)​

     ​通過标簽的name屬性查找dom對象，elementName标簽的name屬性值
  • ​

    ​document.getElementsByTagName(tagname)​

     ​
  • ​

    ​document.createElement(tagname)​

     ​方法，通過給定的标簽名建立一個标簽對象，tagname是建立的标簽名 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >/*
        * 需求：當使用者點選了校驗按鈕，要擷取輸出框裡的内容，然後驗證是否合法
        * 驗證的規則是，必須有字母數字下劃線組成，并且長度在5-12位
        * */
        function onclickFun() {
            //當我們需要操作一個标簽的餓時候，一定要先擷取這個标簽對象，
            var usernameObj=document.getElementById("username");
            // alert(usernameObj);
            //[object HTMLInputElement]他就是dom對象
            //dom對象就是标簽，儲存了标簽的所有資訊，是以你可以通路其屬性值
           //alert(usernameObj.value);
            //驗證字元串合不合法，需要利用正規表達式的規則
            var usernameText=usernameObj.value;

            var patt=/^\w{5,12}$/;//正規表達式的規則
            /*
            * test()方法用于測試某個字元串，是不是比對的規則
            * 比對就傳回true，不比對就傳回false
            * */
            if(patt.test(usernameText)){
                alert("使用者名合法");
            }else {
                alert("使用者名不合法");
            }

        }</script>
</head>
<body>
    使用者名：<input type="text" id="username" value="wzg">
    <button onclick="onclickFun()">校驗</button>
</body>
</html>
  • 正規表達式：

10.2 檢測字元串中是否包含字母“e”------正規表達式對象 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">//表示要求字元串中，是否包含字母e
        //var patt=new RegExp("e");
        var patt=/e/;//這個也是正規表達式對象

        var str="abcd";
        alert(patt.test(str));//不包含e是以列印出false</script>
</head>
<body>

</body>
</html>

10.3常用檢測 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">//表示要求字元串中，是否包含字母a或b或c
       var patt=/[abc]/;
        //表示要求字元串中，是否包含字母a到z
       var patt=/[a-z]/;
        //表示要求字元串中，是否包含字母A到Z
       var patt=/[A-Z]/;
        //表示要求字元串中，是否包含數字0到9
       var patt=/[0-9]/;
        
        ///表示字元串是否包含字母數字下劃線
       var patt=/\w/;
        var str="abcd";
        alert(patt.test(str));</script>
</head>
<body>

</body>
</html>

11.JavaScript兩種常見的驗證提示效果—getElementById方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >/*
        * 需求：當使用者點選了校驗按鈕，要擷取輸出框裡的内容，然後驗證是否合法
        * 驗證的規則是，必須有字母數字下劃線組成，并且長度在5-12位
        * */
        function onclickFun() {
            //當我們需要操作一個标簽的餓時候，一定要先擷取這個标簽對象，
            var usernameObj=document.getElementById("username");
            // alert(usernameObj);
            //[object HTMLInputElement]他就是dom對象
            //dom對象就是标簽，儲存了标簽的所有資訊，是以你可以通路其屬性值
           //alert(usernameObj.value);
            //驗證字元串合不合法，需要利用正規表達式的規則
            var usernameText=usernameObj.value;

            var patt=/^\w{5,12}$/;//正規表達式的規則
            /*
            * test()方法用于測試某個字元串，是不是比對的規則
            * 比對就傳回true，不比對就傳回false
            * */
            var usernameSpanObj=document.getElementById("usernameSpan");
            usernameSpanObj.innerHTML="令狐你好";
            if(patt.test(usernameText)){
                alert("");
                usernameSpanObj.innerHTML="使用者名合法";
            }else {
                usernameSpanObj.innerHTML="使用者名不合法";
                alert("");
            }

        }</script>
</head>
<body>
    使用者名：<input type="text" id="username" value="wzg">
    <span id="usernameSpan"style="color: red;"></span>
    <button onclick="onclickFun()">校驗</button>
</body>
</html>

11.1getElementsByName()方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">//全選
        function checkAll() {
            //讓所有複選框都選中
            //document.getElementsByName();是根據指定的name屬性查詢傳回多個标簽對象集合
            //這個集合的操作跟數組一樣
            //集合中每個元素都是dom對象
            var hobbys=document.getElementsByName("hobby");
            //checked表示複選框選中的狀态，如果選中是true，不遜中是false
            //這個屬性可讀可寫
            //
           // hobbys[2].checked=true;
            for (var i=0;i<hobbys.length;i++){
                hobbys[i].checked=true;
            }
        }

        //全不選
        function checkNo() {
            //讓所有複選框都選中
            //document.getElementsByName();是根據指定的name屬性查詢傳回多個标簽對象集合
            //這個集合的操作跟數組一樣
            //集合中每個元素都是dom對象
            var hobbys=document.getElementsByName("hobby");
            //checked表示複選框選中的狀态，如果選中是true，不遜中是false
            //這個屬性可讀可寫
            //
            // hobbys[2].checked=true;
            for (var i=0;i<hobbys.length;i++){
                hobbys[i].checked=false;
            }
        }
        //反選
        function checkReverse() {
            var hobbys=document.getElementsByName("hobby");
            for (var i=0;i<hobbys.length;i++){
                if (hobbys[i].checked===false)
                    hobbys[i].checked=true;
                else
                    hobbys[i].checked=false;
            }
        }</script>
</head>
<body>
    興趣愛好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="java">java
    <input type="checkbox" name="hobby" value="js">javascript
<br>
    <button onclick="checkAll()">全選</button>
    <button onclick="checkNo()">全不選</button>
    <button onclick="checkReverse()">反選</button>
</body>
</html>

11.2getElementsByTagName()方法 

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


        // 全選
        function checkAll() {
            //document.getElementsByTagName("input")是按照指定标簽名來進行查詢并傳回集合
            //這個集合的操作和數組一樣
            //集合是dom對象
            //集合中元素順序是他們在html頁面從上到下的順序
            var inputs=document.getElementsByTagName("input");
            for (var i=0;i<inputs.length;i++){
                inputs[i].checked=true
            }
        }
    </script>
</head>
<body>

    <!--as -->
    興趣愛好：
    <input type="checkbox" value="cpp" checked="checked">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button id="btn01" onclick="checkAll()">全選</button>

</body>
</html>

12.節點的常用屬性和方法 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查詢</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">.onload = function(){//頁面加載之後的函數
    //1.查找#bj節點
    document.getElementById("btn01").onclick=function () {
      var bjObj=document.getElementById("bj");
      alert(bjObj.innerHTML);
    };
    //2.查找所有li節點
    var btn02Ele = document.getElementById("btn02");
    btn02Ele.onclick = function(){
      var lis=document.getElementById("li");
      alert(lis.length);
    };
    //3.查找name=gender的所有節點
    var btn03Ele = document.getElementById("btn03");
    btn03Ele.onclick = function(){

    };
    //4.查找#city下所有li節點
    var btn04Ele = document.getElementById("btn04");
    btn04Ele.onclick = function(){

    };
    //5.傳回#city的所有子節點
    var btn05Ele = document.getElementById("btn05");
    btn05Ele.onclick = function(){

    };
    //6.傳回#phone的第一個子節點
    var btn06Ele = document.getElementById("btn06");
    btn06Ele.onclick = function(){

    };
    //7.傳回#bj的父節點
    var btn07Ele = document.getElementById("btn07");
    btn07Ele.onclick = function(){

    };
    //8.傳回#android的前一個兄弟節點
    var btn08Ele = document.getElementById("btn08");
    btn08Ele.onclick = function(){

    };
    //9.讀取#username的value屬性值
    var btn09Ele = document.getElementById("btn09");
    btn09Ele.onclick = function(){

    };
    //10.設定#username的value屬性值
    var btn10Ele = document.getElementById("btn10");
    btn10Ele.onclick = function(){

    };
    //11.傳回#bj的文本值
    var btn11Ele = document.getElementById("btn11");
    btn11Ele.onclick = function(){

    };
  };</script>
</head>
<body>
<div id="total">
  <div class="inner">
    <p>
      你喜歡哪個城市?
    </p>

    <ul id="city">
      <li id="bj">北京</li>
      <li>上海</li>
      <li>東京</li>
      <li>首爾</li>
    </ul>

    <br>
    <br>

    <p>
      你喜歡哪款單機遊戲?
    </p>

    <ul id="game">
      <li id="rl">紅警</li>
      <li>實況</li>
      <li>極品飛車</li>
      <li>魔獸</li>
    </ul>

    <br />
    <br />

    <p>
      你手機的作業系統是?
    </p>

    <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
  </div>

  <div class="inner">
    gender:
    <input type="radio" name="gender" value="male"/>
    Male
    <input type="radio" name="gender" value="female"/>
    Female
    <br>
    <br>
    name:
    <input type="text" name="name" id="username" value="abcde"/>
  </div>
</div>
<div id="btnList">
  <div><button id="btn01">查找#bj節點</button></div>
  <div><button id="btn02">查找所有li節點</button></div>
  <div><button id="btn03">查找name=gender的所有節點</button></div>
  <div><button id="btn04">查找#city下所有li節點</button></div>
  <div><button id="btn05">傳回#city的所有子節點</button></div>
  <div><button id="btn06">傳回#phone的第一個子節點</button></div>
  <div><button id="btn07">傳回#bj的父節點</button></div>
  <div><button id="btn08">傳回#android的前一個兄弟節點</button></div>
  <div><button id="btn09">傳回#username的value屬性值</button></div>
  <div><button id="btn10">設定#username的value屬性值</button></div>
  <div><button id="btn11">傳回#bj的文本值</button></div>
</div>
</body>
</html>
javascript html 動态注冊
上一篇: 【譯】9個強大的JavaScript技巧
下一篇: JavaScript|文法

繼續閱讀