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

一.内置对象

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>

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值