控制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. bzoj4025二分图(线段树分治 并查集)

    /* 思维难度几乎没有, 就是线段树分治check二分图 判断是否为二分图可以通过维护lct看看是否链接出奇环 然后发现不用lct, 并查集维护奇偶性即可 但是复杂度明明一样哈 */ #include ...

  2. 获取物理内存total值和used值

    1.使用 free -m 查看 2.物理内存total值 # free -m | grep Mem | awk '{print $2}' 3.物理内存used值 # free -m | grep Me ...

  3. 通过日志来看Spring跨库更新操作的事务

    场景介绍: 一个项目俩个数据源,连接俩个不同的库 数据源初始化 @Configuration @MapperScan(basePackages = "com.qing.mapper.paym ...

  4. PG数据库基本命令——查询（笔记）

    1.插入数据(insert 语句) 语法: INSERT INTO TABLE_NAME (column1, column2, column3,...columnN) VALUES (value1, ...

  5. 移动端常用UI框架

    作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率. 一.M ...

  6. Python第4天

    主要内容: 数字(int) 字符串(replace/find/join/strip/startswith/split/upper/lower/format) 列表 append/extend/inse ...

  7. python大法好——飞机大战完整吧

    # -*- coding:utf-8 -*-import pygamefrom pygame.locals import *import time '''说明1.按下b键,让玩家飞机爆炸 2.爆炸效果 ...

  8. 在虚拟机上运行zookeeper的过程中，xshell连接不上虚拟机

    之后网上的各种方法,都没用 如图,就是第一个网卡配置文件.下面又具体的详解.网上有说让把Onboot改成yes,而我的本来就是yes,就没该, 之后我对比了我原来电脑你虚拟机的网卡配置文件,我发现on ...

  9. react 和 seamless-immutable

    在 react 中,默认改变组件状态或者属性,是会整个组件全部重新渲染,但是 如果只是修改一个地方,而全部渲染,就会浪费资源,大项目中会造成性能问题 shouldComponentUpdate   s ...

  10. Entity Framework 支持 DataTable

    转载:http://www.cnblogs.com/wlflovenet/archive/2011/12/30/EF11.html https://www.cnblogs.com/hanjun0612 ...