1、隐藏元素的hide方法
//点击buttom1 直接隐藏
$("button:first").click(function() {
$("#a1").hide()
});
/点击buttom2 执行动画隐藏
$("button:last").click(function() {
$("#a2").hide({
duration: 3000,
complete: function() {
alert('执行3000ms动画完毕')
}
})
2、显示元素的show方法、
//点击buttom,执行3秒隐藏,执行3秒显示
$("button").click(function() {
$("#a1").hide(3000).show(3000)
});
3、显示与隐藏切换toggle方法
处理元素显示或者隐藏,因为不带参数,所以没有动画。通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。
如果元素是最初显示,它会被隐藏
如果隐藏的,它会显示出来
$("button:first").click(function() {
$(".left").toggle(3000)
});//直接show-hide动画
$("button:last").click(function() {
$(".right").toggle(3000)
});//直接hide-show动画
4、下拉动画slideDown
.slideDown()方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式下拉动画是从无到有,所以一开始元素是需要先隐藏起来的,可以设置display:none
//点击buttom,执行3秒隐藏,执行3秒显示
$("button:last").click(function() {
$("#a2").slideDown(3000,function(){
alert('动画执行结束')
})
});
5、上卷动画slideUp
//点击buttom,执行3秒隐藏,执行3秒显示
$("button:last").click(function() {
$("#a2").slideUp(3000,function(){
alert('动画执行结束')
})
});
6、上卷下拉切换slideToggle
$("button").click(function() {
$("#a1").slideToggle(3000)
});
7、淡出动画fadeOut
$("#btnFadeOut").click(function() {
$("p").fadeOut(2000, function() {
alert("隐藏完毕!");
8、淡入动画fadeIn
.fadeIn( [duration ] [, complete ] )
duration:指定过渡动画运行多长时间(毫秒数),默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。
元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。
9、淡入淡出切换fadeToggle
fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。
常用语法:.fadeToggle( [duration ] [, complete ] )
可选的 duration 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是 fadeToggle完成后所执行的函数名称。
10、淡入效果fadeTo
.fadeTo( duration, opacity [, complete ] )
必需的 duration参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。可选的 callback 参数是该函数完成后所执行的函数名称。
11、toggle与slideToggle以及fadeToggle的比较
toggle:切换显示与隐藏效果
sildeToggle:切换上下拉卷滚效果
fadeToggle:切换淡入淡出效果
toggle与slideToggle细节区别:
toggle:动态效果为从右至左。横向动作,toggle通过display来判断切换所有匹配元素的可见性
slideToggle:动态效果从下至上。竖向动作,slideToggle 通过高度变化来切换所有匹配元素的可见性
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。
元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。
12、动画animate
.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )
duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数
step:规定每个动画的每一步完成之后要执行的函数
progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念
complete:动画完成回调
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
// 数值的单位默认是px
$aaron.animate({
width :300,
height :300
});
}else if (v == "3") {
$aaron.animate({
fontSize: "5em"
}, 2000, function() {
alert("动画 fontSize执行完毕!");
});
} else if (v == "4") {
//通过toggle参数切换高度
$aaron.animate({
width: "toggle"
});
}
});
$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
13、停止动画stop
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
stop():只会停止第一个动画,第二个第三个继续
stop(true):停止第一个、第二个和第三个动画
stop(true ture):停止动画,直接跳到第一个动画的最终状态
jQuery核心
1.each方法的应用
jQuery.each(array, callback )
jQuery.each( object, callback )
第一个参数传递的就是一个对象或者数组,第二个是回调函数
$.each(["Aaron", "慕课网"], function(index, value) {
//index是索引,也就是数组的索引
//value就是数组中的值了
});
2、查找数组中的索引inArray
jQuery.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回 -1。
语法:
jQuery.inArray( value, array [, fromIndex ] )
用法非常简单,传递一个检测的目标值,然后传递原始的数组,可以通过fromIndex规定查找的起始值,默认数组是0开始
例如:在数组中查找值是5的索引
$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引:4
3、去空格神器trim方法
jQuery.trim()函数用于去除字符串两端的空白字符
这个函数很简单,没有多余的参数用法
需要注意:
移除字符串开始和结尾处的所有换行符,空格(包括连续的空格)和制表符(tab)
如果这些空白字符在字符串中间时,它们将被保留,不会被移除
4、DOM元素的获取get方法
<a>1</a><a>2</a><a>3</a>
通过jQuery获取所有的a元素合集$("a"),如果想进一步在合集中找到第二2个dom元素单独处理,可以通过get方法
语法:.get( [index ] )
注意2点
get方法是获取的dom对象,也就是通过document.getElementById获取的对象
get方法是从0开始索引
所以第二个a元素的查找: $(a).get(1)
5、DOM元素的获取index方法
.index()方法,从匹配的元素中搜索给定元素的索引值,从0开始计数。
语法:参数接受一个jQuery或者dom对象作为查找的条件
.index() 返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
.index( selector )
.index( element )
如果在一组元素上调用 .index() ,并且参数是一个DOM元素或jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置
如果参数是一个选择器, .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1