jQuery中序与迭代、动画相关的方法

今天学习了jQuery中的多个大都常用的方法，接下来就结合小案例说道说道。

1. eq()方法

获取$()链式操作的对象队列中第n个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。

eq()方法.png

  

    
    

        
1
        
2
        
3
    
    

        
4
        
5就是这么6
        
6
    
 

2. index()方法

搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。
继续上一方法的html代码布局，用index()方法操作：
点击.cat1 div的p元素，.cat2 div里对应位置的p背景变红

index()方法.png

3. each()方法

each()表示遍历节点，也叫作迭代符合条件的节点。每一个匹配的元素作为上下文来执行一个函数。意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）；返回 'false' 将停止循环。

    $("p").each(function(i){
        $(this).animate({"width":50 * i},1000);
    });

each()方法.png

4. get()方法

get()方法和eq()方法基本一致，都仰赖$()的序列。
eq()返回的是jQuery对象，而get()返回的是原生JS对象。jQuery对象后面要跟着jQuery方法，原生对象后面要跟着原生属性、方法：

    $("p").eq(2).html("哈哈哈哈哈哈");
//等价于：
    $("p").get(2).innerHTML = "哈哈哈哈哈哈";
//等价于：
    $("p").eq(2)[0].innerHTML = "哈哈哈哈哈哈";

5. 内置show()、hide()、toggle()方法

show()显示、hide()隐藏、toggle()切换

    $("div").show();    //让一个本身是display:none;元素显示
    $("div").hide();    //隐藏元素display:none;
    $("div").toggle();  //切换显示状态。
                    //自行带有判断，如果可见，就隐藏；否则显示。

特别的，如果show()、hide()、toggle()里面有数值，将变为动画：

   $("div").show(1000); //此时display:none;的元素，将从左上角徐徐展开。

6. fadeIn()、fadeOut()、fadeTo()、fadeToggle()方法

fadeIn()淡入
fadeOut()淡出
fadeTo() 淡到那个数
fadeToggle() 淡出入切换

7. stop()

停止当前的animate动画，但是不清除队列，立即执行后面的animate动画：
$("div").stop(); //等价于$(“div”).stop(false,false);

停止当前的animate动画，并且清除队列，盒子留在了此时的位置：
$("div").stop(true); //等价于$(“div”).stop(true,false);

瞬间完成当前的animate动画，并且清除队列：
$("div").stop(true,true);

瞬间完成当前的animate动画，但是不清楚队列，立即执行后面的动画：
$("div").stop(false,true);

8. is(":animated")

is()方法表示身份探测，返回true、false。
is表示“是不是”，而不是“是”
比如，判断点击的这个p是不是有t这个类：

    $("p").click(function(){
        alert(   $(this).is(".t")    );
    });

---

还有很多吼，作用不错，值得逐步探究与运用！！！