Client/Server
客户端/服务端
Browser/Server
浏览器/服务器端
概念:是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
<标签名称>
如 html,xml语法:
文本标签:构成html最基本的标签
:html5中定义该文档是html文档文本标签:和文本有关的标签
to
:标题标签
:段落标签
:换行标签
:展示一条水平线
:字体加粗
:字体斜体
:字体标签
:文本居中img:展示图片
属性:
src:指定图片的位置
相对路径:
./
:表示当前目录,不写默认就是当前目录
../
:表示上一级目录
div:每一个div占满一整行。块级标签
span:文本信息在一行展示,行内标签 内联标签
语义化标签:html5中为了提高程序的可读性,提供了一些标签。
:表示文档的头部
:表示文档的底部
:表格标题:表示表格的头部分
:表示表格的体部分
:表示表格的脚部分
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格title>
head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<caption>学生表格caption>
<tr>
<th>
编号
th>
<th>
姓名
th>
<th>
年龄
th>
tr>
<tr>
<td>
1
td>
<td>
张三
td>
<td>
20
td>
tr>
<tr>
<td>
2
td>
<td>
李四
td>
<td>
25
td>
tr>
<tr>
<td>
3
td>
<td>
王五
td>
<td>
30
td>
tr>
table>
body>
html>
8.5.9、表单标签
表单:
- 概念:用于采集用户输入的数据的。用于和服务器进行交互
- form:用于定义表单。可以定义一个范围,范围代表采集用户数据的范围
- 属性:
- action:指定提交数据的URL
- method:指定提交方式
- 分类:一共7种,2种比较常用
- get:
- 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)
- 请求参数大小有限制
- 不太安全
- post:
- 请求参数不会在地址栏中显示。会封装到请求体中(HTTP协议后讲解)
- 请求参数的大小没有限制
- 较为安全
- 表单项中的数据要想被提交:必须指定其name属性
- 表单项标签:
- input:可以通过type属性值,改变元素展示的样式
- type属性:
- text:文本输入框,默认值
- placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
- password:密码输入框
- radio:单选框
- 注意:
- 想要让多个单选框实现单选的效果,则多个单选框的name属性值必须一样
- 一般会给每一个单选框提供value属性,指定其被选中后提交的值
- checked属性,可以指定默认值
- checkbox:复选框
- 注意:
- 一般会给每一个单选框提供value属性,指定其被选中后提交的值
- checked属性,可以指定默认值
- label:指定输入项的文字描述信息
- 注意:
- label的for属性一般会和input的id属性值对应。如果对应了,则点击label区域,会让input输入框获取焦点
- file:文件选择器
- hidden:隐藏域,用于提交一些信息。
- 按钮:
- submit:提交按钮。可以提交表单
- button:普通按钮
- image:图片提交按钮
- src属性指定图片路径
- select:下拉列表
- name:指定提交数据的名称
- 子元素:option,指定列表项
- value:指定提交的值
- selected:指定默认的下拉列表项
- textarea:文本域
- cols:指定列数,每一行有多少个字符
- rows:默认多少行。
9、CSS
9.1、CSS概述
CSS:页面美化和布局控制
- 概念:Cascading Style Sheets 层叠样式表
- 层叠:多个样式可以作用在同一个html的元素上,同时生效
- 好处:
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
9.2、CSS使用方式
CSS的使用:CSS与html结合方式
-
内联样式:
-
在标签内使用style属性指定css代码
<div style = "color:red;">hello cssdiv>
-
内部样式
- 在head标签内定义style标签,style标签的标签体内容就是css代码
<style>
div{
color:blue;
}
style>
<div>hello cssdiv>
-
外部样式
-
定义css资源文件
-
在head标签,定义link标签,引入外部的资源文件
- 如:a.css文件:
div{
color:green;
}
<link rel = "stylesheet" href="css/a.css">
<div>
hello css
div>
<div>
hello css
div>
-
注意:
- 1,2,3种方式 css作用范围越来越大
- 1方式不常用,后期常用2,3
- 第3种格式可以写为:
<style>
@import "css/a.css";
style>
9.3、CSS语法
css语法:
-
格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
...
}
-
选择器:筛选具有相似特征的元素
-
注意:
- 每一对属性需要使用
;
隔开,最后一对属性可以不加;
9.4、选择器
选择器:筛选具有相似特征的元素
- 元素:
- 基础选择器
- id选择器:选择具体的id属性值的元素,建议在一个html页面中id值唯一
- 语法:
#id属性值{}
- 元素选择器:选择具有相同标签名称的元素
- 语法:
标签名称{}
- 注意:id选择器优先级高于元素选择器
- 类选择器:选择具有相同的class属性值的元素。
- 语法:
.class属性值{}
- 注意:类选择器优先级高于元素选择器
- 扩展选择器
9.5、CSS属性
- 字体、文本
- font-size:字体大小
- color:文本颜色
- text-align:对齐方式
- line-height:行高
- 背景
- background:复合属性,可以设置背景颜色,背景图片等
- 边框:
- border:设置边框,符合属性
- 尺寸:
- width:宽度
- height:高度
- 盒子模型:
- margin:外边距
- auto:水平居中
- padding:内边距
- 默认情况下内边距会影响整个盒子的大小
- 设置盒子属性,让width 和 height 就是最终盒子的大小
box-sizing: border-box;
- float:浮动
- left:左浮动
- right:右浮动
9.6、案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
style>
head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册p>
<p>USER REGISTERp>
div>
<div class="rg_center">
<div class="rg_form">
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名label>td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">td>
tr>
<tr>
<td class="td_left"><label for="password">密码label>td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">td>
tr>
<tr>
<td class="td_left"><label for="email">Emaillabel>td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱">td>
tr>
<tr>
<td class="td_left"><label for="name">姓名label>td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名">td>
tr>
<tr>
<td class="td_left"><label for="tel">手机号label>td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号">td>
tr>
<tr>
<td class="td_left"><label>性别label>td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
td>
tr>
<tr>
<td class="td_left"><label for="birthday">出生日期label>td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">td>
tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码label>td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
td>
tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册">td>
tr>
table>
form>
div>
div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录a>p>
div>
div>
body>
html>
10、JavaScript
10.1、JavaScript简介
概念:一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
- 脚本语言:不需要编译,直接就可以被浏览器解析执行了
功能:
- 可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验
10.2、JavaScript发展史
JavaScript发展史:
- 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为:C–,后来更名为:ScriptEase
- 1995年,Netscape(网景)公司,开发了一门客户端脚本语言LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
- 1996年,微软抄袭JavaScript开发出JScript语言
- 1997年,ECMA(欧洲计算机制造商协会),ECMAScript,就是所有客户端脚本语言的标准。
- JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
10.3、JavaScript语法
ECMAScript:客户端脚本语言的标准
基本语法:
-
与html结合方式
- 内部JS:
- 定义
,标签体内容就是js代码
- 外部JS:
- 定义
,通过src属性引入外部的js文件
- 注意:
可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
可以定义多个
-
注释
- 单行注释://注释内容
- 多行注释:
/*注释内容*/
-
数据类型
- 原始数据类型(基本数据类型):
- number:数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
- string:字符串。字符串 ”abc“ ”a“ ’abc‘
- boolean:true和false
- null:一个对象为空的占位符
- undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
- 引用数据类型:对象
-
变量
- 变量:一小块存储数据的内存空间
- Java语言是强类型语言,而JavaScript是弱类型语言
- 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据
- 语法:
var 变量名 = 初始值;
- typeof(变量名):获取变量的数据类型
-
运算符
-
一元运算符:只有一个运算数的运算符
++,--,+,-(正负号)
- ++ – :自增(自减)
- ++(–) 在前,先自增(自减),再运算
- ++(–) 在后,先运算,再自增(自减)
- +(-) :正负号
- 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
- 其他类型转number:
- string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
- boolean转number:true转为1,false转为0
-
算数运算符
+ - * / % ...
-
赋值运算符
= += -=....
-
比较运算符
> < >= <= == ===(全等于)
比较方式:
- 类型相同:直接比较
- 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止
- 类型不同:先进行类型转换,再比较(类型转换是自动进行)
===
:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
-
逻辑运算符
&& || !
&&:与(短路)
||:或(短路)
!:非
- 其他类型转boolean:
- number:0或NaN为假,其他为真
- string:除了空字符串(“”),其他都是true
- null&undefined:都是false
- 对象:所有对象都为true
-
三元运算符
? : 表达式
var a = 3;
var b = 4;
var c = a > b ? 1:0?
- 语法:
- 表达式 ? 值1:值2;
- 判断表达式的值,如果是true则取值1,如果是false则取值2;
-
流程控制语句
-
if...else...
-
switch
:
-
在Java中,switch语句可以接受的数据类型:byte int short char,枚举(1.5),String(1.7)
-
switch(变量)
:
case 值
:
-
在JS中,switch语句可以接受任意的原始数据类型
-
while
-
do...while
-
for
-
JS特殊语法
- 语句以
;
结尾,如果一行只有一条语句则;
可以省略(不建议)
- 变量的定义使用var关键字,也可以不使用
- 用:定义的变量是局部变量
- 不用:定义的变量是全局变量(不建议)
-
练习99乘法表
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表title>
<script>
for (var i = 1 ;i<=9;i++){
for (var j = 1;j<=i;j++){
document.write(i + '*' + j + "=" + (i*j) + " ");
}
document.write("
")
}
script>
head>
<body>
body>
html>
10.4、JavaScript基本对象
10.4.1、Function对象
Function:函数(方法)对象
-
创建:
-
var fun = new Function(形式参数列表,方法体);
(不建议使用)
-
function 方法名称(形式参数列表){
方法体
}
-
var 方法名 = function(形式参数列表){
方法体;
}
-
属性:
length:代表形参的个数方法名.length
-
特点:
-
方法定义是,形参的类型不用写,返回值类型也不写
-
方法是一个对象,如果定义名称相同的方法,会覆盖(后面覆盖前面)
-
在JS中,方法的调用只与方法名称有关,和参数列表无关
-
在方法声明中有一个隐藏的内置对象(数组),arguments
,封装所有的实际参数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>argumentstitle>
<script>
//计算任意参数的返回值
function getSum(){
var sum = 0;
for (var i =0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum
}
let sum = getSum(1,2,3,4);
document.write(sum)
script>
head>
<body>
body>
html>
-
调用:
方法名称(实际参数列表);
10.4.2、Array对象
Array:数组对象
-
创建:
-
var arr = new Array(元素列表);
-
var arr = new Array(默认长度);
-
var arr = [元素列表];
-
方法:
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push():向数组的末尾添加一个或更多元素,并返回新的长度。
-
属性:
length:数组的长度
-
特点:
- JS中,数组元素的类型可变的。
- JS中,数组长度可变的
10.4.3、Date对象
Date:日期对象
-
创建:
var date = new Date();
-
方法:
toLocaleString()
:返回当前date对象对应的时间本地字符串格式
getTime()
:获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
10.4.4、数学对象
-
创建:
- 特点:Math对象不同创建,直接使用。Math.方法名();
-
方法:
random():返回0~1之间的随机数。含0不含1
ceil(x):对数进行上舍入。
floor(x):对数进行下舍入。
round(x):把数四舍五入为最接近的整数
-
属性:
PI:回去π值
10.4.5、RegExp对象
RegExp:正则表达式对象
-
正则表达式:定义字符串的组成部分。
-
单个字符:[]
如:[a] [ab] [a-zA-Z0-9_]
-
特殊符号代表特殊含义的单个字符:
\d:单个数字字符[0-9]
\w:单个单词字符[a-zA-Z0-9_]
-
量词符号:
?:表示出现0次或1次
*:表示出现0次或多次
+:出现1次或多次
{m,n}:表示m<= 数量 <= n
- m如果缺省:{,n}:最多n次
- n如果缺省:{m,}:最少m次
-
开始结束符号
- ^:开始
- $:结束
-
正则对象
-
创建
-
var reg = new RegExp("正则表达式");
-
var reg = /正则表达式/;
-
方法
-
test(参数):验证指定的字符串是否符合正则定义的规范
var reg = /^\w{6,12}$/;
var username = "zhangsan";
var flag = reg.test(username);
alter(flag);
10.4.6、Global对象
-
特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。方法名();
-
方法:
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字
- 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
isNaN:判断一个值是否是NaN
- NaN六亲不认,连自己都不认。NaN参与的==比较全部为false
eval():将JavaScript字符串,并把它作为脚本代码来执行
-
URL编码
传智播客 = %E4%BС%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var str = "http://www.baidu.com?wd=传智播客";
var encode = encodeURI(str);
document.write(encode+"
");//%E4%BС%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var s = decodeURI(encode);
document.write(s+"
");//传智播客
var str1 = "http://www.baidu.com?wd=传智播客";
var encode1 = encodeURIComponent(str1);
document.write(encode1 +"
");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var s1 = decodeURIComponent(encode);
document.write(s1 +"
");//传智播客
var str = "a234abc";
var number = parseInt(str);
//alert(number + 1);
var a = NaN;
document.write(a == Nan); //false
document.write(isNaN(a));//true
var jscode = "alert(123)"
eval(jscode);
10.5、BOM
10.5.1、BOM概述
概述:Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象
组成:
- Window:窗口对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
10.5.2、Window对象
Window:窗口对象
-
创建
-
方法:
-
与弹出框有关的方法:
alter(警告信息
) 显示带有一段消息和一个确认按钮的警告框
confirm(提示信息
) 显示带有一段信息以及确认按钮和取消按钮的对话框
- 如果用户点击确定按钮,则方法返回true
- 如果用户点击取消按钮,则方法返回false
prompt(提示用户需要输入什么样的信息
) 显示可提示用户输入的对话框
- 返回值:获取用户输入的值
-
与开关有关的方法
close():关闭浏览器窗口。
- 谁调用我,我关谁
open(输入想要开启窗口的网址,如果不输入则生成一个空页面
) 打开一个新的浏览器窗口
- 返回新的Window对象,如果传参了返回的window对象就是传参网址的对象
-
与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
- 参数:
- js代码或者方法对象
- 毫秒值
- 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval() 取消由setIntervar() 设置的timeout
-
属性:
-
获取其他BOM对象:
history
location
Navigator
Screen
-
获取DOM对象
document
-
特点
- Window对象不需要创建可以直接使用 window使用。window.方法名();
- window引用可以省略。方法名();
10.5.3、轮播图
DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>轮播图title>
head>
<body>
<img id = "img" src="img/banner_1.jpg" width="100%">
body>
<script>
/*
分析:
1.在页面上使用img标签展示图片
2.定义一个方法,修改图片对象的src属性
3.定义一个定时器,每隔3秒调用方法一次。
*/
//定义方法实现轮播图效果
var num = 1;
function fun(){
num++;
if (num > 3) {
num = 1;
}
//获取图片对象并对图片进行修改
var img = document.getElementById("img");
img.src = "img/banner_"+num+".jpg"
}
//定义定时器
setInterval(fun,3000)
script>
html>
10.5.4、Location对象
Location:地址栏对象
- 创建(获取):
window.location
location
- 方法:
reload()
:重新加载当前页面。刷新
- 属性
href
:设置或返回完整的URL。
10.5.4.1、自动跳转首页案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转首页</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p><span id="time">5</span>秒后跳转首页</p>
<script>
/*
分析:
1.显示页面效果
2.倒计时读秒效果实现
2.1定义一个方法,获取span标签,修改span标签体内容,时间--
2.2定义一个定时器,1秒执行一次该方法
3.在方法中判断时间如果<=0,则跳转到首页
*/
//获取span标签,
let time = document.getElementById("time");
var tt = 5;
//定义一个方法
function showTime(){
//改变time的数值
time.innerHTML = tt+"";
//在方法中判断时间如果<=0,则跳转到首页
if (tt<=0){
location.href="https://www.baidu.com";
}
tt--;
}
//定义一个定时器,1秒执行一次该方法
setInterval(showTime,1000);
</script>
</body>
</html>
10.5.5、History对象
History:历史记录对象
- 创建(获取):
window.history
history
- 方法:
- back() 加载history列表中的前一个URL
- forward() 加载history列表中的下一个URL
- go(参数) 加载history 列表中的某个具体页面
- 参数:
- 正数:前进几个历史记录
- 负数:后退几个历史记录
- 属性:
- length 返回当前窗口历史列表中的URL数量
10.6、DOM
10.6.1、DOM简单学习
功能:控制html文档的内容
代码:获取页面标签(元素)对象 Element
-
document.getElementById("id值"):通过元素的id获取元素对象
操作Element对象:
- 修改属性值:
- 明确获取的对象是哪一个?
- 查看API文档,找其中有哪些属性可以设置
- 修改标签体内容
- 属性:
innerHTML
DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>DOMtitle>
head>
<body>
<img id = "light" src="img/off.gif">
<h1 id="title">
我也是服了
h1>
body>
<script>
//1.获取light对象
var light = document.getElementById("light");
alter("我要换照片了");
light.src = "img/on.gif"
//获取h1标签对象
var title = document.getElementById("title");
alter("我要换内容了....");
//修改内容
title.innerHTML = "不识妻美刘强东";
script>
html>
10.6.2、DOM概述
概念:Document Object Model 文档对象模型
- 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
W3C DOM 标准被分为3个不同的部分:
- 核心DOM - 针对任何结构化文档的标准模型
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,其他5个的父对象
- XML DOM - 针对XML文档的标准模型
- HTML DOM - 针对HTML文档的标准模型
10.6.3、核心DOM模型
10.6.3.1、Document对象
Document:文档对象
-
创建(获取):在html dom模型中可以使用window对象来获取
- window.document
- document
-
方法:
-
获取Element对象:
getElementById()
:根据id属性值获取元素对象。id属性值一般唯一
getElementsByTagName()
:根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName()
:根据Class属性值获取元素对象们。返回值是一个数组
getElementsByName()
:根据name属性值获取元素对象们。返回值是一个数组
-
创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
:创建Element元素对象
createTextNode()
-
属性
10.6.3.2、Element对象
-
获取/创建:通过document来获取和创建
-
方法:
-
removeAttribute()
:删除属性
var a = document.getgetElementById("a");
a.removeAttribute("href")
-
setAttribute()
:设置属性
var a = document.getgetElementById("a");
a.setAttribute("href","https://www.baidu.com")
10.6.3.3、Node对象
Node:节点对象,其他5个的父对象
- 特点:所以dom对象都可以被认为是一个节点
- 方法:
- CRUD dom树:
appendChild()
:向节点的字节点列表的结尾添加新的子节点
removeChild()
:删除(并返回)当前节点的指定子节点
replaceChild()
:用新节点替换一个子节点
- 属性:
parentNode
返回节点的父节点
10.6.3.4、动态表格案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
text-align: center;
margin: 50px;
}
style>
head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
div>
<table id="table" >
<caption>学生信息表caption>
<tr>
<th>编号th>
<th>姓名th>
<th>性别th>
<th>操作th>
tr>
<tr>
<td>1td>
<td>令狐冲td>
<td>男td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除a>td>
tr>
<tr>
<td>2td>
<td>任我行td>
<td>男td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除a>td>
tr>
<tr>
<td>3td>
<td>岳不群td>
<td>?td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除a>td>
tr>
table>
<script>
//获取输入的信息
let id = document.getElementById("id");
let name = document.getElementById("name");
let gender = document.getElementById("gender");
let add = document.getElementById("btn_add");
//给添加按钮绑定单击事件
/*add.onclick = function () {
//创建tr的元素对象并添加进表格中
const tr = document.createElement("tr");
//创建td的元素对象并添加到tr中
let td1 = document.createElement("td");
//将输入的信息转换为文本节点添加到td中
td1.appendChild(document.createTextNode(id.value));
let td2 = document.createElement("td");
//将输入的信息转换为文本节点添加到td中
td2.appendChild(document.createTextNode(name.value));
let td3 = document.createElement("td");
//将输入的信息转换为文本节点添加到td中
td3.appendChild(document.createTextNode(gender.value));
//创建a标签的对象
let a = document.createElement("a");
a.innerHTML="删除";
a.href = "javascript:void(0)"
a.setAttribute("onclick","delTr(this)");
//将标签添加到td中
let td4 = document.createElement("td");
td4.appendChild(a);
//将td添加到tr对象中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
//获取table对象将tr添加进去
let table = document.getElementById("table");
table.appendChild(tr);
}*/
add.onclick = function () {
let table = document.getElementById("table");
table.innerHTML +="\n" +
" "+id.value+" \n" +
" "+name.value+" \n" +
" "+gender.value+" \n" +
" 删除 \n" +
" "
}
//创建删除事件
function delTr(obj){
let table = obj.parentNode.parentNode.parentNode;
let tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
script>
body>
html>
10.6.4、HEML DOM
-
标签体的设置和获取:innerHTML
-
使用html元素对象的属性
-
控制元素样式
-
使用元素的style属性来设置
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
-
提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。
10.7、事件
10.7.1、事件简单学习
功能:某些组件被执行了某些操作后,触发某些代码的执行。
如何绑定事件
- 直接在html标签上,指定事件的属性(操作),属性值就是js代码
- 事件:onclick — 单击事件
- 通过js获取元素对象,指定事件属性,设置一个函数
DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>事件title>
head>
<body>
<img id = "light" src="img/off.gif" onclick = "fun();">
<img id = "light2" src="img/off.gif">
body>
<script>
function fun(){
alter("我被点了");
alter("我又被点了")
}
function fun2(){
alter("咋老点我?")
}
//1.获取light2对象
var light2 = document.getElementById("light2");
//2.绑定是件
light2.onclick = fun2;
script>
html>
10.7.2、事件概述
概念:某些组件被执行了某些操作后,触发某些代码的执行。
- 事件:某些操作。如:单击,双击,键盘按下了,鼠标移动了
- 事件源:组件。如:按钮 文本输入框…
- 监听器:代码
- 注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码
常见的事件:
- 点击事件:
onclick
:单击事件
ondblclick
:双击事件
- 焦点事件
onblur
:失去焦点
- 一般用于表单校验
onfocus
:元素获得焦点
- 加载事件:
onload
:一张页面或一幅图像完成加载。
- 鼠标事件:
onmousedown
:鼠标按钮被按下
- 定义方法时,定义一个形参,接受event对象
- event对象的button属性可以获取哪个鼠标按钮被点击了
onmouseup
:鼠标按钮被松开
onmousemove
:鼠标被移动
onmouseover
:鼠标移到某个元素之上。
onmouseout
:鼠标从某元素移开
- 键盘事件:
onkeydown
:某个键盘按钮被按下
onkeyup
:某个键盘按键被松开
onkeypress
:某个键盘按键被按下并松开。
- 选择和改变
onchange
:域的内容被改变
onselect
:文本被选中
- 表单事件:
onsubmit
:确认按钮被点击
- 可以阻止表单的提交
onreset
:重置按钮被点击
10.7.3、表格全选案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选title>
<style>
table {
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
margin-top: 10px;
margin-left: 30%;
}
.tr{
background-color: pink;
}
.trc{
background-color: white;
}
style>
<script>
//当页面加载完执行
window.onload = function () {
//获取全选按钮对象绑定单击事件使复选框全选
document.getElementById("selectAll").onclick = function () {
//获取所有的复选框并遍历
let boxs = document.getElementsByName("cd");
for (var i = 0;i<boxs.length;i++){
boxs[i].checked = true;
}
}
//获取全不选按钮对象绑定单击事件使复选框全不选
document.getElementById("unSelectAll").onclick = function () {
//获取所有的复选框并遍历
let boxs = document.getElementsByName("cd");
for (var i = 0;i<boxs.length;i++){
boxs[i].checked = false;
}
}
//获取反选按钮对象绑定单击事件使复选框反选
document.getElementById("selectRev").onclick = function () {
//获取所有的复选框并遍历
let boxs = document.getElementsByName("cd");
for (var i = 0;i<boxs.length;i++){
boxs[i].checked = !boxs[i].checked
}
}
//获取第一个复选框按钮对象绑定单击事件使复选框全选
document.getElementById("first").onclick = function () {
//获取所有的复选框并遍历
let boxs = document.getElementsByName("cd");
for (var i = 0;i<boxs.length;i++){
boxs[i].checked = this.checked
}
}
//获取tr对象并遍历绑定鼠标离开和鼠标移动到元素上的方法
let trs = document.getElementsByTagName("tr");
for (var i = 0;i<trs.length;i++){
trs[i].onmouseover = function (){
this.setAttribute("class","tr");
}
trs[i].onmouseout = function (){
this.setAttribute("class","trc")
}
}
}
script>
head>
<body>
<table>
<caption>学生信息表caption>
<tr>
<th><input type="checkbox" name="cd" id="first">th>
<th>编号th>
<th>姓名th>
<th>性别th>
<th>操作th>
tr>
<tr>
<td><input type="checkbox" name="cd" >td>
<td>1td>
<td>令狐冲td>
<td>男td>
<td><a href="javascript:void(0);">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="cd">td>
<td>2td>
<td>任我行td>
<td>男td>
<td><a href="javascript:void(0);">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="cd">td>
<td>3td>
<td>岳不群td>
<td>?td>
<td><a href="javascript:void(0);">删除a>td>
tr>
table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
div>
body>
html>
10.7.4、表单校验案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left {
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child {
color: #A6A6A6;
font-size: 20px;
}
.rg_center {
float: left;
/* border: 1px solid red;*/
}
.rg_right {
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child {
font-size: 15px;
}
.rg_right p a {
color: pink;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username, #password, #email, #name, #tel, #birthday, #checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
style>
<script>
window.onload = function () {
function checkUsername(){
var user = /^.{3,20}$/;
//获取username输入的内容
let username = document.getElementById("username").value;
let span = document.getElementById("user");
var flag=user.test(username)
if (flag){
return true
}else {
span.innerHTML = "x";
return false;
}
}
document.getElementById("username").onblur = function (){
checkUsername();
}
//获取表单对象
let form = document.getElementById("form");
form.onsubmit = function (){
return checkUsername();
}
}
script>
head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册p>
<p>USER REGISTERp>
div>
<div class="rg_center">
<div class="rg_form">
<form action="#" method="post" id="form">
<table>
<tr>
<td class="td_left"><label for="username">用户名label>td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="user">span>
td>
tr>
<tr>
<td class="td_left"><label for="password">密码label>td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
td>
tr>
<tr>
<td class="td_left"><label for="email">Emaillabel>td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱">td>
tr>
<tr>
<td class="td_left"><label for="name">姓名label>td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名">td>
tr>
<tr>
<td class="td_left"><label for="tel">手机号label>td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号">td>
tr>
<tr>
<td class="td_left"><label>性别label>td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
td>
tr>
<tr>
<td class="td_left"><label for="birthday">出生日期label>td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
td>
tr>
<tr>
<td class="td_left"><label for="checkcode">验证码label>td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
td>
tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册">td>
tr>
table>
form>
div>
div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录a>p>
div>
div>
body>
html>
10.8、电灯开关案例
DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>电灯开关title>
head>
<body>
<img id = "light" src="img/off.gif">
<script>
/*
分析:
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则:
* 如果灯是开的 on,切换图片为off
* 如果灯是关的 off,切换图片为on
* 使用标记flag来完成
*/
//1.获取图片对象
var light = document.getElementById("light");
var falg = false;//代表灯是灭的。off图片
//绑定单击事件
light.onclick = function(){
if(falg){//判断如果灯是开的,则灭掉
light.src = "img/off.gif";
falg = false;
}else{
//如果灯是灭的,则打开
light.src = "img/on.gif";
falg = true;
}
}
script>
body>
html>
11、Bootstrap
11.1、Bootstrap概述
概念:一个前端开发的框架,Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的,它简洁灵活,使得web开发更加快捷
- 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码
- 好处:
- 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果
- 响应式布局。
- 同一套页面可以兼容不同分辨率的设备
11.2、Bootstrap快速入门
- 下载Bootstrap
- 在项目中将这三个文件夹复制
- 创建html页面,引入必要的资源文件
doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap快速入门title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
head>
<body>
<h1>你好,世界!h1>
<script src="/js/jQuery.js">script>
<script src="/js/bootstrap.min.js">script>
body>
html>
11.3、响应式布局
同一套页面可以兼容不同分辨率的设备
实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
步骤:
- 定义容器。相当于之前的table
- 容器分类:
contatiner
:两边留白
container-fluid
:每一种设备都是100%宽度
- 定义行。相当于之前的tr 样式:row
- 定义元素。指定该元素在不同设备上,所占的格子数目。样式:col - 设备代码 - 格子数目
- 设备代码:
- xs:超小屏幕 手机(<768px):col - xs - 12
- sm:小屏幕 平板(>=768px)
- md:中等屏幕 桌面显示器(>=992px)
- lg:大屏幕 大桌面显示器(>=1200)px
- 注意:
- 一行中如果格子数目超过12,则超出部分自动换行。
- 栅格类属性可以向上兼容。栅格类适用于屏幕宽度大于或等于分界点大小的设备
- 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素占满一行。
doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap快速入门title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jQuery.js">script>
<script src="/js/bootstrap.min.js">script>
<style>
.inner{
border: 1px solid red;
}
style>
head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
<div class="col-lg-1 inner">栅格div>
div>
div>
body>
html>
11.4、CSS样式和JS插件
-
全局CSS样式:
-
按钮:class = "btn btn-default"
befault 可以修改更改按钮的样式
-
图片:
-
class = "img-responsive"
:图片在任意尺寸都占100%
-
图片形状
-
<img src="..." alt="..." class="img-rounded">
-
<img src="" alt="." class="img-circle">
-
<img src="." alt="." class="img-thumbnail">
-
表格
table
:基本实例
table-bordered
: 带边框的表格
table-hover
:鼠标悬停
-
表单
- 给表单项添加:
class="form-control"
-
组件
-
导航条
Copy
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">Branda>
div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)span>a>li>
<li><a href="#">Linka>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
<li role="separator" class="divider">li>
<li><a href="#">One more separated linka>li>
ul>
li>
ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
div>
<button type="submit" class="btn btn-default">Submitbutton>
form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Linka>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
ul>
li>
ul>
div>
div>
nav>
-
分页条
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
-
插件
-
轮播图
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
<li data-target="#carousel-example-generic" data-slide-to="1">li>
<li data-target="#carousel-example-generic" data-slide-to="2">li>
ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
div>
div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
div>
div>
...
div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
<span class="sr-only">Previousspan>
a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
<span class="sr-only">Nextspan>
a>
div>
你可能感兴趣的:(java,java-ee)