1.js的String对象
- 创建String对象
var str = "字符串内容";
属性:length 表示字符串长度
方法:(1)、与html相关的方法
.bold(); 加粗字符串
.fontcolor(color); 设置字符串颜色
传参为颜色.fontsize();设置字符串大小
.link(url); 将字符串显示为超链接
传参为链接地址.sub();将字符串显示为下标
.sup();将字符串显示为上标(2)、与Java相似的方法
.cancat(str);连接字符串
传参为需要连接的字符串
.charAt(num);返回指定位置的字符串
传参为表示字符串位置的数字
.indexOf(str);检索字符串,返回字符串位置
传参为需要检索的字符串
.split(); 分割字符串 返回一个数组。
传参为需要分割出去的字符串.replace("str1","str2"); 替换字符串。
传参:被替换的字符串,字符串
.substr(start,length); 从start位置开始截取length长度的字符串.substring(start,end); 从start位置开始到end位置结束 ,但不包含end位置字符
[start,end);
2.js的Array对象
属性:length.
方法:
.cancat(arr);数组连接
.join("--"); 使用指定字符间隔数组元素
eg: var arr = new Array(3); arr[0] = "a"; arr[1] = "b"; arr[2] = "b"; document.write(arr.arr.join("--"));
输出结果为"a--b--c"
.push(); 向数组末尾添加添加元素。返回数组新的长度。
也可添加数组,此时整个数组作为整体,长度为 1
.pop(); 删除最后一个元素,返回被删除的元素。.reverse(); 颠倒数组中元素的顺序(逆序排列数组)
3.js的Date对象
Java中获取当前时间
Date date = new Date(); //使用方法格式化 simpleDateFormat(); / toLocalString();
Js中获取当前时间var date = new Date(); //使用方法格式化 toLocalString(); .getFullYear(); 返回四位数年份
.getMonth(); 返回当前月。返回 0~11月,需要提前+1var date1 = date.getMonth()+1; document.write(date1);
.getDay(); 返回星期 0~6 ,星期日用0表示,其余数字相互对应。
.getDate(); 返回日。1~31..getHours(); 返回当前小时
.getMinutes(); 返回当前分钟
.getSeconds(); 返回当前秒
.getTime(); 返回当前毫秒 从1970年1月1日开始至今
应用场景:
使用毫秒数处理缓存效果(防止缓存)
4.Math对象 --- Math内都是静态对象(可直接通过 Math.方法调用)
属性:PI 返回 3.14159.var x = 10.4
.ceil(x); 向上舍入 返回11.floor(x); 向下舍入 返回10
.round(x); 四舍五入 返回10
.random(); 返回随机数(伪随机数 0.0 ~ 1.0 之间)。
.max(a,b); 返回a,b中较大的
.min(a,b); 返回a,b中较小的.pow(x,y); 返回x的y次方的值
5. js的全局函数(不属于任何对象的函数,可直接通过名称使用)
.eval(); 执行js代码(如果字符串时js代码)
eg: var str = "alert('1234')"
eval(str);
.encodeURL(); 对字符进行编码
.decodeURL(); 对字符进行解码
.encodeURLComponent();对字符进行编码
.decodeURLComponent();对字符进行编码---有无Component的区别:不编码的字符个数不同
.isNaN(); 判断是否为数字,返回true/false。
****注:是数字返回false
不是数字返回true
.parseInt(); 将字符串解析为整数
.parseFloat(); 将字符串解析为浮点数
6.js的函数的重载
重载:方法名相同,参数不同。
1)js中不存在重载,就近原则调用方法
2)但可以通过其他方式模拟重载
eg:
function add(a,b){
return a+b;
}
function add(a,b,c){
return a+b+c;
}
function add(a,b,c,d){
return a+b+c+d;
}alert(add(1,2)); 结果:NaN
alert(add(1,2,3)); 结果:NaN
alert(add(1,2,3,4)); 结果:10可用arguments模拟重载。
利用arguments数组接收参数的性质。
判断arguments.length == 多少。用if语句使不同参数对应不同方法。
7.js的BOM对象 ---- broswer object model浏览器对象模型
对象:
1)window(重点)
窗口对象 , 也是顶层对象(所有的bom对象都是在Window里面操作的)方法:
.alert(); 弹出窗口.confirm(); 确认框,窗口内含有确认和取消按钮。
var flag = window.confirm("提示内容"); if(flag == true){ alert("删除成功"); }else{ alert("删除失败"); }
.prompt("text","defaulttext"); 输入对话框
.open("url","name","窗口特征"); 打开一个新的窗口
可传参,name一般为空,特征为宽度高度.close; 关闭窗口
做定时器的方法(重要)
.setInterval("js代码",毫秒数); //每(毫秒数)执行一次"js代码"
.setTimeout("js代码",毫秒数); //在(毫秒数)后只执行一次"js代码"
.clearInterval(id); //清除由setInterval设置的定时器 , 传参为setInterval()返回的id值
.clearTimeout(id); //清除由setTimeout设置的定时器 传参为setTimeout()返回的id值//每3秒弹出123 window.setInterval("alert('123')",3000);
2)navigator 获取客户机信息(浏览器信息)
方法
.appName(); 返回浏览器名称
3)screen
.width(); 返回屏幕宽度
.height(); 返回屏幕高度4)location 请求url地址
href属性location.href 获取请求的url地址 location.href = "地址"; 设置url地址 <input type = "botton" value="跳转" onclick = "href();"/> //定义按钮事件 function href(){ location.href = "跳转地址"; //跳转到设置的地址 document.write("location.href"); //输出当前地址 }
5)history: 请求url的历史纪录
history.back(); //到访问的上一个页面
history.forward; //到访问的下一个页面
history.go(1); //到访问的下一个页面<input type = "botton" value="back" onclick = "back()"/> //定义按钮事件 function back(){ history.back(); //到访问的上一个页面 } <input type = "botton" value="next" onclick = "next()"/> //定义按钮事件 function next(){ history.forward; //到访问的下一个页面 }
8.js的dom对象 --- document object model 文档对象模型
文档:超文本标记文档 html 、 xml
对象:提供属性和方法的对象
模型:使用属性和方法来操作超文本标记文档操作超文本文档步骤: (先封装,后解析)
1)先封装将要操作的超文本标记文档所有内容(标签、属性、文本内容)
2)后解析标记型文档
解析过程:
根据html的层级结构,在内存中分配一个树形结构存储,把每部分封装
五种对象
document对象: 整个html文档
element对象: 标签对象
属性对象
文本对象
Node节点对象 : 是上面所有对象的父对象。DOM基本功能:
① 查询某个元素
② 查询某个元素的祖先、兄弟以及后代元素
③ 获取、修改元素的属性
④ 获取、修改元素的内容
⑤ 创建、插入和删除元素
DHTML:是很多技术的简称
包括:
HTML:封装数据
CSS:使用属性和属性值设置样式
DOM:操作html文档(标记型文档)
Javascript(指js的语法语句):
9、document对象
表示整个文档
方法
.wirte();
1)向页面输出变量(值)
2)向页面输出html代码
.getElementById();
通过id得到标签对象,可以通过标签对象来设置标签属性
//修改id为"nameid"的<input>标签的value值 <input type="text" id="nameid" name="name1" value="default"/> var input1 = document.getElementById("nameid"); input1.value= "default111"
.getElementsByName();
通过标签的name的值来得到标签
返回值为集合(数组)//存在多个<input>标签name值相同时,
可以此方法得到所有"name"值相同的标签
.getElementsTagName();通过标签来获得标签数组
10、案例:window弹窗案例
实现过程
1、创建首页面
两个输入项
一个事件按钮
按钮事件:弹出一个窗口 用.open();实现<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(){ window.open("User.html","","width=300,height=180"); } </script> </body>
2、创建弹出页面
一个表格
每行有一个选择按钮、编号、姓名
选择按钮事件:
把当前编号、姓名赋值给首页面的两个输入项中<body> <table border="1" width="250" height="120"> <tr> <td>操作</td> <td>编号</td> <td>姓名</td> </tr> <tr> <td><input type="button" value="选择" onclick="s1('001','阿大')"/></td> <td>001</td> <td>阿大</td> </tr> <tr> <td><input type="button" value="选择" onclick="s1('002','阿二')"/></td> <td>002</td> <td>阿二</td> </tr> <tr> <td><input type="button" value="选择" onclick="s1('003','阿三')"/></td> <td>003</td> <td>阿三</td> </tr> </table> <script type="text/javascript"> 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>
.opener(); 得到创建这个窗口的页面(窗口)
问题: js不能访问本地文件。
在chrome浏览器中不能访问本地文件,将不能从本地文件中传值解决: 实际开放中,将不会有这样问题,因为实际开发中不会访问本地文件。。
案例实现中遇到的问题:
1)<input/>标签末尾有"/" !
2).getElementById(); 方法是通过id获取元素的,
所以在<input/>中必须含有id
3) onclick事件中可以是函数名称,然后再下面实现函数