$("div").addClass(function(index,className)的className从哪里来。
如题 $("div").addClass(function(index,className ) 的className从哪里来。是什么意思?求解答下,指代哪个,怎么看,
如题 $("div").addClass(function(index,className ) 的className从哪里来。是什么意思?求解答下,指代哪个,怎么看,
2016-05-27
$("div").addClass(function(index,className)
咱们把这条代码分三部分,逐步执行.
第一步,使用$("div")先获取了所有div.
第二步其实就是添加了一个函数用于判断.
className从哪里来。是什么意思?
function(index,className)引入的是2个参数.className就是作为函数的一个参数传进来的.
index就是在第一步$("div")获取了所有div的基础上,给每个div的index位置,.第一个div的index为0.
className指代的就是每个div对应的原始类名.
第三步才是实现jQ添加新类
咱们再把html源码调整下,这样看着直观些.你会发现一共就六个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)
参数的威力就体现在这里,我们只需要传入index和className两个参数,函数就会自动去实现匹配.
具体说,
当参数index是0,那么函数会自动获取第一个div,className参数就用来指代它的类名"left"
当参数index是1,那么函数会自动获取第二个div,className参数就用来指代它的类名"aaron"
当参数index是5,那么函数会自动获取第六个div,className参数就用来指代它的类名"bb cc imooc"
参数本身有自己的命名规范.但更重要的是它们的执行顺序是有先后的.
比如function中我们分别传如了index和className两个参数,
那么if语句中先出现的-1就是对应index而不是className.
题主你可以试一下把index改成其它名称,只要没有违反参数命名规范,是没有问题的.
但是如果在function函数中传入的参数名为className,那么if语句中调用这个参数时也必须使用className,一字都不能差,大小写都有讲究.
后面的if(-1 !== className.indexOf('imooc'))
其实就是在判断
'imooc'字符串是否作为某个div的类名的一部分,如果有,则继续执行语句添加新样式.
看下上面的html源码会发现, 其实只有第五和第六个div的类名是"bb cc imooc", 类命中包含了'imooc'字符串, 因此会被添加新样式imoocClass从而改变背景颜色.
题主你可以给第一个和第四个div增加imooc类名试试,你会发现作为包裹层它们也会被添加新样式.
举报