系列文章目录
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、jQuery动画
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
1.三组基本动画
show() ，hide()，toggle()
show(参数1，参数2)
参数1：代表动画执行的时长，可以是毫秒数，也可以是字符串：fast（200ms），normal（400ms），slow（600ms）
参数2：代表动画执行完后的回调函数
$('#show').click(function(){
//不加参数，无动画
// $('.box').show();
//有参数
// $('.box').show(2000);
// $('.box').show('fast');
// $('.box').show('normal');
// $('.box').show('slow');
//当参数写错时/参数没有意义时，时长相当于normal
// $('.box').show('adc');
//回调函数
$('.box').show(2000,function(){
alert('动画执行完毕！')
})
})
hide(参数1，参数2)
参数1：代表动画执行的时长，可以是毫秒数，也可以是字符串：fast（200ms），normal（400ms），slow（600ms）
参数2：代表动画执行完后的回调函数
用法同show()
toggle(参数1，参数2，参数3)
参数1：代表动画执行的时长，可以是毫秒数，也可以是字符串：fast（200ms），normal（400ms），slow（600ms）
参数2：代表动画执行完后的回调函数
参数3：布尔值，规定 toggle 是否隐藏或显示所有被选元素，true：显示所有元素，false：隐藏所有元素
如果设置参数3，则无法使用参数1和参数2
$('#toggle').click(function(){
// $('.box').toggle(3000);
$('.box').toggle(true);
})
slideDown() ，slideUp()，slideToggle()
slideDown(参数1，参数2)
参数1：代表动画执行的时长，可以是毫秒数，也可以是字符串：fast（200ms），normal（400ms），slow（600ms）,不写参数默认速度为‘normal’
参数2：代表动画执行完后的回调函数
示例如下：
$('#slideDown').click(function(){
$('.box').slideDown(2000,function(){
alert('下滑成功')
})
})
slideUp(参数1，参数2)
参数1：代表动画执行的时长，可以是毫秒数，也可以是字符串：fast（200ms），normal（400ms），slow（600ms）,不写参数默认速度为‘normal’
参数2：代表动画执行完后的回调函数
用法同slideDown()
slideToggle(参数1，参数2)
参数1：代表动画执行的时长，可以是毫秒数，也可以是字符串：fast（200ms），normal（400ms），slow（600ms）,不写参数默认速度为‘normal’
参数2：代表动画执行完后的回调函数
示例如下：
$('#slideToggle').click(function(){
$('.box').slideToggle(2000);
})
fadeIn() ，fadeOut()，fadeToggle()
fadeIn(参数1，参数2)
参数1：代表动画执行的时长，可以是毫秒数，也可以是字符串：fast（200ms），normal（400ms），slow（600ms）,不写参数默认速度为‘normal’
参数2：代表动画执行完后的回调函数
示例如下：
$('#fadeIn').click(function(){
$('.box').fadeIn(2000,function(){
alert('淡入成功')
})
})
fadeOut(参数1，参数2)
参数1：代表动画执行的时长，可以是毫秒数，也可以是字符串：fast（200ms），normal（400ms），slow（600ms）,不写参数默认速度为‘normal’
参数2：代表动画执行完后的回调函数
用法同fadeIn()
fadeToggle(参数1，参数2，参数3)
参数1：代表动画执行的时长，可以是毫秒数，也可以是字符串：fast（200ms），normal（400ms），slow（600ms）,不写参数默认速度为‘normal’
参数2：规定在动画的不同点上元素的速度。默认值为 “swing”，可能的值为：
“swing” : 在开头/结尾移动慢，在中间移动快
“linear” : 匀速移动
参数3：代表动画执行完后的回调函数
示例如下：
$('#fadeToggle').click(function(){
// $('.box').fadeToggle(2000,function(){
// alert('淡入成功')
// })
$('.box').fadeToggle(2000,'linear',function(){
alert('淡入成功')
})
})
2.自定义动画
animate()
animate() 方法执行 CSS 属性集的自定义动画
参数1：需要做动画的css属性和样式值
参数2：代表动画执行的时长，可以是毫秒数，也可以是字符串：fast（200ms），normal（400ms），slow（600ms）,不写参数默认速度为‘normal’
参数3：规定在不同的动画点中设置动画速度的 easing 函数。
参数4：代表动画执行完后的回调函数
示例如下：
$('#animate').click(function(){
$('.anim').animate({
left:400,
top: 300,
//需要下载jQuery color插件后才能设置backgroundColor
// backgroundColor: 'yellow'
},2000,'linear',function(){
$(this).animate({
left:100,
top: 150,
width:200
},2000)
})
})
注意：有些属性需要先下载插件才能用animate()设置，例如backgroundColor
3.动画队列与停止动画
动画队列
JQuery动画存在一个队列，当在JQuery对象上调用动画方法时，如果对象正在执行某个动画效果，那么会把后面的动画效果，放在一个队列里面，然后按顺序执行动画队列里面的每一个动画
stop()函数
$(selector).stop(stopAll,goToEnd)
stopAll：决定是否应该清除动画队列。默认是 false
goToEnd： 决定是否立即完成当前动画。默认是 false
示例如下：
css代码：
<style>
.ab{
width: 200px;
height: 400px;
background-color: red;
margin-top: 30px;
display: none;
}
</style>
html代码：
<input type="button" value="stop2"id="stop2" >
<input type="button" value="start" id="start">
<div class="ab"></div>
js代码：
$('#start').click(function(){
$(".ab").slideDown(3000).slideUp(3000);
})
$('#stop2').click(function(){
// $('.ab').stop(true,true);
// $('.ab').stop(true,false);
// $('.ab').stop(false,true);
// $('.ab').stop(false,false);
$('.ab').stop();
})
推荐案例：动画实现下拉菜单
二、jQuery AJAX
首先简单了解一下ajax
ajax全名：Asynchronous JavaScript and XML（异步JavaScript和XML）
ajax不是一种编程语言，而是用于创建交互性更强的web应用程序技术
Ajax的优点
- 不需要插件支持
- 优秀的用户体验
- 提高web程序性能
- 减轻服务器和宽带的负担
Ajax的缺点
- 浏览器对XMLHttpRequest对象的支持度不足
- 破坏浏览器前进，后退按钮的正常功能
- 对搜索引擎的支持不足
- 开发和调试工具的缺乏
前言
jQuery对Ajax操作进行了封装，jQuery中$.Ajax为最底层的方法，第二层为 $.load()， $.get()， $.post()，第三层为 $.getScript()， $,getJson()
以下从第一层开始介绍，可以先了解第二层，第三层后再来了解 $.ajax()方法
第一层
$.ajax()
语法: $.ajax( options )
options中包含了ajax所需要的所有设置，以key/value的形式存在
options的一些参数
下面提到二，三层的方法，都可以由$.ajax（）实现，以下举例：
- 实现$.getScript()
$('#submit').click(function(){
$.ajax({
type:'GET',
url :'02.js',
dataType: 'script'
})
})
- 实现$.getJson()
$('#change').click(function(){
$.ajax({
type: 'GET',
url: '02.json',
dataType :'json',
success: function(data){
var res = "";
$.each(data,function(i,item){
res +='<span>'+ item.name+'</span>'+'<br>'+'<span>'+ item.age+'</span>'
})
$('.one').html(res);
}
})
})
第二层
load()
load（）方法是jQuery中最简单和常用的Ajax方法，可以远程载入HTML文档，并插入Dom中
1.载入HTML文档
load（url，data，callback）
| 参数 | 类型 | 介绍 |
|---|---|---|
| url | String | 请求HTML页面的地址 |
| data（可选） | Object | 发送至服务器的key/value数据 |
| callback（可选） | Function | 请求完成时的回调函数，无论失败或成功，都会触发 |
当不需要获取所有的HTML内容时，可以通过URL参数来实现获取部分内容
URL参数语法结构为 : url selector ，两者之间有一个空格
简单案例：
HTML部分:
<input type="button" value="ajax获取" id="ajax">
<div class="box">
</div>
JS部分:
<script src="../jQuery.js"></script>
<script>
$(function(){
//获取HTML内容
// $('#ajax').click(function(){
// // $('.box').load('test.html');
//获取部分内容
// $('.box').load('test.html .para');
// })
//回调函数
$('#ajax').click(function(){
$('.box').load('test.html',function(responseText,textStatus,XMLHttpRequest){
console.log(responseText+'和'+textStatus+'和'+XMLHttpRequest);
})
})
})
</script>
css部分可自行设置
2.传递方式
GET方式：
无参数传递时采用GET方式（上面的案例则为GET方式传递）
POST方式
即有参数传递的情况
例如：
$('.box').load('test.php'{name:'k',age:'20'},function(){})
})
3.回调函数
在load（）方法中，无论AJAX请求是否成功，请求完成后都会触发回调函数。
callback（）一共有3个参数：
responseText，textStatus，XMLHttpRequest
responseText：请求返回的内容
textStatus：请求的状态：success，error，notmodified，timeout
XMLHttpRequest：XMLHttpRequest对象
可自行打印查看
$get()
$.get（url，data，callback，type）
| 参数 | 类型 | 介绍 |
|---|---|---|
| url | String | 请求的HTML页面的地址 |
| data（可选） | Object | 发送至服务器的key/value数据，附加到url中 |
| callback（可选） | Function | 请求成功时的回调函数 ，即response的返回值为success时才调用 |
| type （可选 ） | String | 服务器返回的内容格式，xml，html，script，json，text，_defaul |
示例（有点简陋）：
<div class="box">
<h6>已有评论：</h6>
<div class="name">
<span>姓名：</span>
<span class="content"></span>
</div>
<div class="cont">
<span class="content">内容：</span>
</div>
<input type="text" id="name" value="" placeholder="姓名">
<textarea name="content" id="content" cols="40" rows="3"></textarea><br>
<input type="button" value="submit" id="submit">
</div>
<script src="../../jQuery.js"></script>
<script>
$(function(){
$('#submit').click(function(){
console.log(1);
$.get('02.php',{
username:$('#name').val(),
comment: $('#content').val()
},function(data,textStatus){
console.log('OK')
console.log(data);
var res = JSON.parse(data);
$('.name').html('姓名:'+res.username);
$('.cont').html('内容:'+res.comment);
})
})
})
</script>
<style>
.box{
border: 1px solid black;
width: 400px;
height: 450px;
position: relative;
left: 50%;
margin-left: -200px;
box-sizing: border-box;
padding: 0px 10px;
}
.name{
display: inline-block;
height: 40px;
width: 100%;
background-color: #d2c9c254;
border: 1px solid rgb(0, 0, 0);
border-radius: 8px;
}
.cont{
height: 100px;
width: 100%;
background-color: #d2c9c254;
display: inline-block;
margin-top: 20px;
border: 1px solid rgb(0, 0, 0);
border-radius: 8px;
}
#name{
display: inline-block;
margin-bottom: 10px;
margin-top: 40px;
}
#content{
display: inline-block;
margin-bottom: 20px;
}
span{
height: 30px;
display: inline-block;
box-sizing: border-box;
}
</style>
返回数据格式（简单介绍）
HTML片段
不需要处理，直接插入到主页中
例如：
function(data,textStatus){
$('.name .content').html(data);
}
XML文档
需要经过处理，
**如果需要返回XML，则在服务器端，需要设置Content-Type类型 :
header(" Content-Type:text/xml: charset=utf-8 ");
json文件
json文件简洁，易于阅读
示例：
$('#submit').click(function(){
console.log(1);
$.get('02.php',{
username:$('#name').val(),
comment: $('#content').val()
},function(data,textStatus){
$('.name .content').html(data.username);
$('.cont .content').html(data.comment);
},"json")
})
$.post()
写法和$.get（）方法相同（不再介绍）
$.post() 和 $.get()两者区别
第三层
$.getScript()
$ .getScript（url地址，callback）
通过$.getScript()可以直接加载js文件
其它加载js文件的方法（了解）
$(document.createElement(“script”)).attr(‘src’,‘02.js’).appendTo(‘head’);
$(’< script type=“text/javascript” src=“02.js”>’).appendTo(‘head’);
示例：
$('#submit').click(function(){
$.getScript('02.js');
})
$.getJson()
$ .getJson（url地址，callback）
通过$.getJson()可以直接加载json文件
$('#change').click(function(){
$.getJSON('02.json',function(data){
//在回调函数中处理数据
var res = "";
$.each(data,function(i,item){
res +='<span>'+ item.name+'</span>'+'<br>'+'<span>'+ item.age+'</span>'
})
$('.one').html(res);
})
})
序列化元素
1.serialize()
serialize()方法作用于一个jQuery对象，可以将DOM元素内容序列化为字符串，常用于表单中
示例如下：
<form action="#" id="form1">
<p>姓名：<input type="text" id="name" placeholder="姓名" name="username"></p>
<p>评论：<textarea name="content" id="content" cols="40" rows="3" ></textarea><br>
</p>
</form>
$(function(){
$('#submit').click(function(){
console.log($('#form1').serialize())
$.get('03.php',$('#form1').serialize(),function(data,textStatus){
console.log(data);
})
})
})
注意：使用serialize()方法需要表单元素具有name属性@<>@
2.serializeArry()
和serialize()类似，但是serializeArry()返回值为Json格式
$('#btn').click(function(){
var $a = $('.check,:radio').serializeArray();
console.log($a);
})
输出结果：
注意serialize()和serializeArry()对checkbox和radio的输出
3.$.param()
用于将一个数组或对象按照key/value进行序列化
var obj = {
one : '1',
two : '2',
six : '6'
}
var e = $.param(obj);
console.log(e);
输出结果：
ajax全局事件
jQuery简化Ajax操作不仅体现在Ajax方法和处理响应方面，还体现在对调用Ajax方法过程中HTTP请求的控制
通过jQuery提供的自定义全局函数，可以使各种和Ajax相关的事件注册回调函数
相关函数
- ajaxStart()
ajax请求开始时执行的函数
- ajaxStop()
ajax请求结束时执行的函数
- ajaxComplete()
ajax请求执行完时执行的函数
- ajaxError()
ajax请求发生错误时执行的函数
- ajaxSend()
ajax请求发送前执行的函数
- ajaxSuccess()
ajax请求成功时执行的函数
以ajaxStart（）和ajaxStop（）为例:
当内容还在加载时，可以通过ajaxStart()给用户提供反馈——“正在加载”，加载完成后通过ajaxStop()隐藏提示
<div class="load">加载中...</div>
$('.load').ajaxStart(function(){
$(this).show();
})
$('.load').ajaxStop(function(){
$(this).hide();
})
解除全局方法影响
1·、将$.ajax（options）中的参数global设置为false
2 、1.5版本以后，可以在发送请求之前设置：
$.ajaxPrefilter(function( options ) {
options.global = true;
})
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
4852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
