$("div").addClass(function(index,className)的className從哪里來(lái)。
如題 ?$("div").addClass(function(index,className ) ?的className從哪里來(lái)。是什么意思?求解答下,指代哪個(gè),怎么看,
如題 ?$("div").addClass(function(index,className ) ?的className從哪里來(lái)。是什么意思?求解答下,指代哪個(gè),怎么看,
2016-05-27
舉報(bào)
2016-05-27
首先,className只是一個(gè)函數(shù)參數(shù) ?他代表一類(lèi)東西 如 ?css樣式的類(lèi)名。
其次,含參函數(shù)有什么作用。 簡(jiǎn)單來(lái)說(shuō) ?function abs(){
alert("哈哈") ?
}
這個(gè)函數(shù)的作用是彈出哈哈字樣的對(duì)話(huà)框 現(xiàn)在我們給它加個(gè)參數(shù)n 變?yōu)?function abs(n){
alert(n)
}
現(xiàn)在這個(gè)函數(shù) 就可以支持所有以對(duì)話(huà)框形式彈出的一類(lèi)事件。如 abs("哈哈哈哈哈")
2019-03-25
這個(gè)函數(shù)為什么會(huì)執(zhí)行??
2016-11-23
????$("div").addClass(function(index,className) {
??????????? alert(index+"? "+className)
??????????? //找到類(lèi)名中包含了imooc的元素
??????????? if(-1 !== className.indexOf('imooc')){
??????????????? //this指向匹配元素集合中的當(dāng)前元素
??????????????? $(this).addClass('imoocClass')
??????????? }
??????? });
把黑體的加上,看效果,很容易明白。函數(shù)里面在自動(dòng)遍歷獲取進(jìn)來(lái)的所有div
2016-10-07
$("div").addClass(function(index,className)?
咱們把這條代碼分三部分,逐步執(zhí)行.
第一步,使用$("div")先獲取了所有div.
第二步其實(shí)就是添加了一個(gè)函數(shù)用于判斷.
??????className從哪里來(lái)。是什么意思?
???? ?function(index,className)引入的是2個(gè)參數(shù).className就是作為函數(shù)的一個(gè)參數(shù)傳進(jìn)來(lái)的.
???? index就是在第一步$("div")獲取了所有div的基礎(chǔ)上,給每個(gè)div的index位置,.第一個(gè)div的index為0.
???? className指代的就是每個(gè)div對(duì)應(yīng)的原始類(lèi)名.
第三步才是實(shí)現(xiàn)jQ添加新類(lèi)
咱們?cè)侔裩tml源碼調(diào)整下,這樣看著直觀些.你會(huì)發(fā)現(xiàn)一共就六個(gè)div.
?<div class="left"> ? ? ? ? ? ? ? ? ? ? ? ? ??????????????????????????????????????? //index為0, 第一個(gè)div?
? ? ? ? <div class="aaron"><p>newClass</p></div> ???????? // index為1, 第二個(gè)div
? ? ? ? <div class="aaron"> ?<p>newClass</p> </div> ???? // index為2, 第三個(gè)div
? ?</div>
? <div class="right">???????????????????????????????????????????????????????????????????????????????????????????????????????? //index為3, 第四個(gè)div
? ? ? ? <div class="aa bb imooc"> <article> <p>imoocClass</p></article></div> ????//index為4, 第五個(gè)div
? ? ? ? <div class="bb cc imooc "> ?<article> <p>imoocClass</p> </article></div> ? ?//index為5, 第六個(gè)div
? ?</div>
那么你問(wèn)的是第一個(gè)還是第二個(gè)class呢?classname的作用是什么"?(注意這里classname嚴(yán)格來(lái)說(shuō)應(yīng)該是className)
參數(shù)的威力就體現(xiàn)在這里,我們只需要傳入index和className兩個(gè)參數(shù),函數(shù)就會(huì)自動(dòng)去實(shí)現(xiàn)匹配.
具體說(shuō),
當(dāng)參數(shù)index是0,那么函數(shù)會(huì)自動(dòng)獲取第一個(gè)div,className參數(shù)就用來(lái)指代它的類(lèi)名"left"
當(dāng)參數(shù)index是1,那么函數(shù)會(huì)自動(dòng)獲取第二個(gè)div,className參數(shù)就用來(lái)指代它的類(lèi)名"aaron"
當(dāng)參數(shù)index是5,那么函數(shù)會(huì)自動(dòng)獲取第六個(gè)div,className參數(shù)就用來(lái)指代它的類(lèi)名"bb cc imooc"
參數(shù)本身有自己的命名規(guī)范.但更重要的是它們的執(zhí)行順序是有先后的.
比如function中我們分別傳如了index和className兩個(gè)參數(shù),
那么if語(yǔ)句中先出現(xiàn)的-1就是對(duì)應(yīng)index而不是className.
題主你可以試一下把index改成其它名稱(chēng),只要沒(méi)有違反參數(shù)命名規(guī)范,是沒(méi)有問(wèn)題的.
但是如果在function函數(shù)中傳入的參數(shù)名為className,那么if語(yǔ)句中調(diào)用這個(gè)參數(shù)時(shí)也必須使用className,一字都不能差,大小寫(xiě)都有講究.
?后面的if(-1 !== className.indexOf('imooc'))
?其實(shí)就是在判斷
? ? ? 'imooc'字符串是否作為某個(gè)div的類(lèi)名的一部分,如果有,則繼續(xù)執(zhí)行語(yǔ)句添加新樣式.
看下上面的html源碼會(huì)發(fā)現(xiàn), 其實(shí)只有第五和第六個(gè)div的類(lèi)名是"bb cc imooc", 類(lèi)命中包含了'imooc'字符串, 因此會(huì)被添加新樣式imoocClass從而改變背景顏色.
題主你可以給第一個(gè)和第四個(gè)div增加imooc類(lèi)名試試,你會(huì)發(fā)現(xiàn)作為包裹層它們也會(huì)被添加新樣式.
2016-08-08
$("div").addClass(function(index,className)的className
className可以改成任何字符 ?按你的習(xí)慣 ?如:abc ?hahaha ?apple ?banana ? oldclassName
2016-05-27
className參數(shù)為這個(gè)div原先上的class屬性值
2016-05-27
className參數(shù)為這個(gè)對(duì)象原先的class屬性值