jQuery属性和方法

2017-10-24  本文已影响0人  3c58eba4eb74

1.序列与迭代

  eq()方法:

            eq()是用来精确选择某个序列中的某个元素,如下:

现在我们想选择box2里面的1号下标的p:

index()方法:

        index()返回这个元素在亲兄弟中的排名,无视选择器怎么选。如下:

        $(this).index()是一个很常见的写法,表示触发这个事件的元素,在自己亲兄弟中的排名:

    each()方法:

            each()表示遍历节点,也叫作迭代符合条件的节点。举个栗子:

                            $("p").each(function(i){

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

                             });

        each()语句就好比派出一个侦察兵,挨家挨户去敲门,敲开门之后做什么事情,写在function(){}里面,这里面的$(this)表示敲开门的这家。$(“p”)选择了页面上的所有的p,现在我们想分别为这个p设置不同的动画终点。那么each语句就很好用,会依次遍历所有的p,$(this)表示你现在正在遍历的p

size()方法和length属性:

       jQuery对象中元素的个数。

       前面$()的元素页面上一共有几个,length、size()返回的都是同一个数值,就是个数。

                          $("p").length

                          $("p").size()

get()方法

      get()方法和eq()方法基本一致,都依赖$()的序列。

      eq()返回的是jQuery对象,而get()返回的是原生JS对象。jQuery对象后面要跟着jQuery方法,原生对象后面要跟着原生属性、方法:

                   $("p").eq(2).html("web前端");

                   等价于:

                  $("p").get(2).innerHTML= "web前端";

                    等价于:

                  $("p").eq(2)[0].innerHTML= "web前端";

2.动画相关方法

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

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

             $("div").show();    //让一个本身是display:none;元素显示

             $("div").hide();     //隐藏元素display:none;

             $("div").toggle();   //切换显示状态。自行带有判断,如果可见,就隐藏;否则显示。

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

slideDown()、slideUp()、slideToggle()方法

      slideDown :下滑展开

      slideUp:上滑收回

      slideToggle :滑动切换

       slideDown()的起点一定是display:none换句话说,只有display:none的元素,才能够调slideDown()

      相反的,slideUp()的终点就是display:none;同样的,slideDown、slideUp、slideToggle里面可以写动画时间、回调函数。

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

     fadeIn()淡入

    fadeOut()淡出

    fadeTo()淡到那个数

    fadeToggle()淡出入切换

fadeIn()的起点是display:none;换句话说,只有display:none的元素,才能执行fadeIn(),如下:

    $("div").fadeIn(5000);

动画机理:

         一个display:none的元素,瞬间可见,然后瞬间变为opacity:0,往自己的opacity上变。如果没有设置opacity,就往1变。

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);

公式:

        stop(是否清除队列,是否瞬间完成当前动画)

        如果没有写true或者false,默认是false

 finish():

finish()瞬间完成所有动画队列!

            $("div").finish();

stop可以用来防止动画的积累:

连续打点语法,先清除所有的动画队列,然后执行新的动画

             $("div").stop(true).animate({"left":100},1000);

is(":animated"):

      is()方法表示身份探测,返回true、false。

      is表示“是不是”,而不是“是”

      is里面可以写筛选器:

判断点击的这个p是不是序号是奇数:

        $(this).is("p:odd")

判断点击的这个p是不是序号小于3:

      $(this).is("p:lt(3)")

还可以写

     is(":animated")

判断这个元素是否在运动中。

判断是否在运动中,可以防止动画的积累:

          if($(this).children(".dropbox").is(":animated")){

          return;

         }

只要动画正在进行,那么我不仅受更多的命令。

我们之前学习的stop(),哲学不一样,动画正在进行,立即停止手上的动画,执行新的命令

上一篇下一篇

猜你喜欢

热点阅读