javaScript的函数，事件，BOM，DOM
来源：互联网 发布：冉莹颖的实际身高知乎 编辑：程序博客网 时间：2024/05/22 03:28
一.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>还有很多，用时查看资料
- javaScript的函数，事件，BOM，DOM
- JavaScript进阶(对象、BOM、DOM、事件)
- javaScript BOM事件的应用
- JavaScript的DOM与BOM心得
- javascript里的DOM和BOM
- javascript中bom和dom的区别
- javaScript----BOM和DOM的学习
- JavaScript里面的DOM和BOM
- 浅谈JavaScript的BOM和DOM
- javascript与ECMAScript、DOM、BOM的关系
- JavaScript基础-BOM&DOM
- 【JavaScript】BOM和DOM
- javascript实现 DOM BOM
- javascript-BOM和DOM
- javascript BOM与DOM
- JavaScript DOM BOM
- JavaScript的dom事件
- DOM Unit05- BOM对象：Navigatior、History以及事件处理函数
- Unity5.3.5的AssetBundle加载
- golang之cgo一---go与C基本类型转换
- Hibernate的简单使用
- iOS开发UI篇—CAlayer（自定义layer）
- 【原创】ThinkpadX240更换三键触摸板注意事项
- javaScript的函数，事件，BOM，DOM
- View 1
- Mysql-basic-1
- GitLab_本地GitLab服务器搭建
- (二)装饰者模式
- 通讯录的实现
- package day1501; import java.util.ArrayList; import java.util.LinkedList; import java.util.List; im
- 关于对碰奖的解析！
- 自定义View属性设置,项目引用和Library引用区别
