JQuery
次要内容
Jquery对象
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，应用 jQuery 将极大的进步编写 javascript 代码的效率，帮忙开发者节俭了大量的工作，让写进去的代码更加优雅，更加强壮，“锦上添花”。同时网络上丰盛的 jQuery 插件也让咱们的工作变成了"有了 jQuery，所有 so easy。" --因为咱们曾经站在伟人的肩膀上了。
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 公布，吸引了来自世界各地的泛滥 JavaScript 高手退出，由 Dave Methvin 带领团队进行开发。现在，jQuery曾经成为最风行的 javascript 框架，在世界前 10000 个拜访最多的网站中，有超过 55%在应用 jQuery。
Jquery的下载与装置
下载
http://jquery.com/ 下载
版本
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不反对 ie6 7 8,如果须要下载 1.X)
（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习办法)
（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，缩小传输)
目前应用版本：jquery-3.4.1.js
长处
（1）提供了弱小的性能函数
（2）解决浏览器兼容性问题
（3）实现丰盛的 UI 和插件
（4）纠正错误的脚本常识
…
装置
在页面引入即可
<script src="js/jquery-3.4.1.js" type="text/javascript" ></script> Jquery外围
$ 符号在 jQuery 中代表对 jQuery 对象的援用, "jQuery"是外围对象。通过该对象能够获取jQuery对象，调用jQuery提供的办法等。只有jQuery对象能力调用jQuery提供的办法。
$ <==> jQuery Dom对象 与 Jquery包装集对象
明确 Dom 对象和 jQuery 包装集的概念, 将极大的放慢咱们的学习速度。原始的Dom对象只有DOM接口提供的办法和属性，通过js代码获取的对象都是dom对象；而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象能力应用jQuery提供的办法。
Dom对象
javascript 中获取 Dom 对象，Dom 对象只有无限的属性和办法：
var div = document.getElementById("testDiv");var divs = document.getElementsByTagName("div"); Jquery包装集对象
能够说是 Dom 对象的裁减.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比方获取蕴含一个元素的 jQuery 包装集：
var jQueryObject = $("#testDiv"); Dom对象 转 Jquery对象
Dom对象转为jQuery对象，只须要利用$()办法进行包装即可
var domDiv = document.getElementById('mydiv'); // 获取Dom对象mydiv = $(domDiv); Jquery对象 转 Dom对象
jQuery对象转Dom对象，只须要取数组中的元素即可
// 第一种形式 获取jQuery对象var jqueryDiv = jQuery('#mydiv');// 第二种形式 获取jQuery对象jqueryDiv = $('#mydiv');var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom 通过遍历jQuery对象数组失去的对象是Dom对象，能够通过$()转为jQuery对象
$('#mydiv').each(function() {//遍历 var jquery = $(this); }); 案例：
<div id="mydiv">write less, do more</div><script type="text/javascript"> console.log("-------------获取dom对象------------------") // dom对象 var domDiv = document.getElementById("mydiv"); console.log(domDiv); console.log("-------------获取jquery对象------------------") // 获取jquery对象 // 第一种形式 var jqueryDiv = jQuery('#mydiv'); console.log(jqueryDiv); // 第二种形式 jqueryDiv = $('#mydiv'); console.log(jqueryDiv); console.log("-------------dom转jquery------------------") // dom转jquery包装集/对象 var obj = $(domDiv); console.log(obj); console.log("-------------jquery转dom------------------") // jquery对象转dom对象 var dom = $('#mydiv')[0]; // 获取jquery对象转为dom // 或 var dom2 = jqueryDiv[0]; // 将jquery对象转为dom console.log(dom); console.log(dom2); /* this代表了dom对象，不是jquery对象 */ console.log("-------------dom转jquery------------------") $('#mydiv').each(function() { // 通过id选择器抉择了id为mydiv的所有元素而后进行遍历 // 那么遍历出的每个元素就是id为mydiv的标签元素 // 而this就代表了以后的这个元素 var jquery = $(this); }); console.log("-------------jquery转dom------------------") $('#mydiv').each(function() { var dom3 = this; }); </script> Jquery选择器
和应用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的形式供咱们查找|定位元素，称为jQuery选择器，选择器能够说是最考验一个人 jQuery 功力的中央，艰深的讲, Selector 选择器就是"一个示意非凡语意的字符串"。 只有把选择器字符串传入下面的办法中就可能抉择不同的Dom 对象并且以 jQuery 包装集的模式返回。
jQuery 选择器依照性能次要分为"抉择"和"过滤"。 并且是配合应用的，具体分类如下。根底选择器把握即可 ,其余用到再查阅。
根底选择器
选择器
名称
举例
id选择器
id
$("#testDiv")抉择id为testDiv的元素
元素名称选择器
element
$(“div”)抉择所有div元素
类选择器
.class
$(".blue")抉择所有class=blue的元素
抉择所有元素
*
$("*")抉择页面所有元素
组合选择器
selector1,selector2,selectorN
$("#testDiv,span,.blue")同时选中多个选择器匹配的元素
<style type="text/css"> .blue{ background: blue; } </style><body> <div id="mydiv1">id选择器1<span>span中的内容</span></div> <div id="mydiv2" class="blue">元素选择器</div> <span class="blue">款式选择器</span></body><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> // id选择器 console.log("======id===="); var idSelecter = $('#mydiv1'); console.log(idSelecter.html()); console.log(idSelecter.text()); // 元素选择器 console.log("======name===="); var nameSe = $('div'); // 有多个div元素 nameSe.each(function(){ // this是dom对象，$(this)是jquery对象 console.log($(this).text()); }); // 类选择器，class console.log("======class===="); var classSe = $('.blue'); // 有多个class=blue的元素 classSe.each(function(){ console.log($(this).text()); }); // 通用选择器：* console.log("======所有元素===="); var all = $("*"); console.log(all.length); // 组合选择器 console.log("======组合===="); var unionSe = $('span, .blue,div'); unionSe.each(function(){ console.log($(this).text()); }); </script> 档次选择器
选择器
名称
举例
后辈选择器
ancestor descendant
$("#parent div")抉择id为parent的元素的所有div元素
子代选择器
parent > child
$("#parent>div")抉择id为parent的间接div子元素
相邻选择器
prev + next
$(".blue + img")抉择css类为blue的下一个img元素
同辈选择器
prev ~ sibling
$(".blue ~ img")抉择css类为blue的之后的img元素
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>档次选择器</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> <style type="text/css"> .testColor{ background: green; } .gray{ background: gray; } </style> </head> <body> <div id="parent">档次择器 <div id="child" class="testColor">父选择器 <div class="gray">子选择器</div> <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" /> <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" /> </div> <div> 选择器2<div>选择器2中的div</div> </div> </div> </body> <script type="text/javascript"> console.log("=========后辈选择器-抉择所有后辈====="); var ancestorS = $('#parent div'); ancestorS.each(function(){ console.log($(this).text()); }); console.log("=========子代选择器-抉择儿子辈====="); var child = $('#parent>div'); child.each(function(){ console.log($(this).text()); }); console.log("=========相邻选择器====="); var pre_next = $(".gray + img"); console.log(pre_next.length); console.log("=========同辈选择器,其后，（弟弟）====="); var pre_siblings = $(".gray ~ img"); console.log(pre_siblings.length); </script></html> 表单选择器
Forms
名称
举例
表单选择器
:input
查找所有的input元素：$(":input")；
留神：会匹配所有的input、textarea、select和button元素。
文本框选择器
:text
查找所有文本框：$(":text")
明码框选择器
:password
查找所有明码框：$(":password")
单选按钮选择器
:radio
查找所有单选按钮：$(":radio")
复选框选择器
:checkbox
查找所有复选框：$(":checkbox")
提交按钮选择器
:submit
查找所有提交按钮：$(":submit")
图像域选择器
:image
查找所有图像域：$(":image")
重置按钮选择器
:reset
查找所有重置按钮：$(":reset")
按钮选择器
:button
查找所有按钮：$(":button")
文件域选择器
:file
查找所有文件域：$(":file")
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单验证</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> </head> <body> <form id='myform' name="myform" method="post"> <input type="hidden" name="uno" value="9999" disabled="disabled"/> 姓名:<input type="text" id="uname" name="uname" /><br /> 明码:<input type="password" id="upwd" name="upwd" value="123456" /><br /> 年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩 <input type="radio" name="uage" value="1"/>你懂得 <br /> 喜好:<input type="checkbox" name="ufav" value="篮球"/>篮球 <input type="checkbox" name="ufav" value="爬床"/>爬床 <input type="checkbox" name="ufav" value="代码"/>代码<br /> 来自:<select id="ufrom" name="ufrom"> <option value="-1" selected="selected">请抉择</option> <option value="0">北京</option> <option value="1">上海</option> </select><br /> 简介:<textarea rows="10" cols="30" name="uintro"></textarea><br /> 头像:<input type="file" /><br /> <input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/> <button type="submit" onclick="return checkForm();">提交</button> <button type="reset" >重置</button> </form> </body></html><script type="text/javascript"> function checkForm(){ // 获取 所有的表单元素 $(":input").each(function(){ // console.log($(this)[0]); console.log($(this)[0].tagName); }) console.log("------+++++++++++++++++++++--------") // 获取 text console.log("text-->" + $(":text").length); // 1 // 获取 password console.log("password-->" + $(":password").length); // 1 // 获取radio console.log("radio-->" + $(":radio").length); // 2 // 获取checkbox console.log("checkbox-->" + $(":checkbox").length); // 3 // 获取file console.log("file-->" + $(":file").length); // 1 // 获取按钮 console.log("button-->" + $(":button").length); // 2 // 获取submit按钮 console.log("submit-->" + $(":submit").length); // 1 // 获取image按钮 console.log("image-->" + $(":image").length); // 1 // 获取reset按钮 console.log("reset-->" + $(":reset").length); // 1 return false; } </script> Jquery Dom操作
jQuery也提供了对HTML节点的操作，而且在原生js的根底之上进行了优化，应用起来更加不便。
罕用的从几个方面来操作，查找元素（选择器曾经实现）；创立节点对象；拜访和设置节点对象的值，以及属性；增加节点；删除节点；删除、增加、批改、设定节点的CSS款式等。留神：以下的操作形式只实用于jQuery对象。
操作元素的属性
获取属性
办法
阐明
举例
attr(属性名称)
获取指定的属性值，操作 checkbox 时，
选中返回 checked，没有选中返回 undefined。
attr(‘checked’)
attr(‘name’)
prop(属性名称)
获取具备true和false两个属性的属性值
prop(‘checked’)
<form action="" id="myform"> <input type="checkbox" name="ch" checked="checked"/> aa <input type="checkbox" name="ch" /> bb</form> <script type="text/javascript"> var ch = $("input[type='checkbox']") console.log(ch) ch.each(function(idx, em){ console.log(idx + "-" + $(em) + "=" + this) console.log($(em).attr('checked') + "==" + $(em).prop('checked')) console.log('--------------') }) </script> 设置属性
办法
阐明
举例
attr(属性名称，属性值)
设置指定的属性值，
操作 checkbox 时，
选中返回 checked，
没有选中返回 undefined。
attr(‘checked’,’checked’)
attr(‘name’,’zs’)
prop(属性名称，属性值)
设置具备true和false的属性值
prop(‘checked’,’true’)
移除属性
办法
阐明
举例
removeAttr(属性名)
移除指定的属性
removeAttr(‘checked’)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>属性操作</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> </head> <body> <pre> <h5>1.attr()</h5> 设置或者返回元素的属性 ; <h5>2.prop()</h5> 设置 具备 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。 </pre> <hr /> <a href="http://www.baidu.com" id="a1">百度</a> <a href="http://www.sina.com" id="a2">新浪</a> <input type="checkbox" name="all" checked="checked"/>全选 </body> <script type="text/javascript"> // 获取属性值：attr console.log($('#a1').attr('href')); console.log($(':checkbox').attr('name')); // 若未选中显示undefined，选中显示 checked console.log($(':checkbox').attr('checked')); // 获取属性值：prop // 若未选中显示false，选中显示 true console.log($(":checkbox").prop('checked')); console.log($('#a2').prop('href')) // 设置属性值 $('#a1').attr('href','https://jquery.com'); $(":checkbox").prop("checked",false); // 移除属性 $('#a2').removeAttr('href'); </script></html> 操作元素的款式
对于元素的款式，也是一种属性，因为款式用得特地多，所以对于款式除了当做属性解决外还能够有专门的办法进行解决。
办法
阐明
attr(“class”)
获取class属性的值，即款式名称
attr(“class”,”款式名”)
批改class属性的值，批改款式
addClass(“款式名”)
增加款式名称
css()
增加具体的款式
removeClass(class)
移除款式名称
减少元素的具体款式，格局：
1）css({‘款式名’:’款式值’,’款式名2’:’款式值2’})例：css({"background-color":"red","color":"#fff"});2）css(“款式名”,”款式值”)例：css('color','white') <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>设置元素款式</title> <script src="jquery-3.4.1.js" type="text/javascript" ></script> <style type="text/css"> div{ padding: 8px; width: 180px; } .blue{ background: blue; } .larger{ font-size: 30px; } .green { background : green; } </style> </head> <body> <h3>css()办法设置元素款式</h3> <div id="conBlue" class="blue larger">天蓝色</div> <div id="conRed">大红色</div> <div id="remove" class="blue larger">天蓝色</div> </body> <script type="text/javascript"> // 获取款式名称 console.log($("#remove").attr("class")); // 批改款式，那么id为remove的元素款式class只有green // $('#remove').attr("class","green") // 增加款式名称，class名称 --叠加 // $('#conBlue').addClass("blue larger"); // 增加元素具体款式 // { "":"" , "":"" } 名:值 对 $('#conRed').css({"background-color":"red","color":"#fff"}); $('#remove').css('color','red'); // 移除款式 // $("#remove").removeClass("blue larger"); </script></html> 操作元素的内容
对于元素还能够操作其中的内容，例如文本，值，甚至是html。
办法
阐明
html()
获取元素的html内容
html(“html,内容”)
设定元素的html内容
text()
获取元素的文本内容，不蕴含html
text(“text 内容”)
设置元素的文本内容，不蕴含html
val()
获取元素value值
val(‘值’)
设定元素的value值
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>操作内容</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> </head> <body> <h3><span>html()和text()办法设置元素内容</span></h3> <div id="html"></div> <div id="text"></div> <input type="text" name="uname" value="oop" /> </body> <script type="text/javascript"> // 获取HTML内容，包含HTML标签 console.log($('h3').html()); // 获取文本内容，不包含HTML标签 console.log($('h3').text()); // 获取value值 console.log($('[name=uname]').val()); // 设置 $('#html').html("<p>应用html设置,看不到标签</p>"); $('#text').text("<p>应用text设置,能看到标签</p>"); $('[name=uname]').val("哈哈哈"); // console.info("abc"); // console.log("abc"); // console.warn("abc") // console.error("abc"); </script></html> 创立元素
在jQuery中创立元素很简略，间接应用外围函数即可
$(‘元素内容’); $('<p>this is a paragraph!!!</p>'); 增加元素
办法
阐明
prepend(content)
在被选元素外部的结尾插入元素或内容，被追加的 content 参数，能够是字符、HTML 元素标记。
$(content).prependTo(selector)
把 content 元素或内容退出 selector 元素结尾
append(content)
在被选元素外部的结尾插入元素或内容，被追加的 content 参数，能够是字符、HTML 元素标记。
$(content).appendTo(selector)
把 content元素或内容插入selector 元素内，默认是在尾部
before()
在元素前插入指定的元素或内容:$(selector).before(content)
after()
在元素后插入指定的元素或内容:$(selector).after(content)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>追加</title> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> div { margin: 10px 0px; } span{ color: white; padding: 8px } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } </style> </head> <body> <h3>prepend()办法前追加内容</h3> <h3>prependTo()办法前追加内容</h3> <h3>append()办法后追加内容</h3> <h3>appendTo()办法后追加内容</h3> <span class="red">男神</span> <span class="blue">偶像</span> <div class="green"> <span >小鲜肉</span> </div> </body></html><script type="text/javascript"> var str ="<span id='mydiv' style='padding: 8px;width: 180px;background-color:#ADFF2F;'>动态创建span</span>"; // 1、应用prepend前加内容 $("body").prepend(str); // 2、应用prependTo前加内容 $("<b>结尾</b>").prependTo('body'); // 3、应用append后加内容 $("body").append(str); // $("div").append($('.red')); // 当把已存在的元素增加到另一处的时候相当于挪动 // 4、应用appendTo后追加内容 $(str).appendTo('body'); // $('.blue').appendTo("div"); </script> <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>插入元素</title> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> span{ color: white; padding: 8px } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } </style> </head> <body> <h3>before() 和 after()办法在元素之前后插入内容</h3> <span class="green">财大气粗</span> </body></html><script type="text/javascript"> var str1 = "<span class='red'>土豪</span>"; var str2 = "<span class='blue'>暴发户</span>"; $(".green").before(str1); // 前置元素 $(".green").after(str2); // 后存元素 </script> 删除元素
办法
阐明
remove()
删除所选元素或指定的子元素，包含整个标签和内容一起删。
empty()
清空所选元素的内容
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>删除元素</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> <style type="text/css"> span{ color: white; padding: 8px; margin: 5px; float: left; } .green{ background-color: green; } .blue{ background-color: blue; } </style> </head> <body> <h3>删除元素</h3> <span class="green">jquery<a>删除</a></span> <span class="blue">javase</span> <span class="green">http协定</span> <span class="blue">servlet</span> </body></html><script type="text/javascript"> // 删除所选元素 或指定的子元素 // $("span").remove(); // 删除款式为blue的span // $("span.blue").remove(); // 清空元素 // $("span").empty(); // $(".green").empty(); </script> 遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是以后的元素，此时是dom元素。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>遍历元素</title> <style type="text/css"> span{ color: white; padding: 8px; margin: 5px; float: left; } .green{ background-color: green; } .blue{ background-color: blue; } </style> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h3>遍历元素 each()</h3> <span class="green">jquery</span> <span class="green">javase</span> <span class="green">http协定</span> <span class="green">servlet</span> </body> <script type="text/javascript"> $('span').each(function (idx , e) { console.log(idx + " ---> " + $(e).text()); }) </script></html> Jquery事件
ready加载事件
ready()相似于 onLoad()事件
ready()能够写多个，按程序执行
(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.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"> 人之所以能，是置信能 </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格局}); $.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格局});