第七次网页前端培训笔记——JavaScript（3）

头秃小程

已于 2023-01-28 16:12:27 修改

阅读量575

点赞数

分类专栏：网页前端文章标签：前端 javascript 开发语言 html5

于 2022-02-11 20:43:27 首次发布

本文链接：https://blog.csdn.net/Maruko_428/article/details/122883583

版权

网页前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.内置对象

1.String

<script type="text/javascript">
			var str = "Hello Word";
			 console.log();
			 console.log(str);
			 console.log(str.substring(3)); //从下标3开始，截取到最后
			 console.log(str.substring(3,5)); //从下标3开始，到下标5结束
			 
			 console.log(str.toLowerCase());//转小写
			 console.log(str.toUpperCase()); //转大写
</script>

2.Math

/*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

3.Date

月：从0到11，所以要记得加1

/*date*/
//得到日期对象
var date=new Date()
console.log(date)
//getFullYear（） 年
console.log(date.getFullYear())
//getMonth（） 月
console.log(date.getMonth()+1)//0~11
//getDate（） 日
console.log(date.getDate())
//getHours（） 时
console.log(date.getHours())
//getMinutes（） 分
console.log(date.getMinutes())
//getSeconds（） 秒
console.log(date.getSeconds())

//具体时间
var mstr = date.getMinutes() < 10 ? "0"+date.getMinutes() : date.getMinutes()
var dateStr = date.getFullYear()+"-"+(date.getMonth() + 1) + "-" +date.getDate()+ " " +date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
console.log(dateStr);


//时间本地化
console.log(date.toLocaleString())

2.对象

对象是一种无序的数据集合，由若干个“键值对”构成。通过JavaScript我们可以创建自己的对象。

JavaScript 对象满足的这种“键值对”的格式我们称为JSON格式，即伟大的JSON对象

1.对象的创建

字面量形式创建对象

var 对象名 = {}; // 空对象
var 对象名 = {
    键:值,
    键:值,
    ...
};

通过new Object创建

var 对象名 = new Object();// 空对象

通过Object对象的create方法创建

var 对象名 = Object.create(null);// 空对象
var 对象名 = Object.create(对象);

2.对象的操作

获取对象的属性（不存在的属性，显示undefined）
设置对象的属性（存在的属性，修改属性值；不存在的属性，添加属性值）

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

序列化：

//将JS对象（JSON对象）转换成 JSON 字符串
var   变量名 = JSON.stringify（对象）；

反序列化：

//将JSON字符串转换成JS对象（JSON对象）
var   变量名 = JSON.parse（JSON字符串）；

4.this

谁调用函数，this指代谁。

直接调用函数，this代表的是全局的window对象
调用对象中的函数，this代表的是对象本身

/* 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();

3.JS事件

事件是JavaScript应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中 web 页面进行某

些类型的交互时，事件就发生了

通过使用JavaScript，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应

1.作用

验证用户输入的数据
增加页面的动感效果
增强用户的体验感

2.事件中几个名词

事件源：给什么元素 / 标签绑定事件
事件名：绑定什么事件
事件监听：浏览器窗口
执行函数：事件触发后需要执行什么代码

<!-- onload事件：当文档（HTML页面）加载完毕后执行 -->
<body onload="loadWindow()">
</body>
	
<script type="text/javascript">
	
		function loadWindow() {
			console.log("文档加载完毕...");
		}
		
</script>

3.事件类型

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 test() {
			console.log("按钮被点击了...")
		}
 
		function aa() {
			console.log("失去焦点了")
		}
 
		function bb() {
			console.log("聚焦了")
		}
		function changecity(){
			console.log("值改变了")
		}
	</script>
</html>

4.事件流和事件模型

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

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

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

5.事件处理程序（事件绑定方式）

1. HTML事件处理程序

<button type="button" onclick="alert('Hello')">按钮1</button>

2.DOM0级事件处理程序

先获取事件源，在给事件源绑定事件，不能同时给元素绑定相同事件多次

/* DOM0级事件处理程序 */
<button type="button" id="btn2">按钮2</button>
 
/* DOM0级事件 */
// 事件源：获取事件源
var btn2 = document.getElementById("btn2");
console.log(btn2);
// 事件类型：给事件源绑定指定事件     事件函数：事件触发后要执行的代码
btn2.onclick = function() {
	console.log("按钮2被点击了...");
}

3.DOM2级事件处理程序

/* DOM2级事件处理程序 */
<button type="button" id="btn3">按钮3</button>
 
/* DOM2级事件 */
// 事件源：获取事件源（按钮）
var btn3 = document.getElementById("btn3");
// 添加事件监听
btn3.addEventListener("click",function() {
	console.log("按钮3被点击了...");
},false);
		
btn3.addEventListener("mouseout",btnFunction,false);
function btnFunction() {
	console.log("鼠标离开按钮3了...");
}
		
btn3.addEventListener("click",function() {
	console.log("按钮3被点击了2...");
},false);

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

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

头秃小程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录