前端学习:学习笔记(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
==>第二个数字永远是小于或者等于第一个数字 ~转义符
\t 空格
\n 换行 var str=''; // 1*1=1\t\n2*1=2\t2*2=4\t for(var i=1;i<10;i++){ for(var j=1;j<=i;j++){
str+=i+'*'+j+'='+(i*j)+'\t';
}
str+='\n'; } console.log(str); */
//3.要求打印正直角三角形
/*
*
**
***
****
***** var index=10; //行数
var str=''; for(var i=0;i<index;i++){ for(var j=0;j<=i;j++){
str+='*';
}
str+='\n'; }
console.log(str);
*/ //4.要求打印倒的直角三角形
/*
var index=10; //行数
var str=''; for(var i=0;i<index;i++){ for(var j=10;j>i;j--){
str+='*';
}
str+='\n'; }
console.log(str);
*/ //5.打印等边三角形
/* 行数 空格个数 星星个数
* 1 4 1
*** 2 3 3
***** 3 2 5
******* 4 1 7
********* 5 0 9
index-行数 2*行数-1 ~~一行内容: n个空格+n个星星+\n var index=11; //行数必须是奇数
var str=''; for(var i=1;i<=index;i++){ //加入空格
for(var j=0;j<index-i;j++){
str+=' ';
}
//加入星星
for(var x=0;x<2*i-1;x++){
str+='*';
}
//加入换行
str+='\n'; } console.log(str);
*/ //6.打印一个菱形
/*
index=9;
*
***
*****
*******
*********
*******
*****
***
* */ </script>
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>