悬浮变色关于对this和$(this)的理解

昨天写了一个button悬浮变类的功能。

遇到一个很傻逼的问题。发现自己有点2。这么来说一下是为什么把。

先贴代码

function changeColor(){//鼠标经过变色
    jQuery(".mouseOn").on("mouseover",function(){
        jQuery(this).children("span").addClass(jQuery(this).children("span").data("class")+"-act");
    });
    jQuery(".mouseOn").on("mouseout",function(){
        jQuery(this).children("span").removeClass(jQuery(this).children("span").data("class")+"-act");
    }); 
}

其实这个是一个很简单的一个功能。无非就是鼠标移到.mouseOn类上给他的span子类改变类而已。这是成功实现的代码。

在实现之前。我遇到一个很坑的bug。就是关于this和$(this)的问题。下面是我的dom结构。

<a class="mouseOn" href="#">
    <span class="icon-class-ss changeIcon" data-class="icon-class-ss"></span>
    <b>小学教辅</b>
</a>

刚刚开始的时候我是用的this.children...发现报错无此方法。当时觉得没啥。就换了选择器，结果发现越走越远了。于是我alert(this)发现这个结果是个链接。按理说不对啊，应该是个element才对啊。我当时被自己绕进去了。怎么都想不明白。然后继续纠结。纠结到最后经过别人的提示我才发现this是js原生的方法。它alert出来的东西，当然是a标签的属性。那么它当然是个链接。那么$(this)则是getElement得到的才是element。虽然这只是一个小小的错误。但是估计以后再面试或者其他地方还是有可能会遇到的，而且一不注意又会犯错，所以还是写一篇记录一下吧，希望以后遇到这个问题能注意一下。