一.javascrip的函数
1.javascript的创建与调用
有三种创建方式
a.基本方式
语法规则:
function 函数名(参数列表){
函数体
}
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" >
function fun1(a,b){
alert(a+b);
}
fun1(2,5);
</script>
</body>
</html>
b.匿名方式
语法规则:
function (参数列表){
函数体
}
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" >
var fun1=function (a,b){
alert(a+b);
}
fun1(2,5);
</script>
</body>
</html>
c.对象函数
语法规则:
new Function("参数1","参数2",...,"函数体");
注意：全部使用字符串形式，Function是大写，因为是对象
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" >
var fun1=new Function ("a","b","alert(a+b)");
fun1(2,5);
</script>
</body>
</html>
2.函数的参数
a.javascript的形参不用var修饰
b.因为javascript是弱类型的，它的形参和实参不一定个数相同,所以我 们如上例中的传递fun1(1,2,3)也不会出错，那么怎么获取函数中的参数了，使用argumnets对象就可以获取，argumnets是个数组，会将传递的实参进行封装。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" >
function fun1(a,b){
for (var i=0;i<arguments.length;i++) {
alert(arguments[i]);
}
}
fun1(2,5,3,4);
</script>
</body>
</html>
3.js的返回值
js中如果有返回值，不需要声明，直接return语句返回就可以
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" >
function fun1(a,b){
return a+b;
}
alert(fun1(2,3));
</script>
</body>
</html>
4.js的全局函数
a.js的编码与解码
encodeURI() decodeURI()
encodeURIComponet() decodeURIComponent()
escape() unescape()
b.强制转换
Number()
String()
Boolean()
c.转成数字
parseInt()
parsefloat()
d.eval方法
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
eval("alert('hello world')");
</script>
</body>
</html>
二.BOM对象
1.window对象
一个window对象就是一个html页面，window对象是在浏览器加载html页面时创建的。
如果文档包含框架，那么浏览器会为文档创建一个对象，也会为每个框架创建一个对象。
a.alert方法
b.confirm(‘xxxx‘)
显示一个带有指定消息和确定及取消按钮的对话框。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
window.confirm("确定删除嘛");
</script>
</body>
</html>
c.定时器相关
setInterval:两个参数:第一一个参数接受一个字符串或者一个函数,第二个参数接受一个整数值，单位是毫秒，意思就是每隔多少毫秒周期性的执行第一个参数
clearInterval:清除掉setInterval（）定时设置执行的代码块,参数是定时器的名称
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function f1(){
alert("hello world");
}
/*设置定时器*/
var set=setInterval(f1,3000);
function f2(){
/*取消定时器*/
clearInterval(set);
}
</script>
</head>
<body>
<button onclick="f2()">取消定时器</button>
</body>
</html>
setTimeout:两个参数:第一一个参数接受一个字符串或者一个函数,第二个参数接受一个整数值，单位是毫秒，意思就是隔多少毫秒执行第一个参数
clearTimeout:清除setTimeOut设置的定时
setTimeout和setInterval的区别:
setTimeout()方法只执行一次,而setIntervel执行按周期一直执行。
BOM中的其它四个对象都是WINDOW对象的属性，所以不需要创建，直接通过window对象引用即可。
2.location对象
包含当前有关URL的信息
href:改变当前页面的地址
reload():重新加载当前页面,该方法有一个参数，可以填url，如果有参数,则刷新的是参数设置的url页面
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function f1(){
location.href="helloworld.html";
}
</script>
</head>
<body>
<button onclick="f1()">到达另一个页面</button>
</body>
</html>
3.history对象
history对象包含用户访问过的url,即历史记录。
back()：加载历史页面的前一个页面
forward()：加载历史页面列表中的下一个页面
go():可以表示前进,后退，当前页面
go(1)表示列表中的下一个页面,相当于forward，go(0):表示当前页面 go(-1)，表示前一个页面,相当于back().
4.Navigator对象
5.Screen对象
三.DOM对象
1.DOM中的事件
事件:什么事件，点击事件，焦点事件等 事件源:谁发生的事件，例如：button 响应行为:事件发生后，做什么事。
a.事件的绑定方式
(1)事件和响应行为都内嵌到HTML页面中
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<button onclick="alert('aaa')">Button</button>
</body>
</html>
(2)将事件内嵌到HTML页面中，响应行为包装到函数中
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function f1(){
alert("aaa");
}
</script>
</head>
<body>
<button onclick="f1()">Button</button>
</body>
</html>
(3)事件和响应行为与html标签分离
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input id="btn1" type="button" value="Button"/>
/*注意：这种js必须放在事件的后面执行*/
<script type="text/javascript">
var btn=document.getElementById("btn1");
btn.onclick=function(){
alert("aaa");
};
</script>
</body>
</html>
b.this关键字
this经过事件的函数进行传递的是html标签对象；
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input id="btn1" type="button" value="Button" onclick="f1(this)"/>
</body>
<script type="text/javascript">
function f1(obj){
alert(obj.type);
};
</script>
</html>
c.js中的常用事件
(1)如上的点击事件
(2)焦点事件
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<label for="txt">标记</label>
<input id="txt" type="text"/>
<span id="s"></span>
</body>
<script type="text/javascript">
var t=document.getElementById("txt");
t.onfocus=function(){
var s=document.getElementById("s");
s.innerHTML="输入8位";
};
t.onblur=function(){
var s=document.getElementById("s");
s.innerHTML="输入有误";
};
</script>
</html>
(3)鼠标事件
onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
<script type="text/javascript">
var div=document.getElementById("div");
div.onmouseover=function(){
this.style.backgroundColor="green";
};
div.onmouseout=function(){
this.style.backgroundColor="red";
};
</script>
</html>
(4)onload
onload表示加载完一个页面或图像是，执行指向的函数
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload=function(){
var div = document.getElementById("div");
div.innerHTML="加载完成";
}
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
(5)onchange
用户改变的内容触发的事件
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload=function(){
var txt = document.getElementById("txt");
txt.onchange=function(){
alert(this.value);
}
}
</script>
</head>
<body>
<span>输入用户名</span>
<input id="txt" type="text"></div>
</body>
</html>
d.阻止事件的默认行为
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="helloworld.html" onclick="fn(event)">点击我</a>
</body>
<script type="text/javascript">
function fn(e){
//ie：window.event.returnValue = false;
//W3c：传递过来的事件对象.preventDefault();
//W3c标准
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();
//IE标签
}else{
alert("ie");
window.event.returnValue = false;
}
};
</script>
</html>
通过事件返回false也可以阻止事件的默认行为
<html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <a href="helloworld.html" onclick="return false">点击我</a> </body> </html>
e.阻止事件的广播行为
当我们的事件有重复时，就会触发多个事件，如果想阻止其它事
IE：window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();
if(e&&e.stopPropagation){
alert("w3c");
e.stopPropagation();
//IE标签
}else{
alert("ie");
window.event.cancelBubble = true;
}
件
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div1 {
background-color: red;
width: 100px;
height: 100px;
padding: 50px;
}
#div2{
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1" onclick="f1()">
<div id="div2" onclick="f2(event)">xxx</div>
</div>
</body>
<script type="text/javascript">
function f1(){
alert("div1");
}
function f2(e){
alert("div2");
if(e&&e.stopPropagation){
alert("w3c");
e.stopPropagation();
//IE标签
}else{
alert("ie");
window.event.cancelBubble = true;
}
}
</script>
</html>
2.ＤＯＭ对象
a.文档对象模型
HTML加载到浏览器后，会形成DOM树结构，根据这些节点我们就可以修改HTML代码，在HTMLDOM中，一切皆是节点对象
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
节点树如下图:
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点
b.DOM对象的方法与属性
方法可以在节点上执行一些动作，即这些任何节点都可以使用这些方法
根节点:document是根节点，该对象是window的一个属性，所以直接使用
其它节点对象只能使用ＤＯＭ对象的方法来获取
例：
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input id="btn1" type="button" value="Button"/>
</body>
<script type="text/javascript">
var btn=document.getElementById("btn1");
btn.onclick=function(){
alert(btn);
}
</script>
</html>
还有很多，用时查看资料