1.js的string对象
****创建string对象
var str="abc";
*****方法和属性:
****属性:length 字符串的长度
****方法:
(1)与html相关的方法
--bold() 加粗;
--fontcolor(“颜色”) 设置字符串的颜色;
--fontsize("大小")设置字符串大小
--link(“链接地址”)把字符串变成链接
--sub()和sup()方法下标和上标
<script type="text/javascript">
var str="abcdefg";
document.write(str.length);
//bold方法
document.write("<hr/>");
var str1="abcd";
document.write(str1.bold());
//fontcolor方法
document.write("<hr/>");
var str2="adqweqwe";
document.write(str2.fontcolor("red"));
//fontsize方法
document.write("<hr/>");
var str3="gggggggg";
document.write(str3.fontsize("100px"));
//link方法
document.write("<hr/>");
var str4="hahahhaha";
document.write(str4.link("01.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>
(2)与java相似的方法
--- concat()连接字符串
---charAt()返回位置的字符串
---indexOf() 返回字符串所在的位置
---split() 切分字符串
---replace() 替换字符串
***第一个参数:原始字符
****第二个参数:要替换的字符
-----substr()和substring()
****substr() 从第几位开始,向后截取几位
****substring()从第几位到第几位,不包括后面一位
<script type="text/javascript">
//concat方法
var str1="abc";
var str2="def";
document.write(str1.concat(str2));
//charAt方法
document.write("<hr/>");
var str3="abcdefg";
document.write(str3.charAt(0));
//indexOf方法
document.write("<hr/>");
var str4="pqiuyt";
document.write(str4.indexOf("q"));
//split方法
document.write("<hr/>");
var str5="a-b-c-d";
document.write(str5.split("-"));
//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="abcdefghigk";
document.write(str7.substr(5,3));//fgh 从第5位开始向后截取3个字符
document.write("<br/>");
document.write(str7.substring(3,5));//de 从第3为开始到第5为结束 [3,5)
</script>
2.js的Array对象
****创建数组(3种)
--var arr1=[1,2,3]; //注意这是[] []中没有值的时候是空数组
--var arr2=new Array(3); //数组长度是3
---var arr3=new Array(1,2,3); //数组中元素是123
****l属性:length查看数组的长度
****方法:
----concat()方法:数组的连接;
-----join():在数组元素中添加分隔符
----push()方法:向数组末尾添加元素,返回数组的新长度
****如果添加的是一个数组,这时会把该数组当成一个字符串添加进去
-----pop()方法:删除最后一个元素并且返回该元素
-----reverse()方法:颠倒数组中的元素的顺序
<script type="text/javascript">
//length
var arr1=[1,2,3];
document.write(arr1);
//concat方法
document.write("<hr/>");
var arr11=[1,2,3];
var arr12=[4,5,6];
document.write(arr11.concat(arr12));
//jion方法
document.write("<hr/>");
var arr13=new Array(3);
arr13[0]="a";
arr13[1]="b";
arr13[2]="c";
document.write(arr13);
document.write("<hr/>");
document.write(arr13.join("-"));
//push方法
//字符串测试push
document.write("<hr/>");
var arr14=new Array(3);
arr14[0]="tom";
arr14[1]="lucy";
arr14[2]="jack";
document.write("old Array:"+arr14+"<br/>");
document.write("old length:"+arr14.length+"<br/>");
arr14.push("zhangsan");
document.write("new Array:"+arr14+"<br/>");
document.write("new length:"+arr14.length+"<br/>");
document.write("<hr/>");
//数组测试push
var arr15=["aaa","bbb","ccc"];
var arr16=["www","qqq"];
document.write("old array:"+arr15+"<br/>");
document.write("old length:"+arr15.length+"<br/>");
arr15.push(arr16);
document.write("new Array:"+arr15+"<br/>");
document.write("new Length:"+arr15.length+"<br/>");
for(var i=0;i<arr15.length;i++){
//alert(arr15[i]);
}
//pop方法
document.write("<hr/>");
var arr17=["zhangsan","lisi","wangwu","zhaoliu"];
document.write("old arrya:"+arr17+"<br/>");
document.write("return:"+arr17.pop()+"<br/>");
document.write("new Array:"+arr17);
//reverse方法
document.write("<hr/>");
var arr18=["zhangsan1","lisi1","wangwu1","zhaoliu1"];
document.write(arr18+"<br/>");
arr18.reverse();
document.write(arr18+"<br/>");
</script>
3.js的Date对象
****在java获取当前时间
Date date=new Date();
//格式化:
//tolocalString()可以把日期转化成当前格式
*****js获取当前的时间
var date=new Date();
转换成当前系统的格式toLocaleString();
*****获取当前年的方法
getFullYear()方法: 返回当前年的方法
getMonth()方法: 返回当前的月份,注意:返回值为0-11
getDay()方法: 返回天数 注意:外国把星期日当成第一天返回0 其他的是1-6
getDate()方法:获取当前的天数1-31
getHours()方法:获取当前小时
getMinutes()方法:获取当前分钟
getSeconds()方法:获取当前秒
getTime()方法:获取毫秒数 返回从1970,1,1开始的毫秒数
****场景:使用毫秒数处理缓存的效果(没有缓存)
http:www.baidu.com?毫秒数
<script type="text/javascript">
//获取当前时间
var date=new Date();
document.write(date);
//转换成习惯的格式
document.write("<hr/>");
document.write(date.toLocaleString());
//得到当前年getFullyear
document.write("<hr/>");
document.write(date.getFullYear());
//获取当前的月getMonth()
document.write("<hr/>");
document.write(date.getMonth()+1); //注意返回的是0-11所以+11所以符合日常
//获取当前的星期getDay();
document.write("<hr/>");
document.write(date.getDay());
//获取当前的天getDate()
document.write("<hr/>");
document.write(date.getDate());
//获取当前的小时:getHours();
document.write("<hr/>");
document.write(date.getHours());
//获取当前的分钟getMinutes()
document.write("<hr/>");
document.write(date.getMinutes());
//获取当前的秒getSeconds()
document.write("<hr/>");
documen.write(date.getSeconds());
//获取毫秒数getTime()
document.write("<hr/>");
documen.write(date.getTime());
</script>
4.js的Math对象
***属性:PI(圆周率)
*****数学的运算 Math中的方法是静态方法,使用的话直接使用Math.方法()
****ceil(x)方法 :向上舍入
****floor(x)方法: 向下舍入
****round(x)方法: 四舍五入
*****random()方法:得到一个随机数(伪随机数)0-1之间的随机数
得到0-9的随机数 Math.random()*10;
******max(x,y)方法:返回最大值
*******min(x,y)方法;返回最小值
*****pow(x,y)方法:x的y次方
<script type="text/javascript">
//ceil() floor() round()方法
var mm=10.4;
document.write(mm);
document.write("<hr/>");
document.write(Math.ceil(mm));
document.write("<hr/>");
document.write(Math.floor(mm));
document.write("<hr/>");
document.write(Math.round(mm));
//random()方法
document.write("<hr/>");
document.write(Math.random());
//得到0-9的随机数
document.write("<hr/>");
document.write(Math.random()*10);
</script>
5.js的全局函数
**由于不属于任何一个对象,直接使用
***eval():执行js代码,如果字符串是js代码可以直接执行
***encodeURI():对字符进行编码encodeURIComponent()
***decodeURI():对字符进行解码decodeURIComponent()
***isNaN():判断当前的字符串是否是数字
*****是数字的时候返回false
*******不是数字返回true
****parseInt():转换成数字型
<script type="text/javascript">
//eval()方法
var str="alert('123');";
//eval(str);
//encodeURI()
document.write("<hr/>");
var str1="测试中文aaa123";
var encode1=encodeURI(str1);
document.write(encode1);
//decodeURI()
document.write("<hr/>");
var decode1=decodeURI(encode1);
document.write(decode1);
//isNaN
document.write("<hr/>");
var str2="123";
document.write(isNaN(str2));
//parseInt方法
document.write("<hr/>");
var str3="123";
document.write(str3+1);
document.write("<br/>");
document.write(parseInt(str3)+1);
</script>
6.js的函数重载
**** java中一个类中方法名相同,参数列表不同
****js中的重载?不存在
****会调用最后一个函数(面试题目)
(1)js不存在重载
(2)js可以通过其他的方式模拟实现重载arguments
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
7.js的BOM对象
***BOM:浏览器对象模型
***有哪些对象
****navigator:获取客户机(浏览器)的信息
---navigator.属性 (document.write(navigator.appName);
****screen:获取屏幕的信息
//screen对象
document.write("<hr/>");
document.write(screen.width);
document.write("<br/>");
document.write(screen.height);
*****location:请求的URL地址
---href属性
****获取请求的url地址
****设置url地址
----页面放置一个按钮,按钮上绑定一个事件,点击按钮会跳转
<html>
<head>
<title>示例</title>
</head>
<body>
<input type="button" value="tiaozhuan" οnclick="href1();"/>
<hr/>
<script type="text/javascript">
//href1()方法
function href1(){
//alert("aaa");
location.href="01.html";
}
</script>
</body>
</html>
*****onclick是一个鼠标点击事件 οnclick="js代码";
*****history:请求的url的历史
----创建三个页面
1.创建第一个页面a.html写一个超链接到b.html
<html>
<head>
<title>示例</title>
</head>
<body>
<h1>AAAAAAAA</h1>
<a href="b.html">AAAAAAAA</a>
<script type="text/javascript">
</script>
</body>
</html>
2.创建b.html链接到c.html
<html>
<head>
<title>示例</title>
</head>
<body>
<h1>BBBBBBBBBBB</h1>
<a href="c.html">BBBBBBBBB</a>
<br/>
<input type="button" value="back" οnclick="back1();">
<br/>
<input type="button" value="next" οnclick="next1();">
<script type="text/javascript">
//到上一个页面
function back1(){
history.go(-1);
}
//到下一个页面
function next1(){
history.go(1);
}
</script>
</body>
</html>
3.创建c.html
----到上一个页面:history.back(); history.go(-1);
-----到下一个页面:history.forward(); history.go(1);
<html>
<head>
<title>示例</title>
</head>
<body>
<h1>CCCCCCCC</h1>
<script type="text/javascript">
</script>
</body>
</html>
******window(*********)
****窗口对象
****顶层对象(所有的BOM对象都是在window里面操作的)
****方法:
**window.alert()
-简写alert()
**confirm():确认提示框
---var flag=window.confirm("显示内容");
var flag=window.confirm("是否删除");
if(flag==true){
alert("删除成功");
}else{
alert("删除失败");
}
**prompt():输入的对话框
--window.prompt("提示信息","默认值");
--windo.prompt("please input","0");
**open():打开一个新的窗口
open("打开新窗口的URL","","窗口特征,比如宽高")
---创建一个按钮,点击按钮,打开一个新的窗口
window.open("1.html","","width=200,height=100");
**close(浏览器兼容其比较差):关闭窗口 window.close();
**做定器
---setInterval("js代码",毫秒数) 1秒=1000毫秒
--每3秒执行alert()方法
window.setInterval("alert('123')",3000); 会有一个返回值
---setTimeout("js代码",毫秒数)
--表示在4000毫秒数之后执行,但是只会执行一次
window.settimeout("alert('abc')",4000); 会有一个返回值
---clearInterval():清除掉setInterval设置的定时器 通过setInterval的返回值
---clear Timeout():清除掉setTimeout设置的定时器 通过setTimeout的返值
<html>
<head>
<title>示例</title>
</head>
<body>
<input type="button" value="interval" οnclick="clear1();">
<input type="button" value="timeout" οnclick="clear2();">
<script type="text/javascript">
//var id1=setInterval("alert('123')",1000);
var id2=setTimeout("alert('abc')",1000);
//清除setInterval
function clear1(){
clearInterval(id1);
}
//清除setTimeout
function clear2(){
clearTimeout(id2);
}
</script>
</body>
</html>
8.js的DOM对象
*DOM 文档对象模型
**文档:超文本标记文档html,xml
**对象:提供了属性和方法
**模型:使用属性和方法操作超文本标记文档
*****可以使用js里面的DOM提供的对象,使用这些对象的属性和方法,对标记型文档进行操作
***想要超文本标记文档进行操作,首先需要对标记型文档里面的所有内容封装成对象
----需要把html中的标签,属性,内容封装成对象
***要想对标记型文档进行操作,解析标记型文档(html)
***解析过程
根据html的层级结构在内存中分配一个树形结构,需要把html中的每个部分封装成对象
--document对象:整个文档
--element对象:标签对象
--属性对象:
--文本对象:
--Node节点对象:这个对象是这些对象的父对象
******如果在对象里面找不到想要的方法,这个时候到Node对象里面去找
****DHTML:是很多技术的简称
**html:封装数据
**css:使用属性和属性值设置样式
**DOM:操作html文档(标记型文档)
**javascript:专门指的是javascript的语法和语句(ECMAScript)
9.document对象
***每个载入的html文档都会变成document对象
****常用方法:
*****write()方法
(1)向页面输出变量(值)
(2)向页面输出html代码
******getElementById();通过id获取元素
<html>
<head>
<title>示例</title>
</head>
<body>
<input type="text" id="nameid" name="aaaa">
<script type="text/javascript">
//write()方法
document.write("<hr/>")
//getElementById()方法
var input1=document.getElementById("nameid"); //得到的是一个对象 传递的参数是标签中id的值
//得到input中的value值
alert(input1.name); //标签的对象和属性名称
//向input中设置一个value
input1.value="bbbbb";
</script>
</body>
</html>
*****getElementsByName()
---通过标签的name属性值得到值
---返回的是多个对象,数组对象
<html>
<head>
<title>示例</title>
</head>
<body>
<input type="text" name="name1" value="aaaaaa"/><br/>
<input type="text" name="name1" value="bbbbbb"/><br/>
<input type="text" name="name1" value="cccccc"/><br/>
<input type="text" name="name1" value="dddddd"/><br/>
<script type="text/javascript">
var inputs=document.getElementsByName("name1"); //传递的是标签里面的name的值
alert(inputs.length);
//遍历inputs对象数组
for(var i=0;i<inputs.length;i++){
//将对象赋值给input
var input1=inputs[i];
//显示各个对象的value值
alert(input1.value);
}
</script>
</body>
</html>
*****getElementsByTagName("标签的名称"):
<html>
<head>
<title>示例</title>
</head>
<body>
<input type="text" name="name1" value="aaaaaa"/><br/>
<input type="text" name="name1" value="bbbbbb"/><br/>
<input type="text" name="name1" value="cccccc"/><br/>
<input type="text" name="name1" value="dddddd"/><br/>
<script type="text/javascript">
//getElementsByTagName()
var inputs=document.getElementsByTagName("input"); //传入的参数是标签名称 返回的也是对象数组
alert(inputs.length);
//遍历
for(var i=0;i<inputs.length;i++){
var input1=inputs[i];
alert(input1.value);
}
</script>
</body>
</html>
*****注意:只有一个标签只能使用name得到,这个使用getElemensByName返回的是一个数值,这是不需要遍历,只通过数组下标来获取就行var inputs=document.getElementsByName("name11")[0];
10.window弹窗案例
---实现过程
1.创建一个页面
****有两个输入项和一个按钮
****按钮上面有一个事件,弹出一个新窗口open方法
2.创建弹出页面
*****表格
*****每个表格有个按钮
*****按钮上有事件:把当前的编号和姓名传递到第一页页面
----做这个案例的时候会遇到个问题:
****由于我们现在访问的是本地的文件,js安全性,谷歌浏览器的安全性特别高,不允许访问本地文件
****在实际开发中,没有这样的问题,实际开发中不可能访问本地文件
<html>
<head>
<title></title>
</head>
<body>
编号:<input type="text" id="numid"/><br/>
姓名:<input type="text" id="nameid"/><br/>
<input type="button" value="选择" οnclick="open1()"/>
<script type="text/javascript">
function open1(){
//open方法
window.open("user.html","","width=250,height=150");
}
</script>
</body>
</html>
<html>
<head>
<title>user网页</title>
</head>
<body>
<table border="1" bordercolor="blue">
<tr>
<td>操作</td>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td><input type="button" value="选择" οnclick="s1('100','东方不败')"/></td>
<td>100</td>
<td>东方不败</td>
</tr>
<tr>
<td><input type="button" value="选择" οnclick="s1('101','岳不群')"/></td>
<td>101</td>
<td>岳不群</td>
</tr>
<tr>
<td><input type="button" value="选择" οnclick="s1('102','林平之)"/></td>
<td>102</td>
<td>林平之</td>
</tr>
</table>
<script type="text/javascript">
//实现s1方法
function s1(num1,name1){
//需要把num1和name1赋值到windo页面
//跨页面操作opener 得到windo页面
var pwin=window.opener;
document.getElementById(numid).value=num1;
document.getElementById(nameid).value=name1;
//关闭窗口
window.close();
}
</script>
</body>
</html>
11.在末尾添加节点案例:
第一步:获取ul标签
第二步:创建li标签
document.createElement("标签名称")方法
第三步:创建文本
document.createTextNode("文本内容")方法
第四步:把文本内容添加到li标签下面
使用:appendChild方法
li1.appendChild(tex1);
第五步:把li添加到ul下面
使用:appendChild方法
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<br/>
<input type="button" value="add" οnclick="add1();"/>
<script type="text/javascript">
//在末尾添加节点
function add1(){
//获取到ul标签
var ul1=document.getElementById("ulid");
//创建标签
var li1=document.createElement("li");
//创建文本
var tex1=document.createTextNode("5555555");
//把文本加入到li中
li1.appendChild(tex1);
//把li加到ul下面
ul1.appendChild(li1);
}
</script>
</body>
</html>