可以制作出以下效果：隐藏和显示、上卷下来、淡入淡出.


jQuery中隐藏元素的hide方法



$("#a1").hide(2000,function () {

                alert("123");

            });

jQuery中显示元素的show方法


$('elem').hide(3000).show(3000)


hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示


jQuery中显示与隐藏切换toggle方法

toggle用于切换显示或隐藏匹配元素

jQuery中下拉动画slideDown

下拉动画是从无到有,一开始是隐藏的。

//点击button
        //执行3秒后显示
        $("button:first").click(function() {
            $("#a1").slideDown(3000)
        });

jQuery中上卷动画slideUp

因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面，这里要特别注意



//点击button
        //执行3秒结束
        $("button:last").click(function() {
            $("#a2").slideUp(3000,function(){
                alert('动画执行结束')
            })
        });

jQuery中上卷下拉切换slideToggle



$("button").click(function() {
            $("#a1").slideToggle(3000)
        });

jQuery中淡出动画fadeOut

fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果

.val()方法，当没设置value属性时，获取的是<option>中的文本，如“ <option>慕课网</option>”获取到的是“慕课网”；
设置了value属性的话，获取到就是value的值，如“<option value=‘imooc’>慕课网</option>”获取到的是“imooc”而不是“慕课网”了。

jQuery中淡入动画fadeIn

  • 淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%

jQuery中淡入淡出切换fadeToggle

fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。

jQuery中淡入效果fadeTo


fadeIn：淡入效果，内容显示，opacity是0到1 fadeOut：淡出效果，内容隐藏，opacity是1到0



toggle、sildeToggle以及fadeToggle的区别：


  • toggle：切换显示与隐藏效果
  • sildeToggle：切换上下拉卷滚效果
  • fadeToggle：切换淡入淡出效果


jQuery中动画animate



.animate({
    left: 50, 
    width: '50px'   
    opacity: 'show',  
    fontSize: "10em"
}, 500);
  • duration - 设置动画执行的时间
  • easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
  • step：规定每个动画的每一步完成之后要执行的函数
  • progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
  • complete：动画完成回调

jQuery中停止动画stop


stop() 动画队列如果有多个动画,停止当前执行的动画,开始下一个动画


stop(true) 真正的停止,当前动画停止,队列里后续动画也不执行


stop(true,true) 当前动画动作停止，并且直接展示所有动画完成后的最终状态


jQuery中each方法的应用

$.each(["Aaron", "慕课网"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
});



回调函数中传入的两个参数，如果遍历的是数组，第一个参数是索引值，第二个参数是数组的值；如果遍历是对象，第一个参数是属性，第二个参数是属性值。

jQuery中查找数组中的索引inArray


jQuery.inArray( value, array ,[ fromIndex ] )

例子： 

$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4



jQuery中去空格神器trim方法

jQuery.trim()函数用于去除字符串两端的空白字符


  • 移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
  • 如果这些空白字符在字符串中间时，它们将被保留，不会被移除



jQuery中DOM元素的获取get方法


如果需要单独操作合集中的的某一个元素，可以通过 .get() 方法获取到


注意2点

  1. get方法是获取的dom对象，也就是通过document.getElementById获取的对象
  2. get方法是从0开始索引

区别：get方法是获取dom对象，eq方法是获取jq对象