为了账号安全,请及时绑定邮箱和手机立即绑定

$("div").addClass(function(index,className)的className从哪里来。

如题  $("div").addClass(function(index,className )  的className从哪里来。是什么意思?求解答下,指代哪个,怎么看,

正在回答

7 回答

首先,className只是一个函数参数  他代表一类东西 如  css样式的类名。

其次,含参函数有什么作用。 简单来说  function abs(){

alert("哈哈")  

}

这个函数的作用是弹出哈哈字样的对话框 现在我们给它加个参数n 变为 function abs(n){

alert(n)

}

现在这个函数 就可以支持所有以对话框形式弹出的一类事件。如 abs("哈哈哈哈哈")

0 回复 有任何疑惑可以回复我~
#1

一切太突然3125650 提问者

非常感谢!
2016-05-27 回复 有任何疑惑可以回复我~
#2

一切太突然3125650 提问者

好吧,还是不太明白,不过还是谢谢了
2016-05-27 回复 有任何疑惑可以回复我~
#3

慕娘9282524 回复 一切太突然3125650 提问者

你学了370+小时了。。 不能不懂吧。。
2016-05-27 回复 有任何疑惑可以回复我~
#4

一切太突然3125650 提问者 回复 慕娘9282524

是吗,嘿嘿,挂机时间就变这么长了。对这种逻辑的有点转不过来,让我自己设计一段程序要么没思路要么想不出来,头晕哎。
2016-05-29 回复 有任何疑惑可以回复我~
查看1条回复

这个函数为什么会执行??

0 回复 有任何疑惑可以回复我~

    $("div").addClass(function(index,className) {
            alert(index+"  "+className)
            //找到类名中包含了imooc的元素
            if(-1 !== className.indexOf('imooc')){
                //this指向匹配元素集合中的当前元素
                $(this).addClass('imoocClass')
            }
        });


把黑体的加上,看效果,很容易明白。函数里面在自动遍历获取进来的所有div

0 回复 有任何疑惑可以回复我~

$("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类名试试,你会发现作为包裹层它们也会被添加新样式.


10 回复 有任何疑惑可以回复我~
#1

周磊磊磊

哦哦 这样 牛皮
2017-08-09 回复 有任何疑惑可以回复我~
#2

新手村上路

最通俗易通
2019-01-12 回复 有任何疑惑可以回复我~

$("div").addClass(function(index,className)的className

className可以改成任何字符  按你的习惯  如:abc  hahaha  apple  banana   oldclassName

1 回复 有任何疑惑可以回复我~
#1

一切太突然3125650 提问者

谢谢,现在已经明白这玩意了
2016-12-09 回复 有任何疑惑可以回复我~

className参数为这个div原先上的class属性值

0 回复 有任何疑惑可以回复我~
#1

一切太突然3125650 提问者

是哪个属性值 <div class="right"> <div class="aa bb imooc"> <article> <p>imoocClass</p> </article> </div> <div class="bb cc imooc "> <article> <p>imoocClass</p> 第一个还是第二个class?classname的作用是什么?
2016-05-27 回复 有任何疑惑可以回复我~

className参数为这个对象原先的class属性值

0 回复 有任何疑惑可以回复我~
#1

一切太突然3125650 提问者

是哪个属性值 <div class="right"> <div class="aa bb imooc"> <article> <p>imoocClass</p> </article> </div> <div class="bb cc imooc "> <article> <p>imoocClass</p> 第一个还是第二个class?classname的作用是什么?
2016-05-27 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

$("div").addClass(function(index,className)的className从哪里来。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信