控制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-treeview 如何实现全选父节点下所有子节点及反选

    转(https://www.augsky.com/992.html) 选中父节点时,父节点下所有子节点也都全部选中 1,HTML代码 <h2>TreeView Checkable</ ...

  2. C++内存泄漏检测工具

    C++内存泄漏检测工具 1.VC自带的CRT:_CrtCheckMemory   调试器和 CRT 调试堆函数 1.1用法: /************************************ ...

  3. @Override is not allowed when implementing interface method

    使用idea导入maven项目时 会出现如下报错 @Override从jdk1.5开始出现的,是用来标注方法重写:通常方法重写发生在继承父类,重写父类方法,或者实现接口,实现接口方法: @Overri ...

  4. Linux查看和修改时间、日期

    1.查看时间.日期 # date Fri Jan 11 14:04:10 CST 2019 2.修改时间 语法:date -s "时:分:秒" # date -s "17 ...

  5. spring boot tomcat 打本地包成war，通过Tomcat启动时出现问题： ZipException: error in opening zip file

    一个第三方公司提供spring boot 项目,直接启动是ok的, 但是打包成war,通过Tomcat启动,就出现 ZipException: error in opening zip file: 2 ...

  6. orcal - 分组

    执行顺序 from where group by having select order by 多表查询与分组查询的时候,查询结果相当于是一张临时表,所有的分组是在临时表操作 分组统计查询 COUNT ...

  7. 服务器硬盘--SAS盘和SATA盘

    一.SAS和SATA SATA: Serial Advanced Technology Attachment,又叫串口硬盘,是将主机总线适配器连接到硬盘的总线接口. SAS: Serial Attac ...

  8. python学习笔记---文件的操作

    数据的保存: 1.内存:常用的变量2.文件:文本内容,二进制的文件内容3.数据库: 读文件:1.要读取的文件路径一定要存在.2.打开存在的文件:open函数    参数1:文件的路径,相对的或者是绝对 ...

  9. SpringBoot多模块项目打包问题

    项目结构图如下: 在SpringBoot多模块项目打包时遇见如下错误: 1.repackage failed: Unable to find main class -> [Help 1] 解决步 ...

  10. Must practice programming questions in all languages

    To master any programming languages, you need to definitely solve/practice the below-listed problems ...