jQuery中DOM元素的获取index方法

 get方法是通过已知的索引在合集中找到对应的元素。

.index()方法从已知元素在合集中找到对应的索引

.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。

 参数接受一个jQuery或者dom对象作为查找的条件

eg:

<ul>
    <a></a>

    <li id="test1">1</li>
    <li id="test2">2</li>
    <li id="test3">3</li>
</ul>

$("li").index() 没有传递参数，反正的结果是1

 返回值就是jQuery对象中第一个元素相对于它同辈元素的位置,因为li前面还有a（a--0）所以是1

$("li").index(document.getElementById("test2")) //结果：1

  返回值就是传入的元素相对于原先集合的位置
也就是li在所有li中的位置，不包括a了

jQuery中DOM元素的获取get方法

用处：

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

 语法：

.get( [index ] ) (从0开始索引)

1. get方法是获取的dom对象，也就是通过document.getElementById获取的对象

负索引值参数

get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1-----(-1也就是最后一个)

jQuery中去空格神器trim方法

用处：

例如常见的登录信息的提交处理。用户的输入不一定是标准的，输入一段密码：'  1123456  "，注意了： 密码的前后会留空，这可能是用户的无心的行为，但是密码确实又没错，针对这样的行为，开发者应该要判断输入值的前后是否有空白符、换行符、制表符这样明显的无意义的输入值。

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

没有多余的参数用法

 注意：

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

jQuery中查找数组中的索引inArray

 jQuery封装了inArray()函数判断元素是否存在数组中

类似indexOf方法

jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。

语法：

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

传递一个检测的目标值----> value

然后传递原始的数组------>array

通过fromIndex规定查找的起始值，默认数组是0开始

eg:

在数组中查找值是5的索引

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

如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断

jQuery中each方法的应用

 语法

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

第一个参数传递的就是一个对象或者数组，第二个是回调函数

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

jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。

$.each(["Aaron", "慕课网"], function(index, value) {
    return false; //停止迭代
});

jQuery中停止动画stop

• .stop(); 停止当前动画，点击在暂停处继续开始
• .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
• .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)

1. stop()：只会停止第一个动画，第二个第三个继续
2. stop(true)：停止第一个、第二个和第三个动画
3. stop(true ture)：停止动画，直接跳到第一个动画的最终状态 

jQuery中动画animate(下)

.animate( properties, options )

options参数

• duration - 设置动画执行的时间
• easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
• step：规定每个动画的每一步完成之后要执行的函数
• progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
• complete：动画完成回调

其中最关键的一点就是：

如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

jQuery中动画animate (上)

 对比一下2组动画设置的区别

$(elem).fadeOut(3000)  
$(elem).animate({   
    opacity:0
},3000)

语法：

.animate( properties ,[ duration ], [ easing ], [ complete ] )

duration时间动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。easing动画运动的算法jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件complete回调动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发

所有用于动画的属性这些属性如果不是数字的将不能使用基本的jQuery功能
 background-color很明显不可以

除了定义数值，每个属性。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏
注意，CSS 样式使用 DOM 名称（比如 ""）来设置而非 CSS 名称（比如 "font-size"）。
特别注意单位，属性值的单位像素（px）,除非另有说明。

如果提供一个，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的
eg:  $aaron.animate({
                 width  : "+=100px",
                 height : "+=100px"
            });

.animate()方法允许我们在任意的数值的CSS属性上创建动画。

.animate({ })，要写{}里

jQuery中淡入效果fadeTo

fadeTo能实现由显示到任意opacity值的的隐藏

jQuery中上卷动画slideUp

不带参数

这个使用的含义就是：找到元素的高度，然后采用一个下滑动画让元素一直滑到隐藏，当高度为0的时候，也就是不可见的时，修改元素display 样式属性被设置为none。这样就能确保这个元素不会影响页面布局了

jQuery中下拉动画slideDown

.slideDown( [duration ] [, complete ] )

持续时间（duration）是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400 毫秒的延时。

• 如 果提供回调函数参数，callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组 动画整体才执行一次

• 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式
• 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

jQuery中隐藏元素的hide方法

 当提供hide方法一个参数时，.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作

<script type="text/javascript">

    $("#exec").click(function() {

        var v=$("#animation").val();

        $("#aaron").empty();

        if(v=="1"){

            $.each(['jhon','慕课'],function(i,item){

                $("#aaron").append("属性名=" + i +";属性值=" + item);

            })

        }

        else if(v == "2"){

            $.each({

                name:"李星辰",

                age:"24"

            },function(propert,value){

                $("#aaron").append("属性名" + propert + ",属性值" + value);

            });

        }

    });

    </script>

.index()

.index(selector)

.index(element)

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

• 如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置

• 如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1

DOM元素的获取：get

注意：

get方法是获取的dom对象，也就是通过document.getElementById获取的对象；

get方法是从0开始索引的。

get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1，同样是找到第二元素，可以传递$(a).get(-2)。

去空格神器：trim（）

注意：

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

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

.stop():停止动画，点击在暂停处继续开始。

.stop(true):如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值，那么在队列中的动画其余被删除并永远不会运行。

.stop(true,true):当前动画将停止，但该元素上的CSS属性会被立刻修改成动画的目标值。

toggle、slideToggle以及fadeToggle的区别：

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

slideToggle：切换上下拉卷滚效果；

fadeToggle：切换淡入淡出效果。

toggle与slideToggle细节区别：

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

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

fadeToggle方法：

fadeToggle（）方法在fadeIn（）和fadeOut（）方法之间切换。

元素是淡出显示的，fadeToggle（）会使用淡入效果显示它们。

元素是淡入显示的，fadeToggle（）会使用淡出效果显示它们。

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

fadeIn:淡入效果，内容显示，opacity是0到1；

fadeOut:淡出效果，内容隐藏，opacity是1到0；

.fadeTo(duration,opacity,callback),

淡入淡出切换fadeToggle：fadeToggle方法可以在fadeOut（）和fadeIn（）方法之间进行切换。如果元素已经淡出，则fadeToggle（）会向元素添加淡入效果。如果元素已淡入，则fadeToggle（）会向元素添加淡出效果。

淡入动画fadeIn：与fadeOut效果相反，使用上是一致的。

注意：

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

如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则是其可见。

淡出动画fadeOut：用于隐藏所有匹配的元素，并带有淡出的过渡动画效果。即通过不透明度的变化实现所有匹配元素的淡出效果，并可以在动画完成后选择地触发一个函数回调。

上卷下拉切换slideToggle：获取元素的高度，使这个元素的高度发生改变，从而让元素里的内容往下或往上滑。

注意：

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

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

上卷动画slideUp：找到元素的高度，然后采用一个下滑动画让元素一直下滑到隐藏。

下拉动画slideDown：用滑动显示一个匹配元素。通过提供动画的时间，然后传递一个回调实现动画效果。

注意：

下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display：none。

如果提供回调参数，callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是this会设成将要执行动画效果，那么要非常注意，回调函数会在一个元素执行完成动画都执行一次，而不是这组动画整体才执行一次。

基本操作：toggle（）；处理元素显示或隐藏。因为没有参数，通过改变css的display属性，匹配的元素被立即显示或隐藏，没有动画。

如果添加时间和动画结束的回调，在参数对应的时间内，元素会发生显示|隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。

show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置；

如果使用！important在你的样式中，比如display：none ！important，如果你希望.show()方法正常工作，必须使用.css('display','block !important')重写样式；

如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，宽度，透明度。

index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。

语法：参数接受一个jQuery或者dom对象作为查找的条件

.index()
.index( selector )
.index( element )

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

• 如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置

• 如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1

简单来说：

<ul>
    <a></a>
    <li id="test1">1</li>
    <li id="test2">2</li>
    <li id="test3">3</li>
</ul>

$("li").index() 没有传递参数，反正的结果是1，它的意思是返回同辈的排列循序，第一个li之前有a元素,同辈元素是a开始为0，所以li的开始索引是1

如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理

$("li").index(document.getElementById("test2")) //结果：1$("li").index($("#test2"))  //结果:1

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

以下有3个a元素结构：

<a>1</a>
<a>2</a>
<a>3</a>

通过jQuery获取所有的a元素合集$("a")，如果想进一步在合集中找到第二2个dom元素单独处理，可以通过get方法

语法：

.get( [index ] )

注意2点

1. get方法是获取的dom对象，也就是通过document.getElementById获取的对象

2. get方法是从0开始索引

所以第二个a元素的查找： $(a).get(1)

负索引值参数

get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

同样是找到第二元素，可以传递 $(a).get(-2)