jquery中AddClass()方法要求对应的元素中不能不能有style属性设置，否则无法设置新css显示类，例如》
$("img").hover(function () { $(this).parent("td").addClass("inImg"); }, function () { $(this).parent("td").removeClass("inImg"); });css:
<style type="text/css"> .inImg { padding:10 10; border:solid 2px Red; } </style>
将无法控制下面的td元素显示：
<table style="width:104px"> <tr> <td align="center" colspan="2" style="padding:10 10; border:solid 2px gray;"> <asp:Image ID="Image1" runat="server" Width="190px" Height="190px" ImageUrl='<%# Eval("OimagePath","img/{0}") %>'/> </td> </tr>
这篇文章写得很好 jQuery学习笔记—— .addClass()/.removeClass()/.toggleClass()
记录一下自己的理解:
addClass和removeClass都是用于给某个元素来添加或者移除一个Class 传入的类名可以是多个;
代码像这样:<p id="myElement" class="myClassName">test</p>$(document).ready(function(){ $("#myElement").click(function(){ $(this).addClass("className1 className2"); }); });但是toggle会自动判断提供的类名, 如果这个类名存在, 就把这个类名删除, 如果类名不存在就添加这个类名, 代码像这样:
$("selector").toggleClass("className1 className2"); //上面表达式等于 $("selector").toggleClass("className1").toggleClass("className2");
1、当用jQuery给其中的i追加样式时
$(this).addClass('active').siblings().removeClass('active');.active的中和cont重复的样式不起作用
<div class="imgId"> <i class="cont">1</i> <i class="cont">2</i> <i class="cont">3</i> </div>2、测试，直接在i中添加active，也不起作用
<div class="imgId"> <i class="cont active">1</i> <i class="cont">2</i> <i class="cont">3</i> </div>3、排查后结果，.cont的优先级高于.active
4、这不是jQuery的问题，原生的也是一样的效果
转载于:https://www.cnblogs.com/dddbj/p/5868689.html
jQuery的属性与样式之增加样式.addClass(),删除样式.removeClass()
用于动态增加class类名
.addClass( className )方法
- .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
- .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
注意事项：
.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上简单的描述下：在p元素增加一个newClass的样式
<p class="orgClass"> $("p").addClass("newClass")那么p元素的class实际上是 class="orgClass newClass"样式只会在原本的类上继续增加，通过空格分隔
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left, .right { width: 300px; height: 120px; } .left div, .right div { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .newClass{ background: #bbffaa; } .imoocClass{ background: red; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>.addClss()方法</h2> <div class="left"> <div class="aaron"> <p>newClass</p> </div> <div class="aaron"> <p>newClass</p> </div> </div> <div class="right"> <div class="aa bb imooc"> <article> <p>imoocClass</p> </article> </div> <div class="bb cc imooc "> <article> <p>imoocClass</p> </article> </div> </div> <script type="text/javascript"> //class=left下div元素增加一个新的样式，增加背景颜色 $('.left div').addClass('newClass') </script> <script type="text/javascript"> //通过className(fucntion)方法 //这个函数返回一个或更多用空格隔开的要增加的样式名。 //接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容 //找到所有的div，然后通过addClass设置颜色，根据返回的className的判断， $("div").addClass(function(index,className) { //找到类名中包含了imooc的元素 if(-1 !== className.indexOf('imooc')){ //this指向匹配元素集合中的当前元素 $(this).addClass('imoocClass') } }); </script> </body> </html>
jQuery通过.addClass()方法可以很便捷的增加样式。如果需要样式之间的切换，同样jQuery提供了一个很方便的.removeClass()，它的作用是从匹配的元素中删除全部或者指定的class
.removeClass( )方法
- .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
- .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名
注意事项
如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left, .right { width: 300px; height: 120px; } .left div, .right div { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .newClass{ background: #bbffaa; } .imoocClass{ background: red; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>.removeClass()方法</h2> <div class="left"> <div class="aaron newClass"> <p>newClass</p> </div> <div class="aaron newClass"> <p>newClass</p> </div> </div> <div class="right"> <div class="aa bb imoocClass"> <article> <p>imoocClass</p> </article> </div> <div> <article> <p>imoocClass</p> </article> </div> </div> <script type="text/javascript"> //class=left下div元素删除newClass样式 $('.left div').removeClass('newClass') </script> <script type="text/javascript"> //.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式 $('.right > div:first').removeClass(function(index,className){ //className = aa bb imoocClass //把div的className赋给下一个兄弟元素div上作为它的class $(this).next().addClass(className) //删除自己本身的imoocClass return 'imoocClass' }) </script> </body> </html>
