jQuery(动画，核心函数)

基本的HTML布局

<div id="box"><img src="1.jpg" alt=""><img src="1.jpg" alt=""><img src="1.jpg" alt="">
</div>
<button id="btn01">hide</button>
<button id="btn02">show</button><button id="btn03">toggle</button><button id="btn04">slideUp</button>
<button id="btn05">slideDown</button><button id="btn06">slideToggle</button><button id="btn07">fadeOut</button>
<button id="btn08">fadeIn</button><button id="btn09">fadeToggle</button>
<button id="btn10">fadeTo</button>

基本css的样式

    <style>*{margin:0;padding: 0;}#box{border:solid;}img{width:300px;padding:20px;margin:20px;border:20px solid blue;}button{font-size: 20px;}</style>

基本

hide让元素隐藏

$(document).ready(function(){//设置jQuery入口代码
//给按钮设置点击事件让图片隐藏$('#btn01').click(function(){$('img').hide(1000,function(){alert('hide函数执行完毕')});//执行hide函数让图片隐藏 第一个参数是多少毫秒隐藏(单位是毫秒)//第二个参数是回调函数(当函数执行完毕时触发的回调函数)})
})
//hide 让元素隐藏 最终状态是 display:none
//图片从显示到隐藏改变了什么属性
//改变的是：width height margin padding opacity

show让元素显示

$(document).ready(function(){//设置jQuery的入口代码
//给按钮设置点击事件让图片显示$('#btn02').click(function(){$('img').show(1000,function(){alert('show函数执行完毕')});//执行show函数让图片显示 第一个参数是多少毫秒显示(单位是毫秒)// 第二个参数是回调函数(当函数执行完毕时触发的回调函数)})
})
//show 让元素显示 最终状态是display:block
//图片从显示到隐藏改变了什么属性
//改变的是 width height padding margin opacity

toggle切换元素显示和隐藏

$(document).ready(function(){//设置jQuery的入口代码
//给按钮设置点击事件让图片 显示-->隐藏 隐藏-->显示$('#btn03').click(function(){$('img').toggle(1000,function(){alert('toggle函数执行完毕')})//执行show函数让图片显示 第一个参数是多少毫秒显示(单位是毫秒) //第二个参数是回调函数(当函数执行完毕时触发的回调函数)})
})
//toggle 切换元素显示和隐藏 显示-->隐藏 隐藏-->显示
// 最终状态是 display:block --> display:none  display:none-->display:block
//图片从显示到隐藏改变了什么属性
//改变的是 width height padding margin opacity
// toggle是hide和show函数的结合体

hide 和 show 和 toggle 这三个函数接收的参数是

第一个参数是秒数(多少毫秒之内完成)
第二个参数是指定切换效果默认是swing 可用参数是linear(表示匀速) 这个参数不常用
第三个参数是回调函数(在动画完成时执行的函数，每个元素执行一次)

滑动

slideUp把元素往上抬起(收)

$(document).ready(function(){//设置jQuery的入口代码
// 当点击按钮时让元素往上收起$('#btn04').click(function(){$('img').slideUp(1000,function(){alert('slideUp让函数执行完毕')})//执行show函数让图片显示 第一个参数是多少毫秒显示(单位是毫秒) //第二个参数是回调函数(当函数执行完毕时触发的回调函数)})
})
//slideUp让元素往上抬起(收)
// 最终状态是display:none
// 图片往上收起改变了图片的什么属性
//改变的是  height padding-top padding-bottom margin-top margin-bottom

slideDown把元素往下拉开(放)

$(document).ready(function(){//设置jQuery的入口代码
//当点击按钮时让元素往下拉$('#btn05').click(function(){$('img').slideDown(1000,function(){alert('slideDown函数执行完毕');//执行slideDown函数让图片显示 第一个参数是多少毫秒显示(单位是毫秒) //第二个参数是回调函数(当函数执行完毕时触发的回调函数)});})
})
//slideDown让元素往下拉开(放)
// 最终状态是display:block
// 图片往上收起改变了图片的什么属性
//改变的是  height padding-top padding-bottom margin-top margin-bottom

slideToggle切换元素的往下拉和往上收

$(document).ready(function(){//设置jQuery入口代码
//给按钮设置点击事件让图片 往上拉-->往下拉 往下拉-->往上拉$('#btn06').click(function(){$('img').slideToggle(1000,function(){alert('slideToggle函数执行完毕')})//执行show函数让图片显示 第一个参数是多少毫秒显示(单位是毫秒) //第二个参数是回调函数(当函数执行完毕时触发的回调函数)})
})
//slideToggle 切换元素的上拉和下拉  往上拉-->往下拉 往下拉-->往上拉
// 最终状态是 display:block --> display:none  display:none-->display:block
//图片从显示到隐藏改变了什么属性
//改变的是 height padding-top padding-bottom margin-top margin-bottom
// slideToggle是slideUp和slideDown函数的结合体

slideUp 和 slideDown 和 slideToggle 这三个函数接收的参数是

第一个参数是秒数(多少毫秒之内完成)
第二个参数是指定切换效果默认是swing 可用参数是linear(表示匀速) 这个参数不常用
第三个参数是回调函数(在动画完成时执行的函数，每个元素执行一次)

淡入淡出

fadeOut让元素慢慢淡出

$(document).ready(function(){//设置jQuery的入口代码
//点击按钮让图片慢慢的淡出$('#btn07').click(function(){$('img').fadeOut(1000,function(){alert('fadeOut函数执行完毕')})//执行fadeOut函数让图片显示 第一个参数是多少毫秒显示(单位是毫秒) //第二个参数是回调函数(当函数执行完毕时触发的回调函数)})
})
//fadeOut 让元素慢慢的淡出
// 最终状态是display:none
// 图片淡出改变了图片的什么属性
// 改变的是 opacity

fadeIn让元素慢慢淡入

$(document).ready(function(){//设置jQuery的入口代码
// 点击按钮让图片慢慢的淡入$('#btn08').click(function(){$('img').fadeIn(1000,function(){alert('fadeIn函数执行完毕')})})//执行fadeIn函数让图片显示 第一个参数是多少毫秒显示(单位是毫秒) //第二个参数是回调函数(当函数执行完毕时触发的回调函数)
})
// fadeIn 让元素慢慢的淡入
// 最终状态是display:block
// 图片淡入改变了图片的什么属性
// 改变的是 opacity

fadeToggle切换元素的淡入还是淡出

$(document).ready(function(){//设置jQuery的入口代码
//点击按钮让图片 淡入-->淡出 淡出-->淡入$('#btn09').click(function(){$('img').fadeToggle(1000,function(){alert('fadeToggle函数执行完毕')})//执行fadeToggle函数让图片显示 第一个参数是多少毫秒显示(单位是毫秒) //第二个参数是回调函数(当函数执行完毕时触发的回调函数)})
})
// fadeToggle 让元素慢慢的淡入或者让元素慢慢的淡出
// 最终状态是display:block-->display:none display:none-->display:block
// 图片淡出或者是淡入改变了图片的什么属性
// 改变的是 opacity属性

fadeTo让元素淡入到指定的某个值

$(document).ready(function(){//设置jQuery的入口代码
// 点击按钮改变指定图片的opacity值$('#btn10').click(function(){$('img').fadeTo(1000,0.5,function(){alert('fadeTop函数执行完毕')});//执行fadeTo函数让图片到指定的opacity值//第一个参数是多少毫秒显示(单位是毫秒)// 第二个参数是改变元素的指定opacity值 //第三个参数是回调函数(当函数执行完毕时触发的回调函数)})
})
// fadeTo 改变元素的指定opacity值
// 最终状态是opacity:指定的值(不会display none)
// 指定图片淡入改变了图片的什么属性
// 改变的是 opacity

fadeOut 和 fadeIn 和 fadeToggle 这三个属性接收的参数是

第一个参数是秒数(多少毫秒之内完成)
第二个参数是指定切换效果默认是swing 可用参数是linear(表示匀速) 这个参数不常用
第三个参数是回调函数(在动画完成时执行的函数，每个元素执行一次)

fadeTo函数接收的参数是

第一个参数是秒数(多少毫秒之内完成)
第二个参数是人为指定到元素的opacity值
第三个参数是指定切换效果默认是swing 可用参数是linear(表示匀速) 这个参数不常用
第四个参数是回调函数(在动画完成时执行的函数，每个元素执行一次)

自定义

基本的HTML布局

<div id="box"><img src="./1.jpg" alt=""><img src="./1.jpg" alt=""><img src="./1.jpg" alt="">
</div>
<button id="btn01">animate</button>
<button id="btn02">stop</button>
<button id="btn03">finsih</button>

基本的css样式

    <style>*{margin:0;padding: 0;}#box{border:solid;}img{position:relative;width:300px;padding:20px;margin:20px;border:20px solid blue;background:rgba(255,255,0,1);}button{font-size: 20px;}</style>

animate自定义动画

$(document).ready(function(){//设置jQuery入口代码$('#btn01').click(function(){//自定义animate函数表示你可以自己定义基本的css属性//animate里面放置一个{}可以设置动画的属性$('img').animate({//第一个参数设置动画的属性height:100,width:100,left:100,top:100,opacity:0.2,},1000);//第二个参数是秒数(多少毫秒之内完成)//animate函数可以修改 width height left top opacity 无法修改css3的属性})
})

stop停止动画

$(document).ready(function(){//设置jQuery的入口代码
//点击按钮时让动画停止$('#btn02').click(function(){$('img').stop();//stop函数表示让一个动画停止(停止动画)})
})

delay 延迟动画

 $(document).ready(function(){//设置jQuery的入口代码//点击按钮时让动画延迟1秒钟执行$('#btn03').click(function(){$('img').delay(1000).animate({left:100,width:100,},1000)//可以理解为delay函数是对某些动画的修饰//当前animate是一个动画他能让width值发送变换所需时间是1秒//但是我用delay函数延迟1秒在执行动画(不可以把delay函数写在动画后面)})})

finish 让动画立马结束

$(document).ready(function(){//设置jQuery的入口代码
//点击按钮时让动画立马结束$('#btn04').click(function(){$('img').finish();//finish函数表示让一个动画立马结束(结束动画)})
})

/**   stop  停止动画*   delay 延迟动画  写在某个动画的前面 让delay后面的动画延迟执行*   finish 让动画立马结束* */

console.log($.fx.interval);jQuery的动画是每13帧执行动画的(1秒钟是有13个动画的)

核心函数

核心函数是一些不是操作DOM的元素叫做核心函数

index函数查询当前集合中的索引位置

$(document).ready(function(){//设置jQuery入口代码$('li').click(function(){console.log(this)//this ---> li(事件绑定谁那么this就执行谁)// jQuery提供了一个函数让你知道点击了第几个liconsole.log($(this).index())//index函数可以获取到当前li元素的索引位置console.log($(this).first().index())//查询第一个li的索引位置console.log($(this).last().index())//查询最后一个li的索引位置// index函数表示查看节点在父元素(当前集合)的索引位置})
})

each表示遍历jQuerydom

$(document).ready(function(){//设置jQuery入口代码$('li').click(function(){//each作用是遍历选中的li$('li').each(function(index,ele){console.log(index,ele)})//第一个参数表示每次遍历li的索引项//第二个参数表示每次遍历li的原生dom})
})

length属性表示获取当前集合中的length长度

$(document).ready(function(){//设置jQuery入口代码//节点.length 表示当前集合中的length长度console.log($('li').length)
})

get函数表示把jQuerydom转换成原生dom

$(document).ready(function(){//设置jQuery入口代码
//我们是可以把原生dom转换成jQuerydom的console.log($(document))//就可以转换成jQuery dom了// 那么jQuerydom如何转换成原生dom呢？？// 方法一console.log($('li')[1])//在jQuerydom中写上[索引项]就可以转换成原生dom了// 方法二console.log($('li').get(2));//jQuerydom.get(索引项)就可以转换成原生dom了console.log($('li')[1]===$('li').get(1));//这两种转换成原生dom的方法是等价的console.log($('li').get())//get()函数执行不传参数 可以得到原生dom组成的纯数组
})

总结

  /**   节点.index()  查看节点在父元素的索引**   节点.each(回调函数)*       回调函数的参数  index ele(原生dom)**   节点.length：表示获取当前集合中的length长度* *  节点.get(索引)    ==>  节点[索引]*       获取索引位置的原生dom*       get()  不传参数 可以得到原生dom组成的纯数组* */