課程
/前端開發(fā)
/jQuery
/jQuery基礎(chǔ) (一)—樣式篇
用css設(shè)置樣式,后面跟著的函數(shù)到底是什么意思。
2016-11-09
源自:jQuery基礎(chǔ) (一)—樣式篇 3-7
正在回答
不知道你哪里不明白,所以我說的詳細(xì)些。
$('.sixth').css("width",function(index,value){
?? ??? ??? ?//value帶單位,先分解?? ??? ??? ?value = value.split('px');?? ??? ??? ?//返回一個新的值,在原有的值上,增加50px?? ??? ??? ?return (Number(value[0]) + 50) + value[1];?? ??? ?})
首先說一下這個回調(diào)函數(shù)。
可以看一下w3school中的教程,http://www.w3school.com.cn/jquery/css_css.asp
這個函數(shù)接受兩個參數(shù),index 為元素在對象集合中的索引位置,value 是原先的屬性值。
這兩個參數(shù)都是選填的,如果函數(shù)中不需要用到也可以不寫,比如css("width",function(){函數(shù)主體})。
然后這兩個參數(shù)的名字也不是固定的,可以自己命名,比如這樣寫css("width",function(i,val){函數(shù)主體})或者css("width",function(a,b){函數(shù)主體}),當(dāng)然,你不能使用JS自己的保留字來命名,比如in就是保留字,第一個參數(shù)你可以用i,ind,inde,index,但是不能用in。
這個函數(shù)是JQUERY提供的,所以只要使用就會自動給index和value提供值。
index 為元素在對象集合中的索引位置。這里他的對象$('.sixth')是唯一的(class=sixth的div元素)。但在有些情況下class=sixth的div元素可能會有好幾個,所以$('.sixth')可以是個div的集合,這時就需要index索引來區(qū)別這些div。
value就是這些div的width屬性的值。
index和value都是一一對應(yīng)于他們的div元素的。然后這個函數(shù)會按照索引index從第一個div(index=0)開始逐個設(shè)置他們的value值,樓主可以理解為這個函數(shù)會執(zhí)行好幾遍。這是在div元素有多個的情況下。
然后是這個函數(shù)的主體部分。
function(index,value){
?? ??? ??? ?value = value.split('px');?? ??? ??? ?return (Number(value[0]) + 50) + value[1];?? ??? ?}
這個函數(shù)的作用是返回一個值,就是return,令x=?(Number(value[0]) + 50) + value[1],就是return x;這個x就是返回的值。
所以樓主可以這樣理解,x=function(index,value){?函數(shù)主體},這樣就變成了$('.sixth').css("width",x)。這樣就很好理解了吧。
split是一個自帶的函數(shù),作用是分割字符串,JavaScript的教程中應(yīng)該有講過的。這里假設(shè)width的值value是50px,就是value="50px",那么value=value.split('px')的結(jié)果是一個數(shù)組("50",""),以px為分界,value[0]="50",value[1]="",這是一個空字符串,因為px后面什么都沒有了。
因為value[0]是字符串類型,所以前面加上一個函數(shù)將他轉(zhuǎn)變?yōu)檎麛?shù)型,就是number(value[0]) = 50,;然后再加上數(shù)字50,?(Number(value[0]) + 50);然后再加上value[1],就是(Number(value[0]) + 50) + value[1],這里value[1]是空字符串,就算不加對結(jié)果也沒有影響。
然后就返回(Number(value[0]) + 50) + value[1]的值,?return (Number(value[0]) + 50) + value[1];
以上是我個人的理解,我也還是在學(xué)JQUERY的學(xué)生,有錯誤的地方請指正,謝謝
慕碼人5999576 提問者
有個部分理解錯誤了,竟然說value[0]代表的是(class="six")中的第一個div,你怎么又把后來當(dāng)成字符串來理解。
嗦得死內(nèi),喲西
舉報
jQuery初入開啟樣式修煉,體驗萬能的jQuery樣式集搭建網(wǎng)站布局
1 回答函數(shù)里的i是什么意思?
1 回答回調(diào)函數(shù)是什么意思
2 回答這句代碼是什么意思?關(guān)于“attr(屬性名,函數(shù)值):設(shè)置屬性的函數(shù)值”
2 回答里面的$是什么意思
1 回答看不懂這節(jié)的意思,到底要用來干嘛的
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-11-09
不知道你哪里不明白,所以我說的詳細(xì)些。
$('.sixth').css("width",function(index,value){
?? ??? ??? ?//value帶單位,先分解
?? ??? ??? ?value = value.split('px');
?? ??? ??? ?//返回一個新的值,在原有的值上,增加50px
?? ??? ??? ?return (Number(value[0]) + 50) + value[1];
?? ??? ?})
首先說一下這個回調(diào)函數(shù)。
可以看一下w3school中的教程,http://www.w3school.com.cn/jquery/css_css.asp
這個函數(shù)接受兩個參數(shù),index 為元素在對象集合中的索引位置,value 是原先的屬性值。
這兩個參數(shù)都是選填的,如果函數(shù)中不需要用到也可以不寫,比如css("width",function(){函數(shù)主體})。
然后這兩個參數(shù)的名字也不是固定的,可以自己命名,比如這樣寫css("width",function(i,val){函數(shù)主體})或者css("width",function(a,b){函數(shù)主體}),當(dāng)然,你不能使用JS自己的保留字來命名,比如in就是保留字,第一個參數(shù)你可以用i,ind,inde,index,但是不能用in。
這個函數(shù)是JQUERY提供的,所以只要使用就會自動給index和value提供值。
index 為元素在對象集合中的索引位置。這里他的對象$('.sixth')是唯一的(class=sixth的div元素)。但在有些情況下class=sixth的div元素可能會有好幾個,所以$('.sixth')可以是個div的集合,這時就需要index索引來區(qū)別這些div。
value就是這些div的width屬性的值。
index和value都是一一對應(yīng)于他們的div元素的。然后這個函數(shù)會按照索引index從第一個div(index=0)開始逐個設(shè)置他們的value值,樓主可以理解為這個函數(shù)會執(zhí)行好幾遍。這是在div元素有多個的情況下。
然后是這個函數(shù)的主體部分。
function(index,value){
?? ??? ??? ?value = value.split('px');
?? ??? ??? ?return (Number(value[0]) + 50) + value[1];
?? ??? ?}
這個函數(shù)的作用是返回一個值,就是return,令x=?(Number(value[0]) + 50) + value[1],就是return x;這個x就是返回的值。
所以樓主可以這樣理解,x=function(index,value){?函數(shù)主體},這樣就變成了$('.sixth').css("width",x)。這樣就很好理解了吧。
split是一個自帶的函數(shù),作用是分割字符串,JavaScript的教程中應(yīng)該有講過的。這里假設(shè)width的值value是50px,就是value="50px",那么value=value.split('px')的結(jié)果是一個數(shù)組("50",""),以px為分界,value[0]="50",value[1]="",這是一個空字符串,因為px后面什么都沒有了。
因為value[0]是字符串類型,所以前面加上一個函數(shù)將他轉(zhuǎn)變?yōu)檎麛?shù)型,就是number(value[0]) = 50,;然后再加上數(shù)字50,?(Number(value[0]) + 50);然后再加上value[1],就是(Number(value[0]) + 50) + value[1],這里value[1]是空字符串,就算不加對結(jié)果也沒有影響。
然后就返回(Number(value[0]) + 50) + value[1]的值,?return (Number(value[0]) + 50) + value[1];
以上是我個人的理解,我也還是在學(xué)JQUERY的學(xué)生,有錯誤的地方請指正,謝謝
2016-11-16
有個部分理解錯誤了,竟然說value[0]代表的是(class="six")中的第一個div,你怎么又把后來當(dāng)成字符串來理解。
2016-11-14
嗦得死內(nèi),喲西