JavaScript基础学习(三)
一、js的全局函数
*** eval() : 执行js代码(如果字符串是一个js代码,使用方法直接执行)
var str = "alert("1234")";
eval(str);
***encodeURI(): 对字符进行编码
var str = "测试中文aaa1234";
var string = encodeURI(str);
decodeURI(): 对字符进行解码
var string1 = decodeURI(string);
document.write(string1);// 测试中文aaa1234
isNaN() 判断当前的字符串是否是数字
返回true false 注意:是数字时返回false , 不是返回true
**parseInt() :类型转换
var str = "123";
document.write(str+1); //1231
document.write(parseInt(str)+1); //124
二、js函数的重载
**什么是重载?
方法名相同,参数不同
**js的重载是否存在? 不存在
---调用最后一个方法
--把传递的参数保存在arguments数组里
(面试题目)js里面不存在重载,但是可以通过其他方式模拟重载效果
通过arguments数组实现
function add1(){
var sum = 0;
for (var i = 0; i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
alert(add1(1,2)); //3
alert(add1(1,2,3)); //6
三、js的bom对象
**bom: browswer object model: 浏览器对象模型
有哪些对象?
* navigator:获取客户机的信息(浏览器的信息)
-navigator.appName
-document.write(navigator.appName);//Microsoft Internet Explorer
* screen: 获取屏幕的信息
-screen.width
-screen.height
*location:
获取当前请求url地址
-location.href
设置url地址
-页面上安装一个按钮,按钮上绑定一个事件,
当点击这个按钮,会跳转到另一个页面
<input type="button" value="tiaozhuan" onclick="href1();"/>
function href1(){
//alert("aaaa");
location.href = "99乘法表.html";
}
*history: 请求url的历史记录
-创建三个页面:
1.创建第一个页面 a.html,写一个超链接到b.html
2.创建b.html 超链接 到c.html
3.创建c.html
在b.html安装两个按钮,分别写一个方法
//到上一个页面
function back1(){
history.back();
//history.go(-1);
}
//到下一个页面
function next1(){
history.forward();
//history.go(1);
}
****window(重点):
-窗口对象
-顶层对象(所用的bom对象都在window里面操作)
-方法(window都可以简写)
-window.alert():页面弹出一个框,显示内容
-confirm();确认框
var flag=confirm("显示内容");
document.write("<hr/>");
document.write(flag);
-prompt(); 输入的对话框
-window.prompt("提示内容","默认值");
-open(): 打开一个新的窗口
**open("打开的新窗口的地址","","窗口特征,比如宽度和高度");
**创建一个按钮,点击这个按钮,打开一个新的窗口
-close(): 关闭窗口(浏览器兼容性比较差)
-做定时器
** setInterval("js代码",毫秒数);
-每3秒执行一次alert方法
返回一个id
var id1 = window.setInterval("alert('123');",3000);
** setTimeout("js代码",毫秒数);
-表示在毫秒数之后执行,但只会执行一次
-4秒之后执行,只执行一次
var id2 = window.setTimeout("alert('abc');",4000);
** clearInterval(): 清除setInterval设置的定时器
** clearTimeout(): 清除setTimeout设置的定时器
**设置两个按钮,分别写一个方法
function clear1(){
clearInterval(id1);
}
function clear2(){
clearTimeout(id2);
}
四、js的dom对象
* dom: document object model:文档对象模型
** 文档:
超文本文档(超文本标记文档)html、xml
** 对象:
提供了属性和方法
** 模型:
使用属性和方法操作超文本标记型文档
*****可以使用js里面的dom里面提供的对象,使用这些对象的属性和方法,
对标记型文档进行操作
****想要对标记型文档进行操作,
首先需要对标记型文档里面所有内容封装成对象
--需要把html里面的标签、属性、文本内容都封装成对象
*** 要想对标记型文档进行操作,解析标记型文档
-画图分析,如何使用dom解析html
*** 解析过程
根据html的层级结构,在内存中分配一个树形结构,需要把html每部分封装成对象
-document对象 :整个文档
-element 对象:标签对象
-属性对象
-文本对象
---Node节点对象:这个对象是这些对象的父对象
**如果在对象里面找不到想要的方法,这个时候到Node对象里面去找
*DOM模型有三种
*DHTML:很多技术的简称
**html:封装数据
**css:使用属性和属性值设置样式
**dom:操作html文档(标记型文档)
**javascript:专门指的是js的语法语句(ECMAScript)
五、document对象
*表示整个对象
**常用方法
**write()方法:
-(1)向页面输出变量(值)
-(2)向页面输出html代码
var str = "abc";
document.write(str);
document.write("<hr/>");
**getElementById();
-通过id得到元素(标签)
<input type="text" id="txt1" value="123"/>
var input1 = document.getElementById("txt1");//传递的参数是输入项里面的id的值
//得到input里面的value值
alert(input1.value); // 标签对象.属性名称
//向input里面设置一个值value
input1.value = "bbbb";
**getElementsByName();
-通过标签的name的属性值得到标签
<input type= "text" name="name1" value="aaa"/><br/>
<input type= "text" name="name1" value="bbb"/><br/>
<input type= "text" name="name1" value="ccc"/><br/>
<input type= "text" name="name1" value="ddd"/><br/>
//取得的是name属性为name1的所有元素,当只有一个元素name属性
//为name1时 ,也是返回数组,长度为1,可直接通过数组下标[0]得到input0[0]
var input0 = document.getElementsByName("name1");//传递的参数是标签里面name的值
document.write(input0.length);//4
//遍历数组
for(var i=0;i<input0.length;i++){
var input1 = input0[i];
document.write(input1.value);
}
**getElementsByTagName("标签名称");
--通过标签名称得到元素
<input type= "text" name="name1" value="aaa"/><br/>
<input type= "text" name="name1" value="bbb"/><br/>
<input type= "text" name="name1" value="ccc"/><br/>
<input type= "text" name="name1" value="ddd"/><br/>
var input2 = document.getElementsByTagName("input");
document.write(input2.length);//4
//参考上面getElementsByName();