jQuery属性和方法

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(),哲学不一样,动画正在进行,立即停止手上的动画,执行新的命令

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,125评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,293评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,054评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,077评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,096评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,062评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,988评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,817评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,266评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,486评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,646评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,375评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,974评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,621评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,642评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,538评论 2 352

推荐阅读更多精彩内容

  • 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css...
    老夫撩发少年狂阅读 1,089评论 0 2
  • 第1章 动画基础隐藏和显示 1-1 jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置c...
    mo默22阅读 752评论 0 8
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 655评论 0 3
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 715评论 0 9
  • (续jQuery基础(2)) 四、动画篇 第1章 动画基础隐藏和显示 (1)隐藏元素的hide方法 让页面上的元素...
    凛0_0阅读 457评论 0 6