js项目练习第一课

时间:2022-09-24 22:47:23

控制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&period;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&lpar;three&period;js&rpar;搭建一个3D库房-第一课

    今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...

  6. CODING DevOps 微服务项目实战系列第一课,明天等你

    CODING DevOps 微服务项目实战系列第一课<DevOps 微服务项目实战:DevOps 初体验>将由 CODING DevOps 开发工程师 王宽老师 向大家介绍 DevOps ...

  7. 《p5&period;js创意游戏编程》第一课:跳动的小球

    准备:Hbuilder/vscode等可以编写网页的编辑器 如果想立刻上手也可以使用在线编译器p5.js官方在线编辑器,如果打不开也可以使用国内的一款在线编辑器jsrun编辑器,(第一课先使用jsru ...

  8. 【Web探索之旅】第二部分第一课:客户端语言

    内容简介 1.第二部分第一课:客户端语言 2.第二部分第二课预告:服务器语言 第二部分:Web编程语言和工具 大家好.上一个部分我们学习了Web的一些基本概念: 什么是Web? Internet和We ...

  9. Asp&period;Net Web API 2&lpar;入门&rpar;第一课

    Asp.Net Web API 2(入门)第一课   前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎 ...

随机推荐

  1. angularjs指令参数transclude

    angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...

  2. JavaWeb学习笔记——表达式语言

    使用表达式语言,可以方便地访问标志位(JSP中有page(pageContext).request.session和application4种标志位)中的属性内容,可以避免出现许多的Scriptlet ...

  3. datanode启动不了

    报如下异常:*org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.hdfs.server.protocol.DisallowedDatano ...

  4. C语言字符串声明

    重新学习C语言字符串声明char *a="nihao";char a[]="nihao";什么区别?前者定义的是指针,并且指向字符串常量“nihao”,后者是字 ...

  5. easyui datagrid使用&lpar;好&rpar;

    加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid <!-- 加载jquery --> <scrip ...

  6. &lbrack;Arduino&rsqb; Leonardo 中文介绍

    以下内容均翻译自arduino.cc,水平有限,如有错误请大家指正. 概述Arduino Leonardo是基于ATmega32u4一个微控制器板.它有20个数字输入/输出引脚(其中7个可用于PWM输 ...

  7. &OpenCurlyDoubleQuote;DBUtility&period;DbHelperSQL”的类型初始值设定项引发异常 &OpenCurlyDoubleQuote;DBUtility&period;DbHelperSQL”的类型初始值设定项引发异常

    今天遇到了一个这样的问题“DBUtility.DbHelperSQL”的类型初始值设定项引发异常“DBUtility.DbHelperSQL”的类型初始值设定项引发异常 也许有和我遇到这问题的人也在这 ...

  8. Java---对象与类的封装

    一.类和对象: package cn.hncu.Myclasslearn; /** * * @author hncu_chx * * Mylove amin */ /**类是一种数据类型,声明一个类就 ...

  9. 使用 Fluent API 配置&sol;映射属性和类型2

    1.将多个实体类映射到数据库中的一个表 要将多个实体映射到一个数据库表需要满足: a. 两个实体必须是一对一关系 b.两个实体共享一个主键 public class MyContext:DbConte ...

  10. Spark on Mesos&colon; 搭建Mesos的一些问题

    资源管理系统 Spark可以搭建在Mesos上或YARN上,两个都是资源管理系统.了解资源管理系统的话,可以先参看以下几篇文章: 浅谈Borg/YARN/Mesos/Torca/Corona一类系统 ...