JavaWeb自学之JavaScript学习笔记 Day-2
2015-12-25 20:06
671 查看
1、js的String对象 [code] **创建String对象 ***var str="abc"; **方法和属性(文档) ***属性 length:字符串的长度 ***方法 (1)与html相关的方法 -bold():加粗 -fontcolor():设置字符串的颜色 -fontsize():设置字体的大小(1~7) -link():将字符串显示为超链接 var str4="这是一个链接到title.html的超链接" document.write(str4.link("../../html学习笔记/title.html")); -sub() sup():下标和上标 (2)与java相似的方法 -concat():连接字符串 var str1="abc"; var str2="dfg"; document.write(str1.concat(str2)); -charAt():返回指定位置的字符(下标从0开始) var str3="abcdefg"; document.write(str3.charAt(2));//若字符位置不存在,返回空字符串 -indexOf():返回字符串位置 **var str4="xiayichong"; document.write(str4.indexOf("w"));//字符不存在,返回-1 -split():切分字符串,成数组 **var str5="a-b-c-d"; var arr1=str5.split("-"); document.write("length:"+arr1.length); -replace():替换字符串 *传递两个参数: --第一个参数是原始字符 --第二个是要替换成的字符 var str6="abcd"; document.write(str6.replace("abc","Q")); -substr()和substring() *var str7="abcdefghijkl"; //document.write(str7.substr(5,3));//fgh 从第5位开始,向后截取3个字符 ***从第几位开始向后截取几位 document.write(str7.substring(3,5));//de 从第3位开始,到第5位结束(不包括第5位) ***从第几位开始,到第几位结束,但是不包含最后那一位 2、js的Array对象 **创建数组(三种) -var arr1=[1,2,3]; -var arr2=new Array(3);//长度是3 -var arr3=new Array(1,2,3);//数组中的元素是1 2 3 -var arr=[];//创建一个空数组 **属性:length:查看数组的长度 **方法: -concat()方法:数组的连接 var arr11=[1,2,3]; var arr12=[4,5,6]; document.write(arr11.concat(arr12)); -join()方法:根据指定的字符(如‘ - .等)分割数组 *var arr13=new Array(3); arr13[0]="a"; arr13[1]="b"; arr13[2]="c"; document.write(arr13); document.write("<br/>"); document.write(arr13.join("-")); -push()方法:向数组的末尾添加元素,返回数组的新的长度 var arr14=new Array(3); arr14[0]="tom"; arr14[1]="lucy"; arr14[2]="kitty"; document.write("old array:"+arr14); document.write("old length:"+arr14.length); document.write("<br/>"); document.write("new length:"+arr14.push("xiayichong")); document.write("<br/>"); document.write("new Array:"+arr14); ****如果添加的是一个数组,这个时候把数组当做一个整体字符串添加进去 var arr14=new Array(3); arr15=["aaa","bbb","ccc"]; arr16=["ddd","eee"]; document.write("old array:"+arr15); document.write("<br/>"); document.write("old length:"+arr15.length); document.write("<br/>"); document.write("new length:"+arr15.push(arr16));//此时长度为4 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=["zhangshan","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()方法:颠倒数组中元素的顺序。 var arr18=["zhangshan","lisi","wangwu","zhaoliu"]; document.write("old array:"+arr18); document.write("<br/>"); document.write("new Array:"+arr18.reverse()); 3、js的Date对象 **在java里面获取当前时间 Date date=new Date(); //格式化 //toLocaleString(); **js里面获取当前时间 var date=new Date(); //获取当前时间 var date=new Date(); document.write(date);//Tue Dec 22 16:52:28 UTC+0800 2015 //转换成习惯的格式 document.write(date.toLocaleString()); **获取当前的年方法 getFullYear():得到当前的年 document.write("year:"+date.getFullYear()); **获取当前的月的方法 getMonth():获取当前的月 ***返回的是0~11月,如果想要得到准确的值,加1 var date1=date.getMonth()+1; document.write("month:"+date1); **获取当前的星期 getDay():星期,返回的是(0~6) **外国朋友,把星期日作为一周的第一天,星期日返回的是0 而星期一到星期六 返回的是1-6 **获得当前的天 getDate():返回一个月中的某一天(1~31) document.write("date:"+date.getDate()); **获取当前的小时 getHours():返回当前的小时(0~23) **获取当前的分 getMinutes():返回当前的分钟(0~59) **获取当前的秒 getSeconds():返回当前的秒(0~59) **获取毫秒数 getTime():返回 1970年1月1日至今的毫秒数 **应用场景: ***使用毫秒数处理缓存的效果(不有缓存) http://www.baidu.com?毫秒数 4、js的Math对象 *数学的运算 **里面的都是静态方法,使用时可以直接用Math.方法() **ceil(x):向上舍入 **floor(x):向下舍入 **round(x):四舍五入 **random():得到一个0.0~1.0之间的随机数(伪随机数) ~得到0~9的随机数 Math.floor(Math.random()*10) 5、js的全局函数 *由于不属于任何一个对象,直接写名称使用 **eval():执行js代码(如果字符串是一个js代码,使用方法直接执行) ****var str="alert('1234');" eval(str); **encodeURI():对字符进行编码 var str1="夏以冲xiayichong"; var encode1=encodeURI(str1); document.write(encode1); 编码结果:%E5%A4%8F%E4%BB%A5%E5%86%B2xiayichong decodeURI():对字符进行解码 var decode1=decodeURI(encode1); document.write(decode1); encodeURIComponent()和decodeURIComponent() ***isNaN():判断当前的字符串是否是数字 var str2="123"; var str3="aaa"; document.write(isNaN(str2));//返回结果为false document.write(isNaN(str3));//返回结果为true ***如果是数字,返回false ***如果不是数字,返回true **parseInt():字符转换 var str4="123"; document.write(str4+1);//字符串相加是作连接操作,结果1231 document.write("<hr/>"); document.write(parseInt(str4)+1);//转换为number类型再加1,结果124 6、js的函数的重载 **什么是重载?方法名相同,参数不同 **js不存在重载 测试代码: function add1(a,b){ return a+b; } function add2(a,b,c){ return a+b+c; } function add3(a,b,c,d){ return a+b+c+d; } //调用 alert(add1(1,2)); //NaN alert(add2(1,2,3)); //NaN alert(add3(1,2,3,4));//10 **调用最后一个方法 **每个函数默认存在一个arguments数组,所有参数传到arguments数组里面 ****面试题:js里面是否存在重载? (1)js里面不存在重载 (2)但是可以通过其他方式模拟重载的效果 (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:browser object model:浏览器对象模型 **有哪些对象? ***navigator:获取浏览器的信息 document.write(navigator.appName); ***screen:获取屏幕的信息 document.write(screen.height); document.write(screen.width); ***location:请求url地址 ****获取请求的url地址 document.write(location.href); ****设置url地址 -页面上安置一个按钮,按钮上绑定一个事件,当我点击这个按钮,页面可以跳转到另一个页面 location.href="../../html学习笔记/title.html"; ****<input type="button" value="tiaozhuan" onclick="href1()"/> -鼠标点击事件 onclick="js的方法" ***history:请求的url的历史记录 -创建三个页面:1、创建第一个页面a.html,写一个超链接到b.html2、创建b.html超链接到c.html
3、创建c.html
-到访问的上一个页面
history.back();
history.go(-1);
-到访问的下一个页面
history.forward();
history.go(1);
*****window(******)
*窗口对象
*顶层对象(所有的bom对象都是在window里面操作的)
**方法
-window.alert():页面弹出一个框,显示内容
**简写alert()
-confirm():确认框
var flag=window.confirm("显示的内容");
-prompt():输入对话框
window.prompt("please input:","0");
window.prompt("在输入框上显示的内容","输入框里面的默认值");
-open():打开一个新的窗口
**open("打开新窗口的url地址","","窗口特征,比如窗口宽度和高度")
-创建一个按钮,点击一个按钮,打开新的窗口
window.open("../../html学习笔记/title.html","","width=200,height=100");
-close():关闭窗口(浏览器兼容性比较差)
window.close();
-做定时器
***setInterval("js代码",毫秒数) 1秒=1000毫秒
-表示每三秒,执行一次alert方法
window.setInterval("alert('123');",3000);
***setTimeout("js代码",毫秒数)
-表示在毫秒数之后执行,但是只会执行一次
-表示四秒之后执行js代码,只会执行一次
window.setTimeout("alert('abc');",4000);
**clearInterval():清除setInterval设置的定时器
**clearTimeout():清除setTimeout设置的定时器
8、js的dom对象
*dom: document object model:文档对象模型
**文档:
超文本文档(超文本标记文档) html、xml
**对象:
提供了属性和方法
**模型:
使用属性和方法操作超文本标记型文档
***可以使用js里面dom提供的对象,使用这些对象的属性和方法,对标记型文档进行操作
***想要对标记型文档进行操作,首先需要对标记型文档里面的所有内容封装成对象
--需要把html里面的标签、属性、文本内容都封装成对象
***要想对标记型文档进行操作,需要解析标记型文档
--1、将超文本标记文档(html、xml)里面的所有内容都封装成一个对象
--2、根据html的层级结构会在内存中分配一个树形结构
层级结构:第一层:<html></html>
第二层: <head></head> <body></body>
第三层:<title></title> <span></span>
第四层:文本、id
--不同的对象:
*document对象:整个html、xml文档
*element对象:标签对象
*属性对象
*文本对象
*Node节点对象:是这些对象的父对象
--当我们在前四种对象中找不到想要的方法时,到Node节点对象中去找
DOM模型有三种:(了解)
DOM level 1:将html文档封装成对象;
DOM level 2:在level 1的基础上添加新的功能,例如:对于事件和css样式的支持;
DOM level 3:支持xml1.0的一些新特性
*DHTML:是很多技术的简称
**html:封装数据
**css:使用属性和属性值设置样式
**dom:操作html文档(标记型文档)
**JavaScript:专门指的是js的语法语句(ECMAScript)
9、document对象
*表示整个的文档
**常用方法
****write()方法:
(1)向页面输出变量(值)
(2)向页面输出html代码
-var str="abc";
document.write(str);
document.write("<hr/>");
****getElementById()方法:
-通过id得到元素(标签)
//使用getElementById得到input标签
var input1=document.getElementById("nameid");//传递的参数是标签里面的id的值
//得到input里面的value值
alert(input1.name);//标签对象.属性名称
//向input里面设置一个值value
input1.value="bbbbb";
****getElementsByName()方法:
-通过标签的name的属性值得到标签
-返回的是一个集合(数组)
//使用getElementsByName得到input标签
var inputs=document.getElementsByName("name1");//传递的参数是标签里面的name的值
//alert(inputs.length);
//遍历数组
for(var i=0;i<inputs.length;i++){//通过遍历数组,得到每个标签里面具体的值
var input1=inputs[i];//每次循环得到input对象,赋值到input1里面
alert(input1.value);//得到每个input标签里面的value值
}
****getElementsByTagname("标签名称");
-通过标签名称得到元素
-返回的是一个集合(数组)
//演示getElementsByTagName
var inputs1=document.getElementsByTagName("input");
//alert(inputs.length);
//遍历数组
for(var i=0;i<inputs1.length;i++){//通过遍历数组,得到每个标签里面具体的值
var input1=inputs1[i];//每次循环得到input对象,赋值到input1里面
alert(input1.value);//得到每个input标签里面的value值
}
****注意的地方
****只有一个标签,这个标签只能使用name获得到,getElementsByName返回的是一个数组
但是现在只有一个元素,这个时候不需要遍历,而是可以直接通过数组的下标获取到值
//通过name得到input标签
var inputs2=document.getElementsByName("name11")[0];
alert(inputs2.value);
var inputss=document.getElementsByTagName("input")[0];
alert(inputss.value);
10、案例:window弹窗案例
-实现过程
1、创建一个页面
**有两个输入项和一个按钮
**按钮上面有一个事件:弹出一个新窗口 open
2、创建弹出页面
**表格
**每一行有一个按钮和编号、姓名
**按钮上有一个事件,把当前的编号和姓名,赋值到第一个页面相应的位置
****//实现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();
}
-opener:属性,用于获取创建当前窗口的窗口。
-做这个案例时候会有一个问题
***由于我们现在访问的是本地文件,js安全性,谷歌浏览器安全级别很高,不允许访问本地文件
***在实际开发中,没有这样的问题,实际中不可能访问本地的文件
相关文章推荐
- JS事件
- JS原型继承工作原理
- JavaScript 定时器使用
- JavaScript权威指南--Chapter5 语句
- js获取文本显示宽度
- 一、p2物理引擎在egret中的应用:简单贴图的实现
- banner轮播图js
- 推荐牛X的一本JS书
- 在Angular.js使用组合+依赖注入而不是继承
- js中String类型对象的方法使用
- 如何创建AnjularJS项目
- js ajax
- JSON-lib框架,转换JSON、XML不再困难
- javascript之DOM操作
- 在javascript中关于submit和button提交表单区别
- extjs 按条件查询出的数据在grid上不显示
- javascript图片预加载实例分析
- js数据过滤
- javascript中的super
- 【JAVASCRIPT】JS实现淘宝,百度评分功能