序与迭代

1:eq()方法
< div class= “box”>
< p>< /p>
< p class= “teshu”>< /p>
< p class= “teshu”>< /p>
< p>< /p>
< /div>
< div class= “box2”>
< p>< /p>
< p class= “teshu”>< /p>
< p class= “teshu”>我想红< /p>
< p>< /p>
< /div>
两个div中各有4个p,让其中一个p变红。
想让box2里面的的1号下标的p:
$(’.box2 p’).eq(1);
$(‘p’).eq(5);
$(’.teshu’).eq(3);
$(’.box2 .teshu’).eq(1);
$()函数将返回一个对象队列,用eq来精确选择这个序列中的某个元素。
2:index()方法
返回这个元素在亲兄弟中的排名,无视选择器怎么选。
$(this).index()是一个很常见的写法,表示触发这个事件的元素,在自己亲兄弟中的排名:
$(’.teshu’).click(function(){
alert( $(‘this’).index());
})
对应:
点击box里面的p,让对应box2里面的p变红:
//事件监听要给box中的所有p标签
$(’.box p’).click(function(){
//有变化的是box2中对应的p
$(’.box2 p’).eq((this).index()).css(‘background-color’,‘red’);
});
注意是index()方法,不是属性。
3:each()
each表示遍历节点,也叫作迭代符合条件的节点。
each()语句就好比派出一个侦察兵,挨家挨户去敲门,敲开门之后做什么事情,写在function(){}里面,这里面的 $(this)表示敲开门的这家。
$(‘p’).each(function(){
$(this).animate({‘width’:50 * i},1000);
});

发布了80 篇原创文章 · 获赞 0 · 访问量 3469

猜你喜欢

转载自blog.csdn.net/weixin_43786904/article/details/103769640