js及jQuery总结（九）

10.01_ jQuery中的页面加载事件

页面加载事件
- $(document).ready(function(){})

页面加载事件案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
	</body>
		
	<script>
		//事件模块中的一个最重要的函数,效率相对较高
		/*$(document).ready(function(){
			
		})
		
		//可以简写
		//$()不带document的时候其实默认就是document
		$().ready(function(){
			
		})
		*/
		
		//继续简写
		$(function(){
			
		})
		/*
		 * window.onload() 和 $(document).ready()
		 * $(document).ready()代替了传统的window.onload()
		 * 
		 * 1.在一个页面中可以无限次的使用$(document).ready（），各个方法之间互不影响，
		 *  会按照在代码中出现的顺序执行，window.onload()在一个页面中只能使用一次
		 * 
		 * 2.当一个文档完全下载到浏览器的时候【包括关联的文件，图片，】，就会响应window.onload()，
		 *   $(document).ready当只有文本下载到浏览器，不包括图片，文件等，就会直接响应
		 * 	 问题：当耗时的操作【文件，图片等】没有被加载出来的时候，$(document).ready就会被执行，
		 *        如果在后面的代码中要使用图片，则获取不到
		 * 	解决：window.load()不可以加载
		 * 
		 */
		$(window).load(function(){
			
		})
	</script>
</html>

10.02_ jQuery事件绑定

绑定事件的方式
bind()
- type；事件的类型
- data:可选参数，作为event.data属性值进行传递，一般不用
- fn:当事件发生的时候的响应函数
直接使用事件名称绑定
- 格式：标签对象.事件名称（fn）
delegate()
- 代理.delegate(委托,事件类型，响应函数)
- 说明：
- 代理：父元素的对象
- 委托：子元素的标签名称
on()
- 将bind和delegate做了统一，升级版
- on(事件类型，子元素名称，响应函数)
live()不用了
总结：
- 1.选择器匹配到的元素比较多的时候，不要bind（）
- 2.用id选择器的时候，用bind（）
- 3.需要动态添加元素的时候，选用delegate或者on
- 4.on的性能最高，尽量使用on

绑定jQuery中的事件案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 600px;
				background-color: red;
			}
		</style>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<button id="button">添加</button>
		<div>
			<p>aaa</p>
			<p>bbb</p>
			<p>ccc</p>
			<p>ddd</p>
		</div>
	</body>
		
	<script>
		//需求：当点击按钮的时候，在div中添加一个新的p标签
		//绑定事件的方式：bind(),  delegate(),   on()  ,live()【不用了】
		$(function(){
			//1.bind()
			/*
			 * bind（type,[data],fn）
			 * type；事件的类型
			 * data:可选参数，作为event.data属性值进行传递，一般不用
			 * fn:当事件发生的时候的响应函数
			 */
			/*
				$("#button").bind("click",function(){
					$("div").append("<p>这是一个新的p标签</p>");
				})
				
				$("div p").bind("click",function(){
					$("div").append("<p>这是一个新的p标签</p>");
				})
			*/
			
			/*
			 * 问题：
			 * 	1.举例：div中有50个p标签，像上面的绑定方式，则会隐式的绑定50次事件，对于大量元素而言，影响性能
			 *  2.对于尚未存在的元素，无法绑定，则当事件点击的时候，没有任何响应
			 */
			
			//2.直接使用事件名称绑定
			//格式：标签对象.事件名称（fn）
			/*$("button").click(function(){
				$("div").append("<p>这是一个新的p标签</p>");
			})*/
			
			//3.delegate()：代理方式
			/*
			 * 可以解决bind中出现的两个问题
			 * 
			 * 事件委托：事件代理，利用事件冒泡的原理给父元素添加响应事件，从而可以处理子元素的事件
			 * 
			 * 优点：
			 * 	a.减少Dom操作，提高交互效率
			 * 	b.新添加的子元素也可以响应事件
			 * 
			 * 代理.delegate(委托,事件类型，响应函数)
			 * 说明：
			 * 	代理：父元素的对象
			 * 	委托：子元素的标签名称
			 * 
			 * 工作原理：不是直接给p标签绑定事件，而是给父标签div绑定了事件，
			 * 	当点击div中任意的p标签时，都会响应事件【冒泡过程】
			 * 	新添加的p标签也会有同样的响应事件，而整个过程中，事件只被绑定了一次
			 * 
			 * 问题：绑定是容易了，如果DOM节点树很大，这样需要一层一层冒泡出来，影响性能
			 */
			/*$("div").delegate("p","click",function(){
				$("div").append("<p>这是一个新的p标签</p>");
			})*/
			
			//4.on()
			//将bind和delegate做了统一，升级版
			/*on(事件类型，子元素名称，响应函数)
			 */
			$("div").on("click","p",function(){
				$("div").append("<p>这是一个新的p标签</p>");
			})	
		})
		
		/*
		 * 总结：
		 * 1.选择器匹配到的元素比较多的时候，不要bind（）
		 * 2.用id选择器的时候，用bind（）
		 * 3.需要动态添加元素的时候，选用delegate或者on
		 * 4.on的性能最高，尽量使用on
		 */
	</script>
</html>

10.03_JQuery事件解除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<button id="btn"></button>
		<div>
			<p>aaa</p>
			<p>bbb</p>
			<p>ccc</p>
			<p>ddd</p>
		</div>
	</body>
		
	<script>
		$(function(){
			//1.bind()
			//unbind()
			$("#btn").bind("click",function(){
				//点击之后的触发
			})
			$("#btn").unbind("click");
			
			//2.事件
			$("#btn").click(function(){
				
			})
			
			//3.delegate()
			//undelegate()
			$("div").delegate("p","click",function(){
				
			})
			$("div").undelegate("p","click");
			
			//4.on()
			//off()
			$("div").on("click","p",function(){
				
			})
			$("div").off("click","p");
		})
	</script>
</html>

10.04_JQuery绑定一次性事件

只执行一次的事件
- 作用：当触发事件的时候，只会触发一次，当第二次触发的时候将不会再响应
- $(XX).one(事件，func)

一次性事件案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<!--动画开始执行的时候，只设置一个属性-->
		<button id="btn">开始动画</button>
	</body>
		
	<script>
		$(document).ready(function(){
			
			/*$("#btn").bind("click",function(){
				console.log("bind点击了");
			})*/
			
			/*
			 * one(type,[data],fn)
			 * 作用：当按钮进行触发事件的时候，只会触发一次，当第二次点击的时候将不会再响应
			 */
			$("#btn").one("click",function(){
				console.log("点击了");
			})
		})
	</script>
</html>

10.05_JQuery鼠标悬浮事件

鼠标悬浮事件
- css中使用伪类选择器实现
  - XX:hover{}
- JQuery中使用hover()实现
  - $(XX).hover(func_over，func_out)
  - 第一个函数光标移过来执行
  - 第二个函数光标移开时执行

鼠标悬浮事件案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		/*
		 * css的伪类选择器
		 * hover(over,out)：模仿鼠标悬浮事件，当鼠标移动到指定标签上的时候，则触发over；
		 *     当鼠标移出指定标签的时候，则触发out
		 * 说明：over和out指的函数
		 */
		var $div = $("div");
		$div.hover(function(){
			console.log("光标来啦");
			$div.css({
				width:'200px',
				height:'100px'
			})
			
		},function(){
			console.log("光标走啦");
			$div.css({
				width:'100px',
				height:'100px'
			})
		})
	</script>
</html>

10.06_JQuery事件对象

事件对象event
- event.type 事件类型
- event.target 事件触发的元素
- event.pageX,event.pageY 事件产生地点的X，Y坐标

事件对象案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<!--动画开始执行的时候，只设置一个属性-->
		<button id="btn">开始</button>
	</body>
		
	<script>
		$(function(){	// 简略写法
			//event对象
			$("#btn").bind("click",function(event){
				//获取event对象
				console.log(event);
				
				//获取event对象的类型
				console.log(event.type);
				
				//获取event事件触发的元素
				console.log(event.target);
				
				//获取光标相对于页面的x坐标和y坐标
				//注意：如果页面有滚动条的时候，则需要考虑到滚动条的宽高
				console.log(event.pageX,event.pageY);
			})
		})
	</script>
</html>

10.07_AJAX概述

概念
- 异步的javascript和XML
- 用于网络请求
- 一个用于动态创建网页的技术，与服务器进行异步交互
- 和服务端进行异步交互，浏览器的局部刷新
  - 同步交互：客户端发出一个请求，需要等待服务端响应之后，才能发出第二个请求
  - 异步交互：客户端发出一个请求，无需等待服务端响应，就可以直接发出第二次请求
工作原理
- 1.客户端(Broswer)
  - 创建网络请求对象
  - 对象发起网络请求
- 2.服务端(Server)
  - 监听客户端发来的请求
  - 创建一个响应并返回给客户端
- 3.客户端(Broswer)
  - 接受响应
  - 处理数据【解析数据：xml，json】
AJAX使用的场景
- a.在百度中进行关键字搜索，会提示相关的所有内容
- b.在账号注册的时候，其中某一项会直接提示错误
AJAX优缺点
- 优点：
  - a.异步交互，提高工作效率
  - b.无需刷新整个网页
- 缺点：
  - a.并不适用于所有的场景，在有些地方还是需要用到同步交互
  - b.虽然提高了用户体验，但是如果向服务器发送的请求次数过多，增大了服务器的压力
  - c.使用js完成的，所以需要处理浏览器兼容问题

10.08_AJAX使用

四步操作：
- 创建请求对象
- 使用请求对象打开与服务器之间的连接
- 发送请求
- 注册监听，监听服务器响应
主要对象和方法：
- 核心对象类： XMLHTTPRequest
- open(请求方式，url,是否异步): 进行请求
- send(请求体): 发送数据
- onreadstatechange：指定监听的函数，当被监听的函数发生改变的时候被调用
- readyState: 当前对象的状态，当数字4的时候表示服务器响应结束
- status: 服务器的状态码，404文件找不到 200表示请求成功
- reponseText；获取服务器的响应体

10.09_表单请求（get）

form表单
- 提交方式：method=“get”
- 提交地址：action=“http://192.168.31.35/formGet.php”

get表单请求代码

<!--请求表单代码-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			什么是表单：
				作用：向服务器提交数据，比如用户信息
			<form></form>
			action:将用户信息提交到哪里【服务器的地址】
			method:提交方式【get或者post】
			
			URL:统一资源定位符【执行一个服务器中的有效地址】
			http://http//127.0.0.1:8020/formGet.php?username=addsad&age=sss&password=qqq
			协议：//主机：端口号/资源路径？键1=值1&键2=值2....
			http://www.baidu.com
			
			get和post之间的区别：
			get请求：将字段名称和数据使用=连接，而且多个数据之间使用&连接，整个数据会暴露在url中
					缺点：不安全，不适合传输比较大的数据
					优点:快捷，工作效率高
			post请求：将数据封装起来，并没有暴露在url中
					优点：相对安全，适合传输较大的数据
					缺点：效率较低
		-->
		<form method="get" action="http://192.168.31.35/formGet.php">
			<input type="text" name="username" /><br />
			<input type="text" name="age" /><br />
			<input type="password" name="password" /><br />
			<input type="submit" value="提交" />
			
		</form>
	</body>
</html>

<!--服务端代码-->
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
//就是系统或应用程序出错时弹出的 错误报告，编程人员根据这个报告的内容可以判断是哪一段程序代码出问题了。
$username = $_GET['username'];
$age = $_GET['age'];
$password = $_GET["password"];

/*获取?后面对应健的值*/

echo "你的名字：{$username}，年龄：{$age}，密码：{$password}";?>

10.10_表单请求（post）

form表单
- 提交方式：method=“post”
- 提交地址：action=“http://192.168.31.35/formGet.php”

post表单请求代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form method="post" action="http://192.168.31.35/formPost.php">
			<input type="text" name="username" /><br />
			<input type="text" name="age" /><br />
			<input type="password" name="password" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

post请求服务端代码

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
//$_REQUEST
$username = $_POST['username'];
$age = $_POST['age'];
$password = $_POST["password"];

echo "你的名字：{$username}，年龄：{$age}，密码：{$password}";
?>

10.11_AJAX get请求

AJAX get请求
- 1、创建请求对象
  - 处理浏览器的兼容问题
  - 异常捕获：
    - Python中try-except
    - js中try-catch
- 2、与服务器建立连接
  - open(请求方式，请求的地址,是否异步
  - 使用ajax进行get请求的时候，需要将请求的数据拼接到url中
- 3、发起连接请求
- 4、建立监听，监听服务器的响应
  - 使用ajax进行get请求的时候，需要将请求的数据拼接到url中
  - readyState：当前对象的状态

AJAX get请求案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="get">获取数据</button>
	</body>
	<script>
		window.onload = function(){
			//获取按钮对象
			var btn = document.getElementById("get");
			
			//添加响应事件
			btn.onclick = function(){
				//1.创建请求对象
				var xhr = null;
				
				//处理浏览器的兼容问题
				//异常捕获：Python中try-except js中try-catch
				try{
					xhr = new XMLHttpRequest();
				}catch(e){
					//IE5   IR6
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				
				//2.与服务器建立连接
				//open(请求方式，请求的地址,是否异步)
				//使用ajax进行get请求的时候，需要将请求的数据拼接到url中
				xhr.open("get","http://10.0.127.108/ajaxGet.php?username=" + encodeURI("dushine") + "&age=20&password=123456",true);
				
				//3.发起连接请求
				xhr.send();
				
				//4.建立监听，监听服务器的响应
				/* onreadystatechange:监听对象的状态改变
				 * readyState：当前对象的状态
				 * 	1 2 3 4----》服务器响应结束
				 * status：状态码
				 * 	404：资源找不到
				 * 	200：成功
				 *  400：加载错误
				 * 	500：数据库崩了
				 */
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						alert("数据请求成功："  + xhr.responseText);
					}
				}
			}
		}
	</script>
</html>

10.12_AJAX post请求

AJAX post请求
- 1、创建请求对象
  - 处理浏览器的兼容问题
  - 异常捕获：
    - Python中try-except
    - js中try-catch
- 2、与服务器建立连接
  - open(请求方式，请求的地址,是否异步
  - 需要设置编码格式，固定写法【请求头】
    - xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”);
- 3、发起连接请求【请求体】
  - var str = “username=” + encodeURI(“dushine”) + “&age=20&password=abc123”;
- 4、建立监听，监听服务器的响应
  - 使用ajax进行get请求的时候，需要将请求的数据拼接到url中
  - readyState：当前对象的状态
  - post相比get是耗时的，效率低，会经历传值时间，readyState的值经历1到4变化

AJAX post请求案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="post">提交数据</button>
	</body>
	<script>
		window.onload = function(){
			//获取按钮对象
			var btn = document.getElementById("post");
			btn.onclick = function(){
				//1.创建请求对象
				var xhr = null;
				
				//处理浏览器的兼容问题
				//异常捕获：Python中try-except js中try-catch
				try{
					xhr = new XMLHttpRequest();
				}catch(e){
					//IE5   IR6
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				
				//2.与服务器之间连接
				//注意：区别于get的地方
				xhr.open("post","http://192.168.31.35/ajaxPost.php",true);
				
				//需要设置编码格式，固定写法【请求头】
				xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
				
				//3.向服务器发送请求【请求体】
				var str = "username=" + encodeURI("dushine") + "&age=20&password=abc123";
				xhr.send(str);
				
				//4.建立监听，监听服务器的响应
				/*onreadystatechange:监听对象的状态改变
				 * readyState：当前对象的状态
				 * 	1 2 3 4----》服务器响应结束
				 * status：状态码
				 * 	404：资源找不到
				 * 	200：成功
				 *  400：加载错误
				 * 	500：数据库崩了
				 */
				xhr.onreadystatechange = function(){
					//post和get之间的区别：post是耗时的，效率低，会经历一段长传的时候，readyState的值从1到4进行变化
					if(xhr.readyState == 4 && xhr.status == 200){
						alert("数据请求成功："  + xhr.responseText);
					}
				}
			}
		}
	</script>
</html>

如有错误，请在下面评论。好及时更正，谢谢！

js及jQuery总结（九）

10.01_ jQuery中的页面加载事件

页面加载事件案例

10.02_ jQuery事件绑定

绑定jQuery中的事件案例

10.03_JQuery事件解除

10.04_JQuery绑定一次性事件

一次性事件案例

10.05_JQuery鼠标悬浮事件

鼠标悬浮事件案例

10.06_JQuery事件对象

事件对象案例

10.07_AJAX概述

10.08_AJAX使用

10.09_表单请求（get）

get表单请求代码

10.10_表单请求（post）

post表单请求代码

post请求服务端代码

10.11_AJAX get请求

AJAX get请求案例

10.12_AJAX post请求

AJAX post请求案例

猜你喜欢