第七次网页前端培训笔记（对象和事件）

最新推荐文章于 2022-11-10 23:29:35 发布

*Sunny**

最新推荐文章于 2022-11-10 23:29:35 发布

阅读量445

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_64416967/article/details/122865147

版权

一.内置对象

Arguments 只在函数内部定义，保存了函数的实参

Array 数组对象

Date 日期对象，用来创建和获取日期

Math 数学对象

String 字符串对象，提供对字符串的一系列操作

1.String

* charAt（idx）返回指定位置处的字符

* indexof（Chr）返回指定子字符串的位置，从左到右。找不到则返回-1

* substr （m,n）返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾

* substring（m,n）返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾

* toLowerCase（）将字符串中的字符全部转换成小写

* toUpperCase（）将字符串中的字符全部转换成大写

* length 属性，不是方法，返回字符串的长度

2.Math

Math.random（）随机数

Math.ceil（）向上取整，大于最大整数

Math.floor（）向小取整，小于最小整数 String

3.Date

getFullYear（）年

getMonth（）月

getDate（）日

getHours（）时

getMinutes（）分

getSeconds（）秒

toLocaleString（）时间本地化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内置对象</title>
	</head>
	<body>
		<script type="text/javascript">
			/*string*/
			var str = "hello world"
			console.log(str)
			console.log(str.substring(3))//从下标3开始，截取到最后
			console.log(str.substring(3, 5))//从下标3开始，到下标5结束
			console.log(str.toLocaleLowerCase()) //转小写
			console.log(str.toLocaleUpperCase()) //转大写

			/*math*/
			//Math.random（） 随机数
			console.log(Math.random())
			//Math.ceil（） 向上取整，大于最大整数
			console.log(Math.ceil(3.14))//4
			//Math.floor（）向小取整，小于最小整数 String
			console.log(Math.floor(3.14)) //3
			
			/*date*/
			//得到日期对象
			var date=new Date()
			console.log(date)
			//getFullYear（） 年
			console.log(date.getFullYear())
			//getMonth（） 月
			console.log(date.getMonth())
			//getDate（） 日
			console.log(date.getDate())
			//getHours（） 时
			console.log(date.getHours())
			//getMinutes（） 分
			console.log(date.getMinutes())
			//getSeconds（） 秒
			console.log(date.getSeconds())
			//时间本地化
			console.log(date.toLocaleString())
		</script>
	</body>
</html>

二.对象

对象是一种无序的数据集合，由若干个“键值对”构成。通过JavaScript我们可以创建自己的对象。JavaScript 对象满足的这种“键值对”的格式我们称为JSON格式，即伟大的JSON对象。

1.对象的创建

（1）字面量形式创建对象

var 对象名 = { }；// 空对象

var 对象名 = {

键：值，

...

}；

（2）通过new Object 创建

var 对象名 = new Object（）；// 空对象

（3）通过 Object 对象的 creat 方法创建

var 对象名 = Object.creat（null）；// 空对象

var 对象名 = Object.creat（对象）；

2.对象的操作

获取对象的属性（如果属性不存在，则获取undefined）

对象名.属性名；

设置对象的属性（如果属性存在，则修改属性值；如果属性不存在，则添加新的属性值）

对象名.属性名 = 值；

3.对象的序列化和反序列化

序列化：将JS对象（JSON对象）转换成 JSON 字符串

var 变量名 = JSON.stringify（对象）；

反序列化：将JSON字符串转换成JS对象（JSON对象）

var 变量名 = JSON.parse（JSON字符串）；

4.this

谁调用函数，this指代谁。

（1）直接调用函数，this代表的是全局的window对象

（2）调用对象中的函数，this代表的是对象本身

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>对象</title>
	</head>
	<body>
		<script type="text/javascript">
			/*对象的创建*/
			//字面量形式创建对象
			var obj1 = {} //空对象
			console.log(obj1)
			var obj2 = {
				name: "zhangsan",
				age: 18
			}
			console.log(obj2)
			//通过new Object 创建
			var obj3 = new Object() //空对象
			console.log(obj3)
			//通过 Object 对象的 creat 方法创建
			var obj4 = Object.create(null) //空对象
			console.log(obj4)
			var obj5 = Object.create(obj2)
			console.log(obj5)

			/*对象的操作*/
			//获取对象的属性
			//获取不存在的属性
			console.log(obj1.name) //undefined
			//获取存在的属性
			console.log(obj2.name) //zhangsan
			console.log(obj3.name) //undefined
			console.log(obj4.name) //undefined
			console.log(obj5.name) //zhangsan
			//设置对象的属性
			//存在的属性，修改属性值
			obj2.age = 20
			console.log(obj2)
			//不存在的属性，添加属性值
			obj2.upwd = "123"
			console.log(obj2)


			console.log("---------")
			/*对象的序列化和反序列化*/
			//序列化
			//JSON对象
			var obj = {
				name: "zhangsan",
				pwd: "123",
				age: 18
			}
			obj.name = "lisi"
			console.log(obj)
			//将JS对象（JSON对象）转换成 JSON 字符串
			var objtostr = JSON.stringify(obj)
			console.log(objtostr)
			console.log("---------")
			//JSON字符串
			var jsonstr = '{"name":"zhangsan","pwd":"123","age":18}';
			jsonstr.name = "lisi"
			console.log(jsonstr)
			//将JSON字符串转换成JS对象（JSON对象）
			var strtoobj = JSON.parse(jsonstr)
			console.log(strtoobj)

			console.log("---------")
			/* this */
			//1.直接调用函数，this代表的是全局的window对象
			function  test(){
				console.log("hello world");
				console.log(this);//window对象
			}
			test()
			//2.调用对象中的函数，this代表的是对象本身
			var o ={
				name:"zhangsan",
				age:18,
				uu:function(){
					console.log("你好");
					console.log(this);//当前o对象
				}
			}
			//调用对象中的方法
			o.uu();
		</script>

	</body>
</html>

三.JS事件

事件是JavaScript应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中 web 页面进行某些类型的交互时，事件就发生了。通过使用JavaScript，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

事件中几个名词：

事件源：给什么元素 / 标签绑定事件

事件名：绑定什么事件

事件监听：浏览器窗口

执行函数：事件触发后需要执行什么代码

1.事件类型

JavaScript 可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。

window 事件属性：针对 window 对象触发的事件（应用到<body>标签）

Form 事件：由HTML表单内的动作触发的事件（应用到几乎所有HTML元素，但最常用在form元素中）

Keyboard 事件：键盘事件

Mouse事件：由鼠标或类似用户动作触发的事件

Media 事件：由媒介触发的事件

几个常用的事件：

onload：当页面或图像加载完后立即触发

onblur：元素失去焦点

onfocus：元素获得焦点

onclick：鼠标点击某个对象

onchange：用户改变域的内容

onmouseover：鼠标移动到某个元素上

onmouseout：鼠标从某个元素上离开

onkeyup：某个键盘的键被松开

onkeydown：某个键盘的键被按下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
	</head>

	<body onload="loadWindow()">
		<!-- onclick事件 -->
		<button onclick="test()">按钮</button>
		<!-- 常用事件类型 -->
		<!-- onblur事件：失焦事件
		     onfocus事件：聚焦事件
		 -->
		<hr />
		姓名：<input type="text" onblur="aa()" onfocus="bb()" />
		<!-- 
		      onchange事件 ：元素的值发生改变时触发的事件
		 -->
		城市：<select onchange="changecity()">
			<option>北京</option>
			<option>上海</option>
			<option>天津</option>
		</select>
	</body>
	<script type="text/javascript">
		function loadWindow() {
			console.log("文档加载完毕...")
		}

		function test() {
			console.log("按钮被点击了...")
		}

		function aa() {
			console.log("失去焦点了")
		}

		function bb() {
			console.log("聚焦了")
		}
		function changecity(){
			console.log("值改变了")
		}
	</script>
</html>

2.事件流和事件模型（了解即可）

事件顺序有两种模型：事件捕获 和 事件冒泡

事件冒泡：IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）。

事件捕获：Netscape 提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。

3.事件处理程序（事件绑定方式（重要））

1.HTML事件处理程序

直接在HTML元素上绑定事件

2.DOM0级事件

（1）事件源：获取事件源（按钮）

（2）事件类型：给事件源绑定指定事件

（3）执行函数：事件触发后要执行的代码

先获取事件源，再给事件源绑定事件。但是不能同时给元素绑定相同事件多次。

3.DOM2级事件

事件源.addEventListener（"事件类型"，执行函数，true）

注：通过ID属性值获取节点对象

document.getElementById（" id 属性值"）;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
	</head>
	<body>
		<!-- html事件处理程序 -->
		<button type="button" onclick="alert('hello')">按钮1</button>
		<!-- DOM0级事件 -->
		<button type="button" ID="btn2">按钮2</button>
		<!-- DOM2级事件 -->
		<button type="button" ID="btn3">按钮3</button>
	</body>
	<script type="text/javascript">
		/*DOM0级事件*/
		// 1.事件源：获取事件源（按钮）
		var btn2 = document.getElementById("btn2")
		console.log(btn2)
		// 2.事件类型：给事件源绑定指定事件3.执行函数：事件触发后要执行的代码
		btn2.onclick = function() {
			console.log("按钮")
		}
	</script>
</html>

*Sunny**

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第七次网页前端培训笔记（对象和事件）

一.内置对象Arguments 只在函数内部定义，保存了函数的实参Array 数组对象Date 日期对象，用来创建和获取日期Math 数学对象String 字符串对象，提供对字符串的一系列操作1.String* charAt（idx）返回指定位置处的字符* indexof（Chr）返回指定子字符串的位置，从左到右。找不到则返回-1* substr （m,n）返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾* substring（m,n
复制链接

扫一扫