前端学习:学习笔记(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

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

演示案例(判断是否为闰年）

<!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事件的绑定方式二

<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事件的绑定方式三

<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

Demo2

<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>

View Code

posted @ 2019-09-21 14:30 菜鸟-传奇阅读(937) 评论(0) 编辑收藏举报

刷新页面返回顶部

菜鸟-传奇

愿路途漫长，以后莫失莫忘。 愿你不骄不躁，安稳顺心。

前端学习:学习笔记(JS部分）

前端学习:学习笔记(JS部分）

JS的简介

新建步骤

JS基本语法

内嵌JS代码

内部JS代码

外部JS代码

变量

JS原始数据类型

原始数据类型的转换

引用数据类型

运算符

if语句

switch语句

while循环语句

for_in语句

JS内置对象

JS的内置对象Number

JS的内置对象Boolean

JS的内置对象String

内置对象Array

内置对象Date

内置对象Math

内置对象正则表达式RegExp

JS的函数

JS的函数

函数的参数

函数的返回值

JS的全局函数

JS的事件-点击事件onclick

JS的事件-域内容被改变事件onchange

JS的事件-获取焦点失去焦点

鼠标悬浮事件鼠标离开事件

页面加载完成事件

JS的事件

JS事件的绑定方式一

阻止事件的默认行为一

阻止事件的传播

JS的BOM

BOM对象_window对象

BOM对象_history对象

定时器的方法

五秒后返回主页的效果

Location浏览地址相关的对象

screen屏幕相关信息

JS的DOM

DOM的基础知识

查找文本节点

查找属性节点

查看是否存在子节点

DOM的属性练习

替换节点的方法replaceChild

查找设置属性值

新建元素节点

新建文本节点

在指定位置插入新键节点

删除节点

公告

愿路途漫长，以后莫失莫忘。愿你不骄不躁，安稳顺心。