为什么jQuery .addClass()可能比直接修改HTML更有用

时间:2015-09-03 14:41:14

标签: javascript jquery html

我真的很喜欢jQuery,当遇到这两种方法时,我不知道为什么它有用。

.addClass() and .removeClass() 

是的,我可以在js文件中添加该类。但为什么会有益呢?是因为我们不想修改HTML吗?

我的情况:

在HTML中:

 <div id="title" class="highlighted">I'm highlighted!</div>

在CSS中:

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}

如果我想将.highlighted添加到HTML中的任何div,我只需添加如下:

<div id="text" class='highlighted'>Highlight me, too!</div> 

为什么我需要在我的js文件中执行此操作?

 $('#text').addClass('highlighted');

3 个答案:

答案 0 :(得分:4)

因为你可能想在其他事情发生时添加Class,也许是在点击div时。

$("#text").click(function(){
    $(this).addClass('highlighted')
})

答案 1 :(得分:0)

当您尝试动态添加/删除元素可能不具有的类时,addClass()/removeClass()方法会派上用场。

当我们选择一个元素而你想添加一个突出显示的类来传达一个选择时,这会派上用场。当您想要在良好的用户交互时改变现状时,这是一个很好的工具,因此您可以根据他们的选择立即向用户返回反馈。

答案 2 :(得分:0)

您可以使用addClass和removeClass来动态创建元素,动画效果或作为事件的结果。

动态创建元素:  例如,如果单击在页面上创建div的按钮。也许以后你需要在div中应用一个类。

动画效果 您可以使用addClass为元素的位置和颜色设置动画。我脑海中的一个例子是视差滚动网站,当您到达某个位置时,会应用效果。此外,当向上滚动以反转效果时,可以调用removeClass。

活动结果: 将单击事件添加到添加类以更改元素颜色,字体大小等的按钮