控制div属性

<style>

    .c1 {

        width:200px;

        height:200px;

        background-color: #000;

        display: block;

        margin: 0 auto;

    }

</style>

<body>

<button class="btn" value="0" >变宽</button>

<button class="btn" value="1" >变高</button>

<button class="btn" value="2" >变色</button>

<button class="btn" value="3" >隐藏</button>

<button class="btn" value="4" >重置</button>

<div class="c1"></div>

<script>

    var cArray = ['400px','400px','#0f0','none','block']

    var sArray = ['width','height','background-color','display','display']

    $(function () {

        $('button').click(function () {

            var val = this.value;

            if(val < 4){

                $('.c1').css(sArray[val],cArray[val]);

            }else{

                $('.c1').attr('style','');

            }

        })

    })

</script>

网页换肤

   <style>

        body{

            background-color:  #7DA5FF;

        }

        a{

            color:#fff;

            font-weight: bolder;

        }

        button{

            width: 30px;

            height: 30px;

        }

        .red{

            background-color: red;

        }

        .green{

            background-color: green;

        }

        .blue{

            background-color: blue;

        }

        .d1 li{

            background-color:  blue;

        }

    </style>

</head>

<body class="b1">

<div class="container d1">

    <button class="red" value="red"></button>

    <button class="green" value="green"></button>

    <button class="blue" value="blue"></button>

    <ul class="nav nav-pills">

        <li role="presentation" class="table-bordered"><a href="#">Home</a></li>

        <li role="presentation"><a href="#">Profile</a></li>

        <li role="presentation"><a href="#">Messages</a></li>

    </ul>

</div>

<script src="js/jquery-3.2.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script>

    $(function () {

        var color = {

                'red':'#FF76A0',

                'green':'#658066',

                'blue':'#7DA5FF'

            };

        $('button').click(function () {

            var val = this.value;

            $('body').css('background',color[val]);

            console.log(color[val]);

            $('.d1>ul>li').css('background',val);

        })

    })

</script>

函数接收参数并弹出

    <style>

        div{

            width:30%;

            margin: 15px auto;

        }

        .btn{

            margin: 0 auto;

            cursor:pointer;

        }

    </style>

</head>

<body>

<div class="container">

        <div><input type="text" class="city form-control"></div>

        <div><input type="text" class="district form-control"></div>

        <div><button class="btn btn-primary pull-right">提交</button></div>

</div>

<script src="js/jquery-3.2.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script>

    $('button').click(function () {

        var city = $('.city').val();

        var district = $('.district').val();

        alert(city);

        alert(district);

    })

</script>
用循环将三个div变色
<style>

        .d1{

            margin: 10px auto;

            width: 370px;

        }

        .d2{

            width: 100px;

            height: 100px;

            background-color:#fff;

            margin: 0 5px;

            display: inline-block;

            border:1px solid black;

        }

    </style>

</head>

<body>

    <div class="container" style="margin: 0 auto; width: 102px;">

        <button class="b1">点我变色</button>

    </div>

    <div class="container d1">

        <div class="d2"></div>

        <div class="d2"></div>

        <div class="d2"></div>

    </div>

<script src="js/jquery-3.2.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>

    <script>

        $(".b1").on("click",function () {

            var $divEle = $(".d2");

            console.log($divEle);

            $.each($divEle,function (i) {

                $($divEle[i]).css("background","red");

            })

        })

    </script>
鼠标移入/移出改变样式
<style>

        .d1{

            margin: 0 auto;

            width: 200px;

            height: 200px;

            border: 20px solid #000;

            color: #fff;

            background-color: #000;

        }

        .d2{

            border: 20px solid red;

            color: red;

            background-color: #eee;

        }

    </style>

</head>

<body>

    <div class="d1">

        <p>鼠标移入改变样式,鼠标移出恢复</p>

    </div>

<script src="js/jquery-3.2.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>

    <script>

        var $divEle = $(".d1");

        $divEle.on("mouseover",function () {

            $divEle.addClass("d2");

        })

        $divEle.on("mouseout",function () {

            $divEle.removeClass("d2");

        })

    </script>
记住密码提示框
 <style>

        .d1{

            margin: 0 auto;

            width: 150px;

        }

    </style>

</head>

<body>

    <div class="d1">

        <input type="checkbox" value=""> 两周内自动登录

    </div>

    <script src="js/jquery-3.2.1.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script>

        var $divEle = $(".d1");

        var pEle = document.createElement("p");

       $divEle.on("mouseover",function () {

            $(pEle).text("为了您的信息安全,请不要在网吧或公用电脑上使用此功能!").css({"background": "yellow",

                "border": "1px solid red"});

            $divEle.append(pEle);

        })

        $divEle.on("mouseout",function () {

            $divEle.children("p").remove();

        })

    </script>

js项目练习第一课的更多相关文章

  1. vue.js学习（第一课）

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  2. js项目练习第二课

    百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...

  3. 2月4号学习的一个SSM整合项目，第一课

    本文引自:https://github.com/Sunybyjava/seckill  原作者:sunybyjava@gmail.com seckill 一个整合SSM框架的高并发和商品秒杀项目,学习 ...

  4. js学习笔记第一课（js基础知识）

    1.js代码在浏览器中执行. 2.js代码直接插入网页中需包含在 <script language="javascript"> js代码 </script> ...

  5. 如何用webgl(three.js)搭建一个3D库房-第一课

    今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...

  6. CODING DevOps 微服务项目实战系列第一课，明天等你

    CODING DevOps 微服务项目实战系列第一课<DevOps 微服务项目实战:DevOps 初体验>将由 CODING DevOps 开发工程师 王宽老师 向大家介绍 DevOps ...

  7. 《p5.js创意游戏编程》第一课：跳动的小球

    准备:Hbuilder/vscode等可以编写网页的编辑器 如果想立刻上手也可以使用在线编译器p5.js官方在线编辑器,如果打不开也可以使用国内的一款在线编辑器jsrun编辑器,(第一课先使用jsru ...

  8. 【Web探索之旅】第二部分第一课：客户端语言

    内容简介 1.第二部分第一课:客户端语言 2.第二部分第二课预告:服务器语言 第二部分:Web编程语言和工具 大家好.上一个部分我们学习了Web的一些基本概念: 什么是Web? Internet和We ...

  9. Asp.Net Web API 2(入门)第一课

    Asp.Net Web API 2(入门)第一课   前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎 ...

随机推荐

  1. bootstrap的使用集锦

    在使用div样式的时候可以根据页面布局来调整大小 <div class="col-md-8 col-md-offset-3"># col-md-8 div所占的空间大小 ...

  2. 值得推荐的五大敏捷PHP开发框架

    各位开发者,对于在HTML中混乱使用PHP的人来说,我们给大家推荐几款PHP敏捷开发的框架,以及它们为什么能够流行. 在我们开始之前,先了解敏捷开发是个什么东东. 敏捷是一种软件开发方法,每次开发计划 ...

  3. CSS：手机页面，常用字号和布局（工作中用）

    {literal}   {/literal} 公用css .cOrange,.cOrange:visited,.cOrange > a {color: #ff7200;} .border1-to ...

  4. Springboot+ mybatis+ mysql配置@Slf4j

    spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver # 驱动 name: testDB # 配置名,可以随便写 userna ...

  5. IDL实现矢量文件裁剪栅格数据

    利用ENVI_SUBSET_VIA_ROI_DOIT函数实现矢量文件裁剪栅格数据. 测试数据:栅格文件是Mercator投影,矢量文件是Geographic坐标系 infile='F:\Temp_Da ...

  6. PCIe传输速率和可用带宽（吞吐量）计算

      版权声明:本文为博主原创文章,若要转载请保留原文链接. https://blog.csdn.net/s_sunnyy/article/details/79027379 参考:https://bai ...

  7. js学习2

    1.打开新窗体 -window.open([URL], [窗口名称], [参数字符串]) - 窗口名称: _blank:在新窗口显示目标网页 _self:在当前窗口显示目标网页 _top:框架网页中在 ...

  8. pyqt5 -——基本功能（HelloWorld）

    一. 简单窗口 这个简单的小例子展示的是一个小窗口.但是我们可以在这个小窗口上面做很多事情,改变大小,最大化,最小化等,这需要很多代码才能实现.这在很多应用中很常见,没必要每次都要重写这部分代码,Qt ...

  9. Stack类常用api

    1.构造函数 Stack只有一个默认构造函数 Stack() Stack<Integer> stack = new Stack<Integer>(); 2.常用api (1)入 ...

  10. Delphi 10.2 新特性之—TFDBatchMoveJSONWriter

    RAD Studio 10.2.2 提供从 TDataSet 映射到 JSON ,增加了对JavaScript 客户端支持. RAD Studio 10.2.2 为 FireDAC BatchMove ...