菜鸟-传奇

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

前端学习：JS学习总结（图解）

JS的简介
JS基本语法
JS内置对象
JS的函数
JS的事件
JS的BOM
JS的DOM

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 JSh1>
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 heretitle>
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*/
         
        
        //4.要求打印倒的直角三角形
        /*
        var index=10;    //行数
        var str='';
        
        for(var i=0;ii;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*/
        
        //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='';
                break;
            case 'zj':
                cityNode.innerHTML='';
                break;
            case 'js':
                cityNode.innerHTML='';
                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 heretitle>
<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>htmlh1>
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.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">5span>秒后返回到主页面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>

      <div id='d1' name="divname" align="left" >
           <h1>我是HTML超文本标记型语言---1h1>
      div>
      
      <div id='d2' name="divname" align="left" >
           <h1>我是HTML超文本标记型语言---2h1>
      div>
      
      <div id='d3' align="left" >
           <h1>我是HTML超文本标记型语言---3h1>
      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>

       
      <div id='d1' name="divname" align="left" >
           <h1>我是HTML超文本标记型语言---1h1>
      div>
      
      <div id='d2' name="divname" align="left" >
           <h1>我是HTML超文本标记型语言---2h1>
      div>
      
      <div id='d3' align="left" >
           <h1>我是HTML超文本标记型语言---3h1>
      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>HTMLh1>
             <h1>CSSh1>
             <h1>JavaScripth1>
      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 heretitle>
<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='xxxxxx
';
        alert( boxNode.innerHTML );

        
script>

View Code

替换节点的方法replaceChild

<body>
      <ul>
          <li>CS游戏li>
          <li>魔兽世界li>
          <li>LOLli>
          <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 heretitle>
<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='政务区';
     //政务区
     
     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标签  政务区
     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');
    
    //新建节点大专
    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

你可能感兴趣的:(前端学习:学习笔记(JS部分）)

【iOS】MVC设计模式 Magnetic_h ios mvc 设计模式 objective-c 学习 ui
MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
《投行人生》读书笔记小蘑菇的树洞
《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
扫地机类清洁产品之直流无刷电机控制悟空胆好小清洁服务机器人单片机人工智能
扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
消息中间件有哪些常见类型 xmh-sxh-1314 java
消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
C#中使用split分割字符串互联网打工人no1 c#
1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
关于提高复杂业务逻辑代码可读性的思考编程经验分享开发经验 java 数据库开发语言
目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一
【夜读】提升生活品质的8个建议茳淮秀水
停止攀比很多人之所以感觉疲惫，部分原因是来自于跟别人攀比。殊不知，攀比得到的满足只是片刻的，过后往往会感到空虚。过分在意别人的评价，丢失的是自己原有的审美，扰乱的是自己最初的节奏。不妨活得洒脱些，自己内心丰盈了，快乐就能更持久。停止自责想改变自己，先从接纳自己开始。越是过分自责，就越难改变现状，因为如果把精力全耗在自责上，就没有精力用来改变了。遇到问题，我们要用正确的心态去面对。与其一味自责，不如
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java 算法华为 javascript
华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
如何部分格式化提示模板:LangChain中的高级技巧 nseejrukjhad langchain java 服务器 python
标题:如何部分格式化提示模板:LangChain中的高级技巧内容:如何部分格式化提示模板:LangChain中的高级技巧引言在使用大型语言模型(LLM)时,提示工程是一个关键环节。LangChain提供了强大的提示模板功能,让我们能更灵活地构建和管理提示。本文将介绍LangChain中一个高级特性-部分格式化提示模板,这个技巧可以让你的提示管理更加高效和灵活。什么是部分格式化提示模板?部分格式化提
没有一件绝对好看的衣服段童
没有一件绝对好看的衣服只有好看的人没有绝对好看的人只有你可能会爱上的他没有你绝对会爱上的他只有你从来就缺少的那一部分的自己爱是本能的脆弱是欲望的茧——《没有一件绝对好看的衣服》
数组去重好奇的猫猫猫
整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
把握“三度”打造“三有”干部队伍辛德瑞拉卡卡卡
“胜败兴亡之分，不得不归咎于人事也”。干部队伍建设工作的好坏，关系到党和国家的发展全局。近日，新疆维吾尔自治区党委书记马兴瑞在部分党群单位走访调研时强调，要努力培养造就忠诚干净担当的高素质专业化干部队伍。各级组织部门应当在培养选拔干部、吸收优秀青年到党内来、培养造就优秀人才上下功夫，切实增强干部投身实践、解决问题、推进工作的能力，着力打造高素质专业化干部队伍。“天生我材必有用”，增强选育有“准度”
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
【JS】执行时长(100分) |思路参考+代码解析（C++） l939035548 JS 算法数据结构 c++
题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围
人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
ARM驱动学习之基础小知识 JT灬新一 ARM 嵌入式 arm开发学习
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
docker igotyback eureka 云原生
Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
18、架构-可观测性之聚合度量大树~~ 架构 java python 后端架构
聚合度量聚合度量是指对系统运行时产生的各种指标数据进行收集、聚合和分析，以了解系统的健康状况和性能表现。聚合度量是可观测性的关键组成部分，通过对度量数据的分析，可以及时发现系统中的异常和瓶颈。以下是对聚合度量各个方面的详细解析，并结合具体的数据案例和技术支撑。指标收集收集系统运行时产生的各种指标数据是聚合度量的基础。常见的指标包括CPU使用率、内存使用率、请求处理时间、请求数、错误率等。以下是指标
教育用心灵温暖心灵
@陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
读《人间鲁迅》有感琳语读书
上周读完《闻一多传》后，我对中国近代知识分子产生了兴趣，这周继续读了《人间鲁迅》。厚厚的两本书，记录了一个人的一生，苦痛，彷徨和挣扎，虽然只读了一小部分，却也心潮澎湃。闻一多和鲁迅是完全不同的。鲁迅是沉郁的，现实的，寂寞的，抗争的。除了天生性格的不同外，环境的塑造也是非常之大。鲁迅少年经历了家庭的变故，看尽了人间冷暖，世态炎凉。这种经历促使他很早就观察思考人生，立志用文学来改变中国国民的劣根。闻一
在Ubuntu中编译含有JSON的文件出现报错芝麻糊76 Linux kill_bug linux ubuntu json
在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
2023-07-24 DXZHY
很2023年7月24号星期天，今天呢一早我就去开店，淋完花我就赶去了中心联谊，感谢中心联谊过程当中，他们在唱诵读者上面1.一边流泪，感觉自己的内在灵魂太长，时间没有得到这样了，所以一边唱手一边在流泪，我分不清楚自己是感动了，还是被呼唤的灵魂所能看到，但我就是哭了，泪流满面，我全身细胞在放松，最后我们荣耀完了之后，我打包了一部分回来，我发现我是挺真爱想摸的，然而。那我们商量好之后，他要做出一些违背我
剧本杀《鲸鱼马戏团》剧本杀剧透+真相答案复盘解析攻略 VX搜_奶茶剧本杀
本文为剧本杀《鲸鱼马戏团》剧本杀测评+部分真相复盘，获取完整真相复盘只需两步：①、关注微信公众号【奶茶剧本杀】→②、回复剧本杀《鲸鱼马戏团》即可获取查看剧本杀《鲸鱼马戏团》剧本杀真相答案复盘+凶手剧透：以下是玩家评测+部分关键证据，凶手，时间线，复盘解析，推理逻辑--------------------------------------------------------------------
下一站深圳默琊
昨天已经买好3/15到深圳的机票了，原本上周还有点拖延症发作，不太积极，所以昨天就直接逼迫自己买机票，然后在订房，下周就是确认行业和把具体的面谈日程定下来。行业的选择上目前没有太大的偏好，上一份工作主要是风控和客服，客服部分也算是个小组长，有负责培训和一些案件SOP流程的制定等工作。总感觉客服这个职位的职涯发展只能是垂直的往更高的管理层走，对于横向发展似乎不容易，而鉴于做客服1年的感受，我不太喜欢
关于旗正规则引擎中的MD5加密问题何必如此 jsp MD5 规则加密
一般情况下，为了防止个人隐私的泄露，我们都会对用户登录密码进行加密，使数据库相应字段保存的是加密后的字符串，而非原始密码。在旗正规则引擎中，通过外部调用，可以实现MD5的加密，具体步骤如下： 1.在对象库中选择外部调用，选择“com.flagleader.util.MD5”，在子选项中选择“com.flagleader.util.MD5.getMD5ofStr({arg1})”； 2.在规
【Spark101】Scala Promise/Future在Spark中的应用 bit1129 Promise
Promise和Future是Scala用于异步调用并实现结果汇集的并发原语，Scala的Future同JUC里面的Future接口含义相同，Promise理解起来就有些绕。等有时间了再仔细的研究下Promise和Future的语义以及应用场景，具体参见Scala在线文档：http://docs.scala-lang.org/sips/completed/futures-promises.html
spark sql 访问hive数据的配置详解 daizj spark sql hive thriftserver
spark sql 能够通过thriftserver 访问hive数据，默认spark编译的版本是不支持访问hive，因为hive依赖比较多，因此打的包中不包含hive和thriftserver,因此需要自己下载源码进行编译，将hive，thriftserver打包进去才能够访问，详细配置步骤如下： 1、下载源码 2、下载Maven,并配置此配置简单，就略过
HTTP 协议通信周凡杨 java httpclient http 通信
一：简介 HTTPCLIENT，通过JAVA基于HTTP协议进行点与点间的通信！二：代码举例测试类： import java
java unix时间戳转换 g21121 java
把java时间戳转换成unix时间戳： Timestamp appointTime=Timestamp.valueOf(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())) SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd hh:m
web报表工具FineReport常用函数的用法总结（报表函数）老A不折腾 web报表 finereport 总结
说明：本次总结中，凡是以tableName或viewName作为参数因子的。函数在调用的时候均按照先从私有数据源中查找，然后再从公有数据源中查找的顺序。 CLASS CLASS(object):返回object对象的所属的类。 CNMONEY CNMONEY(number,unit)返回人民币大写。 number:需要转换的数值型的数。 unit:单位，
java jni调用c++ 代码报错墙头上一根草 java C++jni
# # A fatal error has been detected by the Java Runtime Environment: # # EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00000000777c3290, pid=5632, tid=6656 # # JRE version: Java(TM) SE Ru
Spring中事件处理de小技巧 aijuans spring Spring 教程 Spring 实例 Spring 入门 Spring3
Spring 中提供一些Aware相关de接口，BeanFactoryAware、 ApplicationContextAware、ResourceLoaderAware、ServletContextAware等等，其中最常用到de匙ApplicationContextAware.实现ApplicationContextAwaredeBean，在Bean被初始后，将会被注入 Applicati
linux shell ls脚本样例 annan211 linux linux ls源码 linux 源码
#! /bin/sh - #查找输入文件的路径 #在查找路径下寻找一个或多个原始文件或文件模式 # 查找路径由特定的环境变量所定义 #标准输出所产生的结果通常是查找路径下找到的每个文件的第一个实体的完整路径 # 或是filename :not found 的标准错误输出。 #如果文件没有找到则退出码为0 #否则即为找不到的文件个数 #语法 pathfind [--
List,Set,Map遍历方式 (收集的资源,值得看一下) 百合不是茶 list set Map遍历方式
List特点：元素有放入顺序，元素可重复 Map特点：元素按键值对存储，无放入顺序 Set特点：元素无放入顺序，元素不可重复（注意：元素虽然无放入顺序，但是元素在set中的位置是有该元素的HashCode决定的，其位置其实是固定的） List接口有三个实现类：LinkedList，ArrayList，Vector LinkedList：底层基于链表实现，链表内存是散乱的，每一个元素存储本身
解决SimpleDateFormat的线程不安全问题的方法 bijian1013 java thread 线程安全
在Java项目中，我们通常会自己写一个DateUtil类，处理日期和字符串的转换，如下所示： public class DateUtil01 { private SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); public void format(Date d
http请求测试实例（采用fastjson解析） bijian1013 http 测试
在实际开发中，我们经常会去做http请求的开发，下面则是如何请求的单元测试小实例，仅供参考。 import java.util.HashMap; import java.util.Map; import org.apache.commons.httpclient.HttpClient; import
【RPC框架Hessian三】Hessian 异常处理 bit1129 hessian
RPC异常处理概述 RPC异常处理指是，当客户端调用远端的服务，如果服务执行过程中发生异常，这个异常能否序列到客户端？如果服务在执行过程中可能发生异常，那么在服务接口的声明中，就该声明该接口可能抛出的异常。在Hessian中，服务器端发生异常，可以将异常信息从服务器端序列化到客户端，因为Exception本身是实现了Serializable的
【日志分析】日志分析工具 bit1129 日志分析
1. 网站日志实时分析工具 GoAccess http://www.vpsee.com/2014/02/a-real-time-web-log-analyzer-goaccess/ 2. 通过日志监控并收集 Java 应用程序性能数据(Perf4J) http://www.ibm.com/developerworks/cn/java/j-lo-logforperf/ 3.log.io 和
nginx优化加强战斗力及遇到的坑解决 ronin47 nginx 优化
　　　先说遇到个坑，第一个是负载问题，这个问题与架构有关，由于我设计架构多了两层，结果导致会话负载只转向一个。解决这样的问题思路有两个：一是改变负载策略，二是更改架构设计。　　　由于采用动静分离部署，而nginx又设计了静态，结果客户端去读nginx静态，访问量上来，页面加载很慢。解决：二者留其一。最好是保留apache服务器。　　　来以下优化：　　　
java-50-输入两棵二叉树A和B，判断树B是不是A的子结构 bylijinnan java
思路来自： http://zhedahht.blog.163.com/blog/static/25411174201011445550396/ import ljn.help.*; public class HasSubtree { /**Q50. * 输入两棵二叉树A和B，判断树B是不是A的子结构。例如，下图中的两棵树A和B，由于A中有一部分子树的结构和B是一
mongoDB 备份与恢复开窍的石头 mongDB备份与恢复
Mongodb导出与导入 1: 导入/导出可以操作的是本地的mongodb服务器,也可以是远程的. 所以,都有如下通用选项: -h host 主机 --port port 端口 -u username 用户名 -p passwd 密码 2: mongoexport 导出json格式的文件
[网络与通讯]椭圆轨道计算的一些问题 comsci 网络
如果按照中国古代农历的历法，现在应该是某个季节的开始，但是由于农历历法是3000年前的天文观测数据，如果按照现在的天文学记录来进行修正的话，这个季节已经过去一段时间了。。。。。也就是说，还要再等3000年。才有机会了，太阳系的行星的椭圆轨道受到外来天体的干扰，轨道次序发生了变
软件专利如何申请 cuiyadll 软件专利申请
软件技术可以申请软件著作权以保护软件源代码，也可以申请发明专利以保护软件流程中的步骤执行方式。专利保护的是软件解决问题的思想，而软件著作权保护的是软件代码（即软件思想的表达形式）。例如，离线传送文件，那发明专利保护是如何实现离线传送文件。基于相同的软件思想，但实现离线传送的程序代码有千千万万种，每种代码都可以享有各自的软件著作权。申请一个软件发明专利的代理费大概需要5000-8000申请发明专利可
Android学习笔记 darrenzhu android
1.启动一个AVD 2.命令行运行adb shell可连接到AVD,这也就是命令行客户端 3.如何启动一个程序 am start -n package name/.activityName am start -n com.example.helloworld/.MainActivity 启动Android设置工具的命令如下所示： # am start -
apache虚拟机配置，本地多域名访问本地网站 dcj3sjt126com apache
现在假定你有两个目录，一个存在于 /htdocs/a，另一个存在于 /htdocs/b 。现在你想要在本地测试的时候访问 www.freeman.com 对应的目录是 /xampp/htdocs/freeman ,访问 www.duchengjiu.com 对应的目录是 /htdocs/duchengjiu。 1、首先修改C盘WINDOWS\system32\drivers\etc目录下的
yii2 restful web服务[速率限制] dcj3sjt126com PHP yii2
速率限制为防止滥用，你应该考虑增加速率限制到您的API。例如，您可以限制每个用户的API的使用是在10分钟内最多100次的API调用。如果一个用户同一个时间段内太多的请求被接收，将返回响应状态代码 429 (这意味着过多的请求)。要启用速率限制, [[yii\web\User::identityClass|user identity class]] 应该实现 [[yii\filter
Hadoop2.5.2安装——单机模式 eksliang hadoop hadoop单机部署
转载请出自出处：http://eksliang.iteye.com/blog/2185414 一、概述 Hadoop有三种模式单机模式、伪分布模式和完全分布模式，这里先简单介绍单机模式，默认情况下，Hadoop被配置成一个非分布式模式，独立运行JAVA进程，适合开始做调试工作。二、下载地址 Hadoop 网址http:
LoadMoreListView+SwipeRefreshLayout（分页下拉）基本结构 gundumw100 android
一切为了快速迭代 import java.util.ArrayList; import org.json.JSONObject; import android.animation.ObjectAnimator; import android.os.Bundle; import android.support.v4.widget.SwipeRefreshLayo
三道简单的前端HTML/CSS题目 ini html Web 前端 css 题目
使用CSS为多个网页进行相同风格的布局和外观设置时，为了方便对这些网页进行修改，最好使用（）。http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm 在HTML中加入<table style=”color:red; font-size:10pt”>，此为（）。http://hovertree.com/s
overrided方法编译错误 kane_xie override
问题描述：在实现类中的某一或某几个Override方法发生编译错误如下： Name clash: The method put(String) of type XXXServiceImpl has the same erasure as put(String) of type XXXService but does not override it 当去掉@Over
Java中使用代理IP获取网址内容（防IP被封，做数据爬虫） mcj8089 免费代理IP 代理IP 数据爬虫 JAVA设置代理IP 爬虫封IP
推荐两个代理IP网站： 1. 全网代理IP：http://proxy.goubanjia.com/ 2. 敲代码免费IP：http://ip.qiaodm.com/ Java语言有两种方式使用代理IP访问网址并获取内容，方式一，设置System系统属性 // 设置代理IP System.getProper
Nodejs Express 报错之 listen EADDRINUSE qiaolevip 每天进步一点点学习永无止境 nodejs 纵观千象
当你启动 nodejs服务报错： >node app Express server listening on port 80 events.js:85 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE at exports._errnoException (
C++中三种new的用法 _荆棘鸟_ C++new
转载自：http://news.ccidnet.com/art/32855/20100713/2114025_1.html 作者: mt 其一是new operator，也叫new表达式；其二是operator new，也叫new操作符。这两个英文名称起的也太绝了，很容易搞混，那就记中文名称吧。new表达式比较常见，也最常用，例如： string* ps = new string("
Ruby深入研究笔记1 wudixiaotie Ruby
module是可以定义private方法的 module MTest def aaa puts "aaa" private_method end private def private_method puts "this is private_method" end end