js项目练习第一课
控制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项目练习第一课的更多相关文章
- vue.js学习（第一课）
学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...
- js项目练习第二课
百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...
- 2月4号学习的一个SSM整合项目，第一课
本文引自:https://github.com/Sunybyjava/seckill 原作者:sunybyjava@gmail.com seckill 一个整合SSM框架的高并发和商品秒杀项目,学习 ...
- js学习笔记第一课（js基础知识）
1.js代码在浏览器中执行. 2.js代码直接插入网页中需包含在 <script language="javascript"> js代码 </script> ...
- 如何用webgl(three.js)搭建一个3D库房-第一课
今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...
- CODING DevOps 微服务项目实战系列第一课，明天等你
CODING DevOps 微服务项目实战系列第一课<DevOps 微服务项目实战:DevOps 初体验>将由 CODING DevOps 开发工程师 王宽老师 向大家介绍 DevOps ...
- 《p5.js创意游戏编程》第一课：跳动的小球
准备:Hbuilder/vscode等可以编写网页的编辑器 如果想立刻上手也可以使用在线编译器p5.js官方在线编辑器,如果打不开也可以使用国内的一款在线编辑器jsrun编辑器,(第一课先使用jsru ...
- 【Web探索之旅】第二部分第一课：客户端语言
内容简介 1.第二部分第一课:客户端语言 2.第二部分第二课预告:服务器语言 第二部分:Web编程语言和工具 大家好.上一个部分我们学习了Web的一些基本概念: 什么是Web? Internet和We ...
- Asp.Net Web API 2(入门)第一课
Asp.Net Web API 2(入门)第一课 前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎 ...
随机推荐
- json_encode($b, JSON_FORCE_OBJECT) 可以强制转换成对象
最近在为移动端的项目提供接口,数据格式都为json,不过在过程中遇到一个小问题,代码如下: 情况一: $tmp = array('a','b','c'); echo json_encode($tmp) ...
- Linux 下的 Docker 安装与使用
一.安装与配置 1.安装依赖包 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 2.设置阿里云镜像源 sudo yum ...
- Navicat操作SQL server 2008R2文件.bak文件还原
项目操作过程中,利用Navicat操作SQL Server2008R2数据备份,结果发现数据丢失了很多,不得不先对数据丢失部分进行差异对比,然后再重新输入. 1.利用Navicat导出的数据格式为sq ...
- HTML5 full-screen全屏API
这篇文章纯属记录,非常感谢张鑫旭大神的demo 原文地址: http://www.zhangxinxu.com/study/201210/html5-full-screen-api.html 代码 C ...
- orcal -学习准备
格式化命令: 设置每行长度 SET LINESIZE 300; 设置每页长度 SET PAGESIZE 30; 使用文本编辑 文本编辑sql:ed aa 使用@aa 切换用户: CONN 用户名/密码 ...
- 深度学习原理与框架-图像补全(原理与代码) 1.tf.nn.moments(求平均值和标准差) 2.tf.control_dependencies(先执行内部操作) 3.tf.cond(判别执行前或后函数) 4.tf.nn.atrous_conv2d 5.tf.nn.conv2d_transpose(反卷积) 7.tf.train.get_checkpoint_state(判断sess是否存在
1. tf.nn.moments(x, axes=[0, 1, 2]) # 对前三个维度求平均值和标准差,结果为最后一个维度,即对每个feature_map求平均值和标准差 参数说明:x为输入的fe ...
- Javascript中用来实现继承的几种方式
一.原型链继承 原理:修改子类型的原型,使其指向父类型的实例: 缺点: 1,不能以字面量方式在子类型的原型上添加新方法:这回重新改写子类型的原型: 2 创建子类型的实例时无法向父类型的构造函数传参. ...
- 自定义 serializeJSON() 函数
说明:jQuery框架提供了serialize()方法, 能够将DOM元素内容序列化为json格式字符串,用于ajax请求.通过使用serialize()方法,可以提交本页面的所有域. 但是此方法具有 ...
- 同时安装 Python 2 与Python 3 的方法及pip模块的下载安装
Python虽然功能强大,上手容易,但版本问题却是个烦人的问题. Python 2.x 和 Python 3.x 版本之间存在很大的不兼容. 同时安装Python2.x和Python3.x 1. 在P ...
- could not open input file 错误
配置laravel时遇到的小错误 ps:php -S localhost:81 -t 框架目录/public S大写 端口不要被占用