hao_2468

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
css的操作之addClass和removeClass
下面我们看看jquery对css的操作方法 addClass和removeClass

addClass
为每个匹配的元素添加指定的类名。

removeClass
为每个匹配的元素移除指定的类名。
  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. $(document).ready(function() {
  4. $("div").addClass("redborder");//当页面加载完成后给每个div标签 加上 redborder样式
  5. $("div").click(function(){
  6.    $(this).removeClass("redborder");//当鼠标单击div标签的时候 移除当前div标签的redborder样式
  7. })
  8. })
  9. //-->
  10. </SCRIPT>
  12. $("div").addClass("redborder");//当页面加载完成后给每个div标签 加上 redborder样式
  14. $(this).removeClass("redborder");//当鼠标单击div标签的时候 移除当前div标签的redborder样式
复制代码
这里我们注意$(this) 因为jquery 选择器 都是返回当前对象,通过$("div") 我们是给页面所有的div标签都绑定了click事件 而$(this) 即使当前鼠标单击的标签对象
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jquery基础教程二（demo鼠标点击事件）</title>
  6. <script language="javascript" src="jquery.js"></script>
  7. <style>
  8. .redborder{border:2px dashed #ff0000 }
  9. </style>
  10. <SCRIPT LANGUAGE="JavaScript">
  11. <!--
  12. $(document).ready(function() {
  13. $("div").addClass("redborder");
  14. $("div").click(function(){
  15.    $(this).removeClass("redborder");
  16. })
  17. })
  18. //-->
  19. </SCRIPT>
  20. </head>
  21. <body>
  22. <div>jquery基础教程二（demo鼠标点击事件）1</div>
  23. <div>jquery基础教程二（demo鼠标点击事件）2</div>
  24. </body>
  25. </html>
posted on 2010-04-01 16:57  hao_2468  阅读(505)  评论(0)  编辑  收藏  举报