网页前端第七次笔记JS（内置函数，对象，事件）

最新推荐文章于 2024-08-11 18:40:36 发布

liguohhhhh

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量301

点赞数

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

本文链接：https://blog.csdn.net/qq_63496723/article/details/122883586

版权

本文详细介绍了JavaScript内置函数、字符串操作，如charAt、indexOf等，Math库中的随机数生成，以及Date对象的日期处理。此外，深入讲解了对象的创建、操作、序列化与反序列化，以及this关键字在不同函数调用中的行为。还涵盖了HTML事件处理的不同方式，包括DOM0级和DOM2级事件的绑定。

摘要由CSDN通过智能技术生成

内置函数

String

charAt(idx) $\qquad\qquad$ 返回指定位置处的字符
indexof(Chr) $\qquad\qquad$ 返回指定子字符串的位置，从左到右。找不到返回-1
substr(m,n) $\qquad\qquad$ 返回给定字符串中从m位置开始，取n个字符，如果参数n略，则意味着取到字符串末尾。
substring(m,n) $\qquad\qquad$ 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。toLowerCase()将字符串中的字符全部转化成小写。
toUpperCase() $\qquad\qquad$ 将字符串中的字符全部转化成大写。
length $\qquad\qquad$ 属性，不是方法，返回字符串的长度。

Math

Math .random() 随机数
Math .ceil() $\qquad\qquad$ 向上取整，大于最大整数
Math.floor( ) $\qquad\qquad$ 向小取整，小于最小整数String

Date

获取日期
$\qquad\qquad$ getFullYear() 年
$\qquad\qquad$ getMonth() 月
$\qquad\qquad$ getDate() 日
$\qquad\qquad$ getHours() 时
$\qquad\qquad$ getMinutes() 分
$\qquad\qquad$ getSeconds() 秒
设置日期
$\qquad\qquad$ setYear()
$\qquad\qquad$ setMonth()
$\qquad\qquad$ setDate()
$\qquad\qquad$ setHours()
$\qquad\qquad$ setMinutes()
$\qquad\qquad$ setSeconds()
$\qquad\qquad$ toLoacaleString()转换成本地时间字符串

对象

一、对象的创建

字面量形式创建对象
$\qquad$ var 对象名= {
$\qquad$ $\qquad$ 键:值,
$\qquad$ $\qquad$ 键:值,
$\qquad$ $\qquad$ …
$\qquad$ $\qquad$ }
1. 通过new object创建
  $\qquad$ var 对象名 = new Object();
2. 通过object对象的create方法创建
  $\qquad$ var 对象名 = Object。create(对象);

二、对象的操作

获取对象的属性―(如果属性不存在，则获取undefined)
$\qquad$ 对象名.属性名;
设置对家中属性(如果属性存在，则修改属性值;如果属性不存在,则添加新的属性值)
$\qquad$ 对象.属性名=值;

三、对象的序列化和反序列化

序列化:将Js对象(JSON对象）转换成JSON字符串
$\qquad$ var变量名=JSON.stringify(对象);
反序列化:将JSON字符串转换成JS对象(JSON对象)
$\qquad$ var对象名=JSON parse(sON字符串);

四、 this

谁调用函数，this指代谁。

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

 <script type="text/javascript">
		  
		  //1.
		  var obj1 = {};
		  var obj2 = {
			  name :"zhang",
			  age :18
		  };
		  console.log(obj1);
		  console.log(obj2);
		  
		  //2.
		  var obj3 = new Object();
		  //3.
		  var obj4 =Object.create(null);
		  console.log(obj3);
		  console.log(obj4);
		  
		  
		  /*对象的操作*/
		  //获取对象的属性
		  //获取存在的属性
		  console.log(obj2.name);
		  
		  
		  //设置对象的属性
		  obj2.age = 20;
		  console.log(obj2);

		console.log( " ---------");
		/*对象的序列化和反序列化*/
		//序列化
		//JSON对象
		var obj = {
			name : " zhangsan",
			pwd : "123456",
			age: 18
		};
		obj.name = "lisi";
		console.log(obj);
		//将JSON对象转换成JSON字符串
		var objToStr = JSON.stringify(obj);
		console.log(objToStr);
		console.log( "======" );
		//JSON字符串
		var jsonStr = '{ "name": "zhangsan" , "pwd" : "123456" , "age":18} ';
		jsonStr.name="lisi"; 
		console.log(jsonStr);
		//将]SON字符串转换成JSON对象
		var strTo0bj = JSON.parse(jsonStr);
		console.log(strTo0bj);
		
		
		/*this */
		// 1．直接调用函数，this代表的全局的window对象
		function test( ) {
			console.log( "这是一个测试方法...");
			console.log(this); // window对象
		}
		test();
		// 2．调用对象中的函数， this代表的是对象本身
		var o = {
			name : "zhangsan",
			age: 18,
			sayHello:function(){
				console.log("你好呀~");
				console.log(this); //当前o对象
			}
		}
		//调用对象中的方法
		o.sayHello();

事件

事件中几个名词:
$\qquad$ 事件源:给什么元素/标签绑定事件事件名:绑定什么事件
$\qquad$ 事件监听:浏览器窗口
$\qquad$ 执行函数:事件触发后需要执行什么代码

常用的事件类型
$\qquad$ onload :当页面或图像加载完后立即触发
$\qquad$ onblur:元素失去焦点
$\qquad$ onfocus:元素获得焦点
$\qquad$ onclick:鼠标点击某个对象
$\qquad$ onchange:用户改变域的内容
$\qquad$ onmouseover:鼠标移动到某个元素上
$\qquad$ onmouseout:鼠标从某个元素上离开
$\qquad$ onkeyup:某个键盘的键被松开
$\qquad$ onkeydown:某个键盘的键被按下
事件流
$\qquad$ 事件冒泡:事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点(文档)
$\qquad$ 事件捕获:事件开始时由文档节点接受，然后逐级向下传播到具体的元素节点

事件处理程序(事件绑定方式)
$\qquad$ 1.HTML事件处理程序
$\qquad$ $\qquad$ 直接在html元素上绑定事件
$\qquad$ 2.DOMO级事件
$\qquad$ $\qquad$ 先获取时间源，再给事件源绑定事件
$\qquad$ $\qquad$ 不能同时给元素绑定相同时间多次
$\qquad$ 3.DOM2级事件
$\qquad$ $\qquad$ 事件源.addEventListener(“事件类型”，执行函数，true)

$\qquad$ 注:通过id属性值获取节点对象
$\qquad$ $\qquad$ document.getElementById( “id属性值”);

<body onload="loadWindow()">
		<!-- onload事件:当文档(HTML页面)加载完毕后执行
			 onclick事件:点击事件(单击事件)
			onmouseout:鼠标离开按钮
		-->
		<button onclick="test()" onmouseout="out()">按钮</button>
		<!--
		 常用事件类型
			onblur:失焦事件
			onfocus:聚焦事件
		-->
		姓名: <input type="text" onblur="aa( )" onfocus="bb()"/>
		<!--
		onchange事件:元索的值发生改变时触发的事件
		-->
		城市: <select onchange="changeCity()">
		<option>北京</option>
		<option>上海</option>
		<option>深圳</option>
		</select>

		<hr>
		<!--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">
		
	function loadWindow(){
		console.log("加载完毕...");
	}
	function test(){
		console.log("点击...");
	}
	function  aa(){
		console.log("失焦");
	}
	function  bb(){
		console.log("聚焦");
	}
	function changeCity(){
	console.log("值改变了...");
	}
	function out(){
	console.log("鼠标离开...");
	}
	
	/*DOM0级事件*/
	// 1．事件源:获取事件源(按钮)
	var btn2 = document.getElementById( "btn2" );
	console.log(btn2);
	// 2．事件类型:给事件源绑定指定事件  3.执行函数:事件触发后要执行的代码
	btn2.onclick = function(){
		console.log("按钮2被点击了... " );
	}
	btn2. onmouseout = function(){
		console.log("鼠标离开按钮2了..." );
	}
	btn2.onclick = function(){
		console.log("按钮2被点击了2... " );
	}

	/*DOM2级事件*/
	// 1．事件源:获取事件源(按钮)
	var btn3 = document.getElementById( "btn3" );
	//添加监听事件
	btn3.addEventListener( "click", function(){
		console.log("按钮3被点击了..." );
		},false);
	function btnFunction(){
	console.log("鼠标离开按钮3了... " );
	}
	btn3.addEventListener("mouseout", btnFunction,false);
	btn3.addEventListener("click", function(){
	console.log("按钮3被点击了2..." );
	}, false);


	</script>

liguohhhhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页前端第七次笔记JS（内置函数，对象，事件）

内置函数StringcharAt(idx)\qquad\qquad返回指定位置处的字符indexof(Chr)\qquad\qquad返回指定子字符串的位置，从左到右。找不到返回-1substr(m,n)\qquad\qquad返回给定字符串中从m位置开始，取n个字符，如果参数n略，则意味着取到字符串末尾。substring(m,n)\qquad\qquad返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。toLowerCase()将字符串中的字符全部转化成小写。
复制链接

扫一扫