控制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. jvisualvm远程连接

    1. 今天用jvisualvm远程连接linux上的jdk,jxm方式没有连接成功,后来发现是tomcat安装目录bin下的catalina.sh文件下的JAVA_OPTS中内容格式不对,要有空格,修 ...

  2. json_encode($b, JSON_FORCE_OBJECT) 可以强制转换成对象

    最近在为移动端的项目提供接口,数据格式都为json,不过在过程中遇到一个小问题,代码如下: 情况一: $tmp = array('a','b','c'); echo json_encode($tmp) ...

  3. Python课程第一天作业

    一.第一题:简述编译型与解释型语言的区别,且分别列出你知道的哪些语言属于编译型,哪些属于解释型? 计算机是不能理解高级语言的,更不能直接执行高级语言,它只能直接理解机器语言,所以使用任何高级语言编写的 ...

  4. 设置mysql远程连接

    https://www.cnblogs.com/linjiqin/p/5270938.html

  5. H5转图片支持保存

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. RF：win10跑用例过程中有中文日志会显示非中文

    问题:RobotFramework在win10跑用例过程中有中文日志会显示非中文,如截图: 解决:  C:\Python27\Lib\site-packages\robot\utils\unic.py ...

  7. 使用keil5,加断点调试后，停止运行的问题

    加上断点调试,执行到断点的时就出现程序停止运行的提示. 原因:是工程路径存放太深.

  8. ReactNative 学习笔记

    1. react-native引入第三方库时报Command `run-android` unrecognized: 在使用第三方库tab-navigator时调用: npm install reac ...

  9. js基本知识

    1.js中的数据类型: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型. 2.typeof 返回的是字符串,有 ...

  10. WINAPI方式在windows不同缩放比下取得正确的分辨率

    作者: 国家电网河南原阳县供电公司 俏狐:86074731 这个问题我在国内外的很多论坛查资料都没有找到,只有自己研究了,希望可以帮到需要的朋友.本文为原创,转 载请注明出处. #coding:utf ...