jQuery工具库

Jquery工具库

一、jQuery简介

1.什么是jQuery

jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.

2.jQuery的特性

 HTML元素选取
 HTML元素操作
 CSS操作
 HTML事件函数
 JavaScript特效和动画
 HTML DOM遍历和修改
 AJAX
 Utilities

二、jQuery介绍

1.jQuery使用介绍

下载后引入

<script src="js/jquery-3.4.1.js"></script>

2.jQuery函数

      1）选择器（字符串）
         jQuery函数通过该选择器获取对应的DOM，然后将这些DOM封装到一个人jQuery对象中并返回。
         
      2）DOM对象（即Node实例）
          jQuery函数将该DOM封装成jQuery对象并返回。
          
      3）HTML文本字符串
          jQuery函数根据传入的文本创建好HTML元素并封装成jQuery对象并返回。
           $("<div class="one">one</div>");

      4）一个匿名函数    
          $(function(){});
          当文当加载完毕之后jQuery函数调用匿名函数。

3.jQuery对象

  jQuery对象是jQuery函数的一个实例，是一个类数组对象，数组中存放的是DOM对象，而DOM对象是Node的实例。
 
  对jQuery对象的操作实际上是对jQuery数组中的DOM对象的批量操作。jQuery对象和DOM对象可以相互转化。
  
  jQuery对象的获取通常是使用选择器来获取的。比如，获取所有clss为one元素:$(".one");

三、jQuery选择器

1.基础选择器

   所有选择器  *
   标签选择器  标签名
   ID选择器    #id
   类选择器    .className
   群组选择器  .one,.two   多个选择器使用都好分隔，取并集
   复合选择器  .one.two   多个选择器组合使用，取交集

2.层级选择器

   后代选择器   .one .two   
      两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。
   子代选择器   .one>.two
      两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。
   下一个兄弟选择器   .one+.two
      两个选择器使用+隔开，表示可以获取当前元素的下一个兄弟元素，下一个兄弟元素要能符合.two。
   之后所有子代选择器  .one~.two
      两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.two。

3.属性选择器

[attribute] 属性名选择器
选择拥有该属性名的元素。
var a=$('[id]');
console.log(a);
选中了示例中所有拥有id属性的元素

[attribute=value]属性值选择器
选择属性值为某个特定值的元素。
var a=$('[id=one]');
console.log(a);
选中了示例中id=one的元素

[attribute!=value]非属性值选择器
选择所有属性值不为特定值的元素（包括没有该属性的元素）
var a=$('[class!=eukaryotes_animal]');
console.log(a);
除了ul#one.eukaryotes_animal没有选中外，包括它的子元素在内的其他元素均在选择范围内。

[attribute^=value]属性值以某个字符串开头的选择器
var a=$('[class^=eukaryotes]');
console.log(a);

[attribute$=value]属性值以某个字符串结尾的选择器
var a=$('[class$=plant]');
console.log(a);

[attribute*=value]属性值中包含某个字符串的选择器
var a=$('[class*=yotes_m]');
console.log(a);

[selector1][selector2][selectorN] 多属性选择器(属性交集选择器)
var a=$('[class^=eukaryotes_][id]');
console.log(a);

四、过滤器

jQuery的过滤器必须用在jQuery选择器后，表示对通过前面的jQuery选择器选择到的内容的过滤。是建立在前面选择器已经选择到的元素的基础之上。 语法：selector:过滤器

1.基本过滤选择器器

$('#olColor li:eq(1)')
  selector:first  获取所有已选择到的元素中的第一个元素
  selector:last   获取所有已选择到的元素中的最后一个元素
  selector:even    获取所有已选择到的元素中的索引为偶数的元素
  selector:odd     获取所有已选择到的元素中的索引为奇数的元素
  selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
  selector:lt(num)   获取所有已选择到的元素中的索引值小于num的元素
  selector:gt(num)   获取所有已选择到的元素中的索引值大于num的元素
  selector1:not(selector2)  获取所有已选择到的元素中的除了selector2的元素
  selector:header   获取所有已选择到的元素中的标题元素(h1~h6)    
  selector:root 根节点
  selector:lang(selector2)   lang属性
  selector:target(selector2)  target属性

2.子元素/后代 过滤器

   selector:nth-child(index)
       获取每个selector元素中索引为index的子元素。【注意】index从1开始
   selector:first-child
       获取每一个selector元素中的第一个子元素（每个父元素的第一个子元素）
   selector:last-child
       获取每一个selector元素中的最后一个子元素（每个父元素的最后一个子元素）
   selector:only-child
       获取每一个selector元素中的独生子子元素（每个父元素如果只有一个孩子元素，获取该元素）
   selector:first-of-type
       获取每个selector元素中每种类型子元素中的第一个
   selector:last-of-type
       获取每个selector元素中每种类型子元素中的最后一个
   selector:only-of-type
       选择到只有一个selector子元素的标签

3.内容过滤器

  selector:contains(text) 
            获取所有已选择到的元素中文本包含text的元素
  selector:empty   
            获取所有已选择到的元素中的空元素(没有子节点)
  selector:parent  
            获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent");
  selector1:has(selector2)  
            获取所有已选择到的元素中包含selector2的元素，如$("div:has('span')");

4.表单过滤器

   >:checked    选取所有被选中的元素，用于复选框、单选框、下拉框
   :selected   选取所有被选中的元素，该选择器只适用于<option>
   :focus   选取当前获取焦点的元素
   :text    选取所有的单行文本框(<input type="text">)
   :password  选取所有的密码框
   >:input     选取所有的<input>,<textarea>,<select>,<button>元素。
       *注意，$(":input")是选中可以让用户输入的标签元素；而$("input")是选择名字为input的标签元素。*
   :enable   选取所有可用元素，该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>)
   :disable   选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。
   :radio      选取所有的单选框
   >:checkbox   选取所有的多选框
   :submit     选取所有的提交按钮
   :image      选取所有的input类型为image的表单元素
   :reset   选取所有的input类型为reset的表单元素
   >:button  选取所有的input类型为button的表单元素
   :file    选取所有的input类型为file的表单元素

五、DOM操作

1.操作class

//操作class
		$('.setClass li:first').addClass('red');	//添加class
		$('.setClass li:eq(1)').removeClass('green');	//移除class(不给参数，移除所有class)
		console.log(	//是否包含某个class
			$('.setClass li:last').hasClass('green'),	//true
			$('.setClass li:last').hasClass('orange'),	//false
		);
		//toggleClass 切换class。在添加、删除间切换
		$('.setClass p').click(function(){
			$(this).toggleClass();
		});

2.插入元素/节点

  //插入元素（内部插入）
		$('.insideAdd').append('<h2>append方法插入</h2>');	//append()，在元素里面的末尾插入DOM。这个与appendChild的方法是一样的。
		$('.insideAdd').append($('.insideAdd p'));
		$('<h2>appendTo方法插入</h2>').appendTo('.insideAdd');	//将匹配的元素插入到目标元素的最后面。这个与append一样，只不过内容和目标的位置相反。append方法里直接写一个标签的字符串，就相当于创建一个DOM对象
		$('.insideAdd').prepend('<h2>prepend方法插入</h2>');	//prepend()，与append的语法一样，只不过是插入到父级元素的前面，为兄弟节点
		$('<h2>prependTo方法插入</h2>').prependTo('.insideAdd');	//prependTo()，与appendTo是一样的，不同的也是插入的位置是在前面，为兄弟节点


		//插入元素（外部插入，插入为兄弟节点）
		$('.outsideAdd h2').after('<p>after方法添加到h2后面</p>');	//after()（语法类似于append）
		$('<p>insertAfter方法添加到h2后面</p>').insertAfter('.outsideAdd h2');	//insertAfter()（语法类似于appendTo）
		$('.outsideAdd h2').before('<p>before方法添加到h2前面</p>');	//before()（语法类似于prepend）
		$('<p>insertBefore方法添加到h2前面</p>').insertBefore('.outsideAdd h2');	//insertBefore()（语法类似于prependTo）

//插入元素，html与text方法。相当于原生的innerHTML、innerText属性
		console.log($('.htmlText').html());//获取
		$('.htmlText').html('<h2>这是html方法添加的标题</h2><p>这是html方法添加的内容</p>');	//设置
		console.log($('.htmlText').text());	//获取
		$('.htmlText').text('<h2>这是text方法添加的标题</h2><p>这是<em>text</em>方法添加的内容</p>');	//设置

3.包裹元素

//包裹元素
		$('.wrap span').wrap('<li>');	//wrap()，在每个匹配的元素外层包上一个html元素
		$('.wrap li').wrapAll('<ul>');	//wrapAll()，在所有匹配元素外面包一层HTML元素
		$('.wrap span').wrapInner('<strong>');	//wrapInner()，在匹配元素里的内容外包一层结构
		$('.wrap li').unwrap();	//.unwrap()，将匹配到的元素的父级删除

4.删除元素

   $('.del .title').remove();	//remove()，移除自己
   remove([selector])
       从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。
       该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
   detach([selector])
       与remove()类似，但是detach()保存所有jQuery数据和被移走的元素的相关联事件。再次添加后是有事件的
   empty()
       无参数。从DOM中清空集合中匹配元素的所有的子节点，清空子元素
       
		var end=$('.del .end').detach();	//再次添加后是有事件的
		//var end=$('.del .end').remove();	//再次添加后没有事件
		setTimeout(function(){
			$('.del').append(end);	//1s后，被删除的那个元素会被重新添加上
		},1000);

5.克隆与替换元素

//克隆与替换元素
		$('.clone p').click(function(){
			alert(2);
		});
		//该方法返回的是一个节点的引用，参数默认为false，为浅复制；参数是true,为深复制，含义是：复制元素的同时复制元素中所绑定的事件。
		$('.clone p').clone().appendTo('.clone');
		$('.clone p').clone(true).appendTo('.clone');	//clone的参数为true时表示，会把事件也克隆了
		$('<h3>使用replaceAll方法主动替换</h3>').replaceAll('.clone .replaceAll');//创建一个元素然后用它替换掉其它元素
		$('.clone .name2').replaceAll('.clone .name1');//replaceAll(target);使用已有的元素替换掉其它元素（剪切操作）
		$('.clone .replaceWidth').replaceWith('<h3>使用replaceWidth方法被动替换</h3>');//replaceWith(newContent);用新内容替换集合中所有匹配的元素，并且返回被删除的元素的集合。该方法会删除与节点相关联的所有数据和事件处理程序。

6.属性操作-通用属性操作

<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
   <li title="苹果汁">苹果</li>
   <li title="橘子汁" value="123">橘子</li>
   <li title="菠萝汁">菠萝</li>
</ul>
<button>点击按钮看attr()方法的效果</button>
<h3></h3>
</body>

1.返回属性的值：attr(属性名)

语法：attr(属性名)
$(document).ready(function(){
$("button").click(function(){
var vatext= $("ul li:eq(1)").attr("value");
$("h3").text(vatext);
});
});
这时h3标签获取了第二个li里面value的值：//123

2.设置属性和值：attr(属性,属性值)

<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:eq(0)").attr("title","圣诞节要吃苹果");
var vatext=$("ul li:eq(0)").attr("title");
$("h3").text(vatext);
});
});
</script>
这是第一个li的title属性值变成了我们自己定义的内容：//圣诞节要吃苹果

3.使用函数设置属性和值：attr(属性,函数值)

<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:eq(1)").attr("title",function(){
return this.value;
});
var vatext=$("ul li:eq(1)").attr("title");
$("h3").text(vatext);
});
});
</script>
//123

4.设置多个属性和值：attr(属性:属性值,属性:属性值…)

其实感觉这个和第二个差不多的性质，只是加了属性和属性值。

<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:eq(1)").attr({title:"我想喝柠檬汁，不想喝橘子汁",value:"123长大了变成了321"});
var vatext1=$("ul li:eq(1)").attr("title");
var vatext2=$("ul li:eq(1)").attr("value");
$("p").text(vatext1);
$("h3").text(vatext2);
});
});
</script>
//123长大了变成了321

5.prop

$('.attr img').prop({
			id:'food',
			kaivon:'liuliu',	//自定义的属性prop并没有添加到DOM标签身上，但是它会添加到DOM对象身上	
		});
		$('.attr img').attr('kaivon','liuliuliu');
		$('.attr img').removeAttr('kaivon');
		$('.attr img').removeProp('id');	//删除的是DOM对象身上的属性，并不是DOM标签身上的属性
		$('.attr img').prop('index',5);
		console.log($('.attr img').prop('index'));	//5 这条属性是添加在DOM对象身上
		$('.attr img').removeProp('index');
		console.log($('.attr img').prop('index'));	//undefined removeProp是删除DOM对象身上的属性
		console.log($('.attr input').val());	//这是一个正经的输入框
		$('.attr input').val('这不是一个输入框');

六、遍历

//获取后代元素
		$('.child').children().css('border-color','green');	//.children()	获取所有子元素(第一层)
		$('.child').children(':eq(1)').css('border-width','3px');	//可以接收一个选择器的参数，这个选择器用来过滤子元素
		$('.child').find('span:eq(0)').css({	//.find()	获取匹配到的后代元素。它与children不同的地方为：children找到的是子元素，find找到的是后代元素
			'font-size':'30px',
			color:'red'
		});


		//获取祖先元素
		$('.parent li ul li:first').parent('ul').css('border','4px solid blue');	//.parent()		获取父元素。也可以加一个参数.ul。就表示要找到父级必需有个class
		//$('.parent li ul li:first').parents().css('border','2px solid purple');
		console.log($('.parent li ul li:first').parents());//.parents()	获取祖先元素。所有祖先元素都会被找到，一直找到HTML
		$('.parent li ul li:first').parents('ul').css('border','2px solid purple');
		$('.parent li ul li:first').parentsUntil('li').css('border','5px solid purple');	//.parentsUntil()	获取祖先元素（但是有个范围，找到li就不再往上找了）
		$('.parent li ul li:first').offsetParent().css('border','5px solid teal');	//.offsetParent()	获取最近的有定位的祖先元素
		
		//获取祖先元素.closest() 获取祖先元素，与parents有点像。但区别是closest会找自己，parents不会找自己
		$('.closest li ul li').closest('ul').css('border','2px solid purple');

		//$('.closest li ul li').parents('li').css('border','5px solid purple');
		$('.closest li ul li').closest('li').css('border','5px solid purple');	//会从自己查起，如果自己的标签满足的话，自己的标签就算


		//获取后面的兄弟元素
		$('.next li:first').next('li').css('background','cyan');	//.next()	获取后面紧临的兄弟元素。参数也是个选择器，可选
		$('.next li:first').nextAll('li').css('border','5px solid #000');	//.nextAll()	获取后面所有的同辈兄弟元素
		$('.next li:first').nextUntil('div').css('border','5px solid red');	//获取后面所有的同辈兄弟元素（但是有个范围，找到div就不找了）


		//获取前面的兄弟元素(与next一样)
		$('.prev li:last').prev('li').css('background','cyan');
		$('.prev li:eq(3)').prevAll('li').css('border','5px solid #000');
		$('.prev li:eq(3)').prevUntil('div').css('border','5px solid red');


		//获取所有的兄弟节点
		$('.siblings li:eq(2)').siblings().css('border','5px solid skyblue');
		$('.siblings li:eq(2)').siblings('.select').css('background','yellow');	//添加了参数，进行过滤

七、事件

1.绑定事件

//绑定事件1：通过事件名称函数
		$('#btn1').mouseover(function () {
			$(this).css('background', 'orange');
		}).mouseout(function () {
			$(this).css('background', 'grey');
		});
//绑定事件2：通过on添加
		$('#btn2').on('click', function () {
			$(this).css('background', 'blue');
		});
		$('#btn2').on('click', { name: 'kaivon' }, function (event) {
			console.log(event.data.name);
		});
		$('#btn3').on('click', 'h2', { color: 'red' }, function (event) {
			//$(this)指向h2
			$(this).css('border', '1px solid ' + event.data.color);
		});
		//on可以添加多个事件
		$('#btn2').on({
			mouseover: function () {
				$(this).css('background', 'pink');
			},
			mouseout: function () {
				$(this).css('background', 'cyan');
			}
		});
//绑定事件3：one()
		$('#btn4').one('click', 'button', { color: 'purple' }, function (event) {
			$(this).css('background', event.data.color);
			console.log('只会打印一次');
		});

//解除事件：off()
		$('#btn5').click(function () {
			//$('#btn1').off();	//没有参数，会把所有的事件全部解除
			$('#btn1').off('mouseover');
		});
		

2.鼠标事件/键盘事件/表单事件

//鼠标事件
   click()  单击
   dblclick()  双击
   hover()   悬停
   mousedown()  按下
   mouseup()  抬起
   mouseenter()  移入  不支持子元素
   mouseleave()  离开  不支持子元素 
   mouseout()   离开  支持子元素 
   mouseover()  进入  支持子元素 
   mousemove()  移动
//键盘事件
   keypress()   按键按下
   keyup()   按键抬起
   keydown()   按键按下
//表单事件
   focus()  聚焦事件
   blur()    失去焦点事件
   change()  当元素的值发生改变时激发的事件
   select()  当textarea或文本类型的input元素中的文本被选择时触发的事件
   submit()  表单提交事件，绑定在form上

3.trigger()

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

$('#btn6').on({
			click: function () {
				console.log('btn6的点击事件');
			},
			mouseover: function (event, name, age) {
				console.log('btn6的鼠标移入事件：' + name + ' : ' + age);
				$(this).css('background', 'brown');
			},
			end: function () {
				console.log('这是一个自定义的事件');
			}
		});

		setTimeout(function () {
			$('#btn6').trigger('click');
		}, 500);
		setTimeout(function () {
			$('#btn6').trigger('mouseover',['kaivon',18]);
		}, 1000);
		setTimeout(function(){
			$('#btn6').trigger('end');
		},1500);

4.trigger()与triggerHandler()的区别

//区别1：trigger()会触发事件的默认行为；triggerHandler()不会触发事件的默认行为
		$('input').focus(function(){
			console.log('获取到焦点了');
		});
		$('#trigger').click(function(){
			$('input').trigger('focus');
		});
		$('#trigger').click(function(){
		  $('input').trigger('focus');//focus focus
		 });
		$('#triggerHandler').click(function(){
		  $('input').triggerHandler('focus'); //focus
		 });
//区别2:trigger()会执行所有选中元素的事件；triggerHandler()只会执行第一个元素的事件
$('#color li').click(function(){
			console.log($(this).html()+' '+$(this).index());
		});
		setTimeout(function(){
			//$('#color li').trigger('click'); //red 0  green 1  blue 2  yellow 3
			$('#color li').triggerHandler('click');//red 0  
		},2000);
//区别3：trigger()会冒泡；triggerHandler()不会冒泡
$('#bubble h2').click(function(){
			console.log('h2被点击了');
		});
		$('#bubble span').click(function(){
			console.log('span被点击了');
		});
		setTimeout(function(){
			$('#bubble span').trigger('click'); //span被点击了 h2被点击了
			$('#bubble span').triggerHandler('click');//span被点击了
		},2500);
//区别4：trigger()可以使用链式操作；triggerHandler()不可以使用链式操作
		$('#btn7').on({
			mouseover:function(){
				$(this).css('width','200px');
				return $(this);
			},
			mouseout:function(){
				$(this).css('height','200px');
			}
		});
		setTimeout(function(){
			// $('#btn7').trigger('mouseover').trigger('mouseout');
			$('#btn7').triggerHandler('mouseover').triggerHandler('mouseout');
		},3000);		

八、内置特效

1.jQuery样式相关方法

   //获取视口区的宽高：
   1、$(window).height()
   2、$(window).width()

   //获取内容区的宽高：
      $('div').width(); 
      $('div').height();

   //获取内容+padding区的宽高：
   3、$('div').innerHeight()
   4、$('div').innerWidth()

   //获取内容+padding+border区的宽高：
   5、$('div').outerHeight()
   6、$('div').outerWidth()

   //获取内容+padding+border+margin区的宽高： 
    $('div').outerWidth(true); 
    $('div').outerHeight(true);

   //获取相对于文档的偏移
   7、.offset()

   //获取相对于定位父元素的偏移
   8、.position()

   //横向滚动条左侧的偏移
   9、.scrollLeft()

   //横向滚动条上侧的偏移
   10、.scrollTop()

   //获取离它最近的父定位元素  
   11、.offsetParent()

2.效果

    1.基本效果
      1）隐藏 hide()
      2）显示 show()
      3）隐藏与显示 toggle()

    2.淡入淡出效果
      1）淡入  fadeIn()
      2）淡出  fadeOut()
      3）淡入到 fadeTo()
      4）淡入与淡出 fadeToggle()

    3.滑动效果
      1）滑下 slideDown()
      2）滑上 slideUp()
      3）滑上与滑下 slideToggle()

    4.自定义效果
      animate()      

九、Ajax（欸杰克斯）

1.$.get()

该方法使用GET方式执行Ajax请求，从服务器加载数据。

形式：$$.get(url, data, func, dataType);
可选参数：
1）url：链接地址，字符串表示
2）data：需要发送到服务器的数据，格式为{A: ‘…’, B: ‘…’}
3）func：请求成功后，服务器回调的函数；function(data, status, xhr)，其中data为服务器回传的数据，status为响应状态，xhr为XMLHttpRequest对象，个人感觉关注data参数即可
4）dataType：服务器返回数据的格式

//get请求
		$('#get').click(function () {
			$.get('http://api.duyiedu.com/api/student/findAll', { appkey: 'kaivon_1574822824764' }, function (data) {
				console.log(data);
			}, 'json');
		});
		$('#ajaxGet').click(function () {
			$.ajax({
				url: 'http://api.duyiedu.com/api/student/findAll',
				type: 'get',
				/* data:{
					appkey:'kaivon_1574822824764',
				}, */
				data: 'appkey=kaivon_1574822824764',
				dataType: 'json',
				success: function (data) {
					console.log(data);
				}
			});
		});

2.$.post()

该方法使用POST方式执行Ajax请求，从服务器加载数据。

形式：$.post(url, data, func, dataType);
可选参数：
1）url：链接地址，字符串表示
2）data：需要发送到服务器的数据，格式为{A: ‘…’, B: ‘…’}
3）func：请求成功后，服务器回调的函数；function(data, status, xhr)，其中data为服务器回传的数据，status为响应状态，xhr为XMLHttpRequest对象，个人感觉关注data参数即可
4）dataType：服务器返回数据的格式

//post请求
		$('#loginBtn1').click(function () {
			var username = $('#login input[name=account]').val();
			var password = $('#login input[name=password]').val();

			$.post('http://api.duyiedu.com/api/student/stuLogin', { appkey: 'kaivon_1574822824764', account: username, password: password }, function (data) {
				console.log(data);
			}, 'json');

			//console.log(username,password);
		});

		$('#loginBtn2').click(function () {
			$.ajax({
				url: 'http://api.duyiedu.com/api/student/stuLogin',
				type: 'post',
				data: {
					appkey: 'kaivon_1574822824764',
					account: $('#login input[name=account]').val(),
					password: $('#login input[name=password]').val()
				},
				dataType: 'json',
				success: function (data) {
					console.log(data);
				},
				error: function (status) {
					console.log('错误原因：' + status);
				}
			});
		});

---

是的，post相对get来说，最大的区别就是，post可以发送请求数据，通俗点就是，get只能取数据，post即可以取数据也可以对数据进行更改。

---

3.$.getJSON()

该方法使用GET方式执行Ajax请求，从服务器加载JSON格式数据。

形式：$.getJSON(url, data, func);

因为确定服务器返回json编码的数据，故相较于$.get()不必再指定dataType。

//JSON请求
		$('#json').click(function () {
			$.getJSON('http://api.duyiedu.com/api/student/findAll', { appkey: 'kaivon_1574822824764' },function(data){
				console.log(data);
			});
		});

十、jsonp

jQuery的Ajax对象支持JSONP方式的跨域请求，通过设置dataType: jsonp即可实现。
JSONP需要服务端的支持，具体表现为返回的数据为callback(json_data)的形式，即要返回回调函数包裹JSON数据的形式，而不是直接返回JSON数据。否则，虽然前端可以获取到请求数据，但不会执行ajax的成功回调函数，而是执行请求失败的回调函数，错误信息为200 load。

		$('#jsonp').click(function () {
			$.ajax({
				url: 'http://developer.duyiedu.com/edu/testJsonp',
				dataType: 'jsonp',
				method: 'post',
				success: function (data) {
					console.log(data);
				}
			});
		});