Jquery

5.1 主要内容

5.2 Jquery对象

• jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极 大的提高编写 javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加 健壮，“如虎添翼”。同时网络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery，一切 so easy。" --因为我们已经站在巨人的肩膀上了。
• jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

5.2.1 Jquery的下载与安装

5.2.1.1 下载

http://jquery.com/ 下载

5.2.1.2 优点

• 提供了强大的功能函数
• 解决浏览器兼容性问题
• 实现丰富的 UI 和插件
• 纠正错误的脚本知识

5.2.1.3 安装

在页面引入即可

<script src="js/jquery-3.5.1.js" type="text/javascript" ></script>

5.2.2 Jquery核心

• $ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。通过该对象可以获取jQuery对

象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

		<div>块级元素</div>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//获取元素
			var div = $("div");
			console.log(div);
		</script>

5.2.3 Dom对象 与 Jquery包装集对象

• 明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的Dom对象只有DOM 接口提供的方法和属性，通过js代码获取的对象都是dom对象；而通过jQuery获取的对象是jQuery包装 集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。

5.2.3.1 DOM对象

• 根据id属性获取DOM对象 document.getElementById(“id属性值”);Dom 对象只有有限的属性和方法
• 如果元素存在那么直接获取dom对象，如果元素不存在，值为null

var div = document.getElementById("testDiv"); 
var divs = document.getElementsByTagName("div")

5.2.3.2 Jquery包装集对象

• 根据id属性获取DOM对象 $("#id属性值");
• 如果元素存在那么直接获取jquery对象，如果元素不存在，值为空包装集对象 (不会是null)

5.2.3.3 注意

• dom对象判断对象是否获取到，判断值是否为null
• Jquery包装集对象判断对象是否获取到，判断jquery对象的长度length

5.2.3.4 Dom转换成jquery对象

• Dom对象转为jQuery对象，只需要利用$()方法进行包装即可,$(dom对象)

5.2.3.5 Jquery对象 转 Dom对象

• jQuery对象转Dom对象，只需要取数组中的元素即可

5.2.3.6 实例

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

 		<div id="div1">块级元素</div>
		   <script type="text/javascript">
			//dom
			var divDom = document.getElementById("div1");
			console.log(divDom);
			var divDom2 = document.getElementById("div2");
			console.log(divDom2);//null
			
			//jquery
			var divJquery = $("#div1");
			console.log(divJquery);//jQuery.fn.init(1)
			var divJquery2 = $("#div2");
			console.log(divJquery2);//jQuery.fn.init
			
			//Dom转换成jquery对象
			var newDiv = $(divDom);
			console.log(newDiv);
			var str = "<div>123</div>";
			var newStr = $(str);
			console.log(newStr);
			
			//jquery对象转换成Dom
			var newDiv = divJquery[0];
			console.log(newDiv);
		</script>

5.3 Jquery选择器

• 和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式 供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的 讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选 择不同的Dom 对象并且以 jQuery 包装集的形式返回。

• jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的，具体分类如下。基础选择器掌 握即可 ,其他用到再查阅

5.3.1 基础选择器

• id选择器 #id$("#testDiv")选择id为testDiv的元素
• 元素名称选择器 element$(“div”)选择所有div元素
• 类选择器 .class$(".blue")选择所有class=blue的元素
• 选择所有元素 $("*")选择页面所有元素
• 组合选择器 selector1,selector2,selectorN$("#testDiv,span,.blue")同时选中多个选择器匹配的元素

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

 		<div id="mydiv1">id选择器1<span>span中的内容</span></div>
		<div id="mydiv2" class="blue">元素选择器</div>
		<span class="blue">样式选择器</span>
		<script type="text/javascript">
			//id选择器
			var id = $("#mydiv1");
			console.log(id);
			
			//元素名称选择器
			var divs = $("div");
			console.log(divs);
			
			//类选择器
			var blue = $(".blue");
			console.log(blue);
			
			//选择所有元素
			var all = $("*");
			console.log(all);
			
			//组合选择器
			var zh = $("#mydiv1,div,.blue")
			console.log(zh);
		</script>

5.3.2 层次选择器

• 后代选择器 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元素

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

			<div id="parent">层选择器
			<div id="child" class="testColor">父选择器
			     <!-- 往下找,上面一个img找不到 -->
				<img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
				<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>
		<script type="text/javascript">
			//后代选择器
			var hd = $("#parent div");
			console.log(hd);//4个
			
			//子代选择器
			var zd = $("#parent>div");
			console.log(zd);//2个
			
			//相邻选择器
			var xl = $(".gray + img");
			console.log(xl);//1个
			
			//同辈选择器
			var tb = $(".gray ~ img");
			console.log(tb);//2个
		</script>

5.3.3 表单选择器与属性选择器

• 属性选择器
  $("[属性]"); 选中页面中具备某样属性的元素
  $("[属性 = 值]"); 选中页面中具备属性等于某个特定值的元素

• 表单选择器
  表单元素选择器 :input 查找所有的input元素：$(":input")；<br/>注意：会匹配所有的input、textarea、select和button元素。文本框选择器:text查找所有文本框：$(":text")
  密码框选择器 :password 查找所有密码框：$(":password")单选按钮选择器:radio查找所有单选按钮：$(":radio")
  复选框选择器 :checkbox 查找所有复选框：$(":checkbox")提交按钮选择器:submit查找所有提交按钮：$(":submit")
  图像域选择器 :image 查找所有图像域：$(":image")重置按钮选择器:reset查找所有重置按钮：$(":reset")
  按钮选择器 :button 查找所有按钮：$(":button")文件域选择器:file查找所有文件域：$(":file")

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

			<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="爬床" abc='123' />爬床
			<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>
		
		<script type="text/javascript">
			//表单元素选择器,所有的,不止input元素
			//input,select,textarea,button
			var bds = $(":input");
			console.log(bds);//14个
			
			//单选按钮选择器
			var radios = $(":radio");
			console.log(radios);
			
			//多选按钮
			var checkboxs = $(":checkbox");
			console.log(checkboxs);
			
			console.log('=========');
			//属性选择器   选中页面中具备某样属性的元素
			var pro1 = $("[disabled]");
			console.log(pro1);
			
			//选中页面中具备属性等于某个特定值的元素
			var pro2 = $('[type="radio"]');
			console.log(pro2);
			
			var pro3 = $('[name="uage"]');
			console.log(pro3);
			
			var pro4 = $('[abc="123"]');
			console.log(pro4);
		</script>

5.3.4 过滤选择器

• $(":eq(index)") 匹配元素的指定下标的元素 （下标从0开始） .eq(index)
• $(":gt(index)") 匹配元素下标大于指定值元素 （下标从0开始）.gt(index)
• $(":odd") 匹配奇数下标
• $(":even") 匹配偶数下标
• $(":checked") 匹配元素被选中

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

			<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="爬床" abc='123' />爬床
			<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>
		
		<script type="text/javascript">
			//匹配元素的指定下标的元素
			var eq = $("[type]:eq(1)");//0的话是最上面的script
			console.log(eq);
			
			//匹配元素下标大于指定值元素
			var eq = $("[type]:gt(8)");
			console.log(eq);
			
			//匹配奇数下标
			var hob = $("[name = 'ufav']:odd");
			//匹配偶数下标
			var even = $("[name = 'ufav']:even");
			console.log(hob);//1个
			console.log(even);//2个
			
			//匹配元素被选中
			console.log($(":input:checked"));
		</script>

5.4 Jquery Dom操作

• jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。 常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的 值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。
• 注意：以下的操作 方式只适用于jQuery对象。

5.4.1 元素分类

• 固有的属性
  src align method
• 自定义的属性
  abc=‘123’
• 返回值是boolean类型的属性
  checked disabled selected

5.4.2 操作元素的属性

• attr
  获取已存在的属性，可以直接获取到具体的值，如果属性是boolean类型的也是一样 具体的值
• prop （不能操作自定义属性）
  获取已存在的属性，可以直接获取到具体的值，如果属性是boolean类型 返回的是true/false

5.4.2.1 获取属性

• attr(‘属性名’);
• prop(‘属性名’);

5.4.2.2 设置属性

• attr(‘属性名’,‘属性值’);
• prop(‘属性名’,‘属性值’);

5.4.2.3 移除属性

• removeAttr(属性名)移除指定的属性

5.4.2.4 实例

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

		<form action="" id="myform">
			<input type="checkbox" id="aa" data='123' name="ch" checked="checked"/>	aa
			<input type="checkbox" id="bb" data='456' name="ch" />	bb
		</form>
		<script type="text/javascript">
			//获取元素
			var aa = $("#aa");
			var bb = $("#bb");
			
			//获取固有属性值
			console.log(aa.attr("name"),aa.attr("type")); //ch checkbox
			console.log(aa.prop("name"),aa.prop("type")); //ch checkbox

			
			//自定义的属性
			console.log(aa.attr("data"));//123
			console.log(aa.prop("data"));//undefined,不能操作自定义
			
			//返回值是boolean类型的属性
			console.log(aa.attr("checked"));//checked
			console.log(aa.prop("checked"));//true
			//不存在的属性
			console.log(bb.attr("checked"));//undefined
			console.log(bb.prop("checked"));//false
			
			//设置
			aa.attr("data","abc");
			bb.prop("checked",true);
			aa.attr("name",'input');
			console.log(aa.attr("data"));//abc
			console.log(bb.prop("checked"));//true
			console.log(aa.attr("name"));//input
			
			//移除属性
			bb.removeAttr('name');
			console.log(bb.attr("name"));//undefined
		</script>

5.4.3 操作元素的样式

• attr(“class”) 获取class属性的值，即样式名称

• attr(“class”,”样式名”) 修改class属性的值，修改样式 直接覆盖原有的样式

• addClass(“样式名”) 添加样式名称

• css(“样式名”,“样式值”) 添加具体的样式 相当于在元素上添加style属性

  css({‘样式名’:’样式值’,’样式名2’:’样式值2’})

• removeClass(class) 移除样式名称

	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div {
				padding: 8px;
				width: 180px;
			}

			.blue {
				background: blue;
			}

			.larger {
				font-size: 30px;
			}

			.green {
				background: green;
			}
		</style>

	<h3>css()方法设置元素样式</h3>
		<div id="conBlue" class="blue larger">天蓝色</div>
		<div id="conRed">大红色</div>
		<div id="remove" class="blue larger">天蓝色</div>
		 <script type="text/javascript">
		 	//获取class属性的值，即样式名称
			var div1 = $("#conBlue").attr("class");
			console.log(div1);//blue larger
			
			//修改class属性的值，修改样式   直接覆盖原有的样式
			 $("#conBlue").attr("class","green");
			
			//添加样式名称
			 $("#conBlue").addClass("larger");
			 
			 //添加具体的样式   相当于在元素上添加style属性
			  $("#conRed").css("color","red");
			  $("#conRed").css({"background-color":"gray","font-size":"30px"});
			  
			  //移除样式名称
			  $("#remove").removeClass('larger');
		 </script>

5.4.4 操作元素的内容

• html() 获取元素的html内容
• html(“html,内容”) 设定元素的html内容
• text() 获取元素的文本内容，不包含html
• text(“text 内容”) 设置元素的文本内容，不包含html
• val() 获取元素value值
• val(‘值’) 设定元素的value值

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

	<h3><span>html()和text()方法设置元素内容</span></h3>
		<div id="html"></div>
		<div id="text"></div>
		<input type="text" name="uname" value="oop" />
		<script type="text/javascript">
			//获取非表单元素 的内容/值
			console.log($("h3").html());//<span>html()和text()方法设置元素内容</span>
			console.log($("h3").text());//html()和text()方法设置元素内容
			
			//设置非表单元素 的内容/值
			$("#html").html("<h2>标签内容</h2>");//标签内容(有加粗变大效果)
			$("#text").text("<h2>标签内容</h2>");//<h2>标签内容</h2>
			
			//val()
			console.log($("[name='uname']").val());//oop
			
			$("[name='uname']").val("orm");
		</script>

5.4.5 创建和添加元素

5.4.5.1 创建元素

• $(‘元素内容’)

5.4.5.2添加元素

• 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),不需要父节点

	<script src="js/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>

		<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>
		
		<script type="text/javascript">
			//prepend  内部前追加
			//准备元素
			var str = $('<span>UZI</span>');
			//将内容填充到<div class="green">的内部
			$(".green").prepend(str);
			
			//prependTo  被内部前追加
			var str2 = $('<span>lbw</span>');
			$(str2).prependTo($(".green"));
			
			//append   内部后追加
			var str3 = "<span>厂长</span>";
			$(".green").append(str3);
			
			//appendTo   被内部后追加
			var str4 = "<span>faker</span>";
			$(str4).appendTo($(".green"));
			
			//before  前追加
			$("[class = 'red']").before("<span style='color:black'>卢本伟</span>");
			
			//after   后追加
			$("[class = 'red']").after("<span style='color:black'>姿态</span>");
		</script>

5.4.6 删除元素

• remove()删除所选元素或指定的子元素，包括整个标签和内容一起删。
• empty()清空所选元素的内容

		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			span {
				color: white;
				padding: 8px;
				margin: 5px;
				float: left;
			}

			.green {
				background-color: green;
			}

			.blue {
				background-color: blue;
			}
		</style>

<h3>删除元素</h3>
		<span class="green">jquery<a>删除</a></span>
		<span class="blue">javase</span>
		<span class="green">http协议</span>
		<span class="blue">servlet</span>

		<script type="text/javascript">
			//remove()  移除
			$('.green').remove();
			
			//empty()   清空
			// $('.blue').empty();
		</script>

5.4.7 遍历元素

• each()
• $(selector).each(function(index,element)) :遍历元素
  参数 function 为遍历时的回调函数，
  index 为遍历元素的序列号，从 0 开始。
  element是当前的元素，此时是dom元素。

		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			span {
				color: white;
				padding: 8px;
				margin: 5px;
				float: left;
			}

			.green {
				background-color: green;
			}

			.blue {
				background-color: blue;
			}
		</style>

		<h3>遍历元素 each()</h3>
		<span class="green">jquery</span>
		<span class="green">javase</span>
		<span class="green">http协议</span>
		<span class="green">servlet</span>
		
		<script type="text/javascript">
			var spans = $("span");
			spans.each(function(index,element){
				console.log(index,element);
				console.log($(element));//需要封装一下才能去调用JQuery方法
			});
		</script>

5.5 Jquery事件

5.5.1 ready加载事件

• ready()类似于 onLoad()事件

• ready()可以写多个，按顺序执行
  $(document).ready(function(){})
  等价于
  $(function(){})

• ready加载事件和load加载事件的区别
  load：等待加载页面中DOM结构(元素)和引入的资源后，执行对应代码
  ready：等待加载页面中DOM结构(元素)，执行对应代码

	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			//load
			window.onload = function(){
				console.log("abc");
			}
			
			//ready加载事件
			 $(function(){
			 	console.log($("#aa"));
			 });
			
			$(document).ready(function(){
				console.log($("#aa"));
			});
		</script>

5.5.2 绑定事件

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

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

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

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

		<button type="button" id="aa">按钮</button>
		<button type="button" id="bb">按钮2</button>
		<button type="button" id="cc">按钮3</button>
		
		<button type="button" id="dd">按钮4</button>
		 
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			//load
			/* window.onload = function(){
				console.log("abc");
			}
			
			//ready加载事件
			 $(function(){
			 	console.log($("#aa"));
			 });
			
			$(document).ready(function(){
				console.log($("#aa"));
			}); */
			
			//bind绑定
			$("#aa").bind('click',function(){
				console.log('点击事件');
			});
			
			//bind绑定多个
			$("#bb").bind('mouseout',function(){
				console.log('移开事件');
			}).bind('mouseover',function(){
				console.log('悬停事件');
			});
			
			$("#cc").bind({
				'click':function(){
					console.log("点击事件");
				},
				'mousemove':function(){
					console.log("移动事件");
				}
			})
			
			//事件绑定的简洁使用方式
			$("#dd").click(function(){
				console.log("点击事件");
			})
			
			$("#dd").click(function(){
				console.log("点击事件");
			}).mouseover(function(){
				console.log("悬停事件");
			});
		</script>

5.6 Jquery Ajax

ajax 异步无刷新技术

5.6.1 $.ajax

jquery调用ajax方法：

格式：$.ajax({});

参数：

type：请求方式GET/POST

url：请求地址url

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

data：发送到服务器的数据

dataType：预期服务器返回的数据类型 json/text/html

contentType：设置请求头

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

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

• $.ajax({
  type:get/post, 请求方式
  url:请求地址,
  data:{
  //参数
  name:zhangsan,
  pwd:123456
  },
  dataType:‘json’ 预期服务器返回的数据类型
  success:function(abc){

  ​ }
  ​ });

{
	"code":1,
	"msg":"",
	"data":[
		{
			"id":1,
			"uname":"zhangsan",
			"age":20,
			"sex":true,
			"job":"programmer"
		},
		{
			"id":2,
			"uname":"zhangsan",
			"age":28,
			"sex":false,
			"job":"teacher"
		},
		{
			"id":3,
			"uname":"zhangsan",
			"age":24,
			"sex":true,
			"job":"programmer"
		},
		{
			"id":4,
			"uname":"zhangsan",
			"age":23,
			"sex":false,
			"job":"police"
		}
	]
}

		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ajax请求
			$.ajax({
				type:'get',
				url:'js/data.json',
				data:{
					uname:'lisi'
				},
				dataType:'json',
				success:function(data){
					console.log(data);
				}
			});
		</script>

5.6.2 $.get

• 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。
• 请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
• $.get(‘地址’,数据参数,回调函数);

// 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); });

	$.get("js/data.json",function(data){
				console.log(data);
			});

5.6.3 $.post

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

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

• $.post(‘地址’,数据参数,回调函数);

// 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); });

5.6.4 $.getJSON

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

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

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

5.6.7 案例

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

		<div id="msg"></div>
		<script type="text/javascript">
			//请求数据
			$.ajax({
				type:'Get',
				url:'js/data.json',
				data:{},
				dataType:'json',
				success:function(result){
					//判断是否请求成功
					if(result.code == 1){
						//判断是否返回数据
						if(result.data.length > 0){
							//显示数据
							//准备表格
							var table = $('<table border="1" width="500px" align="center" style="border-collapse: collapse;"></table>');
							//准备表头
							var tHead = '<tr><th>编号</th><th>名称</th><th>年龄</th><th>性别</th><th>工作</th></tr>';
							//将表头添加到表格中
							table.append(tHead);
							
							//准备数据
							for(var i = 0; i < result.data.length; i++){
								//获取循环中的当前对象
								var user = result.data[i];
								var sex = user.sex? '男':'女';
								
								//准备每一行数据
								var userData = "<tr align='center'><td>"+user.id+"</td><td>"+user.uname+"</td>";
								userData += "<td>"+user.age+"</td><td>"+sex+"</td><td>"+user.job+"</td></tr>";
								
								//追加到表格中
								table.append(userData);
							}
							
							//将表格显示在页面中
							$("#msg").html(table);
						}
					}else{
						//将失败的原因显示在页面中
						$("#msg").html(result.msg);
					}
				}
			});
		</script>

11