系列文章目录
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 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提供了大量能使我们快速便捷地处理数据的函数和方法。