控制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. 搭建zookeeper+kafka集群

      搭建zookeeper+kafka集群 一.环境及准备 集群环境:   软件版本: 部署前操作: 关闭防火墙,关闭selinux(生产环境按需关闭或打开) 同步服务器时间,选择公网ntpd服务器或 ...

  2. js中各种弹窗

    ** * JS提示跳转 * @param  $tip  弹窗口提示信息(为空没有提示) * @param  $type 设置类型 close = 关闭 ,back=返回 ,refresh=提示重载,j ...

  3. related_name

    定义表Apple: class Apple( models.Model): origin_level = models.ForeignKey(AppleLevel) new_level = model ...

  4. golang 统计uint64 数字二进制存储中1的数量

    package main import (    "fmt") // pc[i] is the population count of i.var pc [256]byte fun ...

  5. V先生：信息流广告标题党必备的500个热词

    稍微没有全都偏,简直仅仅只永远, 已经曾经就竟然,将要立刻刚偶然, 渐渐终于决忽然,难道连续又再三, 也许必须很非常,最太十分更马上, 越极总挺常常再,屡次一定也不还. 你一定不知道.如何.最.咋.是 ...

  6. matlab-逻辑回归二分类（Logistic Regression）

    逻辑回归二分类 今天尝试写了一下逻辑回归分类,把代码分享给大家,至于原理的的话请戳这里 https://blog.csdn.net/laobai1015/article/details/7811321 ...

  7. 字符型转换为字符串ToString

    字符型转换为字符串 // C 货币 2.5.ToString("C"); // ￥2.50 // D 10进制数 25.ToString("D5"); // 2 ...

  8. POI导入具有合并了单元格的Excel

    POI进行单行单行地导入的数据在网上有许多的文章,但是要导入一个具有合并单元格的excel貌似比较难找.刚好最近完成了这样的一个需求,要求导入具有合并单元格的excel: /** * 读取excel数 ...

  9. socket学习

    对应的代码: 服务端: import socket phone = socket.socket(socket.AF_INET,socket.SOCK_STREAM) #买手机 phone.bind(( ...

  10. C#调用C++的DLL 尝试写入受保护的内存

    原因:C#中的声明函数的参数类型与C++的函数的参数类型不一致,在参照C#与C++的参数类型对照表以后,修改相应参数类型,问题解决