爱站程序员基地Jquery事件
ready加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
(document).ready(function())等价于(document).ready(function(){})等价于(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.οnclick=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格式});
