javaScript的函数，事件，BOM，DOM

最新推荐文章于 2022-06-21 22:51:00 发布
最新推荐文章于 2022-06-21 22:51:00 发布
阅读量2k 收藏 2
点赞数
分类专栏： html+css+js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/strong_yu/article/details/51885326
版权

一.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 οnclick="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 οnclick="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 οnclick="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 οnclick="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.οnclick=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" οnclick="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.οnfοcus=function(){
             	var s=document.getElementById("s");
             	s.innerHTML="输入8位";
             };
             t.οnblur=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.οnmοuseοver=function(){
		this.style.backgroundColor="green";
	};
	div.οnmοuseοut=function(){
		this.style.backgroundColor="red";
	};
	</script>
</html>

(4)onload

onload表示加载完一个页面或图像是，执行指向的函数

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			window.οnlοad=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.οnlοad=function(){
				var txt = document.getElementById("txt");
				txt.οnchange=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" οnclick="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" οnclick="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" οnclick="f1()">
			<div id="div2" οnclick="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.οnclick=function(){
			alert(btn);
		}
	</script>
</html>

还有很多，用时查看资料

strong_yu
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BOM事件基础知识
ybs0211的博客
09-09 1006
文章目录1. BOM 概述1.1 什么是 BOM1.2 BOM 的构成 1. BOM 概述 1.1 什么是 BOM BOM ( Browser Object Model ) 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netscape 浏览器标准的一部分。 1.2 BO
BOM模型---事件（事件属性）
weixin_45921263的博客
04-23 278
文章目录前言一、鼠标的单击，悬停，移动事件1.内容2.代码如下：（部分示例）二、使用步骤1.引入库2.读入数据总结 前言 在BOM模型中事件属性比较多，而且重要，所以这篇文章专门对于事件属性做一梳理。 一、鼠标的单击，悬停，移动事件 1.内容 事件属性 描述 onclick 鼠标的单击事件 onmouseover 鼠标移动到某元素之上 onmouseout 鼠标从某元素移开 onmousemove 鼠标被移动 onmouseup 鼠标按键被松开 onmousedow.
基础知识 | BOM 事件
A123ppleQueen的博客
03-03 817
BOM简介 Browser Object Model 浏览器对象模型 专门操作浏览器窗口或软件的一套对象和方法的集合 获取浏览器软件的信息或操作当前窗口时，都可以用Bom Bom没有标准，所以有兼容性问题 window对象 代替了ES标准中的global对象，充当全局作用域对象 eg:var a=10; a实际保存在window中 保存所有我们可以直接使用的原生的对象和函数 原生：浏览器中已经自带的，我们不需要创建或下载，就可以直接使..............
js的bom事件
qq_43614064的博客
09-08 603
一.bom的概述 1.1什么是bom 一般的，一个网页的前进，后退，刷新，窗口大小的调整都跟bom有关。Bom由一系列对象组成，且每个对象都提供了很多方法与属性。Bom缺乏标准，兼容性差。 DoM与BoM的对比 1.2 Bom的构成 Bom比Dom更大，它包含了Dom ...
案例：倒计时 js小案例
初辰的博客
12-09 1443
案例：倒计时 倒计时展示案例 动图展示： 代码展示： <p>案例：倒计时</p> <div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div> <script> // 1. 获取元素（时分秒盒子）
BOM事件
weixin_42396732的博客
05-20 161
BOM事件 事件就是用户或者浏览器自身执行的某种动作，事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘的某些按键。事件还可能是Web浏览器中发生的事情，比如说某个web页面加载完成后，或者是用户滚动窗口或改变大小。 通过使用javascript，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应 javascript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件 常见BOM事件 load：当页面或图像加载完成后立即完成触发 blur：元素失去焦点 focus：元
实现JavaScript的组成—-BOM和DOM详解
01-19
BOM的core，表示浏览器的一个实例，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这意味着在网页中定义的任何一个对象，变量和函数，都已window作为其Global对象，因此有权访问...
JavaScript函数、闭包、原型、面向对象学习笔记
10-18
给大家分享了一篇关于JavaScript函数、闭包、原型、面向对象的知识点学习笔记内容，有兴趣的朋友参考下。
js DOM的事件常见操作实例详解
12-13
本文实例讲述了js DOM的事件常见操作。分享给大家供大家参考，具体如下： 一、JavaScript的组成 JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for...
javascript DOM 编程艺术
02-25
从颇具深度的JavaScript语言基础到作用域(链)，从引用类型到面向对象编程，从极其灵活的匿名函数到闭包的内部机制，从浏览器对象模型(BOM)、文档对象模型(DOM)到基于事件的Web脚本设计，从XML(E4X)到Ajax及JSON，从...
javascript bom组成.doc
06-19
了解BOM对象的组成及子对象的使用 会使用定时函数和Date对象制作时钟特效 了解DOM的分类和节点间的关系 熟练使用JavaScript操作DOM节点
javascript的BOM操作及基本事件
qq_39804990的博客
05-30 114
js组成：ECMAScript、DOM、BOM DOM（Document Object Model）即文档对象模型， 在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为 DOM，提供了操作文档的接口。对标签进行增删改查 DOM树：加载 HTML 页面时，web 浏览器生成一个树型结构，用来表示页面内部结构，称之为DOM树，DOM将这种树型结构理解为由节点组成。节点即标签/元素 3.1 获取节点 3.1.1 获取标签 通过id获取： 静态获取：在获取时没有，以
DOM
LIJIWEI0611的博客
09-11 239
1.1. 常用的键盘事件 1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) ​ //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl sh...
BOM 属性、方法、事件应用
qq_60012576的博客
06-21 767
bom 属性 方法
javaScript BOM事件的应用
只有想不到没有做不到，程序的力量。。。
11-29 1100
JavaScript（BOM bowser object model） /*1、document.write('abc')放到一个事件中来用，先会把页面中所有的清空，然后再写。 2、window.open('url'),用来打开另一个页面，可以设置窗口弹出方式'_blank'重新打一个,'_self'覆盖原来的窗口。这个函数返回新弹出的窗口。 3、window.close();不能cl
js（BOM，DOM，事件）
html标签-meta
12-04 1044
DOM DOM节点： 父子：parentNode,childNodes,first-childNode,last-childNode； 兄弟：nextSibling,previousSibling； DOM节点操作：（增删改查） 增：appendChild(); 删：removeChild(); 改：replaceChild(newNode,oldNode); 查：document...
JS事件和BOM和DOM
zmmmm28qi的博客
05-28 264
一丶事件 事件(Event)是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器 中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、 鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情， 比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。 通过使用 JavaScript ，你可以...
JavaScript中的BOM操作的常见事件
qq_37493515的博客
03-28 680
BOM操作的常见事件 1、点击事件clcik onclcik绑定点击 标签ID.onclick = function(){ 程序； } 示例1、 d1.onclick = function(){ console.log('我是div,有人点我'); } 示例2、 function fun(){ co...
JS BOM、DOM、事件
ladream的博客
08-08 239
1、BOM 2、DOM 3、事件
需要有数组 函数 对象和dom bom
最新发布
06-06
好的，我来给您补充一下示例代码，让它包含数组、函数、对象、DOM 和 BOM 的应用。 JavaScript 代码示例： ```javascript // 数组示例 const myArray = [1, 2, 3, 4, 5]; console.log(myArray.length); // 输出...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值