一、jQuery中隐藏元素的hide方法
快捷参数：.hide("fast / slow")；
比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。
//点击buttom1 直接隐藏
$("button:first").click(function() {
$("#a1").hide();
});
//点击buttom2 执行动画隐藏
$("button:last").click(function() {
$("#a2").hide({
duration: 3000,
complete: function() {
alert('执行3000ms动画完毕')
}
})
});
二、jQuery中显示元素的show方法
$('elem').hide(3000).show(3000)：让元素执行3秒的隐藏动画，然后执行3秒的显示动画。
三、jQuery中显示与隐藏切换toggle方法
（1）基本的操作：toggle();
这是最基本的操作，处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。
（2）提供参数：.toggle( [duration ], [complete ] )；
同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。
（3）直接定位：.toggle(display)；
直接提供一个参数，指定要改变的元素的最终效果，其实就是确定是使用show还是hide方法
if ( display === true ) {
$( "elem" ).show();
} else if ( display === false ) {
$( "elem" ).hide();
}
四、jQuery中下拉动画slideDown
（1）.slideDown()：用滑动动画显示一个匹配元素；
常见的操作，提供一个动画是时间，然后传递一个回调，用于知道动画是什么时候结束
.slideDown( [duration ], [ complete ] )
或者这个duration参数被省略，那么默认使用400 毫秒的延时。
五、jQuery中上卷动画slideUp
（1）最简单的使用：不带参数：$("elem").slideUp();
（2）带参数：.slideUp( [duration ] ,[easing ] ,[complete ] );
同样可以提供一个时间，然后可以使用一种过渡使用哪种缓冲函数；最后一个动画结束的回调方法。
【注意：因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面。】
六、jQuery中上卷下拉切换slideToggle
jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素。
（1）基本的操作：slideToggle();这是最基本的操作，获取元素的高度，使这个元素的高度发生改变，从而让元素里的内容往下或往上滑。
（2）提供参数：.slideToggle( [duration ] ,[ complete ] )；同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会完成动画，然后出发回调函数。
// 点击slideToggle上下卷滚切换
$("button").click(function() {
$("#a1").slideToggle(3000)
});
七、jQuery中淡出动画fadeOut
fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果，
.fadeOut( [duration ], [ complete ] )元素时可见的，只不过是将其隐藏了。
八、jQuery中淡入动画fadeIn
（1）.fadeIn( [duration ], [ complete ] )；
①duration：指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。
②元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。
九、jQuery中淡入淡出切换fadeToggle
（1）fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。
常用语法：.fadeToggle( [duration ] ,[ complete ] );
十、jQuery中淡入效果fadeTo
（1）如果要让元素保持动画效果，执行opacity = 0.5的效果时，要如何处理？
jQuery提供了fadeTo方法，可以让改变透明度一步到位。
语法：.fadeTo( duration, opacity ,callback)
①duration参数规定时长，②opacity 参数设置不透明度， ③callback 参数是执行的函数名称。
十一、jQuery中toggle与slideToggle以及fadeToggle的比较
①toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性；②slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性；③fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换；
十二、jQuery中动画animate
（1）操作一个元素执行3秒的淡入动画：
$(elem).fadeOut(3000);
$(elem).animate({opacity:0},3000);//相对比上面的机比较精确
（2）语法：
（2-1）.animate( properties ,[ duration ], [ easing ], [ complete ] )
①properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。【注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。】
②duration时间：动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒；
③easing动画运动的算法：jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件；
④complete回调：动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发。
//④通过toggle参数切换高度，隐藏样式
$aaron.animate({
width: "toggle"
});
//③以动画的方式改变内部字体
$aaron.animate({
fontSize: "5em"
}, 2000, function() {
alert("动画 fontSize执行完毕!");
});
// ②数值的单位默认是px
$aaron.animate({
width :300,
height :300
});
// ①在现有高度的基础上增加100px
$aaron.animate({
width : "+=100px",
height : "+=100px"
});
（2-2）.animate( properties, options )
options参数：
①duration - 设置动画执行的时间；
②easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数；
③step：规定每个动画的每一步完成之后要执行的函数；
④progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念；
⑤complete：动画完成回调；
列出常用的方式：
$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
十三、jQuery中停止动画stop
动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止。
语法：
（1）.stop( [clearQueue ], [ jumpToEnd ] )；
（2）.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )；
（3）.stop(); 停止当前动画，点击在暂停处继续开始；
（4）.stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行；
（5）.stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值。
简单的说：参考下面代码：
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
①stop()：只会停止第一个动画，第二个第三个继续；（停止当前动画）
②stop(true)：停止第一个、第二个和第三个动画；（停止当前执行动画元素的所有动画行为）
③stop(true ture)：停止动画，直接跳到第一个动画的最终状态 ；（ 停止当前执行动画元素的所有动画行为，并且直接到达动画最后一帧）
十四、jQuery中each方法的应用
jQuery中有个很重要的核心方法each，大部分jQuery方法在内部都会调用each，其主要的原因的就是jQuery的实例是一个元素合集。
语法：
jQuery.each( object, callback )；
第一个参数传递的就是一个对象或者数组，第二个是回调函数。（回调函数中传入的两个参数，如果遍历的是数组，第一个参数是索引值，第二个参数是数组的值；如果遍历是对象，第一个参数是属性，第二个参数是属性值。）
jquery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。
十五、jQuery中查找数组中的索引inArray
jQuery封装了inArray()函数判断元素是否存在数组中，JavaScript却没有。
jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
语法：
jQuery.inArray( value, array ,[ fromIndex ] )；
第一个数是要找的元素，第二个是数组，第三个是开始的位置（相当于索引）；
例如：在数组中查找值是5的索引
$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4
十六、jQuery中去空格神器trim方法
jQuery.trim()函数用于去除字符串两端的空白字符；
十七、jQuery中DOM元素的获取get方法
jQuery是一个合集对象，如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到。
语法：
.get( [index ] )；
【注意：①get方法是获取的dom对象，也就是通过document.getElementById获取的对象；②get方法是从0开始索引】
第二个a元素的查找： $(a).get(1)；
负索引值参数：
get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1；
同样是找到第二元素，可以传递 $(a).get(-2) 。
十八、jQuery中DOM元素的获取index方法
.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。
语法：参数接受一个jQuery或者dom对象作为查找的条件。
.index()
.index( selector )
.index( element )
①如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置；
②如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置；
③如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1；
点击查看更多内容
2人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦