jquery Css方法一步步升级

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

  1.   <script type="text/javascript">
  2.         //css 方法 一步步升级
  3.         //1.css
  4.        /* $(function () {
  5.             $("input").click(function() {
  6.                 $(".shang").css("font-size", "22px");
  7.                 $(".shang").css("background-color", "red");
  8.                 $(".shang").css("border", "#000 5px solid");
  9.                 $(".shang").css("opacity", "0.5");
  10.             });
  11.  
  12.         });
  13.         */
  14.  
  15.         //2.css
  16.        /* $(function () {
  17.             $("input").click(function () {
  18.                 $(".shang").css("font-size", "22px").css("background-color", "red").css("border", "#000 5px solid").css("opacity", "0.5");
  19.             });
  20.  
  21.         });
  22.         */
  23.  
  24.         //3.css
  25.         /* $(function () {
  26.             $("input").click(function () {
  27.                 var s =
  28.                 {
  29.                     "font-size": "22px",
  30.                     "background-color": "red",
  31.                     "border": "#000 5px solid",
  32.                     "opacity": "0.5"
  33.                 }
  34.                 $(".shang").css(s);
  35.             });
  36.         });
  37.         */
  38.         //4.css
  39.         $(function () {
  40.             $("input").click(function () {
  41.  
  42.                 $(".shang").css({
  43.                     "font-size": "22px",
  44.                     "background-color": "red",
  45.                     "border": "#000 5px solid",
  46.                     "opacity": "0.5"
  47.                 });
  48.             });
  49.         });
  50.

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

{

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

                          "height": "100px",

                         "background-color": "red"

                       });

                });
      });

  1.     </script>
  2.  
  3. </head>
  4. <body>
  5. <input type="button" value="dianji"/>
  6. <div id="shang" class="shang">dddds
  7.     <ul>
  8.         <li>fasl</li>
  9.         <li> sssss<span> span hong1</span></li>
  10.         <li> sssss<span> span hong2</span></li>
  11.     </ul>
  12. </div>
  13. </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. iframe父子页面之间相互调用元素和函数

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. css 字体超出隐藏

    height: 55px white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

  3. 在windows7下安装CentOS

    需要用到的软件 EasyBCD 设置索引菜单 PA5.2_Portable 分区助手 WinGrub 查看硬盘代号 1.使用分区助手,腾出至少4GB的空间,并格式化为fat32格式,将CentOS的I ...

  4. VirtualMachine所支持的操作

    在JDK中com.sun.tools.attach.VirtualMachine提供了一些从外部进程attach到jvm上,并执行一些操作的功能.VirtualMachine的子类HotSpotVir ...

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

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

  6. centos同步北京时间

    yum install ntp ntpdate #ntpdate -u 202.120.2.101 //写入硬件 #hwclock -w 以下是国内常见的NTP服务器 ntp.sjtu.edu.cn ...

  7. ArcGIS Server 创建站点失败

    前期解决方案中部分解决方法汇总:①安装Server时创建的ArcGIS Server Account (操作系统级别用户,默认用户名arcgis)对创建站点时新建的站点目录arcgisserver文件 ...

  8. 关于IOS的证书、App ID、设备、Provisioning Profile详述

    首先,打开developer.apple.com ,在iOS Dev Center打开Certificates, Indentifiers & Profiles认识一下基本结构.列表就包含了开 ...

  9. CSS之cssText

    更改元素样式 <div style="width:100px;height:100px;text-align:center;line-height:100px;"> T ...

  10. DNS视图以及日志压力测试

    1    访问控制列表 配置在/etc/named.conf文件的最顶端    acl innct {        192.168.1.0/24;        127.0.0.0/8;    }; ...