1.样式操作

　　

2.css-dom操作

　　

3.程序

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title></title>

 <style type="text/css">

     * {

         margin: 0;

         padding: 0;

     }

     body {

         font-size: 12px;

         text-align: center;

     }

     a {

         color: #04D;

         text-decoration: none;

     }

     a:hover {

         color: #F50;

         text-decoration: underline;

     }

     .SubCategoryBox {

         width: 600px;

         margin: 0 auto;

         text-align: center;

         margin-top: 40px;

     }

     .SubCategoryBox ul {

         list-style: none;

     }

     .SubCategoryBox ul li {

         display: block;

         float: left;

         width: 200px;

         line-height: 20px;

     }

     .showmore {

         clear: both;

         text-align: center;

         padding-top: 10px;

     }

     .showmore a {

         display: block;

         width: 120px;

         margin: 0 auto;

         line-height: 24px;

         border: 1px solid #AAA;

     }

     .showmore a span {

         padding-left: 15px;

         background: url(img/down.gif) no-repeat 0 0;

     }

     .promoted a {

         color: #F50;

     }

 </style>

 <script type="text/javascript" src="scripts/jquery-1.3.1.js"></script>

 <script type="text/javascript">

     $(function() {

         //1. hasClass(): 某元素是否有指定的样式

         alert($("div:first").hasClass("SubCategoryBox")); //true

         //2. 移除样式

         $("div:first").removeClass("SubCategoryBox");

         alert($("div:first").hasClass("SubCategoryBox"));

         //3. 添加样式

         $("div:first").addClass("SubCategoryBox");

         //4. 切换样式: 存在, 则去除; 没有, 则添加.

         $(".showmore").click(function() {

             $("div:first").toggleClass("SubCategoryBox");

             return false;

         });

         //5. 获取和设置元素透明度: opacity 属性

         alert($("div:first").css("opacity"));

         $("div:first").css("opacity", 0.5);

         //6. width 和 height

         alert($("div:first").width());

         alert($("div:first").height());

         $("div:first").width(400);

         $("div:first").height(80);

         //7. 获取元素在当前视窗中的相对位移: offset().

         //其返回对象包含了两个属性: top, left. 该方法只对可见元素有效

         alert($("div:first").offset().top);

         alert($("div:first").offset().left);

     });

 </script>

 </head>

 <body>

     <div class="SubCategoryBox">

         <ul>

             <li><a href="#">佳能</a><i>(30440) </i></li>

             <li><a href="#">索尼</a><i>(27220) </i></li>

             <li><a href="#">三星</a><i>(20808) </i></li>

             <li><a href="#">尼康</a><i>(17821) </i></li>

             <li><a href="#">松下</a><i>(12289) </i></li>

             <li><a href="#">卡西欧</a><i>(8242) </i></li>

             <li><a href="#">富士</a><i>(14894) </i></li>

             <li><a href="#">柯达</a><i>(9520) </i></li>

             <li><a href="#">宾得</a><i>(2195) </i></li>

             <li><a href="#">理光</a><i>(4114) </i></li>

             <li><a href="#">奥林巴斯</a><i>(12205) </i></li>

             <li><a href="#">明基</a><i>(1466) </i></li>

             <li><a href="#">爱国者</a><i>(3091) </i></li>

             <li><a href="#">其它品牌相机</a><i>(7275) </i></li>

         </ul>

         <div class="showmore">

             <a href="more.html"><span>显示全部品牌</span></a>

         </div>

     </div>

 </body>

 </html>

017 jquery中对样式的操作的更多相关文章

  1. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  2. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  3. JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  4. js进阶 11-1 jquery中的页面内容操作的三个方法

    jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...

  5. jQuery中 对标签元素操作（2）

    一.属性操作 1.获取属性和设置属性 例如下jQuery代码: var $para=$("p");           //获取<p>节点 var p_txt=$par ...

  6. jquery中对 iframe的操作

    我们先看一下 JQUERY中的对像 contents() 的帮助文件 contents() 概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述: ...

  7. jquery 中json数组的操作(转）

    在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...

  8. jQuery中cookie的简单操作

    jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie. 用NuGet安装:PM>Install-Package js-cookie -Version 官网:http ...

  9. jQuery中的文档操作处理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. 【codeforces 666E】 Forensic Examination

    http://codeforces.com/problemset/problem/666/E (题目链接) 题意 给出一个主串$S$,$n$个匹配串编号从$1$到$n$.$m$组询问,每次询问主串的一 ...

  2. ASP.NET MVC学习之Log4Net配置（日志记录）

    Log4Net配置笔记---- 首先,添加对log4net.dll的引用. 在Web.config文件下的Configuration节点下添加Log4Net的配置信息: <!--Log4Net配 ...

  3. Luogu 1613 跑路（最短路径，倍增）

    Luogu 1613 跑路(最短路径,倍增) Description 小A的工作不仅繁琐,更有苛刻的规定,要求小A每天早上在6:00之前到达公司,否则这个月工资清零.可是小A偏偏又有赖床的坏毛病.于是 ...

  4. Kafka+Zookeeper+Filebeat+ELK 搭建日志收集系统

    ELK ELK目前主流的一种日志系统,过多的就不多介绍了 Filebeat收集日志,将收集的日志输出到kafka,避免网络问题丢失信息 kafka接收到日志消息后直接消费到Logstash Logst ...

  5. Java基础-SSM之mybatis多对多关联

    Java基础-SSM之mybatis多对多关联 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.准备测试环境(创建数据库表) 1>.创建teas,stus,links表 u ...

  6. 鸟哥的Linux私房菜——第八章

    参考鸟哥的Linux私房菜内容,我只是简单的记录比较重要的知识点,所以排版没怎么注意,如果写的太严肃小白也看不进去吧. 看视频!这篇文章只作为备忘录 视频链接:http://www.tudou.com ...

  7. Spark记录-spark介绍

    Apache Spark是一个集群计算设计的快速计算.它是建立在Hadoop MapReduce之上,它扩展了 MapReduce 模式,有效地使用更多类型的计算,其中包括交互式查询和流处理.这是一个 ...

  8. bzoj千题计划282：bzoj4517: [Sdoi2016]排列计数

    http://www.lydsy.com/JudgeOnline/problem.php?id=4517 组合数+错排公式 #include<cstdio> #include<ios ...

  9. 转自知乎大神---什么是 JS 原型链？

    我们知道 JS 有对象,比如 var obj = { name: 'obj' } 我们可以对 obj 进行一些操作,包括 「读」属性 「新增」属性 「更新」属性 「删除」属性 下面我们主要来看一下「读 ...

  10. 移动端网页开发 meta 之 viewport

    这几天在搞微信公众平台,涉及到几个页面要写,可是当我测试时发现和想象中不太一样,于是去找了几个页面看了下,发现他们页面头部有 meta viewport 的标签,所以去找了下网上的资料,发现千篇一律, ...