jquery事件处理有哪些--乐字节前端为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。 even

Jquery事件

ready加载事件

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行

$(document).ready(function(){})等价于$ (function(){})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ready事件</title>
		<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
		<script type="text/javascript">
			// 文档载入完便触发ready方法
			$(document).ready(function(){
				$("div").html("ready go...");
			})
			// $(document).ready(function(){}) == $(function(){}) 
			$(function(){
				$("p").click( function () {
					$(this).hide(); 
				});
			});
			$(function(){
				$("#btntest").bind("click",function(){
					$("div").html("剁吧...");
				});
			});
		</script>
	</head>
	<body>
		<h3>页面载入时触发ready()事件</h3>
		<div></div>
		<input id="btntest" type="button" value="剁手" />
		<p>aaa</p>
		<p>bbbb</p>
		<p>ccc</p>
		<p>dddd</p>
	</body>
</html>

bind()绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind( eventType [, eventData], handler(eventObject));

eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。

这类类型可以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick

mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter

mouseleave,change, select, submit, keydown, keypress, keyup, error

[, eventData]：传递的参数，格式：{名:值,名2:值2}

handler(eventObject)：该事件触发执行的函数

简单的bind()事件

<script type="text/javascript">
	$(function(){
		/*$("#test").bind("click",function(){
			alert("世界会向那些有目标和远见的人让路！！");
		});*/
		/*
		 * js的事件绑定
		 	ele.onclick=function(){};
		 * */
		// 等同于上面的放方法
		$("#test").click(function(){
			alert("世界会向那些有目标和远见的人让路！！");
		});
		/*
		 1.确定为哪些元素绑定事件
		 	获取元素
		 2.绑定什么事件（事件类型）
		 	第一个参数：事件的类型
		 3.相应事件触发的，执行的操作
		 	第二个参数：函数
		 * */
		$("#btntest").bind('click',function(){
			// $(this).attr('disabled',true);
			$(this).prop("disabled",true);
		})
	});
	</script>
<body>
	<h3>bind()方简单的绑定事件</h3>
	<div id="test" style="cursor:pointer">点击查看名言</div>
	<input id="btntest" type="button" value="点击就不可用了" />
</body>

绑定多个事件

<script type="text/javascript">
	$(function(){
		// 绑定click 和 mouseout事件
		/*$("h3").bind('click mouseout',function(){
			console.log("绑多个事件");
		});*/
		// 链式编程
		$("h3").bind('click',function(){
			alert("链式编程1");
		}).bind('mouseout',function(){
			$("#slowDiv").show("slow");//让slowDiv显示
		});
		/*$("#test").click(function(){
			console.log("点击鼠标了....");
		}).mouseout(function () {
			console.log("移出鼠标了...");
		});*/
		$("#test").bind({
			click:function(){
				alert("链式编程1");
			},
			mouseout:function(){
				$("#slowDiv").show("slow");
			}
		});
	});
</script>
<body>
	<h3>bind()方法绑多个事件</h3>
	<div id="test" style="cursor:pointer">点击查看名言</div>
	<div id="slowDiv"style=" width:200px; height:200px; display:none; ">
		人之所以能，是相信能
	</div>
</body>

Jquery Ajax

$.ajax

jquery调用ajax方法：

格式：$.ajax({});

参数：

type：请求方式GET/POST

url：请求地址url

async：是否异步，默认是true表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数

get请求

$.ajax({
	type:"get",
	url:"js/cuisine_area.json",
	async:true,
	success : function (msg) {
		var str = msg;
		console.log(str);
		$('div').append("<ul></ul>");
		for(var i=0; i<msg.prices.length;i++){
			$('ul').append("<li></li>");
				$('li').eq(i).text(msg.prices[i]);
		}
	},
	error : function (errMsg) {
		console.log(errMsg);
		$('div').html(errMsg.responseText);
	}
});

post请求

$.ajax({
	type:"post",
	data:"name=tom",
	url:"js/cuisine_area.json",
	contentType: "application/x-www-form-urlencoded",
	async:true,
	success : function (msg) {
		var str = msg;
		console.log(str);
		$('div').append("<ul></ul>");
		for(var i=0; i<msg.prices.length;i++){
			$('ul').append("<li></li>");
			$('li').eq(i).text(msg.prices[i]);
		}
	},
	error : function (errMsg) {
		console.log(errMsg);
		$('div').html(errMsg.responseText)
	}
});

$.get

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

// 1.请求json文件，忽略返回值
$.get('js/cuisine_area.json');

// 2.请求json文件，传递参数，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get('js/cuisine_area.json',function(data){
	console.log(data);
});

// 4.请求json文件,传递参数,拿到返回值	
$.get('js/cuisine_area.json',{name:"tom",age:100},function(data){
	console.log(data);
});

$.post

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

// 1.请求json文件，忽略返回值
$.post('../js/cuisine_area.json');

// 2.请求json文件，传递参数，忽略返回值
$.post('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.post('js/cuisine_area.json',function(data){
	console.log(data);
});

// 4.请求json文件,传递参数,拿到返回值	
$.post('js/cuisine_area.json',{name:"tom",age:100},function(data){
	console.log(data);
});

$.getJSON

表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
	console.log(data); // 要求返回的数据格式是JSON格式
});