Javaweb崔希凡---day3---Javascript---DOM
今日内容概要：
1、js的String对象
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//length属性
var str = "abcde";
document.write(str.length);
//bold方法
document.write("<hr/>");
var str1 = "asdf";
document.write(str1.bold());
//fontcolor
document.write("<hr/>");
var str2 = "www";
document.write(str2.fontcolor("red"));
//fontsize
document.write("<hr/>");
var str3 = "qqqqq";
document.write(str3.fontsize(5));
//link
document.write("<hr/>");
var str4 = "haha";
document.write(str4.link("hello.html"));
//sub 和sup
document.write("<hr/>");
var s1 = "100";
var s2 = "200";
var s3 = "300"
document.write(s1.sub());
document.write(s3);
document.write(s2.sup());
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//concat方法
var str1 = "abc";
var str2 = "dfg";
document.write(str1.concat(str2));
//charAt方法
document.write("<hr/>");
var str3 = "abcdefg";
document.write(str3.charAt(20)); //字符位置不存在，返回空字符串
//indexOf方法
document.write("<hr/>");
var str4 = "poiuyt";
document.write(str4.indexOf("w")); //字符不存在，返回-1
//split方法
document.write("<hr/>");
var str5 = "a-b-c-d";
var arr1 = str5.split("-");
document.write("length: "+arr1.length);
//replace
document.write("<hr/>");
var str6 = "abcd";
document.write(str6);
document.write("<br/>");
document.write(str6.replace("a","Q"));
//substr substring
document.write("<hr/>");
var str7 = "abcdefghuiop";
//document.write(str7.substr(5,5)); //fghui 从第五位开始，向后截取五个字符
document.write("<br/>");
document.write(str7.substring(3,5)); //de 从第几位开始到第几位结束 [3,5)
</script>
</body>
</html>
2、js的Array对象
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//length属性
var arr1 = [1,2,3];
document.write(arr1.length);
//concat()方法
document.write("<hr/>");
var arr11 = [1,2,3];
var arr12 = [4,5,6];
document.write(arr11.concat(arr12));
//join方法
document.write("<hr/>");
var arr13 = new Array(3);
arr13[0] = "a";
arr13[1] = "b";
arr13[2] = "c";
document.write(arr13);
document.write("<br/>");
document.write(arr13.join("-"));
document.write("<hr/>");
//push方法
var arr14 = new Array(3);
arr14[0] = "tom";
arr14[1] = "lucy";
arr14[2] = "jack";
document.write("old array: "+arr14);
document.write("<br/>");
document.write("old length:"+arr14.length);
document.write("<br/>");
document.write("new length: "+arr14.push("zhangsan"));
document.write("<br/>");
document.write("new array: "+arr14);
document.write("<hr/>");
var arr15 = ["aaa","bbb","ccc"];
var arr16 = ["www","qqq"];
document.write("old array:"+arr15);
document.write("<br/>");
document.write("old length:"+arr15.length);
document.write("<br/>");
document.write("new length:"+arr15.push(arr16));
document.write("<br/>");
document.write("new array: "+arr15);
for(var i=0;i<arr15.length;i++) {
//alert(arr15[i]);
}
//pop方法
document.write("<hr/>");
var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
document.write("old array: "+arr17);
document.write("<br/>");
document.write("return: "+arr17.pop());
document.write("<br/>");
document.write("new array: "+arr17);
//reverse方法
document.write("<hr/>");
var arr18 = ["zhangsan1","lisi1","zhaoliu1","niuqi1"];
document.write("old array: "+arr18);
document.write("<br/>");
document.write("new array:"+arr18.reverse());
</script>
</body>
</html>
3、js的Date对象
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//获取当前时间
var date = new Date();
document.write(date); // Fri Apr 17 10:47:46 UTC+0800 2015
//转换成习惯的格式
document.write("<hr/>");
document.write(date.toLocaleString());
//得到当前的年
document.write("<hr/>");
document.write("year: "+date.getFullYear());
//得到当前的月
document.write("<hr/>");
var date1 = date.getMonth()+1;
document.write("month: "+date1);
//得到当前的星期
document.write("<hr/>");
document.write("week: "+date.getDay());
//得到当前的天
document.write("<hr/>");
document.write("day: "+date.getDate());
//得到当前的小时
document.write("<hr/>");
document.write("hour: "+date.getHours());
//得到当前的分钟
document.write("<hr/>");
document.write("minute: "+date.getMinutes());
//得到当前的秒
document.write("<hr/>");
document.write("second: "+date.getSeconds());
//得到毫秒数
document.write("<hr/>");
document.write("times: "+date.getTime());
</script>
</body>
</html>
4、js的Math对象
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var mm = 10.7;
document.write("old : "+mm);
document.write("<br/>");
document.write("ceil: "+Math.ceil(mm));
document.write("<br/>");
document.write("floor: "+Math.floor(mm));
document.write("<br/>");
document.write("round: "+Math.round(mm));
//random方法
document.write("<hr/>");
document.write(Math.random());
//得到0-9的随机数
document.write("<hr/>");
document.write(Math.floor(Math.random()*10));
//pow(x,y) 2的5次方
document.write("<hr/>");
document.write(Math.pow(2,5));
</script>
</body>
</html>
5、js的全局函数
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//eval方法
var str = "alert('1234');";
//alert(str);
//eval(str);
//encodeURI
document.write("<hr/>");
var str1 = "测试中文aaa1234";
var encode1 = encodeURI(str1);
document.write(encode1);
document.write("<hr/>");
var decode1 = decodeURI(encode1);
document.write(decode1);
//isNaN 返回 true和false
var str2 = "aaaa";
//alert(isNaN(str2));
document.write("<hr/>");
//parseInt
var str3 = "123";
document.write(parseInt(str3)+1);
</script>
</body>
</html>
6、js的函数的重载
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
/*function add1() {
//alert("length: "+arguments.length);
/*for(var i=0;i<arguments.length;i++) {
alert("value: "+arguments[i]);
}
return a+b;
}*/
/*function add1(a,b,c) {
return a+b+c;
}
function add1(a,b,c,d) {
return a+b+c+d;
}*/
function add1() {
//比如传递的是两个参数
if(arguments.length == 2) {
return arguments[0]+arguments[1];
} else if (arguments.length == 3) {
return arguments[0]+arguments[1]+arguments[2];
} else if (arguments.length == 4) {
return arguments[0]+arguments[1]+arguments[2]+arguments[3];
} else {
return 0;
}
}
//调用
alert(add1(1,2)); //3
alert(add1(1,2,3)); //6
alert(add1(1,2,3,4)); // 10
alert(add1(1,2,3,4,5)); // 0
</script>
</body>
</html>
7、js的bom对象
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="tiaozhuan" onclick="href1();"/>
<hr/>
<script type="text/javascript">
//href
function href1() {
//alert("aaaa");
location.href = "hello.html";
}
//navigator
document.write(navigator.appName);
//screen对象
document.write("<hr/>");
document.write(screen.width);
document.write("<br/>");
document.write(screen.height);
//location对象
document.write("<hr/>");
document.write(location.href);
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<h1>AAAAAAAAAAAAAAAAAAAAAAA</h1>
<a href="b.html">AAAAAAAAA</a>
<script type="text/javascript">
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="back" onclick="back1();"/>
<br/>
<input type="button" value="next" onclick="next1();"/>
<h1>BBBBBBBBBBBBBBBBBBBBBBB</h1>
<a href="c.html">BBBBBBBB</a>
<script type="text/javascript">
//到上一个页面
function back1() {
//history.back();
history.go(-1);
}
//到下一个页面
function next1() {
//history.forward();
history.go(1);
}
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<h1>CCCCCCCCCCCCCCCCCCCCCC</h1>
<script type="text/javascript">
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="open" onclick="open1()"/>
<script type="text/javascript">
//演示confirm方法
/*var flag = window.confirm("是否删除？");
//alert(flag);
if(flag == true) {
alert("删除成功");
} else {
alert("删除失败");
}*/
//演示prompt方法
//window.prompt("please input : ","0");
//open方法
function open1() {
window.open("hello.html","","width=200,height=100");
}
window.close();
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="interval" onclick="clear1();"/>
<br/>
<input type="button" value="timeout" onclick="clear2();"/>
<script type="text/javascript">
//演示setInterval方法
//var id1 = setInterval("alert('123');",3000);
//演示setTimeout方法
var id2 = setTimeout("alert('abc');",4000);
//清除setInterval
function clear1() {
clearInterval(id1);
}
//清除setTimeout
function clear2() {
clearTimeout(id2);
}
</script>
</body>
</html>
8、js的dom对象
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<span id="spanid">AAAAA</span>
<script type="text/javascript">
</script>
</body>
</html>
9、document对象
表示整个的文档
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="text" id="nameid" name="name1"/>
<br/>
<script type="text/javascript">
//write方法
var str = "abc";
document.write(str);
document.write("<hr/>");
//使用getElementById得到input标签
var input1 = document.getElementById("nameid");
//得到input里面的value值
alert(input1.name);
//向input里面设置一个值value
input1.value = "bbbbb";
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="text" name="name1" value="aaaa"/><br/>
<input type="text" name="name1" value="bbbbb"/><br/>
<input type="text" name="name1" value="cccc"/><br/>
<input type="text" name="name1" value="dddd"/><br/>
<script type="text/javascript">
//使用getElementsByName得到input标签
var inputs = document.getElementsByName("name1");
//alert(inputs.length);
//遍历数组
for(var i=0;i<inputs.length;i++) {
var input1 = inputs[i]; //每次循环得到input对象，赋值到input1里面
alert(input1.value); //得到每个input标签里面的value值
}
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="text" name="name1" value="AAAAA"/><br/>
<input type="text" name="name1" value="BBBBB"/><br/>
<input type="text" name="name1" value="CCCCC"/><br/>
<input type="text" name="name1" value="DDDDDD"/><br/>
<script type="text/javascript">
//演示getElementsByTagName
var inputs1 = document.getElementsByTagName("input");
//alert(inputs1.length);
//遍历数组，得到每个input标签
for(var m=0;m<inputs1.length;m++) {
//得到每个input标签
var input1 = inputs1[m];
//得到value值
alert(input1.value);
}
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="text" name="name11" value="WWWWWW"/>
<script type="text/javascript">
//通过name得到input标签
/*var inputs2 = document.getElementsByName("name11")[0];
alert(inputs2.value);*/
//通过input名称获取
var inputss = document.getElementsByTagName("input")[0];
alert(inputss.value);
</script>
</body>
</html>
10、案例：window弹窗案例
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
编号：<input type="text" id="numid"/><br/>
姓名：<input type="text" id="nameid"/><br/>
<input type="button" value="选择" onclick="open1()"/>
<script type="text/javascript">
//实现弹出窗口的方法
function open1() {
//open方法
window.open("user.html","","width=250,height=150");
}
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<table border="1" bordercolor="blue">
<tr>
<td>操作</td>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s1('100','东方不败');"/></td>
<td>100</td>
<td>东方不败</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s1('101','岳不群');"/></td>
<td>101</td>
<td>岳不群</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s1('102','林平之');"/></td>
<td>102</td>
<td>林平之</td>
</tr>
</table>
<script type="text/javascript">
//实现s1方法
function s1(num1,name1) {
//需要把num1和name1赋值到window页面
//跨页面的操作 opener：得到创建这个窗口的窗口 得到window页面
var pwin = window.opener; //得到window页面
pwin.document.getElementById("numid").value = num1;
pwin.document.getElementById("nameid").value = name1;
//关闭窗口
window.close();
}
</script>
</body>
</html>