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

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

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

JS的简介

新建步骤

<body>1.新建Dynamic Web Project2.在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的变量====> numbervar 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);       //670str2=parseInt(str2);alert(str2);               //123str3=parseInt(str3);alert(str3);               //NaN    not a number//boolean是不能转换为number类型,得到的结果依旧是NaNb1=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)  );  //0alert(  Number(str2)  );  //123alert(  Number(str3)  );  //NaNalert(  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//  798for(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的总天数  43464var 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\tfor(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         9index-行数          2*行数-1~~一行内容:   n个空格+n个星星+\nvar 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的时候为falsevar 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.οnfοcus=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   W3Cfunction 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="前进" οnclick="history.back()"/><input type="button" value="后退" οnclick="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.找到相同级别的下一个节点nextSiblingvar 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

转载于:https://www.cnblogs.com/cainiao-chuanqi/p/11563062.html