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