前端學習:學習筆記(JS部分）

時間 2019-11-26

原文原文鏈接

前端學習:學習筆記(JS部分）

JS的簡介

新建步驟

<body>
     1.新建Dynamic Web Project
     2.在WebContent中Folder新建一個JS目錄(文件夾)
     3.新建HTML文件
</body>

View Code

JS基本語法

內嵌JS代碼

<body>
      <input type="button" value="按鈕"  onclick="alert('HELLO JS')"/>
</body>

View Code

內部JS代碼

<body>
      <h1>HTML JS</h1>
</body>

<script type="text/javascript">

        //頁面加載完成後,彈出窗口輸出「你好」
        alert("你好啊~~~~我很好");
        alert("XXXXXXXXXXXX");
        
        
</script>

View Code

外部JS代碼

<body>

</body>


<script type="text/javascript" src="Demo03.js"></script>

View Code

Demo03.js
css

alert('我是漂泊在外的JS代碼');

View Code

變量

<body>
</body>

<script type="text/javascript">
          //定義變量方式1.
          //代碼是從上到下,依次執行.
          //var price=1888;
          //price=9999;
          //price=7777;

          //定義變量方式2.
          price = 1111;
          var year="五";
          
          alert('艾弗森'+year+'代戰靴:  '+price);
          alert('艾弗森'+year+'代戰靴:  '+price);
          alert('艾弗森'+year+'代戰靴:  '+price);
          alert('艾弗森'+year+'代戰靴:  '+price);
          alert('艾弗森'+year+'代戰靴:  '+price);

</script>

View Code

JS原始數據類型

<body>
</body>
<script type="text/javascript">
        //1.number類型
        var num1=100;
        var num2=123.45;
        
        //查看變量數據類型的兩種方式
        //alert('num1的類型是:  '+  typeof num1);
        //alert('num2的類型是:  '+  typeof(num2));
 
        //2.string類型
        var str1='韋';
        var str2='韋1111';
        var str3="我是一個字符串";
        
        //alert('str1的類型是:  '+  typeof str1);
        //alert('str2的類型是:  '+  typeof(str2));
        //alert('str3的類型是:  '+  typeof(str3));

        
        //3.boolean類型
        var b1=true;
        var b2=false;
        //alert('b1的類型是:  '+  typeof b1);
        //alert('b2的類型是:  '+  typeof b2);

        
        //4.null類型===> 空類型
        var n1=null;
        //alert(n1);
        //alert('n1的類型是:  '+  typeof n1);   
        

        //5.undefined類型:===>未定義
        var under;
        alert(under);
        alert(typeof under);
        
        
</script>

View Code

原始數據類型的轉換

<body>
</body>
<script type="text/javascript">
        //1.將number/boolean的變量====> string
        /*
        var num=123;
        alert('轉換前:'+typeof(num));
        alert('num='+num);
        
        num=num.toString();
        alert('轉換後:'+typeof(num));
        alert('num='+num);
        
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
        var x=true;
        alert('轉換前:'+typeof(x));
        alert('x='+x);
        
        x=x.toString();
        alert('轉換後:'+typeof(x));
        alert('x='+x);

        
        //2.將string/boolean的變量====> number
        var str1="666";
        var str2="123abc456";
        var str3="我好帥";
        var b1=true;
        var b2=false;
        
        
        //    string     number
        //alert(str1    +  4);      //6664
        //alert(10+11);             //21
        //左右兩邊能相加的時候,是叫加號的做用
        //左右兩邊不能相加的時候,是叫鏈接符的做用
        
        
        //開始數據類型轉換
        str1=parseInt(str1);
        alert(str1    +  4);       //670
        
        str2=parseInt(str2);
        alert(str2);               //123
        
        str3=parseInt(str3);
        alert(str3);               //NaN    not a number
        
        
        //boolean是不能轉換爲number類型,獲得的結果依舊是NaN
        b1=parseInt(b1);
        b2=parseInt(b2);
        alert(b1);
        alert(b2);
        alert(typeof b2);
        */
          
        //3.強制類型轉換
        //Boolean()
        //      string字符串   
        //                   '' 或者 ""          ==>false    
        //                   其餘                ==>true
        //      number       
        //                   0                   ==>false
        //                   非0                 ==>true

        
        /*
        var str1="";
        var str2="true";
        var str3="xxxxxxxx";
        str1=Boolean(str1);
        alert(str1);
        
        str2=Boolean(str2);
        alert(str2);
        
        str3=Boolean(str3);
        alert(str3);

        
        var num1=0;
        var num2=123;
        var num3=3.1415;
        
        alert(  Boolean(num1)   );
        alert(  Boolean(num2)   );
        alert(  Boolean(num3)   );
        

        //Number()
        
        var str1='';
        var str2='123';
        var str3='333xxx123';
        var str4='韋小寶';
        
        alert(  Number(str1)  );  //0
        alert(  Number(str2)  );  //123
        alert(  Number(str3)  );  //NaN
        alert(  Number(str4)  );  //NaN
        */
        
        
        var b1=true;
        var b2=false;
        alert(  Number(b1)  );   //1
        alert(  Number(b2)  );   //0
        

</script>

View Code

引用數據類型

<body>
</body>

<script type="text/javascript">
        // java:   Student s1=new Student();
        
        // js:
        
        var obj = new Object();
        alert( typeof obj);       //object
  

</script>

View Code

運算符

<body>
      <a href="javascript:void(0)"> 百度一下  </a>
</body>

<script type="text/javascript">
         //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         //1.算數運算符
         //alert(1+1);
         //alert('A'+1);
         //alert(99-'11');
         //alert(99-'a');  
         //alert(10*'3');
         //alert(134/'10');    13.4
         //alert(189%10);
         
         //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         
         //2.邏輯運算符(boolean)
         //  條件1&&條件2 
         //  && : 兩個條件同時爲真,結果爲真.
         //alert(true&&false);
         
         //  條件1||條件2 
         //  || : 兩個條件有一個爲真,結果爲真.
         //alert(true||false);
         
         
         //  非運算符   取反
         //alert(!true);
         
         //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         
         //3.比較運算符(boolean)
         //  =    賦值
         //  ==   等於(只比較值)
         //  ===  全等於(比較值&&比較數據類型)
         
         //alert(11>'22');     //false 
         //alert(10<9);        //false
         //alert(12>=12);      //true
         //alert(13<=11)       //false
         //alert(12!=12);  
         //alert(100=='100');
         //alert(100==='100');
         //alert(100===100);
         
         
         //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         
         //4.三元運算符
         //    判斷條件boolean?truexxxx:falseyyyyy
         //alert(10>7?'大於':'小於或者等於');
         
         
         
         //5.void運算符
         
         
         //6.類型運算符
         //  typeof          獲得數據類型  
         //  instanceof      判斷該對象是否爲該類的實例
         //alert(typeof 10);
         
         
         var v1 ='xxx';
         
         var obj=new Object();
         var n1 =new Number();
         
         
         //    對象名         類名
         //alert(v1 instanceof Object);
         alert(n1 instanceof Object);     

         
</script>

View Code

if語句

<body>

</body>
<script type="text/javascript">
       
        /*
          1.單分支if語句
            
          if(判斷條件boolean){
              //當判斷條件爲true的時候執行本代碼塊
          }
          
        var age=22;
        if(age>=18){
            alert('您已經成年了');
        }
        
          2.雙分支if語句
          if(判斷條件boolean){
              //當判斷條件爲true的時候執行本代碼塊
          }
          else{
              //當判斷條件爲false的時候執行本代碼塊
          }

          
        var num=1233;
        
        if(num>=100&&num<1000){
            alert('數字'+num+'  :是三位數');
        }
        else{
            alert('數字'+num+'  :不是三位數');
        }
        

        3.多分支if語句
          0~6   嬰兒時期
          7~12  小學時期
          13~15 初中時期
          16~18 高中時期
          19~28 騷年時期
          29~50 中年時期
          51~150老年時期
        
        
        var age=1000;
        
        if(age>=0&&age<=6){
            alert("您如今是嬰兒時期");
        }
        else if(age>=7&&age<=12){
            alert("您如今是小學時期");
        }
        else if(age>=13&&age<=15){
            alert("您如今是初中時期");
        }
        else if(age>=16&&age<=18){
            alert("您如今是高中時期");
        }
        else if(age>=19&&age<=28){
            alert("您如今是騷年時期");
        }
        else if(age>=29&&age<=50){
            alert("您如今是中年時期");
        }
        else if(age>=51&&age<=150){
            alert("您如今是老年時期");
        }
        else{
            //以上判斷條件都爲false的時候,執行本代碼塊
            alert("老鐵,您應該不是一我的類吧~~~~~");
        }
         
        */
        
</script>

View Code

演示案例(判斷是否爲閏年）html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>
     <p>閏年的判斷標準:
        1.能被400整除的年份
        2.能被4整除不被100整除的年份
     </p>
     <label>請輸入您要查詢的年份: </label>
     <input id='year' type="text"/>
</body>

<script type="text/javascript">
     //1.找到year標籤
     var yearNode=document.getElementById('year');
     
     //2.當光標離開文本框之後,出發失去焦點的事件
     yearNode.onblur=function(){
         //保存的是用戶輸入的年份
         var year=yearNode.value;
         //判斷year是平年仍是閏年
         //if( year能被400整除 || year能被4整除不被100整除 )
         if( year%400==0  || (year%4==0&&year%100!=0) ){
             alert(year+'年是閏年,有366天');
         }
         else{
             alert(year+'年是平年,有365天');
         }
         
         
     }
 
     
</script>


</html>

View Code

switch語句

<body>
     <label>請輸入年份:</label>
     <input id="year" type="text"/>
     <label>請輸入月份:</label>
     <input id="month" type="text"/>
     <input id="but" type="button" value="開始計算"/>
</body>
<script type="text/javascript">
         /*
           switch(){}  將可能出現的狀況,一一羅列出來
           //格式:
           switch(變量){
               case 1:
                    s執行的代碼塊;break;
               case 2:
                       s~執行的代碼塊;break;
               case 3:
                       s~執行的代碼塊;break;

           }        
          
           //根據用戶輸入的年份月份,求出該月份有多少天
           
         */
         
         var yearNode=document.getElementById('year');
         var monthNode=document.getElementById('month');
         var buttonNode=document.getElementById('but');
         
         buttonNode.onclick=function(){
             
             //獲取用戶輸入的年份和月份
             var year=yearNode.value;
             var month=monthNode.value;
             
             //由於咱們獲取到的數據是string類型,switch語句中的變量通常是number類型
             //因此咱們須要將該變量轉換爲number類型
             month=parseInt(month);
             switch(month){
                   //大月
                   case 1:
                   case 3:
                   case 5:
                   case 7:
                   case 8:
                   case 10:
                   case 12:
                       alert(year+'年'+month+'月有31天');
                       break;
                       
                   //小月       
                   case 4:
                   case 6:
                   case 9:;
                   case 11:
                       alert(year+'年'+month+'月有30天');
                       break;
                       
                   //二月
                   case 2:
                       if(year%400==0||(year%4==0&&year%100!=0)){
                           alert(year+'年'+month+'月有29天');
                       }
                       else{
                           alert(year+'年'+month+'月有28天'); 
                       }
                       break;
                   default:
                       alert('您輸入的月份壓根不存在');
                       
                       
             }
         };
         
</script>

View Code

while循環語句

<body>

</body>
<script type="text/javascript">
       /*
       
        //死循環
        1.while(判斷條件boolean){
              
               //當判斷條件爲true的時候執行本代碼塊
            
          }  
       
        //先判斷再執行
        
          
       */
       
       //練習1.要求打印[1-100]
       /*
       var num=1;
       while(num<=100){
           console.log('數字:  '+num);
           num++;
       }  
       
       //練習2.要求打印[1-100]中的偶數
       var num=1;
       while(num<=100){
           if(num%2==0){
               console.log('數字:  '+num);
           }
           num++;
       }
       */      
       
       /*
        2.do...{}while(); 
       
          do{
              //循環語句
          }while(判斷條件);
          
          //先執行再判斷

       
       //練習1:要求輸出50遍你好
       var num=100;
       do{
           console.log('第'+num+'遍：你好');
           num++;
       }while(num<=50);   
       
       */
       
       /*
        3.for()循環語句
        
          for(變量;判斷條件;++--){
              //循環語句塊
          }
       
       
       //練習1:要求打印[1000,500]
       
       for(var num=1000;num>=500;num--){
           
           console.log('數字:  '+num);
           
       }        
       */
       
       //求出全部的水仙花數
       //1.水仙花數是三位數
       //2.ABC   A*A*A+B*B*B+C*C*C==ABC
       //  798
       
       for(var num=100;num<1000;num++){
           var A=parseInt(num/100);
           var B=parseInt(num/10)%10;
           var C=num%10;
           
           if(A*A*A+B*B*B+C*C*C==num){
               console.log(num);
           }
           
       }
       
       //求出1900-2018的總天數

</script>

View Code

for_in語句

<body>

</body>
<script type="text/javascript">
        var arr=[13,14,22,90];
        for(index in arr){
            console.log(arr[index]);
        }

</script>

View Code

循環的嵌套案例前端

<body>

</body>
<script type="text/javascript">
        /*
        //1.求出1900~2018的總天數  43464
        var sum=0;
        
        for(var i=1900;i<=2018;i++){
            if(i%400==0||(i%4==0&&i%100!=0)){
                sum+=366;
            }
            else{
                sum+=365;
            }
        }

        alert(sum);
        
        */
        
        
        //2.要求打印九九乘法表
/*        
1*1=1    
2*1=2    2*2=4    
3*1=3    3*2=6    3*3=9    
4*1=4    4*2=8    4*3=12    4*4=16    
5*1=5    5*2=10    5*3=15    5*4=20    5*5=25    
6*1=6    6*2=12    6*3=18    6*4=24    6*5=30    6*6=36    
7*1=7    7*2=14    7*3=21    7*4=28    7*5=35    7*6=42    7*7=49    
8*1=8    8*2=16    8*3=24    8*4=32    8*5=40    8*6=48    8*7=56    8*8=64    
9*1=9    9*2=18    9*3=27    9*4=36    9*5=45    9*6=54    9*7=63    9*8=72    9*9=81    
        
        ==>打印該表格其實就是在重複打印表達式
        ==>   i         j    i*j  
        ==>第一個數字 * 第二個數字 =乘積
        ==>i的取值範圍是[1,9]   
        ==>   j <= i   
        ==>第二個數字永遠是小於或者等於第一個數字
        
        
        ~轉義符
        \t   空格
        \n   換行
        
        var str='';   // 1*1=1\t\n2*1=2\t2*2=4\t
        
        for(var i=1;i<10;i++){
            
            for(var j=1;j<=i;j++){
                str+=i+'*'+j+'='+(i*j)+'\t';
            }
            str+='\n';
            
        }
        
        console.log(str);

*/              
        //3.要求打印正直角三角形
        /*
           *
           **
           ***
           ****
           ***** 
        
        var index=10;    //行數
        var str='';
        
        for(var i=0;i<index;i++){
            
            for(var j=0;j<=i;j++){
                str+='*';
            }
            str+='\n';
            
        }
        console.log(str);
        */
         
        
        //4.要求打印倒的直角三角形
        /*
        var index=10;    //行數
        var str='';
        
        for(var i=0;i<index;i++){
            
            for(var j=10;j>i;j--){
                str+='*';
            }
            str+='\n';
            
        }
        console.log(str);
        */

        //5.打印等邊三角形     
        /*                  行數               空格個數                  星星個數
                 *           1         4         1      
                ***          2         3         3
               *****         3         2         5
              *******        4         1         7
             *********       5         0         9
                                    index-行數          2*行數-1
                                    
             ~~一行內容:   n個空格+n個星星+\n
             
        var index=11;   //行數必須是奇數
        var str='';    
        
        for(var i=1;i<=index;i++){
        
            //加入空格
            for(var j=0;j<index-i;j++){
                str+=' ';
            }
            //加入星星
            for(var x=0;x<2*i-1;x++){
                str+='*';
            }
            //加入換行
            str+='\n';
            
        }
        
        console.log(str);
        */
        
        //6.打印一個菱形
        /*
              index=9;
                 *         
                ***         
               *****         
              *******        
             ********* 
              *******
               *****
                ***
                 *
        
        */

</script>

View Code

JS內置對象

JS的內置對象Number

<body>

</body>
<script type="text/javascript">
       //1.Number的建立方式
       var num1=new Number(123);
       var num2=Number(456);
       //alert(num2);
       //alert(typeof num2);
       //alert(Number.MAX_VALUE);
       //alert(Number.MIN_VALUE);     
       
       //2.toString() :引用數據類型Number===>string
       num1=num1.toString();
       alert(num1);
       alert(typeof num1)
       
       //3.valueOf()  :引用數據類型Number===>number
       num2=num2.valueOf();
       alert(num2);
       alert(typeof num2);
       
</script>

View Code

JS的內置對象Boolean

<body>

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

         //1.Boolean類型建立方式
         //當字符串非空的時候爲true,當字符串是空的時候爲false
         //當數字非0的時候爲true,當數字是0的時候爲false
         var b1=new Boolean('');
         var b2=new Boolean(11);
         var b3=Boolean('韋小寶');
         //alert(b3);
         
         //2.toString()  valueOf()
         alert( typeof b1.toString());
         alert( typeof b1.valueOf());

</script>

View Code

JS的內置對象String

<body>

</body>
<script type="text/javascript">
        //1.建立方式
        var str1=new String('aABCD我是最棒的');
        var str2=String('ABCD');
        
        //2.String類中的常見的方法和屬性:
        //2.1獲取字符串長度的方法:length
        //alert(str1.length);

        //2.2根據下標找到對應的字符:charAt()
        //alert(   str1.charAt(7)   );
        
        //2.3根據下標找到對應的字符的unicode值:charCodeAt()
        //'A'  65
        //'a'  97
        //'0'  48
        //alert(  str1.charCodeAt(0)  );
        
        //2.4根據查找的字符,返回對應的下標:indexOf()
        //alert('ABCDEFGHJA'.indexOf('A'));
        //alert('ABCDEFGHJA'.lastIndexOf('A'));
       
        
        //2.5字符串的分割：split()
        
        var person=new String('姓名-ccq-年齡-18-性別-男');
        
        var arr=person.split('-');
        
        for(index in arr){
            console.log(   arr[index]  );
        }
        
        //2.6字符串的截取
        //   substr(start,length)
        //   substring(start,end)
        var path='http://www.baidu.com?name=ccq&&age=18';
        //path=path.substr(7,13);
        //alert(path);
        
        //path=path.substring(7,20);
        //alert(path);

        
        //2.7字符串大小寫之間的轉換
        var zfc='HSAHDJDAHJDSAHJDSAHjsakdjsakdhjdahhk';
        
        alert(zfc.toUpperCase());
        alert(zfc.toLowerCase());
        
</script>

View Code

內置對象Array

<body>

</body>
<script type="text/javascript">
        //1.Array類的建立方式
        var arr1=new Array();
        var arr2=new Array(10);
        var arr3=new Array(10,20,30,40,50);
        
        //alert(typeof arr1);
        //alert(typeof arr2);
        //alert(typeof arr3);

        
        //2.1查看數組中的元素個數
        //alert(arr1.length)
        //alert(arr2.length)
        //alert(arr3.length)
        

        //2.2向數組中插入元素
        arr1.push(123,456,789);
        var lengths=arr1.push(123);
        //alert(arr1);
        //alert(lengths);
          
        
        //2.3移除數組中數據
        arr3.pop();
        //alert(arr3);

        
        //2.4reverse()
        arr3.reverse();
        //alert(arr3);

        
        //2.5數組的排序
        var nums=[21,41,12,18,99,10];
        nums.sort();
        nums.reverse();
        alert(nums);
            
        
</script>

View Code

內置對象Date

<body>

</body>
<script type="text/javascript">
         //1.建立的方式
         //獲取實時時間信息
         var date1=new Date();
         //根據傳入的毫秒數,獲得相應的時間信息
         var date2=new Date(1000*60*60);

         
         console.log(date1);//Mon Sep 23 2019 16:56:59 GMT+0800 (中國標準時間)
         console.log(date2);//19 Thu Jan 01 1970 08:00:01 GMT+0800 (中國標準時間)
         
         
         console.log(date1.toLocaleString());//2019/9/23 下午5:01:38
         console.log(date2.toLocaleString());//1970/1/1 上午9:00:00
         
         console.log('今天是'+(date1.getMonth()+1)+'月');
         console.log('今天是'+date1.getDate()+'號');
         console.log('今天是星期'+date1.getDay());
         
</script>

View Code

內置對象Math

<body>

</body>

<script type="text/javascript">

        console.log(Math.PI);
        console.log('絕對值'+Math.abs(-123));
        console.log('向上舍入'+Math.ceil(9.00001));
        console.log('向下舍入(取整)'+Math.floor(9.9999));
        console.log('四捨五入'+Math.round(3.49));
        
        console.log(Math.pow(3,3));
        
</script>

View Code

內置對象正則表達式RegExp

<body>

</body>
<script type="text/javascript">
        alert(123);
        var p1=new RegExp('[0-9]','999');
        alert(p1.test());

</script>

View Code

JS的函數

<body>

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

      //函數/方法:封裝了某種功能,須要的時候直接調用便可
      //1.定義函數==>普通方式:
      /*       
      function print(){
          alert('你好,我是一個無參數的函數');
      }       
      
      //調用方法
      print();
      print();
      */
      
      //2.定義函數==>匿名函數
      /*
      var fn=function(){
          alert('你好,我是一個無參數的匿名函數');  
      };
      
      fn();
      alert(typeof(fn));  //function
      */  
      
      //3.定義函數==>對象函數
      var fn=new Function('a','b','alert(a+b)');
      
      //fn(11,22);        //33
      //fn(11,22,33,44);  //33
      //fn(10);           //NaN
</script>

View Code

函數的參數

<body>

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

      //實參:實際的參數                 在函數的調用階段
      //形參:抽象的形象的參數      在函數的定義階段
      //參數列表的個數問題:  
      //                  0           無參方法
      //               1~N  有參方法
      //參數列表的參數個數,是根據實際狀況決定的 
      
      //定義函數
      /*
      function add(a,b){
          console.log(a+b);
      }
      //調用方法
      add(11,'xxx');
      */    
      
      //[1,3,5,7,9,11]
      //定義函數:按照規定的格式打印一維數組
      function printArray(arr){
          if(arr instanceof Array){
              var str='[';
              for(var i=0;i<arr.length;i++){
                  if(i==arr.length-1){
                      str+=arr[i];
                  }
                  else{
                      str+=arr[i]+',';
                  }            
              }
             str+=']';
             console.log(str);
          }
          else{
              console.log('您傳入的不是一個數組');
          }
      }
            
      var arr=[1,3,5,7,9,11];
      //調用一維數組
      //printArray(arr);
      printArray(11);
  
</script>

View Code

函數的返回值

<body>

</body>
<script type="text/javascript">
         //根據返回值:
         //       無返回值的函數
         //       有返回值的函數
          
         //方法的返回值的處理方式:
         //1.方法的調用者能夠不接受返回值
         //2.直接打印輸入方法的返回值
         //3.定義變量保存方法的返回值
           
         //無參數無返回值的的方法 
         /*
         function fn1(){
             alert('同窗,你能幫我去買一瓶礦泉水');
         } 
         fn1();
         */       
         
         //無參數有返回值的方法
         function fn2(){
             alert('同窗,你能幫我去買一瓶礦泉水');
             return 100;
         } 
         //1.沒有接收該方法的返回值
         //fn2();
         //2.直接打印輸入方法的返回值
         //alert(fn2());
         //console.log(fn2());
         //3.定義變量保存方法的返回值
         var money=fn2();
         alert('方法的返回值是:' + money);
         

</script>

View Code

JS的全局函數

<body>

</body>
<script type="text/javascript">
         var path='http://www.baidu.com?username=菜鳥-傳奇&&age=18&&sex=男';
         
         //編碼:將正常的字符串    中的某些信息進行處理
         //http://www.baidu.com?username=%E9%9F%A6%E4%BF%8A&&age=18&&sex=%E7%94%B7
         path=encodeURI(path)
         console.log( 'encodeURI():   '+  path );
         //http%3A%2F%2Fwww.baidu.com%3Fusername%3D%E9%9F%A6%E4%BF%8A%26%26age%3D27%26%26sex%3D%E7%94%B7
         //path=encodeURIComponent(path)
         //console.log( 'encodeURIComponent():   '+ path  );
         //http%3A//www.baidu.com%3Fusername%3D%u97E6%u4FCA%26%26age%3D27%26%26sex%3D%u7537
         //path=escape(path)
         //console.log( 'escape():   '+ path  );

         
         //解碼:將某個不正常的字符==>正常的字符串
         path=decodeURI(path);
         console.log( '解碼後的字符串:   '+  path );
         
         var code='var a=10;var b=20;alert(a+b);';
         
         console.log(code);
         eval(code);
         
         
</script>

View Code

JS的事件-點擊事件onclick

<body>
     <input id='but' type="button" value='按鈕'/>
</body>
<script type="text/javascript">
     //找到按鈕
     var but=document.getElementById('but');
     //單擊按鈕之後,執行本函數
     but.onclick=function(){
         
         alert('一不當心,我被點擊了一下');
         
     }
 
</script>

View Code

JS的事件-域內容被改變事件onchange

<body>
     <label>省份: </label>
     <select id='sf'>
           <option value='ah'>安徽省</option>
           <option value='js' >江蘇省</option>
           <option value='zj'>浙江省</option>
     </select>
     
     <label>城市: </label>
     <select id='city'>
           <option>合肥市</option>
           <option>安慶市</option>
           <option>宣城市</option>
     </select>

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

     //找到省份的下拉列表
     var sfNode=document.getElementById('sf');
     var cityNode=document.getElementById('city'); 
     
     sfNode.onchange=function(){
         //保存的是選取的省份
         var optionVal=sfNode.value;
        switch(optionVal){
            case 'ah':
                cityNode.innerHTML='<option>合肥市</option><option>安慶市</option><option>淮南市</option>';
                break;
            case 'zj':
                cityNode.innerHTML='<option>杭州市</option><option>寧波市</option><option>嘉興市</option>';
                break;
            case 'js':
                cityNode.innerHTML='<option>南京市</option><option>南通市</option><option>無錫市</option>';
                break;
            default:
                alert('erro');
        } 
     }
     

</script>

View Code

JS的事件-獲取焦點失去焦點

<body>
     <input id='uesrname' type="text"/>
</body>
<script type="text/javascript">
      //獲取焦點的事件
      /*
      var username=document.getElementById('uesrname');
      username.onfocus=function(){
          alert(username.value);
      }
      */
      
      //失去焦點的事件
      var username=document.getElementById('uesrname');
      username.onblur=function(){
          alert('您剛纔輸入的名字是:'+username.value);
      }
 
      
</script>

View Code

鼠標懸浮事件鼠標離開事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
      div{
          height: 300px;
          width: 300px;
          background-color: red;
      }
</style>
</head>
<body>
       <div id='d1'></div>
</body>
<script type="text/javascript">
        var div=document.getElementById('d1');
        //鼠標懸浮事件
        div.onmouseover=function(){
            div.style.backgroundColor='yellow';
        }
        
        //鼠標離開事件
        div.onmouseout=function(){
            div.style.backgroundColor='red';
        }

</script>

</html>

View Code

頁面加載完成事件

<body>
     <h1>html</h1>
</body>

<script type="text/javascript">

     onload=function(){
         alert('xxxx');
     }
   
     
</script>

View Code

JS的事件

JS事件的綁定方式一

<body>
     <input type="button" id='but' value='提交' onclick="fn()"/>
</body>
<script type="text/javascript">
     function fn(){
         alert('我是事件綁定的第1種方式:綁定在某個標籤中');
     }
</script>

View Code

JS事件的綁定方式二java

<body>
    <input type="button" id='but' value='提交'/>
</body>

<script type="text/javascript">
     
     var but=document.getElementById('but');
     but.onclick=function fn(){
         alert('我是事件綁定的第1種方式:綁定在某個標籤中');
     };
     
</script>

View Code

JS事件的綁定方式三node

<body>
<input type="button" id='but' value='提交' onclick="fn()"/>
</body>

<script type="text/javascript" src='../JS/Demo03.js'></script>

View Code

Demo03.js正則表達式

var but=document.getElementById('but');

but.onclick=function(){
    
    alert('xxxxxxx');
};

View Code

阻止事件的默認行爲一

<body>
     <a href="http://www.baidu.com" onclick="fn(event)">百度一下,你就知道</a>
</body> 
<script type="text/javascript">

     //瀏覽器通常分爲兩個派別:  IE   W3C
     function fn(e){
         if(e&&e.preventDefault){
             alert('W3C');
             //阻止事件的默認行爲
             e.preventDefault();
         }
         else{
             alert('老的IE');
             //阻止事件的默認行爲
             window.event.returnValue=false;
         }
         
     }


</script>

View Code

阻止事件的默認行爲二數組

<body>
     <a href="http://www.baidu.com" onclick="return false">百度一下,你就知道</a>
</body> 
<script type="text/javascript">
</script>

View Code

阻止事件的傳播

<style type="text/css">
      #father{
           height:300px;
           width: 300px;
           background-color: red;
           padding:100px;
      }
      
      #son{
           height:300px;
           width: 300px;
           background-color: yellow;
      }

</style>
</head>
<body>
    <div id='father' onclick="fn()">
         <div id='son' onclick='stop(event)'>
         </div>
    </div>
</body>
<script type="text/javascript">
    function fn(){
        alert('我是小紅帽');
    }

    function stop(e){
        if(e&&e.stopPropagation){
            //alert('W3C');
            //阻止事件的傳播
            e.stopPropagation();
        }
        else{
            //alert('IE');
            //阻止事件的傳播
            window.event.cancleBubble=false;
        }
        
        
    }
    
</script>

View Code

JS的BOM

BOM對象_window對象

<body>

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

       //1.提示框
       //window.alert('xxxxx');
       //2.確認框
       /*
       var res=window.confirm('請問是否要關閉本頁面？');
       if(res){
           alert(res);
           //關閉整個網頁
           window.close();
       }
       */
       
       //3.文本框
       //var txt=window.prompt();
       //alert('您輸入的內容是:' +txt);
       
       
       //4.open()
       open('http://www.baidu.com');

</script>

View Code

BOM對象_history對象

Demo1瀏覽器

<body>
     <h1>當前頁面是: 第一頁</h1>
     <a href="Demo2.html">跳轉到第二個頁面</a>
</body>

View Code

Demo2app

<body>
     <h1>當前頁面是: 第二頁</h1>
     <a href="Demo3.html">跳轉到第三個頁面</a>
     <br>
     <!--  
     <input type="button" value="前進" onclick="history.back()"/>
     <input type="button" value="後退" onclick="history.forward()"/>
     -->
     
     <input type="button" value="前進" onclick="history.go(-1)"/>
     <input type="button" value="後退" onclick="history.go(1)"/>
     
</body>

View Code

Demo3

<body>
     <h1>當前頁面是: 第三頁</h1>
     <a href="Demo2.html">跳轉到第二個頁面</a>
</body>

View Code

定時器的方法

<body>
    <input  type="button" value="中止" onclick="stop()"/>
</body>
<script type="text/javascript">
        
        /*
        setTimeout(function(){
            alert('xxx')
        },2000);
        */
        
        
        var timer=setInterval( function(){
            alert('boom.....')
        },2000   );
        
        
        function stop(){
            alert('如今開始中止該定時器任務');
            clearInterval(timer);
        }

</script>

View Code

五秒後返回主頁的效果

<body>
    <div>
          <h1><span id="time">5</span>秒後返回到主頁面</h1>
    </div>
</body>
<script type="text/javascript">

       var num=5;
       var span=document.getElementById('time');
       
       var timer1=setInterval(function(){
           span.innerHTML=num--;
           
           if(num<0){
               //結束定時器任務
               clearInterval(timer1);
               //跳轉到對應的頁面
               window.location.href='http://www.baidu.com';
           }
           
       },1000);

</script>

View Code

Location瀏覽地址相關的對象

<body>

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

        var path=location.href;
        console.log('編碼的URL:'+path);
        
        path=decodeURIComponent(path);
        console.log('解碼的URL:'+path);
        
        console.log(window.location.protocol);
        
        
</script>

View Code

screen屏幕相關信息

<body>

</body>
<script type="text/javascript">
        alert('您當前電腦的分辨率是: ' +screen.width+"*"+screen.height);
        alert('您當前電腦的分辨率是: ' +screen.availWidth+"*"+screen.availHeight);
</script>

View Code

JS的DOM

DOM的基礎知識

<body>
<!-- 
          ~整個HTML的文檔,能夠當作由如下三個節點組成的
          1.元素節點
          2.文本節點
          3.屬性節點
      
       -->
      <div id='d1' name="divname" align="left" >
           <h1>我是HTML超文本標記型語言---1</h1>
      </div>
      
      <div id='d2' name="divname" align="left" >
           <h1>我是HTML超文本標記型語言---2</h1>
      </div>
      
      <div id='d3' align="left" >
           <h1>我是HTML超文本標記型語言---3</h1>
      </div>

</body>

<script type="text/javascript">
       //1.找到元素節點的方法
       //1.1根據標籤的id進行查找:元素節點
       var div1=document.getElementById('d1');
       console.log('div1='+div1);
       //1.2根據 標籤的name進行查找:元素節點[]
       var div2=document.getElementsByName('divname')[0];
       //console.log('div2='+div2);
       console.log('第二種方式找到的元素節點的數量是:'+div2.length);
       
       //1.3根據標籤的關鍵字進行查找:元素節點[]
       var div3=document.getElementsByTagName('div')[0];
       console.log('div3='+div3);
       console.log('第三種方式找到的元素節點的數量是:'+div3.length);
       
       
       console.log(div1===div2)
       console.log(div1===div3)

       
</script>

View Code

查找文本節點

<body>
<!-- 
          ~整個HTML的文檔,能夠當作由如下三個節點組成的
          1.元素節點
          2.文本節點
          3.屬性節點
      
       -->
       
      <div id='d1' name="divname" align="left" >
           <h1>我是HTML超文本標記型語言---1</h1>
      </div>
      
      <div id='d2' name="divname" align="left" >
           <h1>我是HTML超文本標記型語言---2</h1>
      </div>
      
      <div id='d3' align="left" >
           <h1>我是HTML超文本標記型語言---3</h1>
      </div>
      
</body>

<script type="text/javascript">
   
      //1.找到第一個h1標籤
      var h01=document.getElementsByTagName('h1')[0];
      //alert(h01); 
       
      //2.使用firstChild或者lastChild 
      //文本節點
      var txt1=h01.lastChild;
      alert(txt1.nodeValue)
      
      //精簡後的代碼
      //alert(document.getElementsByTagName('h1')[0].firstChild.nodeValue)
  
       
</script>

View Code

查找屬性節點

<body>
     <div align="left" name="divname"></div>
</body>
<script type="text/javascript">
            //1.找到第一個div標籤
            var d1=document.getElementsByTagName('div')[0];  
            //2.找到align屬性節點
            var divname=d1.getAttributeNode('name');
            //3.打印屬性的值
            alert(divname.nodeValue);
            

</script>

View Code

查看是否存在子節點

<body>
      <div id='d1'> 
         <h3>百度一下</h3>
      </div>

      <div id='d2'>
             <h1>HTML</h1>
             <h1>CSS</h1>
             <h1>JavaScript</h1>
      </div>
</body>
<script type="text/javascript">

      //hasChildNodes()判斷當前節點是否有子節點
      
      var d1=document.getElementsByTagName('div')[0];
      var d2=document.getElementsByTagName('div')[1];
      
      console.log( d1.hasChildNodes() );   //false
      console.log( d2.hasChildNodes() );   //true
      
      //屬性:childNodes   返回當前節點中全部的子節點對象(節點數組)(空格也是一個文本節點)
      console.log(d1.childNodes.length);
      var aNode=d1.childNodes[1];
      console.log(aNode.nodeName);


</script>

View Code

DOM的屬性練習

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
      #box{
         height: 500px;
         width:500px;
         background-color: red;
      }
</style>
</head>


<body>
     <div id='box'>
            <ul name="省會">
               <li value="安徽省">安徽省</li>
               <li value="江蘇省">江蘇省</li>
               <li value="浙江省">浙江省</li>
               <li value="廣東省">廣東省</li>
            </ul> 
            
            
            <ul name="水果">
               <li id='appleli'>蘋果</li><li>香蕉</li>
               <li>橘子</li>
               <li>菠蘿</li>
            </ul> 
     </div>
</body>

<script type="text/javascript">
        //1.找到元素節點:id是box的div標籤
        var boxNode=document.getElementById('box');
        console.log('nodeName='+boxNode.nodeName);
        console.log('nodeType='+boxNode.nodeType);
        console.log('nodeValue='+boxNode.nodeValue);
        
        console.log('~~~~~~~~~~~~~~~~~~~~~~~~');
        
        
        //2.找到屬性節點:找到ul中水果的name屬性
        //找到的是ul的元素節點
        var ulNode=document.getElementsByTagName('ul')[1];
        //找ul中的name的屬性節點
        var ulname=ulNode.getAttributeNode('name');
        console.log('nodeName='+ulname.nodeName);
        console.log('nodeType='+ulname.nodeType);
        console.log('nodeValue='+ulname.nodeValue);
        
        console.log('~~~~~~~~~~~~~~~~~~~~~~~~');
        
        //3.找到文本節點: li中的蘋果對應的文本節點
        var appleli=document.getElementById('appleli');
        var txt=appleli.lastChild;
        console.log('nodeName='+txt.nodeName);
        console.log('nodeType='+txt.nodeType);
        console.log('nodeValue='+txt.nodeValue);
        
        console.log('~~~~~~~~~~~~~~~~~~~~~~~~');
        
        //4.找到相同級別的下一個節點nextSibling
        var banli=appleli.nextSibling;
        console.log('nodeName='+banli.nodeName);
        console.log('nodeType='+banli.nodeType);
        console.log('nodeValue='+banli.nodeValue);
        
        console.log('~~~~~~~~~~~~~~~~~~~~~~~~');

        
        //5.innerHTML:向節點中設置HTML代碼
        //boxNode.innerHTML='<h1>xxxxxx</h1>';
        alert( boxNode.innerHTML );

        
</script>

View Code

替換節點的方法replaceChild

<body>
      <ul>
          <li>CS遊戲</li>
          <li>魔獸世界</li>
          <li>LOL</li>
          <li>刺激戰場</li>  
      </ul>
      
      
      <ul>
          <li>王者農藥</li>
          <li>和平精英</li>
          <li>開心消消樂</li>
          <li>保衛蘿蔔</li>
      </ul>
      
</body>
<script type="text/javascript">
      //點擊CS遊戲之後,保衛蘿蔔替換掉CS遊戲
      
      //1.找到「CS遊戲」元素節點
      var oldnode=document.getElementsByTagName('li')[0];
      
      //2.找到「保衛蘿蔔」元素節點
      var newnode=document.getElementsByTagName('li')[7];
     
      
      //3.找到「CS遊戲」元素節點的父節點
      var ul=oldnode.parentNode;
      
      
      //4.替換節點
      oldnode.onclick=function(){
          ul.replaceChild(newnode,this);
      };

</script>

View Code

查找設置屬性值

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
      #d1{
          height: 300px;
          width: 300px;
          background-color: red;
      }
      #d2{
          height: 300px;
          width: 300px;
          background-color: yellow;
      }
</style>
</head>

<body>


    <div id='d1' name="divname" align="left">
          XXXXXXXX
    </div>
    <div id='d2' name="divname" align="right">
          XXXXXXXX
    </div>

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

     //1.找到d1的元素節點:
     var d1=document.getElementById('d1');      
     //2.找到d1的 align的屬性節點的值:
     var align=d1.getAttribute('align');
     //alert(align);
     var name=d1.getAttribute('name');
     //alert(name);

     //設置屬性的值
     var d2=document.getElementById('d2');      
     d2.setAttribute('align','left');

</script>

View Code

新建元素節點

<body>
     <ul id="area">
         <li>蜀山區</li>
         <li>廬陽區</li>
         <li>包河區</li>
         <li>高新區</li>
     </ul>
</body>
<script type="text/javascript">
     //新建一個li標籤
     var li=document.createElement('li');
     li.innerHTML='政務區';
     //<li>政務區</li>
     
     var area=document.getElementById('area');
     area.appendChild(li);
     
</script>

View Code

新建文本節點

<body>
     <ul id="area">
         <li>蜀山區</li>
         <li>廬陽區</li>
         <li>包河區</li>
         <li>高新區</li>
         
     </ul>
</body>
<script type="text/javascript">
     //新建一個li標籤  <li>政務區</li>
     var li=document.createElement('li');
     
     var txt=document.createTextNode('政務區');
     
     document.getElementById('area').appendChild(txt);

</script>

View Code

在指定位置插入新鍵節點

<body>
    <ul>
         <li>博士</li>
         <li>碩士</li>
         <li>本科</li>
         <li id="zz">中專</li>
         <li>其餘</li>
    </ul>
</body>
<script type="text/javascript">
    //要求在中專前面加上大專
    var li=document.getElementById('zz');
    
    //新建節點<li>大專</li>
    var newli=document.createElement('li');
    newli.innerHTML='大專';
    
    //插入新建節點
    li.parentNode.insertBefore(newli,li);
    

</script>

View Code

刪除節點

<body>
    <ul>
         <li>博士</li>
         <li>碩士</li>
         <li>本科</li>
         <li>大專</li>
         <li id='zz'>中專</li>
         <li id='qt'>其餘</li>
    </ul>
</body>
<script type="text/javascript">
     //刪除中專和其餘  這兩個元素節點
     var d1=document.getElementById('zz');
     var d2=document.getElementById('qt');

     var ul=d1.parentNode;
     ul.removeChild(d1);
     ul.removeChild(d2);

</script>