課程
/前端開發(fā)
/jQuery
/jQuery基礎(chǔ) (一)—樣式篇
如題 ?$("div").addClass(function(index,className ) ?的className從哪里來。是什么意思?求解答下,指代哪個,怎么看,
2016-05-27
源自:jQuery基礎(chǔ) (一)—樣式篇 3-4
正在回答
首先,className只是一個函數(shù)參數(shù) ?他代表一類東西 如 ?css樣式的類名。
其次,含參函數(shù)有什么作用。 簡單來說 ?function abs(){
alert("哈哈") ?
}
這個函數(shù)的作用是彈出哈哈字樣的對話框 現(xiàn)在我們給它加個參數(shù)n 變?yōu)?function abs(n){
alert(n)
現(xiàn)在這個函數(shù) 就可以支持所有以對話框形式彈出的一類事件。如 abs("哈哈哈哈哈")
一切太突然3125650 提問者
慕娘9282524 回復 一切太突然3125650 提問者
一切太突然3125650 提問者 回復 慕娘9282524
這個函數(shù)為什么會執(zhí)行??
????$("div").addClass(function(index,className) {??????????? alert(index+"? "+className)??????????? //找到類名中包含了imooc的元素??????????? if(-1 !== className.indexOf('imooc')){??????????????? //this指向匹配元素集合中的當前元素??????????????? $(this).addClass('imoocClass')??????????? }??????? });
把黑體的加上,看效果,很容易明白。函數(shù)里面在自動遍歷獲取進來的所有div
$("div").addClass(function(index,className)?
咱們把這條代碼分三部分,逐步執(zhí)行.
第一步,使用$("div")先獲取了所有div.
第二步其實就是添加了一個函數(shù)用于判斷.
??????className從哪里來。是什么意思?
???? ?function(index,className)引入的是2個參數(shù).className就是作為函數(shù)的一個參數(shù)傳進來的.
???? index就是在第一步$("div")獲取了所有div的基礎(chǔ)上,給每個div的index位置,.第一個div的index為0.
???? className指代的就是每個div對應的原始類名.
第三步才是實現(xiàn)jQ添加新類
咱們再把html源碼調(diào)整下,這樣看著直觀些.你會發(fā)現(xiàn)一共就六個div.
?<div class="left"> ? ? ? ? ? ? ? ? ? ? ? ? ??????????????????????????????????????? //index為0, 第一個div?
? ? ? ? <div class="aaron"><p>newClass</p></div> ???????? // index為1, 第二個div
? ? ? ? <div class="aaron"> ?<p>newClass</p> </div> ???? // index為2, 第三個div
? ?</div>
? <div class="right">???????????????????????????????????????????????????????????????????????????????????????????????????????? //index為3, 第四個div
? ? ? ? <div class="aa bb imooc"> <article> <p>imoocClass</p></article></div> ????//index為4, 第五個div
? ? ? ? <div class="bb cc imooc "> ?<article> <p>imoocClass</p> </article></div> ? ?//index為5, 第六個div
那么你問的是第一個還是第二個class呢?classname的作用是什么"?(注意這里classname嚴格來說應該是className)
參數(shù)的威力就體現(xiàn)在這里,我們只需要傳入index和className兩個參數(shù),函數(shù)就會自動去實現(xiàn)匹配.
具體說,
當參數(shù)index是0,那么函數(shù)會自動獲取第一個div,className參數(shù)就用來指代它的類名"left"
當參數(shù)index是1,那么函數(shù)會自動獲取第二個div,className參數(shù)就用來指代它的類名"aaron"
當參數(shù)index是5,那么函數(shù)會自動獲取第六個div,className參數(shù)就用來指代它的類名"bb cc imooc"
參數(shù)本身有自己的命名規(guī)范.但更重要的是它們的執(zhí)行順序是有先后的.
比如function中我們分別傳如了index和className兩個參數(shù),
那么if語句中先出現(xiàn)的-1就是對應index而不是className.
題主你可以試一下把index改成其它名稱,只要沒有違反參數(shù)命名規(guī)范,是沒有問題的.
但是如果在function函數(shù)中傳入的參數(shù)名為className,那么if語句中調(diào)用這個參數(shù)時也必須使用className,一字都不能差,大小寫都有講究.
?后面的if(-1 !== className.indexOf('imooc'))
?其實就是在判斷
? ? ? 'imooc'字符串是否作為某個div的類名的一部分,如果有,則繼續(xù)執(zhí)行語句添加新樣式.
看下上面的html源碼會發(fā)現(xiàn), 其實只有第五和第六個div的類名是"bb cc imooc", 類命中包含了'imooc'字符串, 因此會被添加新樣式imoocClass從而改變背景顏色.
題主你可以給第一個和第四個div增加imooc類名試試,你會發(fā)現(xiàn)作為包裹層它們也會被添加新樣式.
周磊磊磊
新手村上路
$("div").addClass(function(index,className)的className
className可以改成任何字符 ?按你的習慣 ?如:abc ?hahaha ?apple ?banana ? oldclassName
className參數(shù)為這個div原先上的class屬性值
className參數(shù)為這個對象原先的class屬性值
舉報
jQuery初入開啟樣式修煉,體驗萬能的jQuery樣式集搭建網(wǎng)站布局
3 回答$("div").addClass(function(index,className) {
4 回答$("div").addClass(function(index,className)?
4 回答$(this).next().addClass(className),如何理解?
4 回答.addClass( function(index, currentClass) ) : 中的index求解?
2 回答$(this).next().addClass(className)相鄰的元素沒有變紅色
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-05-27
首先,className只是一個函數(shù)參數(shù) ?他代表一類東西 如 ?css樣式的類名。
其次,含參函數(shù)有什么作用。 簡單來說 ?function abs(){
alert("哈哈") ?
}
這個函數(shù)的作用是彈出哈哈字樣的對話框 現(xiàn)在我們給它加個參數(shù)n 變?yōu)?function abs(n){
alert(n)
}
現(xiàn)在這個函數(shù) 就可以支持所有以對話框形式彈出的一類事件。如 abs("哈哈哈哈哈")
2019-03-25
這個函數(shù)為什么會執(zhí)行??
2016-11-23
????$("div").addClass(function(index,className) {
??????????? alert(index+"? "+className)
??????????? //找到類名中包含了imooc的元素
??????????? if(-1 !== className.indexOf('imooc')){
??????????????? //this指向匹配元素集合中的當前元素
??????????????? $(this).addClass('imoocClass')
??????????? }
??????? });
把黑體的加上,看效果,很容易明白。函數(shù)里面在自動遍歷獲取進來的所有div
2016-10-07
$("div").addClass(function(index,className)?
咱們把這條代碼分三部分,逐步執(zhí)行.
第一步,使用$("div")先獲取了所有div.
第二步其實就是添加了一個函數(shù)用于判斷.
??????className從哪里來。是什么意思?
???? ?function(index,className)引入的是2個參數(shù).className就是作為函數(shù)的一個參數(shù)傳進來的.
???? index就是在第一步$("div")獲取了所有div的基礎(chǔ)上,給每個div的index位置,.第一個div的index為0.
???? className指代的就是每個div對應的原始類名.
第三步才是實現(xiàn)jQ添加新類
咱們再把html源碼調(diào)整下,這樣看著直觀些.你會發(fā)現(xiàn)一共就六個div.
?<div class="left"> ? ? ? ? ? ? ? ? ? ? ? ? ??????????????????????????????????????? //index為0, 第一個div?
? ? ? ? <div class="aaron"><p>newClass</p></div> ???????? // index為1, 第二個div
? ? ? ? <div class="aaron"> ?<p>newClass</p> </div> ???? // index為2, 第三個div
? ?</div>
? <div class="right">???????????????????????????????????????????????????????????????????????????????????????????????????????? //index為3, 第四個div
? ? ? ? <div class="aa bb imooc"> <article> <p>imoocClass</p></article></div> ????//index為4, 第五個div
? ? ? ? <div class="bb cc imooc "> ?<article> <p>imoocClass</p> </article></div> ? ?//index為5, 第六個div
? ?</div>
那么你問的是第一個還是第二個class呢?classname的作用是什么"?(注意這里classname嚴格來說應該是className)
參數(shù)的威力就體現(xiàn)在這里,我們只需要傳入index和className兩個參數(shù),函數(shù)就會自動去實現(xiàn)匹配.
具體說,
當參數(shù)index是0,那么函數(shù)會自動獲取第一個div,className參數(shù)就用來指代它的類名"left"
當參數(shù)index是1,那么函數(shù)會自動獲取第二個div,className參數(shù)就用來指代它的類名"aaron"
當參數(shù)index是5,那么函數(shù)會自動獲取第六個div,className參數(shù)就用來指代它的類名"bb cc imooc"
參數(shù)本身有自己的命名規(guī)范.但更重要的是它們的執(zhí)行順序是有先后的.
比如function中我們分別傳如了index和className兩個參數(shù),
那么if語句中先出現(xiàn)的-1就是對應index而不是className.
題主你可以試一下把index改成其它名稱,只要沒有違反參數(shù)命名規(guī)范,是沒有問題的.
但是如果在function函數(shù)中傳入的參數(shù)名為className,那么if語句中調(diào)用這個參數(shù)時也必須使用className,一字都不能差,大小寫都有講究.
?后面的if(-1 !== className.indexOf('imooc'))
?其實就是在判斷
? ? ? 'imooc'字符串是否作為某個div的類名的一部分,如果有,則繼續(xù)執(zhí)行語句添加新樣式.
看下上面的html源碼會發(fā)現(xiàn), 其實只有第五和第六個div的類名是"bb cc imooc", 類命中包含了'imooc'字符串, 因此會被添加新樣式imoocClass從而改變背景顏色.
題主你可以給第一個和第四個div增加imooc類名試試,你會發(fā)現(xiàn)作為包裹層它們也會被添加新樣式.
2016-08-08
$("div").addClass(function(index,className)的className
className可以改成任何字符 ?按你的習慣 ?如:abc ?hahaha ?apple ?banana ? oldclassName
2016-05-27
className參數(shù)為這個div原先上的class屬性值
2016-05-27
className參數(shù)為這個對象原先的class屬性值