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. android之进度条组件ProgressBar

    首先是main.xml文件 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android& ...

  2. BizTalk开发系列(十一) 在Orchestration中执行Pipeline

    由于开发需要有时要在流程中执行Pipeline.比如从DB的某个字段中取消息的字符串并在流程中构造消息.该需要通过pipeline进行升级 属性字段,验证消息等处理.BizTalk架构已经开放了此接口 ...

  3. IOS第18天(9,核心动画-动画组）

    ****动画组 // 核心动画都是假象,不能改变layer的真实属性的值// 展示的位置和实际的位置不同.实际位置永远在最开始位置 #import "HMViewController.h&q ...

  4. junit测试框架

    import junit.framework.Assert; import org.junit.After; import org.junit.Before; import org.junit.Tes ...

  5. 四个查找命令find,locate,whereis,which的区别

    find最强大,但是检索硬盘,比较慢: whereis只能查二进制文件.说明文档,源文件等: locate能查所有文件,但跟whereis一样都是查数据库里的内容,速度快,但有延时: which 只能 ...

  6. windows 快捷键

    Windows 系统 f6  在同一个应用的不同窗口进行切换 ctrl-shift 拖动,创建文件快捷方式 shift 右键点击文件 可以出现复制路径的菜单 WIN键组合键 Windows Key + ...

  7. Run P4 without P4factory - A Simple Example In Tutorials. -2 附 simple_router源码

    /* Copyright 2013-present Barefoot Networks, Inc. Licensed under the Apache License, Version 2.0 (th ...

  8. TCP/IP协议分层

    TCP/IP协议从上而下,层层包装: (1)应用层:HTTP (2)传输层:TCP和UDP (3)网络层(网际互联层):IP (4)数据连接层(网络接入层):为IP模块发送和接收IP数据报. (5)硬 ...

  9. JAVA程序改错 （易错题）

    JAVA程序改错 1. abstract class Name { private String name; public abstract boolean isStupidName(String n ...

  10. SQLSERVER20008 完整备份和差异备份

    --差异备份 DIFFERENTIAL ) ),)+'.bak' BACKUP DATABASE [testbackup] TO DISK=@name WITH DIFFERENTIAL, NOFOR ...