Web前端7天

day1
只开发服务器端server，通过浏览器访问
1.web概念概述
Javaweb:使用Java语言开发基于互联网的项目
在这里插入图片描述
B/S的访问过程
资源分类：
1.静态资源
使用静态网页开发技术发布的资源
特点：
*所有用户访问，得到的结果是一样的
*如：文本，图片，音频，视频，HTML,CSS,JavaScript
*如果用户请求的是静态资源，那么服务器会直接将静态资源发给浏览器，浏览器中内置了静态资源的解析引擎，可以展示静态资源
2.动态资源
使用动态网页及时发布的资源
特点：
所有用户访问，得到的结果可能不一样
如:jsp /servlet php…
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，在发送给浏览器。
在这里插入图片描述
先学习静态资源

静态资源：
HTML:用于搭建基础网页，展示页面的内容
CSS:用于美化页面，布局页面
JavaScript:控制页面的元素，让页面有一些动态的效果

2.HTML
概念：是最基础的网页开发语言
Htyper Text Markup Language 超文本标记语言
*超文本：
超文本是用超链接的方法，将各种不同空间的文字信息组织咋一起的网状文本
*标记语言：
由标签构成的语言 <标签名称> 如 html xml
标记语言不是编程语言
2. 快速入门：
语法：
1. html文档后缀名 .html 或者 .htm
2. 标签分为
1. 围堵标签：有开始标签和结束标签。如
2. 自闭和标签：开始标签和结束标签在一起。如

3. 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：
正确：
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。

* 代码：<html><head><title>title</title></head><body><FONT color='red'>Hello World</font><br/><font color='green'>Hello World</font></body></html>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511104047738.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1OTQ1Njcz,size_16,color_FFFFFF,t_70)

3. 标签学习：1. 文件标签：构成html最基本的标签* html:html文档的根标签* head：头标签。用于指定html文档的一些属性。引入外部的资源* title：标题标签。* body：体标签* <!DOCTYPE html>：html5中定义该文档是html文档2. 文本标签：和文本有关的标签* 注释：<!-- 注释内容 -->* <h1> to <h6>：标题标签* h1~h6:字体大小逐渐递减* <p>：段落标签* <br>：换行标签* <hr>：展示一条水平线* 属性：* color：颜色* width：宽度* size：高度* align：对其方式* center：居中* left：左对齐* right：右对齐* <b>：字体加粗* <i>：字体斜体* <font>:字体标签* <center>:文本居中* 属性：* color：颜色* size：大小* face：字体* 属性定义：* color：1. 英文单词：red,green,blue2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF* width：1. 数值：width='20' ,数值的单位，默认是 px(像素)2. 数值%：占比相对于父元素的比例
3. 图片标签：* img：展示图片* 属性：* src：指定图片的位置* 代码：展示一张图片 img<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>相对路径* 以.开头的路径* ./：代表当前目录  ./image/1.jpg* ../:代表上一级目录<img src="./image/jiangwai_1.jpg"><img src="../image/jiangwai_1.jpg">4. 列表标签：* 有序列表：* ol:* li:* 无序列表：* ul:* li:5. 链接标签：* a:定义一个超链接* 属性：* href：指定访问资源的URL(统一资源定位符)* target：指定打开资源的方式* _self:默认值，在当前页面打开* _blank：在空白页面打开* 代码：超链接  a<a href="http://www.itcast.cn">点我</a><br><a href="http://www.itcast.cn" target="_self">点我</a><br><a href="http://www.itcast.cn" target="_blank">点我</a><br><a href="./5_列表标签.html">列表标签</a><br><a href="mailto:itcast@itcast.cn">联系我们</a><br><a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>6. div和span：* div:每一个div占满一整行。块级标签* span：文本信息在一行展示，行内标签 内联标签7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。1. <header>：页眉2. <footer>：页脚8. 表格标签：* table：定义表格* width：宽度* border：边框* cellpadding：定义内容和单元格的距离* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、* bgcolor：背景色* align：对齐方式* tr：定义行* bgcolor：背景色* align：对齐方式* td：定义单元格* colspan：合并列* rowspan：合并行* th：定义表头单元格* <caption>：表格标题* <thead>：表示表格的头部分* <tbody>：表示表格的体部分* <tfoot>：表示表格的脚部分案例：旅游网站首页
1. 确定使用table来完成布局	
2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>
3. 如果某一行有多个单元格，则使用<tr><td><table></table></td></tr>
4. 代码实现<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>黑马旅游网</title></head><body><!--采用table来完成布局--><!--最外层的table，用于整个页面的布局--><table width="100%" align="center"><!-- 第1行 --><tr><td><img src="image/top_banner.jpg" width="100%" alt=""></td></tr><!-- 第2行 --><tr><td><table width="100%" align="center"><tr><td><img src="image/logo.jpg" alt=""></td><td><img src="image/search.png" alt=""></td><td><img src="image/hotel_tel.png" alt=""></td></tr></table></td></tr><!-- 第3行 --><tr><td><table width="100%" align="center"><tr bgcolor="#ffd700" align="center" height="45" ><td><a href="">首页</a></td><td>门票</td><td>门票</td><td>门票</td><td>门票</td><td>门票</td><td>门票</td><td>门票</td><td>门票</td><td>门票</td></tr></table></td></tr><!-- 第4行 轮播图 --><tr><td><img src="image/banner_3.jpg" alt="" width="100%"></td></tr><!-- 第5行 黑马精选--><tr><td><img src="image/icon_5.jpg" alt="">黑马精选<hr  color="#ffd700" ></td></tr><!-- 第6行 --><tr><td><table align="center" width="95%"><tr><td><img src="image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 899</font></td><td><img src="image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 899</font></td><td><img src="image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 899</font></td><td><img src="image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 899</font></td></tr></table></td></tr><!-- 第7行 国内游 --><tr><td><img src="image/icon_6.jpg" alt="">国内游<hr  color="#ffd700" ></td></tr><!-- 第8行 --><tr><td><table align="center" width="95%"><tr><td rowspan="2"><img src="image/guonei_1.jpg" alt=""></td><td><img src="image/jiangxuan_2.jpg" alt="" height="100%"><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="image/jiangxuan_2.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="image/jiangxuan_2.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td></tr><tr><td><img src="image/jiangxuan_2.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="image/jiangxuan_2.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="image/jiangxuan_2.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td></tr></table></td></tr><!-- 第9行 境外游 --><tr><td><img src="image/icon_7.jpg" alt="">境外游<hr  color="#ffd700" ></td></tr><!-- 第10行 --><tr><td><table align="center" width="95%"><tr><td rowspan="2"><img src="image/jiangwai_1.jpg" alt=""></td><td><img src="image/jiangxuan_3.jpg" alt="" height="100%"><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="image/jiangxuan_3.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="image/jiangxuan_3.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td></tr><tr><td><img src="image/jiangxuan_3.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="image/jiangxuan_3.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="image/jiangxuan_3.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><font color="red">&yen; 699</font></td></tr></table></td></tr><!-- 第11行 --><tr><td><img src="image/footer_service.png" alt="" width="100%"></td></tr><!-- 第12行 --><tr><td align="center" bgcolor="#ffd700" height="40"><font color="gray" size="2">江苏传智播客教育科技股份有限公司版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882</font></td></tr></table></body></html>

day2
表单标签
表单：
概念**：用于采集用户输入的数据的，用于和服务器进行交互**
标签：from
from:用于定义表单的，可以定义一个范围范围代表采集用户的数据的范围
属性： action 指定提交数据的URL
method:指定提交方式
分类：一共七种，两种比较常见
get:
1.请求参数会在地址栏中显示会封装到请求行中
2.请求参数大小是有限制的
3.不太安全
post:
2，请求参数不会在地址栏中显示，会封装在请求体中
2.请求参数的大小没有限制
3.较为安全
注意:表单项中的数据要想被提交：必须指定其name属性

 * 表单项标签：* input：可以通过type属性值，改变元素展示的样式* type属性：* text：文本输入框，默认值* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息	* password：密码输入框* radio:单选框* 注意：1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值3. checked属性，可以指定默认值* checkbox：复选框* 注意：1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值2. checked属性，可以指定默认值* file：文件选择框* hidden：隐藏域，用于提交一些信息。* 按钮：* submit：提交按钮。可以提交表单* button：普通按钮* image：图片提交按钮* src属性指定图片的路径	* label：指定输入项的文字描述信息* 注意：* label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。* select: 下拉列表* 子元素：option，指定列表项* textarea：文本域* cols：指定列数，每一行有多少个字符* rows：默认多少行。        <form action="#" method="get"><label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>密码：<input type="password" name="password" placeholder="请输入密码"><br>性别：<input type="radio" name="gender" value="male" >  男<input type="radio" name="gender" value="female" checked>  女<br>爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街<input type="checkbox" name="hobby" value="java"  checked> Java<input type="checkbox" name="hobby" value="game"> 游戏<br>图片：<input type="file" name="file"><br>隐藏域：<input type="hidden" name="id" value="aaa"> <br>取色器：<input type="color" name="color"><br>生日：<input type="date" name="birthday"> <br>生日：<input type="datetime-local" name="birthday"> <br>邮箱：<input type="email" name="email"> <br>年龄：<input type="number" name="age"> <br>省份：<select name="province"><option value="">--请选择--</option><option value="1">北京</option><option value="2">上海</option><option value="3" selected>陕西</option></select><br>自我描述：<textarea cols="20" rows="5" name="des"></textarea><br><input type="submit" value="登录" ><input type="button" value="一个按钮" ><br><input type="image" src="img/regbtn.jpg">
</form> 案例：<!--定义表单 form--><form action="#" method="post"><table border="1" align="center" width="500"><tr><td><label for="username">用户名</label></td><td><input type="text" name="username" id="username"></td></tr><tr><td><label for="password">密码</label></td><td><input type="password" name="password" id="password"></td></tr><tr><td><label for="email">Email</label></td><td><input type="email" name="email" id="email"></td></tr><tr><td><label for="name">姓名</label></td><td><input type="text" name="name" id="name"></td></tr><tr><td><label for="tel">手机号</label></td><td><input type="text" name="tel" id="tel"></td></tr><tr><td><label>性别</label></td><td><input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td><label for="birthday">出生日期</label></td><td><input type="date" name="birthday" id="birthday"></td></tr><tr><td><label for="checkcode">验证码</label></td><td><input type="text" name="checkcode" id="checkcode"><img src="img/verify_code.jpg"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注册"></td></tr></table></form>

CSS

概念： Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
好处：
1. 功能强大
2. 将内容展示和样式控制分离
  - 降低耦合度。解耦
  - 让分工协作更容易
  - 提高开发效率
CSS的使用：CSS与html结合方式
1. 内联样式
  - 在标签内使用style属性指定css代码
  - 如：
    hello css
2. 内部样式
  - 在head标签内，定义style标签，style标签的标签体内容就是css代码

如：

hello css
1. 外部样式
  1. 定义css资源文件。
  2. 在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>
4. css语法：

* 格式：选择器 {属性名1:属性值1;属性名2:属性值2;...}
* 选择器:筛选具有相似特征的元素
* 注意：* 每一对属性需要使用；隔开，最后一对属性可以不加；

选择器：筛选具有相似特征的元素
- 分类：
  1. 基础选择器
    1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
      - 语法：#id属性值{}
    2. 元素选择器：选择具有相同标签名称的元素
      - 语法：标签名称{}
      - 注意：id选择器优先级高于元素选择器
    3. 类选择器：选择具有相同的class属性值的元素。
      - 语法：.class属性值{}
      - 注意：类选择器选择器优先级高于元素选择器
  2. 扩展选择器：
    1. 选择所有元素：
      - 语法： *{}
    2. 并集选择器：
      - 选择器1,选择器2{}
        div,span{}
    3. 子选择器：筛选选择器1元素下的选择器2元素
      - 语法：选择器1 选择器2{}
        div span{}
    4. 父选择器：筛选选择器2的父元素选择器1
      - 语法：选择器1 > 选择器2{}
        div > span{}
    5. 属性选择器：选择元素名称，属性名=属性值的元素
      - 语法：元素名称[属性名=“属性值”]{}
        input[type =‘text’]
    6. 伪类选择器：选择一些元素具有的状态
      - 语法：元素:状态{}
      - 如：
        
        状态：
        
        link：初始化的状态
        
        visited：被访问过的状态
        
        active：正在访问状态
        
        hover：鼠标悬浮状态

<head><meta charset="UTF-8"><title>扩展选择器</title><style>div p{color:red;}div > p {border: 1px solid;}input[type='text']{border: 5px solid;}a:link{color: pink;}a:hover{color: green;}a:active{color: yellow;}a:visited{color: red;}</style>
</head>
<body><div><p>传智播客</p></div><p>黑马程序员</p>
<div>aaa</div><input type="text" ><input type="password" ><br>    <br>    <br><a href="#">黑马程序员</a>6. 属性1. 字体、文本* font-size：字体大小* color：文本颜色* text-align：对其方式* line-height：行高 2. 背景* background：3. 边框* border：设置边框，符合属性4. 尺寸* width：宽度* height：高度
<style>p{color: #FF0000;font-size: 30px;text-align: center;line-height: 200px;/*border 边框*/border: 1px solid red;}div{border: 1px solid red;/*尺寸*/height: 200px;width: 200px;/*背景*/background: url("img/logo.jpg") no-repeat center;}</style>
</head>
<body><p>传智播客</p><div>黑马程序员</div>5. 盒子模型：控制布局* margin：外边距* padding：内边距* 默认情况下内边距会影响整个盒子的大小* box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小* float：浮动* left* right
案例 css
<!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 REGISTER</p></div><div class="rg_center"><div class="rg_form"><!--定义表单 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">Email</label></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>

day3
JavaScript
JAVA 语言–> 通过.java 文件–>编译器–>生成.class字节码文件–>java虚拟机–>运行这个字节码文件 ==这是需要编译和解释的过程
概念：一门客户端脚本语言用于表单的校验
运行在客户端浏览器中的，每个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了
功能：
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验
在这里插入图片描述
JavaScript=ECMAScript +JavaScript自己特有的东西（BOM+DOM）

ECMAScript ：客户端脚本语言的标准
1.基本语法
1.与html结合方式：
1.内部JS：
定义

		<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>99乘法表</title><style>td{border: 1px solid;}</style><script>document.write("<table  align='center'>");//1.完成基本的for循环嵌套，展示乘法表for (var i = 1; i <= 9 ; i++) {document.write("<tr>");for (var j = 1; j <=i ; j++) {document.write("<td>");//输出  1 * 1 = 1document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");document.write("</td>");}/*//输出换行document.write("<br>");*/document.write("</tr>");}//2.完成表格嵌套document.write("</table>");</script></head><body></body></html>

2. 基本对象：1. Function：函数(方法)对象1. 创建：1. var fun = new Function(形式参数列表,方法体);  //忘掉吧2. function 方法名称(形式参数列表){方法体}3. var 方法名 = function(形式参数列表){方法体}2. 方法：3. 属性：length:代表形参的个数4. 特点：1. 方法定义是，形参的类型不用写,返回值类型也不写。2. 方法是一个对象，如果定义名称相同的方法，会覆盖3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数5. 调用：方法名称(实际参数列表);2. Array:数组对象1. 创建：1. var arr = new Array(元素列表);2. var arr = new Array(默认长度);3. var arr = [元素列表];2. 方法join(参数):将数组中的元素按照指定的分隔符拼接为字符串push()	向数组的末尾添加一个或更多元素，并返回新的长度。3. 属性length:数组的长度4. 特点：1. JS中，数组元素的类型可变的。2. JS中，数组长度可变的。3. Boolean4. Date：日期对象1. 创建：var date = new Date();2. 方法：toLocaleString()：返回当前date对象对应的时间本地字符串格式getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差5. Math：数学对象1. 创建：* 特点：Math对象不用创建，直接使用。  Math.方法名();2. 方法：random():返回 0 ~ 1 之间的随机数。 含0不含1ceil(x)：对数进行上舍入。floor(x)：对数进行下舍入。round(x)：把数四舍五入为最接近的整数。3. 属性：PI6. Number7. String8. RegExp：正则表达式对象1. 正则表达式：定义字符串的组成规则。1. 单个字符:[]如： [a] [ab] [a-zA-Z0-9_]* 特殊符号代表特殊含义的单个字符:\d:单个数字字符 [0-9]\w:单个单词字符[a-zA-Z0-9_]2. 量词符号：?：表示出现0次或1次*：表示出现0次或多次+：出现1次或多次{m,n}:表示 m<= 数量 <= n* m如果缺省： {,n}:最多n次* n如果缺省：{m,} 最少m次3. 开始结束符号* ^:开始* $:结束2. 正则对象：1. 创建1. var reg = new RegExp("正则表达式");2. var reg = /正则表达式/;2. 方法	1. test(参数):验证指定的字符串是否符合正则定义的规范	9. Global1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。  方法名();2. 方法：encodeURI():url编码decodeURI():url解码encodeURIComponent():url编码,编码的字符更多decodeURIComponent():url解码parseInt():将字符串转为数字* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为numberisNaN():判断一个值是否是NaN* NaN六亲不认，连自己都不认。NaN参与的==比较全部问falseeval():讲 JavaScript 字符串，并把它作为脚本代码来执行。3. URL编码传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

day4

BOM
简单学习：
功能：控制html文档的内容
代码：获取页面标签（元素）对象Element
document.getElementById(“id值”)：通过元素的id获取元素的对象
操作Element对象：
1.修改属性值
明确获取的对象是哪一个？
查看API文档，找其中有哪些属性可以设置
2.修改标签体内容
属性：inner HTML

<img id="light" src="img/off.gif">
<h1 id="title">你好</h1>
<script>
/*var light=document.getElementById("light")alert("我要换图片")light.src="img/on.gif";*/
var title=document.getElementById("title");
alert("我要换内容了")
title.innerHTML="你好";

案例1

<img id="light" src="img/off.gif">
<script>分析：1.获取图片对象2.绑定单击事件3.每次点击切换图片* 规则：* 如果灯是开的 on,切换图片为 off* 如果灯是关的 off,切换图片为 on* 使用标记flag来完成1.获取图片对象var light = document.getElementById("light");var flag = false;//代表灯是灭的。 off图片//2.绑定单击事件light.onclick = function(){if(flag){//判断如果灯是开的，则灭掉light.src = "img/off.gif";flag = false;}else{//如果灯是灭的，则打开light.src = "img/on.gif";flag = true;}}
</script>

BOM概念：Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象
在这里插入图片描述

<body><input id="openBtn" type="button" value="打开窗口"><input id="closeBtn" type="button" value="关闭窗口"><script>/*Window：窗口对象1. 创建2. 方法1. 与弹出框有关的方法：alert()	显示带有一段消息和一个确认按钮的警告框。confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。* 如果用户点击确定按钮，则方法返回true* 如果用户点击取消按钮，则方法返回falseprompt()	显示可提示用户输入的对话框。* 返回值：获取用户输入的值2. 与打开关闭有关的方法：close()	关闭浏览器窗口。* 谁调用我 ，我关谁open()	打开一个新的浏览器窗口* 返回新的Window对象3. 与定时器有关的方式setTimeout()	在指定的毫秒数后调用函数或计算表达式。* 参数：1. js代码或者方法对象2. 毫秒值* 返回值：唯一标识，用于取消定时器clearTimeout()	取消由 setTimeout() 方法设置的 timeout。setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。clearInterval()	取消由 setInterval() 设置的 timeout。3. 属性：1. 获取其他BOM对象：historylocationNavigatorScreen:2. 获取DOM对象document4. 特点* Window对象不需要创建可以直接使用 window使用。 window.方法名();* window引用可以省略。  方法名();*//*alert("hello window");window.alert("hello a")*//*//确认框var flag = confirm("您确定要退出吗？");if(flag){//退出操作alert("欢迎再次光临！");}else{//提示：手别抖...alert("手别抖...");}*//*//输入框var result =  prompt("请输入用户名");alert(result);*//* //打开新窗口var openBtn = document.getElementById("openBtn");var newWindow;openBtn.onclick = function(){//打开新窗口newWindow = open("https://www.baidu.com");}//关闭新窗口var closeBtn = document.getElementById("closeBtn");closeBtn.onclick = function(){// 关闭新窗口newWindow.close();}*///一次性定时器//setTimeout("fun();",2000);//var id = setTimeout(fun,2000);//clearTimeout(id);/* function fun(){alert('boom~~');}//循环定时器var id = setInterval(fun,2000);clearInterval(id);
*//* //获取historyvar h1 =  window.history;var h2 = history;alert(h1);alert(h2);
*/var openBtn = window.document.getElementById("openBtn");alert(openBtn);/*document.getElementById("");*/</script>

案例2

<body><img id="img" src="img/banner_1.jpg" width="100%"><script>/*分析：1.在页面上使用img标签展示图片2.定义一个方法，修改图片对象的src属性3.定义一个定时器，每隔3秒调用方法一次。*///修改图片src属性var number = 1;function fun(){number ++ ;//判断number是否大于3if(number > 3){number = 1;}//获取img对象var img = document.getElementById("img");img.src = "img/banner_"+number+".jpg";}//2.定义定时器setInterval(fun,3000);</script>
</body>

location:地址栏对象
1.创建（获取）：
window.location
location
2.方法：
reload（）重新加载当前文档刷新
3.属性
href 设置或返回完整的URL

<body><input type="button" id="btn" value="刷新"><input type="button" id="goItcast" value="去传智"><script>//reload方法，定义一个按钮，点击按钮，刷新当前页面//1.获取按钮var btn = document.getElementById("btn");//2.绑定单击事件btn.onclick = function(){//3.刷新页面location.reload();}//获取hrefvar href = location.href ;//alert(href);//点击按钮，去访问www.itcast.cn官网//1.获取按钮var goItcast = document.getElementById("goItcast");//2.绑定单击事件goItcast.onclick = function(){//3.去访问www.itcast.cn官网location.href = "https://www.baidu.com";} </script>
</body>

自动跳转案例

<body><p><span id="time">5</span>秒之后，自动跳转到首页...</p><script>/*分析：1.显示页面效果  <p>2.倒计时读秒效果实现2.1 定义一个方法，获取span标签，修改span标签体内容，时间--2.2 定义一个定时器，1秒执行一次该方法3.在方法中判断时间如果<= 0 ，则跳转到首页*/// 2.倒计时读秒效果实现var second = 5;var time = document.getElementById("time");//定义一个方法，获取span标签，修改span标签体内容，时间--function showTime(){second -- ;//判断时间如果<= 0 ，则跳转到首页if(second <= 0){//跳转到首页location.href = "https://www.baidu.com";}time.innerHTML = second +"";}//设置定时器，1秒执行一次该方法setInterval(showTime,1000);</script>
</body>

History:历史记录对象
1.创建（获取）：
window.history
history
2.方法：
back() 加载history 列表中的前一个URL
forward() 加载history 列表中的下一个URL
go() 加载history 列表中的某一个具体页面
3.属性
length 返回当前窗口历史列表中的URL 数量

<head><meta charset="UTF-8"><title>History对象</title>
</head>
<body><input type="button" id="btn" value="获取历史记录个数"><a href="09_History对象2.html">09页面</a><input type="button" id="forward" value="前进">
<script>/*History：历史记录对象1. 创建(获取)：1. window.history2. history2. 方法：* back()	加载 history 列表中的前一个 URL。* forward()	加载 history 列表中的下一个 URL。* go(参数)	    加载 history 列表中的某个具体页面。* 参数：* 正数：前进几个历史记录* 负数：后退几个历史记录3. 属性：* length	返回当前窗口历史列表中的 URL 数量。*///1.获取按钮var btn = document.getElementById("btn");//2.绑定单机事件btn.onclick = function(){//3.获取当前窗口历史记录个数var length = history.length;alert(length);}//1.获取按钮var forward = document.getElementById("forward");//2.绑定单机事件forward.onclick = function(){//前进// history.forward();history.go(1);}
</script>

<body><img id="img" src="img/banner_1.jpg" width="100%"><input type="button" id="back" value="后退"><script>/*分析：1.在页面上使用img标签展示图片2.定义一个方法，修改图片对象的src属性3.定义一个定时器，每隔3秒调用方法一次。*///修改图片src属性var number = 1;function fun(){number ++ ;//判断number是否大于3if(number > 3){number = 1;}//获取img对象var img = document.getElementById("img");img.src = "img/banner_"+number+".jpg";}//2.定义定时器setInterval(fun,3000);//1.获取按钮var back = document.getElementById("back");//2.绑定单机事件back.onclick = function(){//后退// history.back();history.go(-1);}</script>

DOM
概念：Document object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作
W3C Dom 标准被分为 3个不同的部分：
核心 Dom 针对任何结构文档的标准模型
document:文档对象
Element:元素对象
Attribute:属性对象
Text :文本对象
Comment:注释对象

	Node:节点对象，其他5个父类对象
**XML DOM -针对 XML 文档的标准模型
HTML DOM 针对 HTML 文档的标准模型**

树型结构：
在这里插入图片描述
核心DOM模型
Document :文档对象

 <body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div class="cls1">div4</div><div class="cls1">div5</div><input type="text" name="username">
<script>/*Document：文档对象1. 创建(获取)：在html dom模型中可以使用window对象来获取1. window.document2. document2. 方法：1. 获取Element对象：1. getElementById()	： 根据id属性值获取元素对象。id属性值一般唯一2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组2. 创建其他DOM对象：createAttribute(name)createComment()createElement()createTextNode()3. 属性*///2.根据元素名称获取元素对象们。返回值是一个数组var divs = document.getElementsByTagName("div");//alert(divs.length);//3.根据Class属性值获取元素对象们。返回值是一个数组var div_cls = document.getElementsByClassName("cls1");// alert(div_cls.length);//4.根据name属性值获取元素对象们。返回值是一个数组var ele_username = document.getElementsByName("username");//alert(ele_username.length);var table = document.createElement("table");alert(table);</script>
</body>

Element: 元素对象
1.获取/创建：通过document来获取和创建
2.方法：
removeAttribute():删除属性
setAttribute():设置属性

    <body><a>点我试一试</a><input type="button" id="btn_set" value="设置属性"><input type="button" id="btn_remove" value="删除属性">
<script>//获取btnvar btn_set =document.getElementById("btn_set");btn_set.onclick = function(){//1.获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.setAttribute("href","https://www.baidu.com");} //获取btnvar btn_remove =document.getElementById("btn_remove");btn_remove.onclick = function(){//1.获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.removeAttribute("href");}
</script>
</body>

Node:节点对象，其他5个的父对象
在这里插入图片描述

<head><meta charset="UTF-8"><title>Node对象</title><style>div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}#div3{width: 100px;height: 100px;}</style>
</head>
<body><div id="div1"><div id="div2">div2</div>div1</div><a href="javascript:void(0);" id="del">删除子节点</a><a href="javascript:void(0);" id="add">添加子节点</a><!--<input type="button" id="del" value="删除子节点">-->
<script>//1.获取超链接var element_a = document.getElementById("del");//2.绑定单击事件element_a.onclick = function(){var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);}//1.获取超链接var element_add = document.getElementById("add");//2.绑定单击事件element_add.onclick = function(){var div1 = document.getElementById("div1");//给div1添加子节点//创建div节点var div3 = document.createElement("div");div3.setAttribute("id","div3");div1.appendChild(div3);}/*超链接功能：1.可以被点击：样式2.点击后跳转到href指定的url需求：保留1功能，去掉2功能实现：href="javascript:void(0);"*/var div2 = document.getElementById("div2");var div1 = div2.parentNode;alert(div1);
</script>
</body>

<!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><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td></tr>
</table>
<script>/*分析：1.添加：1. 给添加按钮绑定单击事件2. 获取文本框的内容3. 创建td，设置td的文本为文本框的内容。4. 创建tr5. 将td添加到tr中6. 获取table，将tr添加到table中2.删除：1.确定点击的是哪一个超链接<a href="javascript:void(0);" οnclick="delTr(this);" >删除</a>2.怎么删除？removeChild():通过父节点删除子节点*///1.获取按钮/* document.getElementById("btn_add").onclick = function(){//2.获取文本框的内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//3.创建td，赋值td的标签体//id 的 tdvar td_id = document.createElement("td");var text_id = document.createTextNode(id);td_id.appendChild(text_id);//name 的 tdvar td_name = document.createElement("td");var text_name = document.createTextNode(name);td_name.appendChild(text_name);//gender 的 tdvar td_gender = document.createElement("td");var text_gender = document.createTextNode(gender);td_gender.appendChild(text_gender);//a标签的tdvar td_a = document.createElement("td");var ele_a = document.createElement("a");ele_a.setAttribute("href","javascript:void(0);");ele_a.setAttribute("onclick","delTr(this);");var text_a = document.createTextNode("删除");ele_a.appendChild(text_a);td_a.appendChild(ele_a);//4.创建trvar tr = document.createElement("tr");//5.添加td到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//6.获取tablevar table = document.getElementsByTagName("table")[0];table.appendChild(tr);}*///使用innerHTML添加document.getElementById("btn_add").onclick = function() {//2.获取文本框的内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//获取tablevar table = document.getElementsByTagName("table")[0];//追加一行table.innerHTML += "<tr>\n" +"        <td>"+id+"</td>\n" +"        <td>"+name+"</td>\n" +"        <td>"+gender+"</td>\n" +"        <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +"    </tr>";}//删除方法function delTr(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}
</script>
</body>
</html>

HTML DOM
1.标签体的设置和获取：innerHTML
2.使用html元素对象的属性

<body><div id="div1">div</div><script >var div = document.getElementById("div1");var innerHTML = div.innerHTML;//alert(innerHTML);//div标签中替换一个文本输入框//div.innerHTML = "<input type='text'>";//div标签中追加一个文本输入框//div.innerHTML += "<input type='text'>";div.innerHTML+="<input type='text'>"</script>
</body>

3.控制元素样式
1.使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border=“1px solid red”;
div1.style.width=“200px”;
//font-size–>fontsize
div1.style.fontsize=“20px”;
2.提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

<head><meta charset="UTF-8"><title>控制样式</title><style>.d1{border: 1px solid red;width: 100px;height: 100px;}.d2{border: 1px solid blue;width: 200px;height: 200px;}</style>
</head>
<body><div id="div1">div1</div><div id="div2">div2</div>
<script>var div1 = document.getElementById("div1");div1.onclick = function(){//修改样式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.style.fontSize = "20px";}var div2 = document.getElementById("div2");div2.onclick = function(){div2.className = "d1";}
</script>
</body>

DOM里面的事件
事件：
概念：某些组件被执行了某些操作后，触发某些代码的执行
事件：某些操作，如：单击双击键盘按了鼠标移动了
事件源：组件如：按钮文本输入框
监听器：代码：
注册监听：将事件事件源监听器结合在一起，当事件源上发生了某个事件则触发执行某个监听器代码
常见的事件：
1.点击事件：
1.onclick:单击事件
2.ondblclick:双击事件
2.焦点事件：
1.onblur:失去焦点
2.onfocus:元素获得焦点
3.加载事件：
1.onload:一张页面或一幅图像完成加载
4.鼠标事件：
1.onmousedown 鼠标按钮被按下
2.onmouseup 鼠标按键被松开
3.onmousemove 鼠标被移动
4.onmouseover 鼠标移到某元素之上
5.onmouseout 鼠标从某元素移动开
5.键盘事件：
1.onkeydown 某个键盘按键被按下
2.onkeyup 某个键盘按键被松开
3.onkeypress 某个键盘按键被按下并松开
6.选择和改变
1.onchange 域的内容被改变
2.onselect 文本被选中
7.表单事件：
1.onsubmit 确认按钮被点击
2.onreset 重置按钮被点击

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常见事件</title><script>/*常见的事件：1. 点击事件：1. onclick：单击事件2. ondblclick：双击事件2. 焦点事件1. onblur：失去焦点。* 一般用于表单验证2. onfocus:元素获得焦点。3. 加载事件：1. onload：一张页面或一幅图像完成加载。4. 鼠标事件：1. onmousedown	鼠标按钮被按下。* 定义方法时，定义一个形参，接受event对象。* event对象的button属性可以获取鼠标按钮键被点击了。2. onmouseup	鼠标按键被松开。3. onmousemove	鼠标被移动。4. onmouseover	鼠标移到某元素之上。5. onmouseout	鼠标从某元素移开。5. 键盘事件：1. onkeydown	某个键盘按键被按下。2. onkeyup		某个键盘按键被松开。3. onkeypress	某个键盘按键被按下并松开。6. 选择和改变1. onchange	域的内容被改变。2. onselect	文本被选中。7. 表单事件：1. onsubmit	确认按钮被点击。* 可以阻止表单的提交* 方法返回false则表单被阻止提交。2. onreset	重置按钮被点击。*///2.加载完成事件  onloadwindow.onload = function(){/*//1.失去焦点事件document.getElementById("username").onblur = function(){alert("失去焦点了...");}*//*//3.绑定鼠标移动到元素之上事件document.getElementById("username").onmouseover = function(){alert("鼠标来了....");}*//* //3.绑定鼠标点击事件document.getElementById("username").onmousedown = function(event){// alert("鼠标点击了....");alert(event.button);}*//*  document.getElementById("username").onkeydown = function(event){// alert("鼠标点击了....");// alert(event.button);if(event.keyCode == 13){alert("提交表单");}}*//* document.getElementById("username").onchange = function(event){alert("改变了...")}document.getElementById("city").onchange = function(event){alert("改变了...")}*//*document.getElementById("form").onsubmit = function(){//校验用户名格式是否正确var flag = false;return flag;}*/}function checkForm(){return true;}</script>
</head>
<body>
<!--function fun(){return  checkForm();}-->
<form action="#" id="form" onclick="return  checkForm();">
<input name="username" id="username"><select id="city"><option>--请选择--</option><option>北京</option><option>上海</option><option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>

案例1

<!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%;}.out{background-color: white;}.over{background-color: pink;}</style><script>/*分析：1.全选：* 获取所有的checkbox* 遍历cb，设置每一个cb的状态为选中  checked*///1.在页面加载完后绑定事件window.onload = function(){//2.给全选按钮绑定单击事件document.getElementById("selectAll").onclick = function(){//全选//1.获取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍历for (var i = 0; i < cbs.length; i++) {//3.设置每一个cb的状态为选中  checkedcbs[i].checked = true;}}document.getElementById("unSelectAll").onclick = function(){//全不选//1.获取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍历for (var i = 0; i < cbs.length; i++) {//3.设置每一个cb的状态为未选中  checkedcbs[i].checked = false;}}document.getElementById("selectRev").onclick = function(){//反选//1.获取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍历for (var i = 0; i < cbs.length; i++) {//3.设置每一个cb的状态为相反cbs[i].checked = !cbs[i].checked;}}document.getElementById("firstCb").onclick = function(){//第一个cb点击//1.获取所有的checkboxvar cbs = document.getElementsByName("cb");//获取第一个cb//2.遍历for (var i = 0; i < cbs.length; i++) {//3.设置每一个cb的状态和第一个cb的状态一样cbs[i].checked =  this.checked;}}//给所有tr绑定鼠标移到元素之上和移出元素事件var trs = document.getElementsByTagName("tr");//2.遍历for (var i = 0; i < trs.length; i++) {//移到元素之上trs[i].onmouseover = function(){this.className = "over";}//移出元素trs[i].onmouseout = function(){this.className = "out";}}}</script></head>
<body><table><caption>学生信息表</caption><tr><th><input type="checkbox" name="cb" id="firstCb"></th><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td><input type="checkbox"  name="cb" ></td><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox"  name="cb" ></td><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox"  name="cb" ></td><td>3</td><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>

案例2

<!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 ;}.error{color:red;}#td_sub{padding-left: 150px;}</style>
<script>/*分析：1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。如果都为true，则监听器方法返回true如果有一个为false，则监听器方法返回false2.定义一些方法分别校验各个表单项。3.给各个表单项绑定onblur事件。*/window.onload = function(){//1.给表单绑定onsubmit事件document.getElementById("form").onsubmit = function(){//调用用户校验方法   chekUsername();//调用密码校验方法   chekPassword();//return checkUsername() && checkPassword();return checkUsername() && checkPassword();}//给用户名和密码框分别绑定离焦事件document.getElementById("username").onblur = checkUsername;document.getElementById("password").onblur = checkPassword;}//校验用户名function checkUsername(){//1.获取用户名的值var username = document.getElementById("username").value;//2.定义正则表达式var reg_username = /^\w{6,12}$/;//3.判断值是否符合正则的规则var flag = reg_username.test(username);//4.提示信息var s_username = document.getElementById("s_username");if(flag){//提示绿色对勾s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";}else{//提示红色用户名有误s_username.innerHTML = "用户名格式有误";}return flag;}//校验密码function checkPassword(){//1.获取用户名的值var password = document.getElementById("password").value;//2.定义正则表达式var reg_password = /^\w{6,12}$/;//3.判断值是否符合正则的规则var flag = reg_password.test(password);//4.提示信息var s_password = document.getElementById("s_password");if(flag){//提示绿色对勾s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";}else{//提示红色用户名有误s_password.innerHTML = "密码格式有误";}return flag;}</script>
</head>
<body><div class="rg_layout"><div class="rg_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="rg_center"><div class="rg_form"><!--定义表单 form--><form action="#" id="form" method="get"><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="s_username" class="error"></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="请输入密码"><span id="s_password" class="error"></span></td></tr><tr><td class="td_left"><label for="email">Email</label></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" checked> 男<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" id="td_sub"><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>

day5
Bootstrap:前端框架
框架：一个半成品软件
好处：
1.定义了很多的css样式和js插件，我们开发人员直接可以使用这些样式和插件得到丰富的页面效果
2.响应式布局
同一套页面可以兼容不同分辨的设备

快速入门：
@看写的对不对按住ctrl键鼠标变成小手就是对了
BootStrap依赖于jQuery
1.下载BootStrap
2.在项目中将这三个文件夹复制
3.创建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"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

响应式布局
*同一套页面可以兼容不同分辨的设备
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
在这里插入图片描述

注意：
1.一行中如果格子数目超过12，则超出部分自动换行
2.栅格类属性可以向上兼容，栅格类适用于与屏幕宽度大于或等于分界点大小的设备
3.如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行

<!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"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap HelloWorld</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script><style>.inner{border:1px solid red;}</style>
</head>
<body><!--1.定义容器--><div class="container"><!--2.定义行--><div class="row"><!--3.定义元素在大显示器一行12个格子在pad上一行6个格子--><!--<div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div>--><div class="col-md-4 inner">栅格</div><div class="col-md-4 inner">栅格</div><div class="col-md-4 inner">栅格</div></div></div>
</body>
</html>

css样式和js插件
1.全部CSS样式：

按钮：class=“btn btn-default”
图片：class=“img-responsive”:图片在任意尺寸都占100%
图片形状：
:方形
:圆形
:相框
*表格：
table
table-bordered
table-hover
*表单
给表单项添加：class=“form-control”
2.组件：
*导航条
*分页条
3.插件：
*轮播图

按钮图片

<body>
<a class="btn btn-default" href="#" >Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default"  type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<br>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button><!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button><!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button><!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button><!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
<hr>
<img src="img/banner_1.jpg" class="img-responsive"/>
<img src="img/banner_1.jpg" class="img-responsive img-rounded" />
<img src="img/banner_1.jpg" class="img-responsive img-circle"/>
<img src="img/banner_1.jpg" class="img-responsive img-thumbnail"/>
</body>

表格和表单

<body><table class="table table-bordered table-hover"><tr><th>编号</th><th>姓名</th><th>年龄</th></tr><tr><td>001</td><td>张三</td><td>23</td></tr><tr><td>002</td><td>张三</td><td>23</td></tr><tr><td>003</td><td>张三</td><td>23</td></tr></table>
<hr><hr><hr><form class="form-horizontal"><div class="form-group"><label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label><div class="col-sm-10"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div></form>
</body>

导航条

<body>
<nav class="navbar navbar-inverse"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><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 navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">首页</a></div><!-- Collect the nav links, forms, and other content for toggling --><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="#">Link</a></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="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></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="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>
</body>

分页

<body>
<nav aria-label="Page navigation"><ul class="pagination"><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</a></li><li class="active"><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul>
</nav>
</body>

轮播图

<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><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><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="img/banner_1.jpg" alt="..."></div><div class="item"><img src="img/banner_2.jpg" alt="..."></div><div class="item"><img src="img/banner_3.jpg" alt="..."></div></div><!-- Controls --><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">Previous</span></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">Next</span></a>
</div>
</body>

案例：

 <style>.paddtop{padding-top: 10px;}.search-btn{float: left;border:1px solid #ffc900;width: 90px;height: 35px;background-color:#ffc900 ;text-align: center;line-height: 35px;margin-top: 15px;}.search-input{float: left;border:2px solid #ffc900;width: 400px;height: 35px;padding-left: 5px;margin-top: 15px;}.jx{border-bottom: 2px solid #ffc900;padding: 5px;}.company{height: 40px;background-color: #ffc900;text-align: center;line-height:40px ;font-size: 8px;}</style>
</head>
<body><!-- 1.页眉部分--><header class="container-fluid"><div class="row"><img src="img/top_banner.jpg" class="img-responsive"></div><div class="row paddtop"><div class="col-md-3"><img src="img/logo.jpg" class="img-responsive"></div><div class="col-md-5"><input class="search-input" placeholder="请输入线路名称"><a class="search-btn" href="#">搜索</a></div><div class="col-md-4"><img src="img/hotel_tel.png" class="img-responsive"></div></div><!--导航栏--><div class="row"><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><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 navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">首页</a></div><!-- Collect the nav links, forms, and other content for toggling --><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="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></div><!--轮播图--><div class="row"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><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><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="img/banner_1.jpg" alt="..."></div><div class="item"><img src="img/banner_2.jpg" alt="..."></div><div class="item"><img src="img/banner_3.jpg" alt="..."></div></div><!-- Controls --><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">Previous</span></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">Next</span></a></div></div></header><!-- 2.主体部分--><div class="container"><div class="row jx"><img src="img/icon_5.jpg"><span>黑马精选</span></div><div class="row paddtop"><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div></div><div class="row jx"><img src="img/icon_6.jpg"><span>国内游</span></div><div class="row paddtop"><div class="col-md-4"><img src="img/guonei_1.jpg"></div><div class="col-md-8"><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div></div><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div></div></div></div></div><!-- 3.页脚部分--><footer class="container-fluid"><div class="row"><img src="img/footer_service.png" class="img-responsive"></div><div class="row company">江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</div></footer>
</body>

day6
XML：标记语言
概念：可扩展标记语言
可扩展：标签都是自己定义的
功能：
*存储数据
1.配置文件
2.在网络中传输
xml与html的区别
1.xml标签都是自定义的，html标签是预定义
2.xml的语法严格，html语法松散
3.xml是存储数据的，html是展示数据
语法
基本语法：
1.xml文档的后缀名 .xml
2.xml第一行必须定义为文档声明
3.xml文档中有且仅有一个跟标签
4.属性值不许使用引号(单双都可)引起来
5.标签必须正确关闭
6.xml标签名称区分大小写
快速入门：
在这里插入图片描述

5.文本：
*CDATA区：在该区域中的数据会被原样展示
*格式:<![CDATA [数据]]>

约束：规定xml文档的书写规则
*作为框架的使用者（程序员）
在这里插入图片描述
1.能过在xml中引入约束文档
2.能够简单的读懂约束文档
约束分类：
1.DTD：一种简单的约束技术
2.Schema:一种复杂的约束技术

在这里插入图片描述
Schema弥补了DTD的缺陷

解析：操作xml文档，将文档中的数据读取道内存中
操作xml文档
1.解析(读取)：将文档中的数据读取到内存中
2.写入：将内存中的数据保存到xml文档中，持久化的存储
解析xml的方式：
1.DOM：将标记语言文档一次性加载到内存，在内存中形成一课dom数
优点:操作方便，可以对文档进行CRUD的所有操作
缺点：占内存服务器端一般使用DOM的思想 JAVAEE做服务器开发的
2.SAX:逐行读取，基于事件驱动的
优点：不占内存
缺点：只能读取，不能增删改在移动端一般使用SAX

xml的解析器是根据DOM和SAX思想，写出来的工具包
在这里插入图片描述

xml常用的解析器：jsoup
Jsoup:
Jsoup的快速入门：
1.导入jar包
2.获取Document对象
3.获取对应的标签Element对象
4.获取数据

/*** Jsoup快速入门*/
public class JsoupDemo1 {public static void main(String[] args) throws IOException {//2.获取Document对象，根据xml文档获取//2.1获取student.xml的pathString path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath();//2.2解析xml文档，加载文档进内存，获取dom树--->DocumentDocument document = Jsoup.parse(new File(path), "utf-8");//3.获取元素对象 ElementElements elements = document.getElementsByTag("name");System.out.println(elements.size());//3.1获取第一个name的Element对象Element element = elements.get(0);//3.2获取数据String name = element.text();System.out.println(name);}
}

对象的使用：
1. Jsoup：工具类，可以解析html或xml文档，返回Document
* parse：解析html或xml文档，返回Document
* parse(File in, String charsetName)：解析xml或html文件的。
* parse(String html)：解析xml或html字符串
* parse(URL url, int timeoutMillis)：通过网络路径获取指定的html或xml的文档对象
2. Document：文档对象。代表内存中的dom树
* 获取Element对象
* getElementById(String id)：根据id属性值获取唯一的element对象
* getElementsByTag(String tagName)：根据标签名称获取元素对象集合
* getElementsByAttribute(String key)：根据属性名称获取元素对象集合
* getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合
3. Elements：元素Element对象的集合。可以当做 ArrayList来使用
4. Element：元素对象
1. 获取子元素对象
* getElementById(String id)：根据id属性值获取唯一的element对象
* getElementsByTag(String tagName)：根据标签名称获取元素对象集合
* getElementsByAttribute(String key)：根据属性名称获取元素对象集合
* getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合
2. 获取属性值
* String attr(String key)：根据属性名称获取属性值
3. 获取文本内容
* String text():获取所有字标签的纯文本内容
* String html():获取标签体的所有内容(包括子标签的标签和文本内容)
5. Node：节点对象
* 是Document和Element的父类

/***Element对象功能*/
public class JsoupDemo4 {public static void main(String[] args) throws IOException {//1.获取student.xml的pathString path = JsoupDemo4.class.getClassLoader().getResource("student.xml").getPath();//2.获取Document对象Document document = Jsoup.parse(new File(path), "utf-8");/*Element：元素对象1. 获取子元素对象* getElementById(String id)：根据id属性值获取唯一的element对象* getElementsByTag(String tagName)：根据标签名称获取元素对象集合* getElementsByAttribute(String key)：根据属性名称获取元素对象集合* getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合2. 获取属性值* String attr(String key)：根据属性名称获取属性值3. 获取文本内容* String text():获取所有字标签的纯文本内容* String html():获取标签体的所有内容(包括子标签的标签和文本内容)*///通过Document对象获取name标签，获取所有的name标签，可以获取到两个Elements elements = document.getElementsByTag("name");System.out.println(elements.size());System.out.println("----------------");//通过Element对象获取子标签对象Element element_student = document.getElementsByTag("student").get(0);Elements ele_name = element_student.getElementsByTag("name");System.out.println(ele_name.size());//获取student对象的属性值String number = element_student.attr("NUMBER");System.out.println(number);System.out.println("------------");//获取文本内容String text = ele_name.text();String html = ele_name.html();System.out.println(text);System.out.println(html);}

快捷查询方式：
1. selector:选择器
* 使用的方法：Elements select(String cssQuery)
* 语法：参考Selector类中定义的语法

***选择器查询*/
public class JsoupDemo5 {public static void main(String[] args) throws IOException {//1.获取student.xml的pathString path = JsoupDemo5.class.getClassLoader().getResource("student.xml").getPath();//2.获取Document对象Document document = Jsoup.parse(new File(path), "utf-8");//3.查询name标签/*div{}*/Elements elements = document.select("name");System.out.println(elements);System.out.println("=----------------");//4.查询id值为itcast的元素Elements elements1 = document.select("#itcast");System.out.println(elements1);System.out.println("----------------");//5.获取student标签并且number属性值为heima_0001的age子标签//5.1.获取student标签并且number属性值为heima_0001Elements elements2 = document.select("student[number=\"heima_0001\"]");System.out.println(elements2);System.out.println("----------------");//5.2获取student标签并且number属性值为heima_0001的age子标签Elements elements3 = document.select("student[number=\"heima_0001\"] > age");System.out.println(elements3);}

XPath：XPath即为XML路径语言，它是一种用来确定XML（标准通用标记语言的子集）文档中某部分位置的语言
* 使用Jsoup的Xpath需要额外导入jar包。
* 查询w3cshool参考手册，使用xpath的语法完成查询
* 代码：
//1.获取student.xml的path
String path = JsoupDemo6.class.getClassLoader().getResource(“student.xml”).getPath();
//2.获取Document对象
Document document = Jsoup.parse(new File(path), “utf-8”);

         //3.根据document对象，创建JXDocument对象JXDocument jxDocument = new JXDocument(document);//4.结合xpath语法查询//4.1查询所有student标签List<JXNode> jxNodes = jxDocument.selN("//student");for (JXNode jxNode : jxNodes) {System.out.println(jxNode);}System.out.println("--------------------");//4.2查询所有student标签下的name标签List<JXNode> jxNodes2 = jxDocument.selN("//student/name");for (JXNode jxNode : jxNodes2) {System.out.println(jxNode);}System.out.println("--------------------");//4.3查询student标签下带有id属性的name标签List<JXNode> jxNodes3 = jxDocument.selN("//student/name[@id]");for (JXNode jxNode : jxNodes3) {System.out.println(jxNode);}System.out.println("--------------------");//4.4查询student标签下带有id属性的name标签 并且id属性值为itcastList<JXNode> jxNodes4 = jxDocument.selN("//student/name[@id='itcast']");for (JXNode jxNode : jxNodes4) {System.out.println(jxNode);}

day7

在这里插入图片描述
2.web服务器软件：Tomcat
服务器：安装了服务器软件的计算机
服务器软件：接收用户的请求，处理请求，做出响应
web服务器软件：：接收用户的请求，处理请求，做出响应
在web服务器软件中，可以部署web项目，让用户通过浏览器来访问这些项目
就是 web容器
JAVASE:JAVA基础
JAVAME:是Java的Mimi版
JAVAEE:Java的企业版

在这里插入图片描述

5.关闭
1.正常关闭
bin/shutdown.bat
ctrl+c
2.强制关闭
点击启动窗口的x
6.配置
部署项目的方式：
1.直接将项目放到webapps目录下即可
*/hello:项目的访问路径 —》虚拟目录
*简单部署：将项目大成一个war包，再将war包放置到webapps下
war包会自动解压缩
2.配置conf/server.xml文件
在标签体中配置

*docBase:项目存放的路径
*path :虚拟目录
3.在conf\catalina\localhost创建任意名称的xml文件，在文件中编写

*虚拟目录：xml 文件的名称
第三中方式跟热部署差不多

静态项目和动态项目：
3.Servlet入门学习
在这里插入图片描述
server applet
概念：运行在服务器端的小程序
servlet就是一个接口，定义了Java类被浏览器访问到(tomcat识别) 的规则
将来我们定义一个类，实现Servlet接口，复习方法

快速入门：
1.创建一个JavaEE项目
2.定义一个类，实现Servlet接口
3.实现接口中的抽象方法
4.配置Servlet
在web.xml中配置

demo1
cn.loner.liu.Demo1

demo1
/demo1

Servlet执行原理
在这里插入图片描述
1.当服务器接收到客户端浏览器的请求后，会解析请求URL路径，获取访问的Servlet的资源路径
2.查找web.xml文件，是否有对应的标签体内容
3.如果有，则在找到对应的全类名
4.tomcat会将字节码文件加载进内存，并且创建其对象
5.调用其方法

Servlet中的生命周期方法：
1. 被创建：执行init方法，只执行一次
  - Servlet什么时候被创建？
    - 默认情况下，第一次被访问时，Servlet被创建
    - 可以配置执行Servlet的创建时机。
      - 在标签下配置
        
        第一次被访问时，创建
        
        的值为负数
        
        在服务器启动时，创建
        
        的值为0或正整数
        
        Servlet的init方法，只执行一次，说明一个Servlet在内存中只存在一个对象，Servlet是单例的
    - 多个用户同时访问时，可能存在线程安全问题。
    - 解决：尽量不要在Servlet中定义成员变量。即使定义了成员变量，也不要对修改值
2. 提供服务：执行service方法，执行多次
  - 每次访问Servlet时，Service方法都会被调用一次。
3. 被销毁：执行destroy方法，只执行一次
  - Servlet被销毁时执行。服务器关闭时，Servlet被销毁
  - 只有服务器正常关闭时，才会执行destroy方法。
  - destroy方法在Servlet被销毁之前执行，一般用于释放资源
Servlet3.0：
- 好处：
  - 支持注解配置。可以不需要web.xml了。
- 步骤：
  1. 创建JavaEE项目，选择Servlet的版本3.0以上，可以不创建web.xml
  2. 定义一个类，实现Servlet接口
  3. 复写方法
  4. 在类上使用@WebServlet注解，进行配置
  - @WebServlet(“资源路径”)
    @Target({ElementType.TYPE})
    @Retention(RetentionPolicy.RUNTIME)
    @Documented
    public @interface WebServlet {
    String name() default “”;//相当于
```
  String[] value() default {};//代表urlPatterns()属性配置String[] urlPatterns() default {};//相当于<url-pattern>int loadOnStartup() default -1;//相当于<load-on-startup>WebInitParam[] initParams() default {};boolean asyncSupported() default false;String smallIcon() default "";String largeIcon() default "";String description() default "";String displayName() default "";
```
    }

IDEA与tomcat的相关配置

IDEA会为每一个tomcat部署的项目单独建立一份配置文件
- 查看控制台的log：Using CATALINA_BASE: “C:\Users\fqy.IntelliJIdea2018.1\system\tomcat_itcast”
工作空间项目和 tomcat部署的web项目
- tomcat真正访问的是“tomcat部署的web项目”，“tomcat部署的web项目"对应着"工作空间项目” 的web目录下的所有资源
- WEB-INF目录下的资源不能被浏览器直接访问。
断点调试：使用"小虫子"启动 dubug 启动

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Web前端后7天
Web前端后7天 1.概念 2.步骤 3.执行原理 4.生命周期 5.Servlet3.0 注解配置 6.Servlet的体系结构 servlet --接口 GenericServlet–抽象类HttpServlet --抽象类：对http协议的一种封装，简化操作 1.定义类继承HttpServlet 2.复写doGet/doPost方法@WebServlet("/demo3&quo…...
2024/4/16 4:32:53
Web前端后7天
Web前端后7天 1.概念 2.步骤 3.执行原理 4.生命周期 5.Servlet3.0 注解配置 6.Servlet的体系结构 servlet --接口 GenericServlet–抽象类HttpServlet --抽象类：对http协议的一种封装，简化操作 1.定义类继承HttpServlet 2.复写doGet/doPost方法@WebServlet("/demo3&quo…...
2024/4/16 4:33:44
被百度劲风算法命中后，删除聚合页做法是否有效？
被百度劲风算法命中后，删除聚合页做法是否有效？我个人认为应该是有效的，但是删除后多久见效就不好说了，疫情期间我的网站正常，但是疫情过后似乎就是劲风算法上线后，网站权重直接跌空，排名只剩下首页。痛并思痛，我检查了网站的所有聚合页，的确存在许多空聚合页的问题，…...
2024/5/3 16:01:30
java用Collections进行外挂List排序（不需要修改逻辑，走数据库，拼图即可）
java用Collections进行外挂List排序（不需要修改逻辑，走数据库，拼图即可）上代码，非常简单，直接贴需要排序的方法最后面就行了List<RP05> newList = new ArrayList<>();Collections.sort(newList, new Comparator<RP05>() {@Overridepublic int compare…...
2024/4/18 8:34:49
影响服务器线路的重要因素！
影响服务器线路的重要因素！ 1、服务器的放置环境服务器的放置环境影响着服务器的稳定性大家都知道，可是服务器机房的带宽巨细，影响着网站服务器的访问速度这个却很少有人关注。机房带宽越大，服务器的拜访速度也就越快。这也是为什么有些机房网站服务器装备相对低于其它机…...
2024/4/8 23:57:58
15小时虚拟筛选10亿分子，《Nature》+HMS验证云端新药研发未来
一种新药从开发到获得批准平均成本为20亿-30亿美元，至少耗时10年。这句话，药物研发领域的人大概都听累了。为什么这么难？湿实验昂贵而费时；初始化合物命中率低；临床前阶段的高损耗率。今年3月，哈佛大学医学院（HMS）的研究人员在《Nature》杂志发表了论文《An open-s…...
2024/4/28 15:55:31
洛谷 P2055 [ZJOI2009]假期的宿舍（二分图+最大流）
2020.7.9 这一道题花了一个小时的时间，花了好久debug还是wa，最后看题解解释没看代码才意识到自己把边连反了，所以才会wa。之前在做拆点那道题，要分两层，我上去天真地码了个dinic连边，一看样例过了就开心地提交了，结果wa了7个点，后来突然想起来郭神的ppt里有这个问题的详…...
2024/4/20 17:09:36
腾讯后台开发一面（凉）
本人背景：2020届双非本科应届渣渣毕业生找不到工作，因为疫情原因，找工作特别困难，之前实习随便找的一份创业公司的前端开发，创业公司嘛，工作9106，工资也不是很高，加上我的前端只学了3个月就去找的实习，各方面的能力都不足，对前端界面的开发力不从心，本人很是苦恼，做…...
2024/4/16 4:33:49
整合公司如何整合人员_需要持续整合
整合公司如何整合人员首先，让我们首先定义什么是持续集成。根据维基百科，“持续集成（CI）是一种实践，软件工程，将所有开发人员的工作副本与每天几次共享主线。”。这基本上意味着几个开发人员正在开发产品/应用程序，我们需要确保在以下情况下进行个人更改或其他更…...
2024/4/19 5:06:28
2020年苹果开学季+教育优惠详细讲解
2020 年苹果官网返校季促销活动已经在 7 月 9 日上午正式启动，或许由于疫情，今年优惠活动发生了一些变化，这里介绍下今年的苹果教育优惠以及今年的赠品耳机：AirPods.0 教育优惠购买链接：https://www.apple.com.cn/cn-k12/shop/back-to-school一、什么是苹果教育优惠，针对…...
2024/4/19 4:10:23
个人独资企业核定征收流程及相关详情
首先个人独资企业现在已被大众所熟知，尤其是个人独资企业的核定征收，一般的公司可以通过注册个人独资企业申请到核定征收，利用核定征收的优势降低自身的综合税负，合理的进行公转私。那么你知道个人独资核定征收的一些流程吗？现在绝大部分的个人独资核定征收都是以总部经…...
2024/4/16 4:34:10
vscode win7内网安装插件
解决方法：1、外网安装好插件，复制extensions插件文件夹。插件存放在用户目录下 .vscode文件夹下，直接将外网extensions内的插件复制到内网即可2、外网下载安装包，复制到内网安装。外网下载插件安装包：点击进入插件主页，点击右侧的 Download Extension 链接，下载离线安装…...
2024/4/16 4:34:15
转载学习资料
以下分享的视频教程 99% 来源于B站（哔哩哔哩），其余来自于慕课网，有的视频得反反复复来回看，希望这些视频能帮助你系统全面地自学 Java 语言。一、Java基础尚硅谷宋红康（强力推荐） https://www.bilibili.com/video/av48144058 动力节点Java零基础教程视频 https://www.b…...
2024/4/16 21:23:57
[论文速览] Fact-based Text Editing
Fact-based Text Editing，基于事实的文本编辑，2020，ACL，https://arxiv.org/pdf/2007.00916.pdf Abstract 我们提出了一种新的文本编辑任务，称为基于事实的文本编辑，其目标是修改给定的文档，以更好地描述知识库中的事实（例如，几个三元组）。这项任务在实践中很重要，因…...
2024/4/1 2:39:03
二进制安装方式下1.17.4版本k8s添加node节点
一：前提条件有一个二进制安装的k8s集群，且已经有若干个节点，证书文件都在，我这里的版本是1.17.4，如下图，此集群目前有四个node节点，各个组件也很正常，要添加的节点ip为172.16.2.145，主机名为node5二：node节点需要的文件kubelet，kube-proxy，flannel的二进制文件，这…...
2024/4/16 4:34:10
设置Android系统的USB模式
device.mk persist.sys.usb.config=mass_storage#USB storage persist.sys.usb.config=mtp#Media device...
2024/4/16 4:34:25
单元测试Junit-4.7所需jar包
链接：https://pan.baidu.com/s/1wluYczLvlvwHcEQMzRQgqw 提取码：cy3o...
2024/4/16 4:34:10
uvm_sequence启动方法之start
uvm_sequence作为UVM的重要机制，在启动sequence时一种方法便是通过调用start任务来实现. 1.start任务 start任务的入口参数有4个：sequencer指定了xaction从哪个sqr发送出去，parent_sequence影响是否调用父类的pre_do、mid_do、post_do；this_priority会影响到调度的优先级；…...
2024/4/1 2:39:01
VTune使用总结
1、安装完VTune，VTune自动与Visual Studio2015集成，VTune选项添加在可执行工程的右键菜单中，如下图所示。2、添加VTune的头文件目录和库文件目录，如下图所示：...
2024/4/16 7:43:10
艺点教你制作好看的动画POSE
近年来，游戏动画逐渐进入大家的世界，在动画制作的时候，动画人物的POSE 是尤为重要的，如果说人物的POSE不流畅，很僵硬，那么观众就会给这个人物形象扣分，人物的POSE 做好了就是加分项。可能有很多动画师在动画人物POSE的制作方面欠缺艺点经验，所以今天艺点动画来了，讲解…...
2024/4/16 4:33:24

Web前端7天

相关文章

最新文章