控制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是简单的.灵活的.无处不在的.你能想象到几乎 ...
随机推荐
-
angularjs指令参数transclude
angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...
-
JavaWeb学习笔记——表达式语言
使用表达式语言,可以方便地访问标志位(JSP中有page(pageContext).request.session和application4种标志位)中的属性内容,可以避免出现许多的Scriptlet ...
-
datanode启动不了
报如下异常:*org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.hdfs.server.protocol.DisallowedDatano ...
-
C语言字符串声明
重新学习C语言字符串声明char *a="nihao";char a[]="nihao";什么区别?前者定义的是指针,并且指向字符串常量“nihao”,后者是字 ...
-
easyui datagrid使用(好)
加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid <!-- 加载jquery --> <scrip ...
-
[Arduino] Leonardo 中文介绍
以下内容均翻译自arduino.cc,水平有限,如有错误请大家指正. 概述Arduino Leonardo是基于ATmega32u4一个微控制器板.它有20个数字输入/输出引脚(其中7个可用于PWM输 ...
-
“DBUtility.DbHelperSQL”的类型初始值设定项引发异常 “DBUtility.DbHelperSQL”的类型初始值设定项引发异常
今天遇到了一个这样的问题“DBUtility.DbHelperSQL”的类型初始值设定项引发异常“DBUtility.DbHelperSQL”的类型初始值设定项引发异常 也许有和我遇到这问题的人也在这 ...
-
Java---对象与类的封装
一.类和对象: package cn.hncu.Myclasslearn; /** * * @author hncu_chx * * Mylove amin */ /**类是一种数据类型,声明一个类就 ...
-
使用 Fluent API 配置/映射属性和类型2
1.将多个实体类映射到数据库中的一个表 要将多个实体映射到一个数据库表需要满足: a. 两个实体必须是一对一关系 b.两个实体共享一个主键 public class MyContext:DbConte ...
-
Spark on Mesos: 搭建Mesos的一些问题
资源管理系统 Spark可以搭建在Mesos上或YARN上,两个都是资源管理系统.了解资源管理系统的话,可以先参看以下几篇文章: 浅谈Borg/YARN/Mesos/Torca/Corona一类系统 ...