jquery Css方法一步步升级

<script src="jquery-1.8.3.js"></script>

  <script type="text/javascript">

        //css 方法 一步步升级

        //1.css

       /* $(function () {

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

                $(".shang").css("font-size", "22px");

                $(".shang").css("background-color", "red");

                $(".shang").css("border", "#000 5px solid");

                $(".shang").css("opacity", "0.5");

            });

        });

        */

        //2.css

       /* $(function () {

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

                $(".shang").css("font-size", "22px").css("background-color", "red").css("border", "#000 5px solid").css("opacity", "0.5");

            });

        });

        */

        //3.css

        /* $(function () {

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

                var s =

                {

                    "font-size": "22px",

                    "background-color": "red",

                    "border": "#000 5px solid",

                    "opacity": "0.5"

                }

                $(".shang").css(s);

            });

        });

        */

        //4.css

        $(function () {

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

                $(".shang").css({

                    "font-size": "22px",

                    "background-color": "red",

                    "border": "#000 5px solid",

                    "opacity": "0.5"

                });

            });

        });

//5.css
      $(function () {
         $("input").click(function ()

{

$(".shang").css({width: function (index, value){ return ((index * 50) + 100) + "px"; },

                          "height": "100px",

                         "background-color": "red"

                       });

                });
      });

    </script>

</head>

<body>

<input type="button" value="dianji"/>

<div id="shang" class="shang">dddds

    <ul>

        <li>fasl</li>

        <li> sssss<span> span hong1</span></li>

        <li> sssss<span> span hong2</span></li>

    </ul>

</div>

</body>

复习练习（03）jquery Css方法一步步升级的更多相关文章

  1. jQuery css()方法及方法

    知识点一:jQuery css()方法 1.css()方法是什么? css()方法设置或返回被选元素的一个或多个样式属性. 2.返回CSS属性 1.$("p").css(" ...

  2. jQuery CSS()方法改变CSS样式实例解析

    转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ...

  3. jQuery CSS方法

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  4. jQuery css() 方法

    $("p").css("background-color"); $("p").css("background-color" ...

  5. jQuery 学习03——HTML：捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸

    jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...

  6. JQUERY操作css与css()方法、获取设置尺寸；

    一.jQuery addClass() 方法 向不同的元素添加 class 属性.在添加类时,您也可以选取多个元素 <style> .aa { color:red; }; </sty ...

  7. JQuery：JQuery 中的CSS()方法

    JQuery:CSS()方法jQuery css()方法:css()方法设置或返回被选元素的一个或多个样式属性.1.返回 CSS 属性如需返回指定的 CSS 属性的值,请使用如下语法:css(&quo ...

  8. javascript : 写一个类似于 jquery css() 的方法

    我们知道,jquery css() 方法可以很方便的更改DOM的样式. 但从原理上,这个并不复杂,我们完全可以自己写一个. 上代码. updateDOMStyle(DOM, obj){ Object. ...

  9. jQuery CSS 类

    通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一 ...

随机推荐

  1. ARM的一些基本概念

    MPU介绍: mpu是一个芯片,重力加速器(加速度)和陀螺仪(角速度) iic总线.在板上有iic控制器 连接着 最多128个外设,每个外设有地址,可以通信. 寄存器: cpu中的寄存器是为了加快运算 ...

  2. 【iCore3 双核心板_FPGA】例程七：基础逻辑门实验——逻辑门使用

    实验指导书及代码包下载: http://pan.baidu.com/s/1Rs18U iCore3 购买链接: https://item.taobao.com/item.htm?id=52422943 ...

  3. php对二维数组进行相关操作（排序、转换、去空白等）

    php对二维数组进行相关操作(排序.转换.去空白等) 投稿:lijiao 字体:[增加 减小] 类型:转载 时间:2015-11-04   这篇文章主要介绍了php对二维数组进行相关操作,包括php对 ...

  4. EntityFramework 实体拆分与表拆分

    摘录自https://msdn.microsoft.com/zh-cn/data/jj591617 * 将实体类型的 CLR 属性映射到数据库中的多个表(实体拆分) 实体拆分允许一个实体类型的属性分散 ...

  5. UIBezierPath类 笔记

    使用UIBezierPath类可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状.     ...

  6. 【测试分析】HTSM模型

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5508428.html 概述 HTSM全称Heuristic ...

  7. Hibernate - lazy, fetch, inverse, cascade

    Inverse是hibernate双向关系中的基本概念.inverse的真正作用就是指定由哪一方来维护之间的关联关系.当一方中指定了"inverse=false"(默认),那么那一 ...

  8. 检测中文长度gbk下2个字节

    //$str = 'fff&sdf你是sdf好fdf啊b歌hello中world';$str = 'd你b_fff是好啊歌中潺潺 ';echo chineselength($str).&quo ...

  9. 盒模型中--border

    三要素:宽border-width,形状border-style,颜色border-color <style> div{ width:300px; height:300px; backgr ...

  10. iOS,Xcod7/8,iOS使用修改点

    1.Xcod7使用修改点 2.Xcode8使用修改点 Xcod7使用修改点 1.xcode7 新建的项目,Foundation下默认所有http请求都被改为https请求. HTTP+SSL/TLS+ ...