基本的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提供了一个函数让你知道点击了第几个li
console.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组成的纯数组
* */
