前端学习:学习笔记(JS部分）
JS的简介
新建步骤
<body> 1.新建Dynamic Web Project 2.在WebContent中Folder新建一个JS目录(文件夹) 3.新建HTML文件 </body>
JS基本语法
内嵌JS代码
<body> <input type="button" value="按钮" onclick="alert('HELLO JS')"/> </body>
内部JS代码
<body> <h1>HTML JS</h1> </body> <script type="text/javascript"> //页面加载完成后,弹出窗口输出“你好” alert("你好啊~~~~我很好"); alert("XXXXXXXXXXXX"); </script>
外部JS代码
<body> </body> <script type="text/javascript" src="Demo03.js"></script>
Demo03.js
alert('我是漂泊在外的JS代码');
变量
<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>
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>
原始数据类型的转换
<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>
引用数据类型
<body> </body> <script type="text/javascript"> // java: Student s1=new Student(); // js: var obj = new Object(); alert( typeof obj); //object </script>
运算符
<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>
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>
演示案例(判断是否为闰年）
<!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>
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>
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>
for_in语句
<body> </body> <script type="text/javascript"> var arr=[13,14,22,90]; for(index in arr){ console.log(arr[index]); } </script>
循环的嵌套案例
<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 ==>第二个数字永远是小于或者等于第一个数字 ~转义符 空格 换行 var str=''; // 1*1=1 2*1=2 2*2=4 for(var i=1;i<10;i++){ for(var j=1;j<=i;j++){ str+=i+'*'+j+'='+(i*j)+' '; } str+=' '; } 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+=' '; } 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+=' '; } console.log(str); */ //5.打印等边三角形 /* 行数 空格个数 星星个数 * 1 4 1 *** 2 3 3 ***** 3 2 5 ******* 4 1 7 ********* 5 0 9 index-行数 2*行数-1 ~~一行内容: 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+=' '; } console.log(str); */ //6.打印一个菱形 /* index=9; * *** ***** ******* ********* ******* ***** *** * */ </script>
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>
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>
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>
内置对象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>
内置对象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>
内置对象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>
内置对象正则表达式RegExp
<body> </body> <script type="text/javascript"> alert(123); var p1=new RegExp('[0-9]','999'); alert(p1.test()); </script>
JS的函数
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>
函数的参数
<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>
函数的返回值
<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>
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>
JS的事件-点击事件onclick
<body> <input id='but' type="button" value='按钮'/> </body> <script type="text/javascript"> //找到按钮 var but=document.getElementById('but'); //单击按钮以后,执行本函数 but.onclick=function(){ alert('一不小心,我被点击了一下'); } </script>
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>
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>
鼠标悬浮事件鼠标离开事件
<!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>
页面加载完成事件
<body> <h1>html</h1> </body> <script type="text/javascript"> onload=function(){ alert('xxxx'); } </script>
JS的事件
JS事件的绑定方式一
<body> <input type="button" id='but' value='提交' onclick="fn()"/> </body> <script type="text/javascript"> function fn(){ alert('我是事件绑定的第1种方式:绑定在某个标签中'); } </script>
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>
JS事件的绑定方式三
<body> <input type="button" id='but' value='提交' onclick="fn()"/> </body> <script type="text/javascript" src='../JS/Demo03.js'></script>
Demo03.js
var but=document.getElementById('but'); but.onclick=function(){ alert('xxxxxxx'); };
阻止事件的默认行为一
<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>
阻止事件的默认行为二
<body> <a href="http://www.baidu.com" onclick="return false">百度一下,你就知道</a> </body> <script type="text/javascript"> </script>
阻止事件的传播
<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>
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>
BOM对象_history对象
Demo1
<body> <h1>当前页面是: 第一页</h1> <a href="Demo2.html">跳转到第二个页面</a> </body>
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>
Demo3
<body> <h1>当前页面是: 第三页</h1> <a href="Demo2.html">跳转到第二个页面</a> </body>
定时器的方法
<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>
五秒后返回主页的效果
<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>
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>
screen屏幕相关信息
<body> </body> <script type="text/javascript"> alert('您当前电脑的分辨率是: ' +screen.width+"*"+screen.height); alert('您当前电脑的分辨率是: ' +screen.availWidth+"*"+screen.availHeight); </script>
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>
查找文本节点
<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>
查找属性节点
<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>
查看是否存在子节点
<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>
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>
替换节点的方法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>
查找设置属性值
<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>
新建元素节点
<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>
新建文本节点
<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>
在指定位置插入新键节点
<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>
删除节点
<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>