017 jquery中对样式的操作

1.样式操作
2.css-dom操作
3.程序
  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></title>
  6 <style type="text/css">
  7     * {
  8         margin: 0;
  9         padding: 0;
 10     }
 11     body {
 12         font-size: 12px;
 13         text-align: center;
 14     }    
 15     a {
 16         color: #04D;
 17         text-decoration: none;
 18     }
 19     a:hover {
 20         color: #F50;
 21         text-decoration: underline;
 22     }
 23     .SubCategoryBox {
 24         width: 600px;
 25         margin: 0 auto;
 26         text-align: center;
 27         margin-top: 40px;
 28     }
 29     .SubCategoryBox ul {
 30         list-style: none;
 31     }
 32     .SubCategoryBox ul li {
 33         display: block;
 34         float: left;
 35         width: 200px;
 36         line-height: 20px;
 37     }
 38     .showmore {
 39         clear: both;
 40         text-align: center;
 41         padding-top: 10px;
 42     }
 43     .showmore a {
 44         display: block;
 45         width: 120px;
 46         margin: 0 auto;
 47         line-height: 24px;
 48         border: 1px solid #AAA;
 49     }
 50     .showmore a span {
 51         padding-left: 15px;
 52         background: url(img/down.gif) no-repeat 0 0;
 53     }
 54     .promoted a {
 55         color: #F50;
 56     }
 57 </style>
 58 <script type="text/javascript" src="scripts/jquery-1.3.1.js"></script>
 59 <script type="text/javascript">
 60     $(function() {
 61         //1. hasClass(): 某元素是否有指定的样式
 62         alert($("div:first").hasClass("SubCategoryBox")); //true
 63 
 64         //2. 移除样式
 65         $("div:first").removeClass("SubCategoryBox");
 66 
 67         alert($("div:first").hasClass("SubCategoryBox"));
 68 
 69         //3. 添加样式
 70         $("div:first").addClass("SubCategoryBox");
 71 
 72         //4. 切换样式: 存在, 则去除; 没有, 则添加. 
 73         $(".showmore").click(function() {
 74             $("div:first").toggleClass("SubCategoryBox");
 75             return false;
 76         });
 77 
 78         //5. 获取和设置元素透明度: opacity 属性
 79         alert($("div:first").css("opacity"));
 80 
 81         $("div:first").css("opacity", 0.5);
 82 
 83         //6. width 和 height
 84         alert($("div:first").width());
 85         alert($("div:first").height());
 86 
 87         $("div:first").width(400);
 88         $("div:first").height(80);
 89 
 90         //7. 获取元素在当前视窗中的相对位移: offset(). 
 91         //其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
 92         alert($("div:first").offset().top);
 93         alert($("div:first").offset().left);
 94 
 95     });
 96 </script>
 97 </head>
 98 <body>
 99     <div class="SubCategoryBox">
100         <ul>
101             <li><a href="#">佳能</a><i>(30440) </i></li>
102             <li><a href="#">索尼</a><i>(27220) </i></li>
103             <li><a href="#">三星</a><i>(20808) </i></li>
104             <li><a href="#">尼康</a><i>(17821) </i></li>
105             <li><a href="#">松下</a><i>(12289) </i></li>
106             <li><a href="#">卡西欧</a><i>(8242) </i></li>
107             <li><a href="#">富士</a><i>(14894) </i></li>
108             <li><a href="#">柯达</a><i>(9520) </i></li>
109             <li><a href="#">宾得</a><i>(2195) </i></li>
110             <li><a href="#">理光</a><i>(4114) </i></li>
111             <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
112             <li><a href="#">明基</a><i>(1466) </i></li>
113             <li><a href="#">爱国者</a><i>(3091) </i></li>
114             <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
115         </ul>
116         <div class="showmore">
117             <a href="more.html"><span>显示全部品牌</span></a>
118         </div>
119     </div>
120 </body>
121 </html>