JavaWeb页面设计
前端js、css和html的基础知识
·
第一章 HTML常用设置
1.1.html：html、标题标签、特殊符号、水平线标签、文字标记、图片标签等解析。
<!DOCTYPE html>
<html>
<!--
html标签 整个文本的跟标签 有且只有一对
ctrl+shift+/ 快速注释 快捷键
注释标签的内容 浏览器不会解析
-->
<head>
<meta charset="UTF-8">
<!--文本的 字符编码 -->
<title>html的文本标签</title>
<!-- 网页标签-->
</head>
<body>
<!--标题标签 1-6 字号 从大到小 加粗 自动换行 -->
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h6>六级标题标签</h6>
<h2>特殊符号</h2>
大于号： > <br />
小于号： < <br />
版权符号:© <br />
商品符号:® <br />
引号: " <br />
空 格： <br />
换行标签: <br / >
<h2>水平线标签</h2>
<hr />
<hr color="red" />
<hr color="pink" width="40%" />
<hr color="blue" width="50%" size="10px" />
<h2>文字标记</h2>
<s>中关村软件园</s> <b>软件开发</b> <i>训练营</i><u>欢迎您！</u>
<!--s标签： 删除线
b: 加粗
i: 斜体
u: 下划线-->
<h2>图片标签</h2>
<img src="../img/123.jpg" alt="跑车" width="200px" height="100px" />
<!--src: 图片的路径 px: 像素值
width: 宽度
height: 高度
alt: 图片无法显示后 显示的内容文字-->
</body>
</html>
展示效果如下：title标签展示的内容
，目录和效果如下
1.2.文字段落、音乐标签、视频标签、字体标签和网页中滚到效果的应用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>文字段落</h2>
<p> <b>剑圣</b>说： <u>你的剑就是我的剑！！！</u> </p>
<h2>音乐标签</h2>
<audio src="../img/年轻的朋友来相会.mp3" controls></audio>
<!--
audio 音乐标签
src 音乐文件路径
controls 音乐的控件 【播放 音量大小...】
-->
<h2>视频标签</h2>
<video src="../img/珍惜人生.mp4" controls></video>
<h2>字体标签</h2>
<font color="cadetblue" size="7" face="仿宋">
2000万柔光双摄，照亮你的美！！！
</font>
<h2>网页中滚动效果的应用</h2>
<marquee>
<img src="../img/123.jpg" width="200px" height="100px" />
<img src="../img/123.jpg" width="200px" height="100px" />
</marquee>
<marquee bgcolor="yellow">
<font color="red" size="6">
马云说，对钱不感兴趣！！
</font>
</marquee>
<marquee>
欢迎 <font color="red">Admin</font>,登陆成功！
</marquee>
</body>
</html>
展示效果如下：
1.3.表格标签和表格的嵌套：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
表格标签 table
行 tr
列 td
边框线 border
表格宽度 width
高度 height
位置 align: 三个值: left左 center中 right右
单元格与单元格之间的距离 cellspacing="10"
合并单元格:
跨行合并单元格: rowspan="2"
跨列合并单元格: colspan="3"
-->
<table border="1" width="600px" height="200px" align="center" cellspacing="0px">
<tr align="center">
<td bgcolor="pink" rowspan="2">1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td colspan="3">3,1</td>
</tr>
</table>
<h1 align="center">表格的嵌套</h1>
<table border="1" width="600px" height="600px" align="center">
<tr>
<td colspan="2" height="300px">
<table border="1" width="100%" height="100%">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
展示效果如下：
1.4.文本框、密码框、单选按钮、多选按钮、下拉选和文本域和按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--form 表单-->
<form action="demo02.html" method="get">
文本框 : <input type="text" name="username" value="username" /> <br /><br />
密码框: <input type="password" name="pwd" /> <br /><br />
性别[单选按钮]: <input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="中" />中
<input type="radio" name="sex" value="女" />女
<!--注意： 单选按钮的 name 必须要一致-->
<br /><br />
爱好[多选按钮]:
<input type="checkbox" name="aihao" value="抽烟" />抽烟
<input type="checkbox" name="aihao" value="喝酒" />喝酒
<input type="checkbox" name="aihao" value="烫头" />烫头
<br /><br />
[下拉选] : 省 :
<select name="sheng">
<option value="-1">--请选择--</option>
<option value="云南省">云南省</option>
<option value="河南省">河南省</option>
<option value="河北省">河北省</option>
<option value="山西省">山西省</option>
</select>
<br /><br />
[文本域] 备注: <br />
<textarea rows="6" cols="40">请输入备注</textarea>
<br /><br />
按钮:<br />
<input type="button" value="普通按钮" />
<button>普通按钮</button>
<input type="submit" value="提交按钮" />
<!--提交按钮的作用: 把form表单中的元素值 提交给 action
传值通过 name 属性 来 传
-->
<input type="reset" value="重置按钮" />
</form>
</body>
</html>
展示效果如下：
1.5.Email类型、search类型、数字类型、滑块类型、颜色类型、日期类型、placeholder属性、required属性和autofocus属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 form表单</title>
</head>
<body>
<form action="#">
Email类型 : <input type="email" value="" />
<br /><br />
search 类型 : <input type="search" />
<br /><br />
数字类型: <input type="number" min="18" max="60" />
<br /><br />
滑块类型: <input type="range" min="18" max="60" value="60" />
<br /><br />
颜色类型: <input type="color" />
<br /><br />
日期类型: <input type="date" />
<br /><br />
placeholder属性: <input type="text" placeholder="用户名/淘宝名/电话号" />
<!--默认显示一段文字在该元素上-->
<br /><br />
required属性 ： <input type="text" required />
<!--要求当前元素 必须录入值 不能为null-->
<br /><br />
autofocus属性: <input type="text" autofocus />
<!--自动获取焦点-->
<!--只需鼠标键到你的搜索字符串，而无需先点击大文本框，鼠标箭头变为输入-->
<br /><br /><br />
<input type="submit" value="提交" />
<input type="reset" />
</form>
</body>
</html>
效果展示如下：
第二章 Html的设置
2.1.字体样式设计
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#p1{
font-size: 24px;
/*font-weight: bold;*/
font-family: "仿宋";
}
</style>
<link rel="stylesheet" href="../css/sty.css" />
</head>
<body>
<h1 align="left">字体样式设计</h1>
<!--添加样式 行内式-->
<p style="color: red;background-color: yellow;">
第一种 行内式
</p>
<!--
style: 样式属性
color: 字体颜色
background-color： 背景颜色
样式中 所有对 字体 的样式 都是 font- 开头
font-size: 字体大小
font-weight: bold; 字体加粗
font-family： 字体
-->
<p id="p1">第二种 嵌入式</p>
<p id="p2">第三种 引入式</p>
</body>
</html>
展示效果如下：
2.2.选择器的设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#p1{
color: red;
background-color: yellow;
}
.c1{
font-size: 48px;
}
p{
color: green;
}
*{
background-color: antiquewhite;
}
</style>
</head>
<body>
<!--
id 选择器 : #ID 名称
class 选择器 : .类 名称
标签选择器 : 标签 名称
* 表示 整个文档中 所有的标签
-->
<p id="p1">AAAAAAAAAAA</p>
<!--注意： 整个文件上的id 不可以重复-->
<p class="c1">BBBBBBBBBBB</p>
<!--注意： class的名称 是可以重复的-->
<p class="c1">CCCCCCCCCCC</p>
<div>DDDDDDDDDDDD </div>
</body>
</html>
展示效果如下：
2.3.边框线、选择器等的设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1,p,.c1{
width: 200px;
height: 200px;
border: 1px solid black;
/*边框线: 像素 实线solid 颜色*/
background-color: rgba(255,255,0,1);
/*rgba red green blue a透明: 它们的取值范围为 0-255 a的取值范围是： 0-1 */
}
#content #top .right{
color: red;
}
#content #main .right{
color: blueviolet;
}
</style>
</head>
<body>
<!--兄弟选择器 用, 隔开
例： #id,.类,标签选择器
-->
<div id="d1"></div>
<p>AAAAAAAAAAA</p>
<div class="c1"></div>
<!--层次选择器 || 后代选择器 -->
<div id="content">
<div id="top">
top
<div id="logo">图片</div>
<div class="right">欢迎admin 登录</div>
</div>
<div id="main">
主体内容
<div class="right">数据列表</div>
</div>
</div>
</body>
</html>
展示效果如下：
2.4.div + css页面分割展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div+css</title>
<style>
#content{
width: 600px;
}
#top{
width: 100%;
height: 50px;
border: 1px solid red;
}
#center{
width: 100%;
height: 300px;
/*border: 1px solid black;*/
margin-top: 6px;
/*上外边距 */
}
#left{
width: 200px;
height: 300px;
border: 1px solid blue;
float: left;
/*浮动 left 左浮动 right 右浮动*/
}
#right{
width: 390px;
height: 300px;
border: 1px solid green;
float: right;
}
#footer{
width: 100%;
height: 50px;
border: 1px solid darkmagenta;
margin-top: 6px;
}
</style>
</head>
<body>
<div id="content">
<div id="top">顶部</div>
<div id="center">
<div id="left">左边菜单栏</div>
<div id="right">右边显示内容的区域</div>
</div>
<div id="footer">底部信息</div>
</div>
</body>
</html>
展示效果如下：
2.5.盒子模型（选出页面某一块当作盒子）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
#d1{
width: 350px;
height: 90px;
border: 1px solid black;
margin-top: 100px;
margin-left: 200px;
padding-top: 10px;
padding-left: 50px;
/*注意: 设置内边距时 div的 大小会被改变,此时,应该把改变的大小也考虑进去*/
}
</style>
</head>
<body>
<div id="d1"> 这是div块的内容展示 </div>
</body>
</html>
展示效果如下：
2.6.ul+li列表样式设计
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#daohang{
width: 200px;
font-size: 24px;
/*border: 1px solid blanchedalmond;*/
text-align: center;
/*文本内容 居中显示*/
}
ul li{
list-style-type: none;
/*列表 样式 none:无 什么样式都不添加*/
line-height: 40px;
/*行高*/
background-color: darkgray;
/*背景颜色*/
}
ul li a{
text-decoration: none;
/*文本的修饰*/
}
/*鼠标悬停状态*/
ul li a:hover{
color: red;
background-color: yellow;
display: block;
}
</style>
</head>
<body>
<div id="daohang">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">说说</a></li>
<li><a href="#">留言板</a></li>
</ul>
</div>
<!--
ol标签 : 有序标签
li: 列表标签
ul标签: 无序标签
-->
</body>
</html>
展示效果如下：
2.7.盒子阴影设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
#d1{
width: 200px;
height: 300px;
margin-left: 300px;
margin-top: 50px;
border: 1px solid black;
box-shadow: 0px 0px 10px 5px blue,
0px 0px 15px 10px red,
0px 0px 20px 15px green;
/*盒子阴影: X Y 偏移量 模糊的距离 阴影的尺寸 颜色 */
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
展示效果如下：
2.8.文字特效设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字的特效</title>
<style>
p{
height: 260px;
/*高度*/
background-color: black;
/*背景颜色*/
color: white;
/*白色字体*/
text-align: center;
/*文字居中*/
font-size: 150px;
/*字号大小*/
font-family: "微软雅黑";
font-weight: bolder;
/*字体加粗*/
/*文字阴影*/
/*X Y 偏移量 阴影大小 颜色*/
text-shadow: 0px 0px 8px white,
0px -5px 14px yellow,
-2px -15px 15px red,
-4px -25px 15px orange;
padding-top: 50px;
}
</style>
</head>
<body>
<p>王者荣耀</p>
</body>
</html>
展示效果如下：
2.9.动画的事件、方法设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
/*与 动画进行绑定: 动画的方法 执行的时间 执行的次数*/
animation: xuanzhuan 1s infinite;
/*匀速旋转*/
animation-timing-function: linear;
/*旋转的圆点 X Y 的值*/
transform-origin: 100px 100px;
}
/*动画的事件/方法*/
@keyframes xuanzhuan{
to{
/*改变 : 旋转(deg度)*/
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
展示效果如下：长方形在旋转
第三章 js相关知识
3.1.js基础知识1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js基础知识</title>
</head>
<body>
<!--js 全称是 javascript
作用： 前台页面数据传递
表单的验证
变量 条件控制语句 数组
onclick: 点击事件
-->
<input type="button" value="点击我" onclick="aa()" />
<script>
/*js的第一种输出方式*/
//document.write("hello world!!!!");
function aa(){
alert("警告弹窗！！！");
}
</script>
</body>
</html>
展示效果如下：点击点击我弹出弹框
3.2.js基础知识2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="aa()">点击我</button>
<div id="show"></div>
<script>
function aa(){
document.getElementById("show").innerHTML = "第三种输出方式";
/*
document: 文本文档
getElementById: get 获取
Element 节点
byId 通过id的名称
innerHTML： 页面上显示的内容
*/
}
</script>
</body>
</html>
展示效果服下：点击惦记我出现第三种输出方式。
3.3.js运算1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--js 弱类型语言
变量的使用 var a=1 var b="rose"
数据类型 :
数字类型 number
字符串类型 string
布尔类型 boolean
未定义 undefined
对象类型 object
null
运算符
算术运算符 + - * / % ++ --
连接运算符 +
赋值运算符 = += -= *= /=
三元运算符 逻辑判断(t/f)?v1 :v2
逻辑运算符 || && !
-->
<script>
var name = "张三";
// alert(typeof name);
/*typeof 输出变量的类型*/
var age = 12.34;
// alert(typeof age);
var b = true;
// alert(typeof b);
var a;
// alert(typeof a);
var c = null;
// alert(typeof c);
document.write("姓名:"+name+"<br/>年龄："+age);
</script>
</body>
</html>
展示效果如下：
3.4.js运算2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var a = 6;
var rs = a++;
document.write("rs="+rs); // ?
document.write("<br />");
document.write("a="+a); // ?
document.write("<br /><br/>");
rs = ++a;
document.write("rs="+rs); // ?
document.write("<br />");
document.write("a="+a); // ?
document.write("<br /><br/>");
var b = 15;
var s = --b;
document.write("s="+s); // ?
document.write("<br />");
document.write("b="+b); // ?
document.write("<br /><br/>");
s = b--;
document.write("s="+s); // ?
document.write("<br />");
document.write("b="+b); // ?
var c = 10;
var ss = c++ + ++c;
document.write("<br />");
document.write("ss="+ss); // ?
</script>
</body>
</html>
展示效果如下：
3.5.js运算3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>加法+</h2>
<input type="text" id="num1" />
+
<input type="text" value="" id="num2" />
<button onclick="jia()">=</button>
<span id="showSum"></span>
<h2>减法-</h2>
<input type="text" id="num3" />
-
<input type="text" value="" id="num4" />
<button onclick="jian()">=</button>
<span id="showCha"></span>
<h2>模%(取余)</h2>
<input type="text" id="num5" />
%
<input type="text" value="" id="num6" />
<button onclick="quyu()">=</button>
<span id="showRs"></span>
<script>
/*简易版*/
function quyu(){
showRs.innerHTML = num5.value % num6.value;
}
function jian(){
var num3 = document.getElementById("num3").value;
var num4 = document.getElementById("num4").value;
var cha = num3-num4;
document.getElementById("showCha").innerHTML = cha;
}
/*运算 + 法 - 模 %（取余） */
function jia(){
var num1 = document.getElementById("num1").value-0; // -0 把获取到的 字符串 转换成 number类型
// alert(num1);
var num2 = document.getElementById("num2").value-0;
var sum = num1+num2;
document.getElementById("showSum").innerHTML = sum;
}
</script>
</body>
</html>
展示效果如下：输入数字，点击等于算出结构：
3.6.js设计抽奖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
margin-left: 560px;
margin-top: 200px;
}
#showResult{
margin-left: 560px;
margin-top: 50px;
color: red;
width: 320px;
height: 200px;
background-color: rgba(255,255,0,0.3);
font-size: 36px;
}
</style>
</head>
<body bgcolor="darkseagreen">
<h1 align="center">学院抽奖系统</h1>
<div id="d1">
请输入卡号:<input type="text" id="card" />
<button onclick="choujiang()">抽奖</button>
</div>
<div id="showResult"></div>
<script>
/*事件*/
function choujiang(){
var rd = Math.floor(Math.random()*10); /*0-10 之间的小数 Math.floor 取整（地板） */
alert(rd);
/*var card = document.getElementById("card").value;*/
var gewei = card.value%10;
/*alert(gewei);*/
var str = (rd == gewei)?"中奖了，奖励法拉利一部！":"重在参与";
showResult.innerHTML = str;
}
</script>
</body>
</html>
展示效果如下：输入点击抽奖
3.7.实例1：
1.前端框架frameset：作用：切割页面，把页面切割成若干行或者列，例如：rows="100,*,50" : 把页面切割成三行，第一行的高度是 100px,第二行的高度是自由* ,第三行的高度是 50px。cols="200,*"：把页面分割成两列，第一列宽200px，第二列宽度自由。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
把页面分成三行：第一行显示top.html页面，第二行分成两列：
第一列显示left.html页面，第二列显示right.html页面，
第三行显示foot.html页面
-->
<frameset rows="110,*,100">
<frame src="top.html" />
<frameset cols="200,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
<frame src="foot.html" />
</frameset>
</html>
1.各个页面的设置：align = "center"表示所在的行文字居中显示，marquee标签中的文字从右往左滚动展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>头部页面</title>
</head>
<!-- top页面 -->
<body bgcolor="cornflowerblue">
<h1 align="center">学生管理系统</h1>
<marquee>
欢迎 rose, 登陆成功！！
</marquee>
</body>
</html>
<!-- foot页面 -->
<body>
<p align="center">
copyright © || 联系我们||合作伙伴 <br />
Addr: 小名
</p>
</body>
<!-- left页面 -->
<body>
导航栏
</body>
<!-- right页面 -->
<body>
<h1 align="center">详细内容</h1>
</body>展示效果如下：
3.login登录页面设计：title表示页面的作用，页面中不展示，<br />表示换行，form表示表单，action表示跳转的页面，method表示返回的方法，一般为get方法或post方法，border表示边框宽度，cellspacing表示单元格间距，<tr></tr>表示一行，<td></td>表示行中的列， 表示一个空格，input表中这一行或列可输入内容，type表示内容的类型，name为后端传来的名字，placeholder没有输入是默认的内容，<a>标签为超链接，href为超链接的地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
</head>
<body bgcolor="pink">
<br /><br /><br /><br /><br /><br />
<form action="index.html" method="get">
<table border="0" align="center" cellspacing="0">
<tr>
<td>用户名</td>
<td><input type="text" name="uname" placeholder="username" /> </td>
</tr>
<tr>
<td>密 码</td>
<td><input type="password" name="pwd" /> </td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登陆" />
<a href="http://www.baidu.com">注册</a>
<!--超链接 标签 a href: 链接的地址-->
</td>
</tr>
</table>
</form>
</body>
</html>
展示效果如下：
3.8.节点相关操作，onclick点击追加、插入、删除、复制和修改节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="addNode()">追加</button>
<button onclick="insertNode()">插入</button>
<button onclick="deleteNode()">删除节点</button>
<button onclick="copyNode()">复制节点</button>
<button onclick="updateNode()">修改</button>
<div id="d1">
<p>aaa1</p>
<p>aaa2</p>
<p>aaa3</p>
<p>aaa4</p>
<p>aaa5</p>
</div>
<script>
function updateNode(){
var divEle = document.getElementById("d1");
// 创建节点
var pNode = document.createElement("p");
pNode.innerHTML = "修改了原有的节点";
// 获取最后一个节点
var lastEle = divEle.lastElementChild;
// 实际是 替换 1参的节点 替换 2参的节点
divEle.replaceChild(pNode,lastEle);
}
function copyNode(){
var divEle = document.getElementById("d1");
// 调用 克隆的方法 true 克隆子节点
var pNode = divEle.firstElementChild.cloneNode(true);
divEle.appendChild(pNode);
}
function deleteNode(){
var divEle = document.getElementById("d1");
// 删除 div 的最后一个孩子节点
divEle.removeChild(divEle.lastElementChild);
}
function insertNode(){
var divEle = document.getElementById("d1");
// 创建节点
var pNode = document.createElement("p"); // <p></p>
pNode.innerHTML = "aaa0";
// 把a0 这个节点 插入 到 父节点的 第一个孩子节点前
divEle.insertBefore(pNode,divEle.firstElementChild);
}
function addNode(){
var divEle = document.getElementById("d1");
// 创建节点
var pNode = document.createElement("p"); // <p></p>
pNode.innerHTML = "aaa6";
// 把 a6 节点 追加到 div 的子节点的最后
divEle.appendChild(pNode);
}
</script>
</body>
</html>
展示效果如下：
3.9.列表展示、全选、修改等操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*全部选中/ 全部取消*/
function checkAll(){
/*alert("测试 coming...")*/
var ckAll = document.getElementById("selectCheckAll");
// 获取所有 name 是 checkItem 的节点 返回数组类型
var checkItems = document.getElementsByName("checkItem");
// 判断 全选 按钮是否被选中
if(ckAll.checked==true){
// 循环遍历所有的 name 节点 全部选中
for(var i=0;i<checkItems.length;i++){
checkItems[i].checked = true;
}
}else{
// 循环遍历所有的 name 节点 全部取消
for(var i=0;i<checkItems.length;i++){
checkItems[i].checked = false;
}
}
}
/*点击 反选 按钮 触发事件*/
function resSelect(){
var checkItems = document.getElementsByName("checkItem");
for(var i=0;i<checkItems.length;i++){
checkItems[i].checked = !checkItems[i].checked;
}
}
</script>
</head>
<body>
<h1 align="center">学生管理系统</h1>
<table align="center" border="1px" width="600px" cellspacing="0">、
<!--th 标签 是 标题行 ：有自动居中 自动加粗的功能-->
<tr>
<th>全选<input type="checkbox" id="selectCheckAll" onclick="checkAll()" /></th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>班级</th>
<th>操作</th>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkItem" /></td>
<td>1</td>
<td>张三丰</td>
<td>男</td>
<td>计科1班</td>
<td>
<a href="#">修改</a>||
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkItem" /></td>
<td>2</td>
<td>李思敏</td>
<td>男</td>
<td>计科1班</td>
<td>
<a href="#">修改</a>||
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkItem" /></td>
<td>1</td>
<td>张三丰</td>
<td>男</td>
<td>计科1班</td>
<td>
<a href="#">修改</a>||
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkItem" /></td>
<td>1</td>
<td>张三丰</td>
<td>男</td>
<td>计科1班</td>
<td>
<a href="#">修改</a>||
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkItem" /></td>
<td>1</td>
<td>张三丰</td>
<td>男</td>
<td>计科1班</td>
<td>
<a href="#">修改</a>||
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkItem" /></td>
<td>1</td>
<td>张三丰</td>
<td>男</td>
<td>计科1班</td>
<td>
<a href="#">修改</a>||
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkItem" /></td>
<td>1</td>
<td>张三丰</td>
<td>男</td>
<td>计科1班</td>
<td>
<a href="#">修改</a>||
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>反选 <input type="checkbox" id="resSelect" onclick="resSelect()" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
展示效果如下：
3.10.节点样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d1">div哈哈哈</div>
<button onclick="ab()">点击我</button>
<script>
function ab(){
// 获取内容
alert(d1.innerHTML);
// 修改或者 添加 内容
d1.innerHTML="嘿嘿嘿。。。";
/*操作样式*/
d1.style.width = "200px";
d1.style.height = "100px";
d1.style.backgroundColor = "yellow";
/*操作属性*/
d1.setAttribute("class","logo");
}
</script>
</body>
</html>
展示点击变化：
3.11.鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*处理事件的第二种方式*/
window.onload = function(){
document.getElementById("btn1").onclick = function(){
alert("单击");
}
document.getElementById("btn2").ondblclick = function(){
alert("双击666");
}
document.getElementById("btn3").onmousedown = function(){
alert("按下");
}
document.getElementById("btn4").onmouseup = function(){
alert("弹起来");
}
// 鼠标移动到内部 悬停事件
document.getElementById("btn5").onmouseover = function(){
document.getElementById("btn5").style.backgroundColor = "red";
}
/*移出 */
document.getElementById("btn5").onmouseout = function(){
document.getElementById("btn5").style.backgroundColor = "orange";
}
}
</script>
</head>
<body>
<button id="btn1">单击</button>
<button id="btn2">双击</button>
<button id="btn3">按下</button>
<button id="btn4">弹起</button>
<div id="btn5" style="width: 100px;height: 100px;background-color: blue;"></div>
</body>
</html>
展示效果如下：鼠标放在矩形上会变色
3.12.键盘事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
username:<input type="text" id="username" />
<script>
window.onload = function(){
document.getElementById("username").onkeydown = function(){
/*this 指的是 选中的 这个对象 id为 username 这个input 标签 */
this.style.backgroundColor = "pink";
}
document.getElementById("username").onkeyup = function(){
/*this 指的是 选中的 这个对象 id为 username 这个input 标签 */
this.style.backgroundColor = "blue";
}
}
</script>
</body>
</html>
展示效果如下：输入时会变色
3.13.cookie
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
什么是cookie
页面用来保存信息
作用： eg: 自动登录 记住用户名
-->
<script>
/*使用cookie*/
/*简单设置cookie*/
/*设置过期时间 expires=(内部状态，不会打印出来)*/
var oDate = new Date();
oDate.setDate(oDate.getDate()+30); // 设置时间是 30天 后
document.cookie = "root=user;expires="+oDate;
document.cookie = "password=666";
</script>
</body>
</html>
3.14.cookie封装：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 封装 设置 cookie
function setCookie(name,value,iDay){
var oDate = new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie = name+"="+value+";expires="+oDate;
}
// 向cookie 中 写入数据
/*setCookie('username','rose',30);
setCookie('password','123456',30);*/
// 删除 cookie
function removeCookie(name){
setCookie(name,'1',-1);
}
removeCookie("password");
</script>
</body>
</html>
第四章 流程控制、函数、变量和一维数组
4.1.四种一如方法，引入外部文件和重定向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
alert("内嵌式");
</script>
<script type="text/javascript" src="../js/aa.js" ></script>
</head>
<body>
<!--1. js 四种引入方式
内嵌式 引入外部文件
行内式 重定向
-->
<button onclick="alert('行内式，运行ing...')">点击运行行内式</button>
<br /><br />
<a href="javascript:alert('4重定向')">第四种，重定向</a>
</body>
</html>
效果如下：
4.2.运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body>
<script>
/*赋值运算符 += -= *= /= =*/
var a = 12;
a+=12; // a=a+12;
document.write("a="+a);
document.write("<hr />");
/*比较运算符 > < >= <= == != === */
var b = 20;
var c = 20;
var d = "20";
document.write(b==c);
document.write("<br />");
document.write(b==d);
document.write("<br />");
document.write(b===c);
document.write("<br />");
document.write(b===d);
document.write("<br />");
/*== 比较的是值 === 比较的是 数值和类型*/
/*
* && 有一个假的 结果为 假
|| 有一个真的 结果为 真
!
*/
</script>
</body>
</html>
展示效果如下
4.3.控制流程语句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*判断结构 if(){}else{} prompt输入框 */
// var a = prompt("请输入一个number");
// if(a>0){
// alert("这是一个正数");
// }else if(a<0){
// alert("这是一个负数");
// }else if(a==0){
// alert("这是 0");
// }else{
// alert("这就不是一个数字");
// }
//=============================================================================
/*选择结构 输入的数字 为 1-12 */
// var a = prompt("请输入1-12 整数");
alert(typeof a); // 此时 a的类型为 string
//
// var b = parseInt(a); // 把字符串类型的a 转换成 number 类型的b
// alert(typeof b);
//
// switch (b){
// case 3:
// case 4:
// case 5: document.write("春天");
// break;
// case 6:
// case 7:
// case 8: document.write("夏天");
// break;
// default: document.write("nono");
// break;
// }
//===============================================================================
/*通过for 循环 写一个 99乘法表 * 矩形 平行四边形 三角形 菱形 */
/*
1*1=1
1*2=2 2*2=4
1*3=3 2*3=6 3*3=9
1*4=4 2*4=8 3*4=12 4*4=16
...........
* */
/*for(var i=1;i<10;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+j*i+" ");
}
document.write("<br />");
}*/
//===============================================================================
var k = 1;
do{
document.write("至少输出一次！！！");
}while(k<0);
</script>
</body>
</html>
展示效果如下：
4.4.流程控制关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
for (var i = 1; i < 10; i++) {
document.write("i=" + i); // 0123456 0
if (i % 7 == 0) {
break; // 跳出当前循环
}
}
document.write("<hr />");
for (var k = 1; k < 10; k++) {
if (k % 7 == 0) {
continue; // 跳过本次循环，继续下次循环
}
document.write("k=" + k + "<br/>");
}
// 课堂小练习: 输出 100以内 能被 11 整除的数字 11 22 33 44 。。。。99
document.write("<hr />");
for (var k = 1; k < 100; k++) {
if (k % 11 != 0) {
continue; // 跳过本次循环，继续下次循环
}
document.write("k=" + k + "<br/>");
}
</script>
</body>
</html>
展示效果如下
4.5.如何创建函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 函数 / 方法 / 事件 -->
<script>
function aa1(){
alert("无参数 无返回值方法...");
}
// aa1();
function aa2(name){
alert("有参数 无返回值方法... 传进来的参数:"+name);
}
// aa2("rose");
function aa3(){
return "返回aa3()得字符串...";
}
// alert(aa3());
function aa4(bb){
return "别"+bb;
}
alert(aa4("说话"));
</script>
</body>
</html>
展示如下：
4.6.变量的作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*
作用域
大括号里面 能调用 外面的变量
而大括号里面定义的变量 外面 不能够调用
*/
var j = 10;
function aa1(){
var x = 5;
alert("j="+j);
}
aa1();
alert("x="+x);
</script>
</body>
</html>
展示效果如下：
4.7.一维数组创建
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*第一种 创建方式 */
var arr1 = [12,3.14,true,"abc"];
alert(typeof arr1); // 类型 object
/*第二种 创建方式 */
var arr2 = new Array(5);
/*第三种 创建方式 */
var arr3 = new Array();
/*第四种 创建方式 */
var arr2 = new Array("30",30,true);
</script>
</body>
</html>
展示如下：
4.8.一维数组操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var arr = [12,3.1415,true,"哈哈"];
// alert(arr[0]); // 通过下标 获取 值
// alert(arr.length); // 获取数组的长度
/*循环遍历这个数组*/
// for(var i=0;i<arr.length;i++){
// document.write(arr[i]);
// }
/**
* 练习: 冒泡排序
* 选择排序
*/
/*向数组末尾添加新的元素,并且反回新的长度*/
arr.push("ccc");
// alert(arr.length);
/*把数组转化成字符串*/
// alert(arr.toString());
//=======================================================================
var arr1 = [56,1,88,15,12,13,"abc"];
/*删除数组的最后一个元素*/
arr1.pop();
document.write(arr1.toString());
/*排序*/
arr1.sort();
document.write("<br />");
document.write(arr1);
</script>
</body>
</html>
展示如下：
4.9.常用对象String
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str = new String("abe:cde:afg");
/*替换*/
document.write(str.replace("a", "***"));
document.write("<br />");
/*根据 : 来进行 切割 字符串 */
var arr = str.split(":");
// document.write(arr.toString());
for (var i = 0; i < arr.length; i++) {
document.write(arr[i] + "<br/>");
}
document.write("<hr />");
/*截取字符串 截前不截后 */
/*indexOf 通过元素 获取它的下标*/
document.write(str.substring(str.indexOf("b"), str.indexOf("f")));
document.write("<hr />");
/*全部转换成 大写*/
document.write(str.toUpperCase());
document.write("<hr />");
/*全部转换成 小写*/
document.write(str.toLowerCase());
</script>
</body>
</html>
展示如下：
4.10.常用对象Date
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var date = new Date();
alert(date.toLocaleString());
alert(date.toLocaleDateString()); // 年月日
alert(date.toLocaleTimeString()); // 时分秒
</script>
</body>
</html>
展示如下：
4.11.js定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="show"></div>
<button onclick="stop()">停止</button>
<script>
var i = 0;
function aa1() {
i++;
show.innerHTML = i;
}
// 定时器 每1000毫秒 调用一次 aa1 方法
var inter = setInterval(aa1, 1000);
function stop() {
// 清除定时器
clearInterval(inter);
}
</script>
</body>
</html>
展示如下：
4.12.动态时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="showTime"></div>
<script>
function goTime() {
var date = new Date();
showTime.innerHTML = date.toLocaleString();
}
// setInterval(goTime,1000);
function aa() {
alert("弹出一次");
}
/*过3秒后 只调用一次 aa() 这个方法*/
setTimeout(aa, 3000);
</script>
</body>
</html>
展示如下：
4.13.时间案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
页面 <font id="font1"></font> 秒后跳转到百度
<script>
var interId = setInterval(cutTime, 1000);
var i = 2;
function cutTime() {
font1.innerHTML = i;
i--;
if (i < 0) {
clearInterval(interId);
}
}
function go() {
/*重定向 当前窗口的链接 地址 : */
window.location.href = "https://www.baidu.com";
}
/*3秒后 调用 go 这个方法*/
setTimeout(go, 3000);
</script>
</body>
</html>
展示如下：
4.14.确认取消框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*var aa = window.confirm("确认删除吗？");
alert(aa);*/
if (window.confirm("确认关闭窗口吗？")) {
alert("真的关闭了哦");
window.close();
} else {
alert("又不关了哦");
}
</script>
<!--
小结：
定时器、location、confirm alert...都是window 对象的下一级操作
window.confirm
window.location
。。。。
有的地方 window 是可以省略不写的，这样的技术称之为 jsBOM 技术
Browser Object Model
还有一种 jsDOM 技术 :
document Object Model
-->
</body>
</html>
展示如下：
4.15.抓取节点的几种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d1">AAAAAdivdiv</div>
<p name="ps">pname1pname1pname1</p>
<p name="ps">pname2pname2pname2</p>
<p class="pa">cl1111class1class1</p>
<p class="pa">cl222class1class1</p>
<p class="pa">cl3333class1class1</p>
<p class="pa">cl444444ss1class1</p>
<script>
/*页面加载事件 打开页面 加载完主体部分 就会加载该 事件 */
window.onload = function() {
var divId = document.getElementById("d1");
// alert(divId.innerHTML); // 查看该节点 页面上显示的内容
// 通过标签名称 拿到节点 比如 p 标签
var pEles = document.getElementsByTagName("p");
for (var i = 0; i < pEles.length; i++) {
// alert(pEles[i].innerHTML);
}
/*通过name 拿到元素的节点*/
var psEles = document.getElementsByName("ps");
for (var i = 0; i < psEles.length; i++) {
// alert(psEles[i].innerHTML);
}
/*通过class 拿到元素的节点*/
var paEles = document.getElementsByClassName("pa");
for (var i = 0; i < paEles.length; i++) {
alert(paEles[i].innerHTML);
}
}
</script>
</body>
</html>
展示如下
4.16.通过关系获得节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d1">
<p>aa1</p>
<p>aa2</p>
<p>aa3</p>
</div>
<script>
window.onload = function() {
var divEle = document.getElementById("d1");
/*获取第一个元素的子节点*/
var p1Ele = divEle.firstElementChild;
// alert(p1Ele.innerHTML);
/*获取最后一个元素的子节点*/
var lastEle = divEle.lastElementChild;
// alert(lastEle.innerHTML);
/*先获取第一个节点 再获得这个节点的 弟弟节点*/
var nextEle = divEle.firstElementChild.nextElementSibling;
// alert(nextEle.innerHTML);
/*它的哥哥节点 |上一个节点*/
var preEle = divEle.lastElementChild.previousElementSibling;
alert(preEle.innerHTML);
}
</script>
</body>
</html>
展示如下：
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
25
0- 0
已为社区贡献1条内容
所有评论(0)