第七次网页前端培训（JS）

最新推荐文章于 2022-02-11 23:59:03 发布

zjygzzk

最新推荐文章于 2022-02-11 23:59:03 发布

阅读量439

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zjygzzk/article/details/122887770

版权

一，内置对象

1.string

charAt(idx):返回指定位置处的字符

indexOf(chr):返回指定子字符串的位置，从左到右，找不到返回-1

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

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

toLowerCase():将字符串中字符全部转化为小写

toUpperCase():将字符串中字符全部转化为大写

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

<script type="text/javascript">
		var str = "Hello World";
		console.log(str);
		console.log(str.substring(3));
		console.log(str.substring(3,5));
		console.log(str.toLowerCase());
		console.log(str.toUpperCase());
		</script>

2.Math

Math.random():随机数

Math.cell:向上取整，大于最大整数

Math.floor:向下取整，小于最小整数String

console.log(Math.random());
		console.log(Math.ceil(1.2));
		console.log(Math.floor(1.2));

3.Date

获取日期

getFullYear（）:年

getMonth（）:月

getDate（）:日

getHour（）:时

getMinutes（）:分

getSeconds（）:秒

var date = new Date();
		console.log(date);
		console.log(date.getFullYear());
		console.log(date.getMonth() + 1);
		console.log(date.getDate());
		console.log(date.getHours());
		console.log(date.getMinutes());
		console.log(date.getSeconds());

设置日期

setYear（）:

setMonth（）:

setDate（）:

setHours（）:

setMinutes（）:

setSeconds():

toloacaleString():转化成本地时间字符串

二，对象

1.对象创建

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

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

var 对象名 = {

键：值，

键：值‘

……

}；

var obj1 = {};
		console.log(obj1);
		var obj2 = {
			name:"zhangsan",
			age:18
		};

（2）通过new Object创建

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

var obj3 = new Object();
		console.log(obj3);

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

var 对象名 = Object.create(null）；//空对象

var 对象名 = Object.create(对象）；

var obj4 = Object.create(null);
		console.log(obj4);
		var obj5 = Object.create(obj2);
		console.log(obj5);

2.对象的操作

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

对象名.属性名；

console.log(obj1.name);
		console.log(obj2.name);
		console.log(obj3.name);
		console.log(obj4.name);

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

对象名.属性名 = 值；

obj2.age = 20;
		console.log(obj2);
		obj2.upwd = "123456";
		console.log(obj2)

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

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

var 变量名 = JSON.是他日你GIF有（对象）；

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

var 对象名 = JSON.parse(JSON字符串）：

var obj = {
			name:"zhangsan",
			pwd:"123456",
			age:18
		};
		obj.name = "lisi";
		console.log(obj);
		var objToStr = JSON.stringify(obj);
		console.log(objToStr);
		console.log("==========");
		var jsonStr = '{"name":"zhangsan","pwd":"123456","age":18}';
		jsonStr.name="lisi";
		console.log(jsonStr);
		var strToObj = JSON.parse(jsonStr);
		console.log(strToObj);

4.this

谁调用函数，this指代谁

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

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

function test() {
			console.log("这是一个测试方法");
			console.log(this);
		}
		test();
		var O = {
			name:"zangsan",
			age:18,
			sayHello:function() {
				console.log("你好呀");
				console.log(this);
			}
		}
		O.sayHello();

三，事件

1.事件中几个名词

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

事件名：绑定什么事件

事件监听：浏览器窗口

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

onload事件：当文档（HTML页面）加载完毕后执行

onclick事件：点击事件（单击事件）

</head>
	<body onload="loadWindow()">
		<button onclick="test()">按钮</button>
		<script type="text/javascript">
		function loadWindow() {
			console.log("文档加载完毕");
		}
		function test() {
			console.log("按钮被点击了");
		}
		</script>
	</body>

2.常用事件类型

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

onblur:元素失去焦点

onfocus:元素获得焦点

onclick:鼠标点击某个对象

onchange:用户改变域的内容

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

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

onkeyup:某个键盘的键被松开

onkeydown:某个键盘的键被按下

<body onload="loadWindow()">
		<button onclick="test()" onmouseout="outButton()">按钮</button>
		姓名：<input type="text" onblur="aa()" onfocus="bb()" />
		城市：<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("值改变了");
		}
		function outButton() {
			console.log("鼠标离开按钮了");
		}
		</script>

3.事件流

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

事件捕获：事件开始时由文档节点接受，然后逐级向下传播到具体的元素节点

4.事件处理程序

（1）HTML事件处理程序

直接在HTML元素上绑定事件

（2）DOM0级事件

（3）DOM2级事件

	<hr>
		<button type="button" onclick="alert('Hello')">按钮2</button>
		<button type="button" id="btn2">按钮2</button>
var btn2 = document.getElementById("btn2");
		console.log(btn2);
		btn2.onclick = function() {
			console.log("按钮2被点击了");
		}

zjygzzk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第七次网页前端培训（JS）

一，内置对象1.stringcharAt(idx):返回指定位置处的字符indexOf(chr):返回指定子字符串的位置，从左到右，找不到返回-1substr(m,n):返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味取到字符串末尾substring(m,n):返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾toLowerCase():将字符串中字符全部转化为小写toUpperCase():将字符串中字符全部转化为大写leng
复制链接

扫一扫