Javascript知识点总结（三）

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

菜根花小宝贝

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

阅读量113

点赞数

分类专栏：网页学习文章标签： js javascript ajax

本文链接：https://blog.csdn.net/qq_45493915/article/details/107541600

版权

网页学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Javascript知识总结（三）

八、javascript的运动框架
九、javascript事件
十、Ajax
- （一）初识Ajax
- （二）创建和使用Ajax
十一、面向对象

八、javascript的运动框架

。。。（有时间再补吧）

九、javascript事件

（一）事件对象event和事件冒泡

什么是事件对象
用来获取事件的详细信息，例如：鼠标位置、键盘按键
ie下可以直接使用event，非ie需要传入事件对象参数
事件冒泡
事件流会从DOM节点最里面的事件往最外面执行
取消事件冒泡兼容写法
- 获取事件对象 var oEvent=ev||event;
- 取消事件冒泡 oEvent.cancelBubble=true
  实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#div1{
			width: 300px;
			height: 300px;
			background: pink;
		}
		#div2{
			width: 150px;
			height: 150px;
			background: black;
			color: #fff;
		}
	</style>
</head>
<body>
	<div id="div1" >
		<div id="div2"></div>
	</div>
	<script type="text/javascript">
		var oDiv1=document.getElementById('div1')
		var oDiv2=document.getElementById('div2')
		// //通过事件对象获取鼠标移动时的坐标位置
		// document.οnmοusemοve=function(ev){
		// 	//定义获取事件对象兼容
		// 	var oEvent=ev||event
		// 	oDiv2.innerHTML=oEvent.clientX+','+oEvent.clientY
		// }
		// //通过事件对象获取键盘按键的值
		// document.οnkeydοwn=function(ev){
		// 	//定义获取事件对象兼容
		// 	var oEvent=ev||event
		//	//键盘每个键对应的值可以百度搜索一下有一个表的  keyCode就是键的值
		// 	oDiv2.innerHTML=oEvent.keyCode
		// }
		oDiv1.onclick=function(){
			console.log("你点击了div1")
		}
		oDiv2.onclick=function(ev){
			console.log("你点击了div2")
			var oEvent=ev||event
			oEvent.cancelBubble=true
			console.log(oEvent)
		}
	</script>
</body>
</html>

（二）事件绑定、事件解绑及事件捕获

事件绑定 addEventListener(事件名称,函数, 捕获) 第三个参数为可选，默认为false，false即事件流为事件冒泡
事件解绑 removeEventListener(事件名称, 函数, 捕获) ，默认为false，false即事件流为事件冒泡
事件捕获和事件冒泡相反，如果开启了事件捕获就先执行捕获的事件再执行当前被点击事件。注意，事件绑定中传入匿名函数会导致无法进行事件解绑
实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">	
		#div1{
			width: 300px;
			height: 300px;
			background: pink;
		}
		#div2{
			width: 100px;
			height: 100px;
			background: black;
		}
	</style>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
	<script type="text/javascript">
		var oDiv1=document.getElementById('div1')
		var oDiv2=document.getElementById('div2')
		//当你需要解绑的时候，事件绑定里面的函数不能是匿名函数
		oDiv1.addEventListener('click',fun,true)
		oDiv2.addEventListener('click',function(){
			console.log('你点击了div2')
			oDiv1.removeEventListener('click',fun,true)
		},false)
		function fun(){
			console.log('你点击了div1')
		}
	</script>
</body>
</html>

（三）键盘事件及键盘码

keydown 监听键盘按键按下事件
keyup 用来监听键盘按键抬起事件，一般在使用组合键的时候可以用到
键盘码 keyCode
实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		//键盘事件
		// document.οnkeydοwn=function(event){
		// 	console.log(event)
		// 	if(event.keyCode==13){
		// 		alert('你按下了回车键')
		// 	}
		// }
		document.onkeyup=function(event){
			if(event.ctrlKey && event.keyCode==67){
				alert('你按下了crtl+c')
			}
		}
	</script>
</body>
</html>

（四）默认行为及阻止默认行为

在浏览器里鼠标右击事件oncontextmenu会默认的给我们显示一个弹窗，这些就是事件的默认行为
a标签跳转也是一个默认行为，我们可以通过在他的点击事件里面用return false来阻止默认行为
实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<a href="https://baidu.com" onClick="return false;">百度</a>
	<script type="text/javascript">
		document.oncontextmenu=function(){
			//用return  false来阻止默认行为
			return false;
		}
	</script>
</body>
</html>

十、Ajax

（一）初识Ajax

AJAX是什么？

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

使用AJAX

调用封装好的AJAX，传入读取的文件地址，成功需要做的事情和失败需要做的事情
ajax(url,fnSucceed,fnFailed)
npm install -g http-server 安装http-server 启动一个本地静态服务
浏览器为了安全性考虑，默认禁止跨域访问

（二）创建和使用Ajax

创建AJAX对象
- Ie5、ie6使用var oAjax=new ActiveXObject(“Microsoft.XMLHTTP”)创建
- 现代浏览器使用var oAjax=new XMLHttpRequest()创建(一般使用这种即可)
连接服务器
oAjax.open(‘GET’, url, true);三个参数分别是请求的类型、文件在服务器上的位置、异步(true)或者同步(false)
发送请求
oAjax.send();
接收数据
onreadystatechange事件
- readyState属性：请求状态
  0 （未初始化）还没有调用open()方法
  1 （载入）已调用send()方法，正在发送请求
  2 （载入完成）send()方法完成，已收到全部响应内容
  3 （解析）正在解析响应内容
  4 （完成）响应内容解析完成，可以在客户端调用了
- status属性：请求结果
  200: “OK”
  404: 未找到⻚页⾯面
- 请求成功返回内容responseText
  实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<button id="read">读取数据</button>
	<script type="text/javascript" src="ajax.js"></script>
	<script type="text/javascript">
		var oBtn=document.getElementById('read')
		oBtn.onclick=function(){
			ajax('xiaod.txt?t='+new Date().getTime(),function(res){
				alert(res)
			},function(){
				alert('读取失败')
			})
		}
	</script>
</body>
</html>

十一、面向对象

实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		//工厂函数
		//构造函数此时只是做了初始化工作
		function createMan(name1,age1){  //构造函数
			//添加原料
			//当使用new实例化的时候，其实系统帮我们做了这步
			//var this=new Object()
			//对我们的原料进行加工
			//定义属性
			this.name=name1
			this.age=age1			
			//出厂
			// return obj
		}
		//利用原型来添加共用的方法（行为)
		createMan.prototype.showName=function(){
			alert('我的名字'+this.name)
		}
		createMan.prototype.showAge=function(){
			alert('我的年龄'+this.age)
		}
		
		//使用new进行实例化构造函数
		//new帮我们做了两件事  1、创建原料var this=new Object()  2、return this
		var obj1=new createMan('Tim',29)
		var obj2=new createMan('xiaod',32)
		// obj1.showAge()
		// obj2.showAge()
		alert(obj1.showAge==obj2.showAge)
	</script>
</body>
</html>