用css设置样式,后面跟着的函数到底是什么意思。
不知道你哪里不明白,所以我说的详细些。
$('.sixth').css("width",function(index,value){
//value带单位,先分解
value = value.split('px');
//返回一个新的值,在原有的值上,增加50px
return (Number(value[0]) + 50) + value[1];
})
首先说一下这个回调函数。
可以看一下w3school中的教程,http://www.w3school.com.cn/jquery/css_css.asp
这个函数接受两个参数,index 为元素在对象集合中的索引位置,value 是原先的属性值。
这两个参数都是选填的,如果函数中不需要用到也可以不写,比如css("width",function(){函数主体})。
然后这两个参数的名字也不是固定的,可以自己命名,比如这样写css("width",function(i,val){函数主体})或者css("width",function(a,b){函数主体}),当然,你不能使用JS自己的保留字来命名,比如in就是保留字,第一个参数你可以用i,ind,inde,index,但是不能用in。
这个函数是JQUERY提供的,所以只要使用就会自动给index和value提供值。
index 为元素在对象集合中的索引位置。这里他的对象$('.sixth')是唯一的(class=sixth的div元素)。但在有些情况下class=sixth的div元素可能会有好几个,所以$('.sixth')可以是个div的集合,这时就需要index索引来区别这些div。
value就是这些div的width属性的值。
index和value都是一一对应于他们的div元素的。然后这个函数会按照索引index从第一个div(index=0)开始逐个设置他们的value值,楼主可以理解为这个函数会执行好几遍。这是在div元素有多个的情况下。
然后是这个函数的主体部分。
function(index,value){
value = value.split('px');
return (Number(value[0]) + 50) + value[1];
}
这个函数的作用是返回一个值,就是return,令x= (Number(value[0]) + 50) + value[1],就是return x;这个x就是返回的值。
所以楼主可以这样理解,x=function(index,value){ 函数主体},这样就变成了$('.sixth').css("width",x)。这样就很好理解了吧。
split是一个自带的函数,作用是分割字符串,JavaScript的教程中应该有讲过的。这里假设width的值value是50px,就是value="50px",那么value=value.split('px')的结果是一个数组("50",""),以px为分界,value[0]="50",value[1]="",这是一个空字符串,因为px后面什么都没有了。
因为value[0]是字符串类型,所以前面加上一个函数将他转变为整数型,就是number(value[0]) = 50,;然后再加上数字50, (Number(value[0]) + 50);然后再加上value[1],就是(Number(value[0]) + 50) + value[1],这里value[1]是空字符串,就算不加对结果也没有影响。
然后就返回(Number(value[0]) + 50) + value[1]的值, return (Number(value[0]) + 50) + value[1];
以上是我个人的理解,我也还是在学JQUERY的学生,有错误的地方请指正,谢谢
有个部分理解错误了,竟然说value[0]代表的是(class="six")中的第一个div,你怎么又把后来当成字符串来理解。
嗦得死内,哟西