toggle、sildeToggle以及fadeToggle的区别：

• toggle：切换显示与隐藏效果

• sildeToggle：切换上下拉卷滚效果

• fadeToggle：切换淡入淡出效果

toggle与slideToggle细节区别：

• toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

• slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

• 元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

• 元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

• 注释：隐藏的元素不会被完全显示（不再影响页面的布局）

display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到初始值

当一个隐藏动画后，高度值达到0的时候，display样式属性被设置为none，以确保该元素不再影响页面布局

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

显示与隐藏切换toggle方法：show与hide的相互切换的一个快捷方法

<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>方法</td><td>描述</td></tr><tr><td>$elem.hide()</td><td>动态隐藏</td></tr><tr><td>$('elem').hide(3000).show(3000)</td><td>让元素执行3秒的隐藏动画，然后执行3秒的显示动画</td></tr><tr><td>toggle();</td><td>如果元素是最初显示，它会被隐藏<br />如果隐藏的，它会显示出来</td></tr><tr><td>.toggle( [duration ] [, complete ] )</td><td>同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide的方法</td></tr><tr><td>.toggle(display)</td><td>直接提供一个参数，指定要改变的元素的最终效果</td></tr><tr><td>.slideDown( [duration ] [, complete ] )</td><td>用滑动动画显示一个匹配元素</td></tr><tr><td>$("elem").slideUp();</td><td>找到元素的高度，然后采用一个下滑动画让元素一直滑到隐藏，当高度为0的时候，也就是不可见的时，修改元素display 样式属性被设置为none。这样就能确保这个元素不会影响页面布局了</td></tr><tr><td>.slideUp( [duration ] [, easing ] [, complete ] )</td><td>因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面，这里要特别注意</td></tr><tr><td>slideToggle();</td><td>这是最基本的操作，获取元素的高度，使这个元素的高度发生改变，从而让元素里的内容往下或往上滑。</td></tr><tr><td>.slideToggle( [duration ] ,[ complete ] )</td><td>同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会完成动画，然后出发回调函数</td></tr><tr><td>fadeOut()</td><td>用于隐藏所有匹配的元素，并带有淡出的过渡动画效果</td></tr><tr><td>.fadeIn( [duration ], [ complete ] )</td><td>duration：指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)，元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。</td></tr><tr><td>.fadeToggle( [duration ] ,[ complete ] )</td><td>fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。</td></tr><tr><td>.fadeTo( duration, opacity ,callback)</td><td>必需的 duration参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。</td></tr><tr><td>.animate( properties ,[ duration ], [ easing ], [ complete ] )<br /></td><td>properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只用动画效果的。注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。</td></tr><tr><td>duration时间：动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒；easing动画运动的算法：jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件；complete回调：<br />动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发</td><td><br /></td></tr><tr><td>.animate( properties, options )</td><td>duration - 设置动画执行的时间<br />easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数<br />step：规定每个动画的每一步完成之后要执行的函数<br />progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念<br />complete：动画完成回调                                                                                              如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次</td></tr><tr><td>.stop( [clearQueue ], [ jumpToEnd ] )<br />.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )</td><td>.stop(); 停止当前动画，点击在暂停处继续开始<br />.stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行<br />.stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值</td></tr><tr><td>jQuery.each(array, callback )<br />jQuery.each( object, callback )</td><td>each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，通过回调函数返回内部迭代的一些参数，第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同</td></tr><tr><td>jQuery.inArray( value, array ,[ fromIndex ] )</td><td>传递一个检测的目标值，然后传递原始的数组，可以通过fromIndex规定查找的起始值，默认数组是0开始，如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断</td></tr><tr><td>jQuery.trim()</td><td>用于去除字符串两端的空白字符</td></tr><tr><td>.get( [index ] )</td><td>注意2点<br />get方法是获取的dom对象，也就是通过document.getElementById获取的对象<br />get方法是从0开始索引<br />所以第二个a元素的查找： $(a).get(1)<br />负索引值参数<br />get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1<br />同样是找到第二元素，可以传递 $(a).get(-2) </td></tr><tr><td>.index()<br />.index( selector )<br />.index( element )</td><td>如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置<br />如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置<br />如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1</td></tr></tbody></table><p><br /></p>

toggle、sildeToggle以及fadeToggle的区别：

• toggle：切换显示与隐藏效果

• sildeToggle：切换上下拉卷滚效果

• fadeToggle：切换淡入淡出效果

当然细节上还是有更多的不同点:

toggle与slideToggle细节区别：

• toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

• slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

• 元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

• 元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

• 注释：隐藏的元素不会被完全显示（不再影响页面的布局

 <ul>

        <a></a>

        <a></a>

        <li id="test1">1</li>

        <li id="test2">2</li>

        <li id="test3">3</li>

    </ul>

    <ul>

        <li id="test4">4</li>

        <li id="test5">5</li>

        <li id="test6">6</li>

    </ul>

  $span.text($("li").index()；

索引结果：2

• 如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置

$aaron.get(index)      中index可为 负值

$aaron[index]     中index 非负值

alert("值的长度：" + $.trim($("#results2").val()).length)

• 移除字符串 开始 和 结尾处 的所有换行符，空格(包括连续的空格)和制表符（tab）

• 如果这些空白字符在字符串 中间 时，它们将被  保留，不会被移除

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

if (v == "1") {

            var index = $.inArray('Aaron',['test','Aaron', 'array','慕课网']);

            $aaron.text('Aaron的索引是: '+ index)

        } else if (v == "2") {

            //指定索引开始的位置

            var index = $.inArray('a',['a','b','c','d','a','c'],2);

            $aaron.text('a的索引是: '+ index)

        } 

jQuery.each(array, callback )
jQuery.each( object, callback )

例如

$.each(arrary,function( ndex,value ))

$.each(obj,function( propertyName,value ))

 $.each(['Aaron', '慕课网'], function(index, item) {

                $aaron.append("索引=" + index + "; 元素=" + item);

            });

$.each({

                name: "张三",

                age: 18

            }, function(property, value) {

                $aaron.append("属性名=" + property + "; 属性值=" + value);

            });

1. stop()：只会停止第一个动画，第二个第三个继续

2. stop(true)：停止第一个、第二个和第三个动画

3. stop(true ture)：停止动画，直接跳到第一个动画的最终状态 

参见：

https://www.jb51.net/article/86785.htm

https://www.imooc.com/qadetail/174781?t=254991

.animate( properties, options )