jQuery使用addClass、removeClass、toggleClass操作class样式

最新推荐文章于 2021-05-10 08:00:07 发布

刘远山

最新推荐文章于 2021-05-10 08:00:07 发布

阅读量366

点赞数

分类专栏：前端专题学习汇总

本文链接：https://blog.csdn.net/weixin_39218464/article/details/106065429

版权

前端专题学习汇总专栏收录该内容

67 篇文章 1 订阅

订阅专栏

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
    <!-- 集成jQuery-->
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

    <style type="text/css">
	    
		 .bgtr{
		    background-color:#66ccff
		 }

	</style>

   <script type="text/javascript">

       $(function(){
	      
		    //为数据行绑定 mouseover事件
			$("tr[id]").mouseover(function(){
			     //操作数据行添加class样式
				 $(this).addClass("bgtr");
			}).mouseout(function(){
			      //操作数据行移除class样式
			     //$(this).removeClass("bgtr");
				 $(this).removeClass();
			})



			var count = 0;
			  $("p").click(function(){
			      //触发样式开发  
				  $(this).toggleClass("bgtr");
			  });
	   
	   
	   })

         
   </script>
 </head>
 <body>
 
     <p>我是p标签</p>
     -------------------------------------------------------

    <table border=1  width="100%" height="100%">
 
          <tr><th>id</th><th>书籍名称</th><th>价格</th></tr>
		  <tr id="0001"><td>1</td><td>java讲义青铜到最强王者</td><td>99</td></tr>
		  <tr id="0002"><td>2</td><td>python讲义</td><td>98</td></tr>
		  <tr id="0003"><td>3</td><td>大数据入门到放弃</td><td>97</td></tr>
		

	</table>
  
 </body>
</html>

刘远山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery使用addClass、removeClass、toggleClass操作class样式

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" conte
复制链接

扫一扫

专栏目录