Javaweb笔记:第05章_HTML & CSS & JavaScript & XML
说明:本内容整理自B站黑马程序员Java web课程视频及文档>>B站黑马程序员Java web课程视频
1. web概念概述
1.1 软件架构
JavaWeb:使用Java语言开发基于互联网的项目 软件架构: 1. C/S: Client/Server 客户端/服务器端 在用户本地有一个客户端程序,在远程有一个服务器端程序 如:QQ,迅雷... 优点: 1. 用户体验好 缺点: 1. 开发、安装,部署,维护 麻烦 2. B/S: Browser/Server 浏览器/服务器端 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序 优点: 1. 开发、安装,部署,维护 简单 缺点: 1. 如果应用过大,用户的体验可能会受到影响 2. 对硬件要求过高
1.2 B/S架构
资源分类: 1. 静态资源: 使用静态网页开发技术(HTML,CSS,JavaScript)发布的资源。 特点: 所有用户访问,得到的结果是一样的。 如:文本,图片,音频、视频, HTML,CSS,JavaScript 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。 浏览器中内置了静态资源的解析引擎,可以展示静态资源 静态资源: HTML:用于搭建基础网页,展示页面的内容 CSS:用于美化页面,布局页面 JavaScript:控制页面的元素,让页面有一些动态的效果 2. 动态资源: 使用动态网页及时发布的资源。 特点: 所有用户访问,得到的结果可能不一样。 如:jsp/servlet,php,asp... 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器 要学习动态资源,必须先学习静态资源!
2. HTML
2.1 HTML简介
1. 概念:是最基础的网页开发语言 Hyper Text Markup Language 超文本标记语言 超文本: 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本. 标记语言: 由标签构成的语言。<标签名称> 如 html,xml 标记语言不是编程语言 2. 快速入门: 语法: 1. html文档后缀名 .html 或者 .htm 2. 标签分为 1. 围堵标签:有开始标签和结束标签。如 <html></html> 2. 自闭和标签:开始标签和结束标签在一起。如 <br/> 3. 标签可以嵌套: 需要正确嵌套,不能你中有我,我中有你 错误:<a><b></a></b> 正确:<a><b></b></a> 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>
2.2 HTML标签
2.2.1 基础标签
1. 文件标签:构成html最基本的标签 html:html文档的根标签 head:头标签。用于指定html文档的一些属性。引入外部的资源 title:标题标签。 body:体标签 <!DOCTYPE html>:html5中定义该文档是html文档
示例代码:
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!-- 注释 --> <!--br 换行--> 白日依山尽,<!--<br />--> <br> 黄河入海流。<br> <!-- 标题标签 h1~ h6--> 换行 <br> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!-- 段落标签 p --> <p> 1 段落一 </p> <p>2 段落二 </p> <p>3 段落三 </p> <!-- hr 显示一条水平线--> <hr color="red" width="200" size="10" align="left"/> <hr> <!-- 加粗 b--> 白日依山尽<br> <b>加粗</b> <hr> <!-- 斜体 i --> 白日依山尽<br> <i>斜体</i> <!-- 字体标签 font--> <hr> <font color="red" size="5" face="楷体">文字为红色楷体</font> <br> <font color="#3626F1" size="5" face="楷体">文字为#3626F1色楷体</font> <br> <hr color="red" width="50%" size="10" align="left"/> <center> <font color="red" size="5" face="楷体">文字为红色楷体且居中</font> <br> </center> <br> <br> <br> <br> <br> </body> </html>
2.2.2 文本标签
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,blue 2. rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255) 3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF width: 1. 数值:width='20' ,数值的单位,默认是 px(像素) 2. 数值%:占比相对于父元素的比例
代码示例:
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>练习< /title> </head> <body> <header> <div id="header">< h1>标题一< /h1>< /div> </header> <hr color="#ffd700"> <p><font color="#FF0000">"#FF0000"色字体</font> <b><i>加粗斜体</i></b></p> <p> 段落二</p> <p>段落三</p> <p>段落四</p> <hr color="#ffd700"> <footer> <div id="footer"> <font color="gray" size="2"> <center> 居中文本一< br> 居中文本二 </center> </font> </div> </footer> </body> </html>
2.2.3 图片标签
3.图片标签: img:展示图片 属性: src:指定图片的位置 align:对齐方式 alt:加载失败时显示的文字 代码: < !--展示一张图片 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">
2.2.4 图片标签
4. 列表标签: 有序列表: ol: li: 无序列表: ul: li:
示例代码:
<body> <!--有序列表 ol--> 早上起床干的事情 <ol type="A" start="5"> <li>睁眼</li> <li> 看手机</li> <li> 穿衣服</li> <li> 洗漱</li> </ol> <!-- 无序列表 ul--> 早上起床干的事情 <ul type="disc"> <li>睁眼</li> <li> 看手机</li> <li> 穿衣服</li> <li> 洗漱</li> </ul> 早上起床干的事情 <ul type="square"> <li>睁眼</li> <li> 看手机</li> <li> 穿衣服</li> <li> 洗漱</li> </ul> 早上起床干的事情 <ul type="circle"> <li>睁眼</li> <li> 看手机</li> <li> 穿衣服</li> <li> 洗漱</li> </ul> </body>
2.2.5 链接标签
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--> <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
2.2.6 div和span
6.div和span: div:每一个div占满一整行。块级标签 span:文本信息在一行展示,行内标签 内联标签
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块标签</title> </head> <body> <!-- div:每一个div占满一整行。块级标签 span:文本信息在一行展示,行内标签 内联标签 --> <span>黑马程序员</span> <span>传智播客</span> <hr> <div>黑马程序员</div> <div>传智播客</div> </body> </html>
2.2.7 语义化标签
7.语义化标签:html5中为了提高程序的可读性,提供了一些标签。 1. <header>:页眉 2. <footer>:页脚
2.2.8表格标签
8.表格标签: table:定义表格 width:宽度 border:边框 cellpadding:定义内容和单元格的距离 cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、 bgcolor:背景色 align:对齐方式 tr:定义行 bgcolor:背景色 align:对齐方式 td:定义单元格 colspan:合并列 rowspan:合并行 th:定义表头单元格 <caption>:表格标题 <thead>:表示表格的头部分 <tbody>:表示表格的体部分 <tfoot>:表示表格的脚部分
示例代码:
<!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"> <tr> <th>编号</th> <th>姓名</th> <th>成绩</th></tr> <tr><td>1</td><td>小龙女</td><td>100</td> </tr> <tr><td>2</td><td>杨过</td><td>50</td></tr> </table> <hr> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <thead> <caption>学生信息表</caption> <tr> <th>编号</th><th>姓名</th><th>成绩</th></tr> </thead> <tbody> <tr bgcolor="#7fffd4" align="center"> <td>1</td> <td>小龙女</td> <td>100</td> </tr> <tr> <td>2</td><td>杨过</td><td>50</td></tr> </tbody> <tfoot> <tr> <td>3</td> <td>尹志平</td> <td>10</td> </tr> </tfoot> </table> <hr> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <tr> <th rowspan="2">编号</th> <th>姓名</th> <th>成绩</th> </tr> <tr> <td>小龙女</td> <td>100</td> </tr> <tr> <td>2</td> <td colspan="2">杨过</td> </tr> </table> <hr> </body> </html>
综合案例:旅游网站首页
<!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> </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">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 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">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 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">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 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©, All Rights Reserved 苏ICP备16007882 </font> </td> </tr> </table> </body> </html>
2.2.9 表单标签
表单: 概念:用于采集用户输入的数据的。用于和服务器进行交互。 form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围 属性: action:指定提交数据的URL method:指定提交方式 提交方式分类:一共7种,2种比较常用 get: 1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。 2. 请求参数大小是有限制的。 3. 不太安全。 post: 2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解) 2. 请求参数的大小没有限制。 3. 较为安全。 form标签示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <form action="#" method="post"> 用户名:<input type="text" name="username"><br> 密码:<input name="password"><br> <input type="submit" value="登录" > </form> </body> </html> 表单项中的数据要想被提交:必须指定其name属性 表单项标签: input:可以通过type属性值,改变元素展示的样式 input的type属性: type='text':文本输入框,默认值 placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息 type='password':密码输入框 type='radio':单选框 注意: 1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值 3. checked属性,可以指定默认值 type='checkbox':复选框 注意: 1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值 2. checked属性,可以指定默认值 file:文件选择框 hidden:隐藏域,用于提交一些信息。 按钮: submit:提交按钮。可以提交表单 button:普通按钮 image:图片提交按钮 src属性指定图片的路径 label:指定输入项的文字描述信息 注意: label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。 示例代码: < body> < form action="#" method="get"> < label for="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> 自我描述: < 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> < /body> select: 下拉列表 子元素:option,指定列表项 示例代码: 省份:< select name="province"> < option value="">--请选择--< /option> < option value="1">北京< /option> < option value="2">上海< /option> < option value="3" selected>陕西< /option> < /select>< br> textarea:文本域 cols:指定列数,每一行有多少个字符 rows:默认多少行。
表单标签案例:注册页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <!--定义表单 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> </body> </html>
3. CSS:页面美化和布局控制
3.1 CSS简介&作用
1.概念: Cascading Style Sheets 层叠样式表 层叠:多个样式可以作用在同一个html的元素上,同时生效 HTML标签的属性、CSS都可以控制样式 2.好处: 1.功能强大 2.将内容展示和样式控制分离 降低耦合度。解耦 让分工协作更容易 提高开发效率
3.2 CSS与html结合方式
3.CSS的使用:CSS与html结合方式 1 、方式一: 内联样式 在标签内使用style属性指定css代码 如:<div style="color:red;">hello css</div> 注:方式一的作用域只是当前标签,并没用将内容展示和样式控制分离 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 内联样式 * 在标签内使用style属性指定css代码 --> <div style="color:red;">hello css</div> </body> </html> 2、 方式二: 内部样式(只能在当前页面生效) 在head标签内,定义style标签,style标签的标签体内容就是css代码 如: <style> div{ color:blue; } </style> <div>hello css</div> 注:方式二的作用域是当前页面 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color:blue; } </style> </head> <body> <!-- 内部样式 * 在head标签内,定义style标签,style标签的标签体内容就是css代码 --> <div>hello css</div> <div>hello css</div> </body> </html> 3、 结合方式三:外部样式 1. 定义css资源文件。 2. 在head标签内,定义link标签,引入外部的资源文件 如: 第一步:定义css资源文件 a.css文件: div{ color:green; } 第二步:定义link标签 <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> 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <link rel="stylesheet" href="css/a.css">--> <style> @import "css/a.css"; </style> </head> <body> <!-- 外部样式 1. 定义css资源文件。 2. 在head标签内,定义link标签,引入外部的资源文件 --> <div>hello css</div> <div>hello css</div> <p>呵呵</p> </body> </html>
3.3 CSS语法
4.css语法: 格式: 选择器 { 属性名1:属性值1; 属性名2:属性值2; ... } 选择器:筛选具有相似特征的元素 注意: 每一对属性需要使用;隔开,最后一对属性可以不加; 示例: div { color:green; } p{ color: red; font-size: 30px }
3.4 CSS选择器
5. 选择器:筛选具有相似特征的元素 分类: 1. 基础选择器 1. id选择器:选择具体的id属性值的元素. 语法:#id属性值{} 注意:建议在一个html页面中id值唯一 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <style> #div1 { color: red; } </style> </head> <body> <!-- 1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法:#id属性值{} --> <div id="div1">传智播客</div> </body> </html> 2. 元素选择器:选择具有相同标签名称的元素 语法: 标签名称{} 注意:id选择器优先级高于元素选择器 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素选择器</title> <style> div{ color: green; } </style> </head> <body> <!-- 2. 元素选择器:选择具有相同标签名称的元素 语法: 标签名称{} 注意:id选择器优先级高于元素选择器 --> <div id="div1">元素选择器</div> </body> </html> 3. 类选择器:选择具有相同的class属性值的元素。 语法:.class属性值{} 注意:类选择器选择器优先级高于元素选择器 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器</title> <style> .cls1{ color: deeppink; } </style> </head> <body> <p class="cls1">类选择器</p> </body> </html> 2. 扩展选择器: 1. 选择所有元素: 语法: *{} 2. 并集选择器: 选择器1,选择器2{} 3. 子选择器:筛选选择器1元素下的选择器2元素 语法: 选择器1 选择器2{} 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子选择器</title> <style> div p{ color: red; } </style> </head> <body> <div> <p>div标签下的p标签</p> </div> <p>此P标签不会变成红色</p> </body> </html> 4. 父选择器:筛选选择器2的父元素选择器1 语法: 选择器1 > 选择器2{} 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父选择器</title> <style> div > p{ border: 1px solid; } </style> </head> <body> <div> <p>div下的p标签</p> </div> <div>此div标签下面没有P标签,所以不会被加上边框</div> </body> </html> 5. 属性选择器:选择元素名称,属性名=属性值的元素 语法: 元素名称[属性名="属性值"]{} 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> input[type='text']{ border: 5px solid; } </style> </head> <body> text文本框被加粗<input type="text"></input> <br> password文本框不会被加粗<input type="password"></input> </body> </html> 6. 伪类选择器:选择一些元素具有的状态 语法: 元素:状态{} 如:<a> 状态: link:初始化的状态 visited:被访问过的状态 active:正在访问状态 hover:鼠标悬浮状态 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> a:link{ color: deeppink; } a:hover{ color:red; } a:active{ color:yellow; } a:visited{ color:green; } <!-- link:初始化的状态 hover:鼠标悬浮状态 active:正在访问状态 visited:被访问过的状态 --> </style> </head> <body> <a href="链接地址">链接标题</a> </body> </html>
3.5 CSS属性
6. 属性 1. 字体、文本 font-size:字体大小 color:文本颜色 text-align:对其方式 line-height:行高 2. 背景 background: 3. 边框 border:设置边框,复合属性 4. 尺寸 width:宽度 height:高度 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css属性</title> <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标签样式</p> <div> div标签样式 </div> </body> </html> 5. 盒子模型:控制布局 margin:外边距 padding:内边距 默认情况下内边距会影响整个盒子的大小 box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css属性</title> <style> div{ border: 1px solid red; width: 100px; } .div1{ width: 100px; height: 100px; /*外边距*/ /* margin: 50px; */ } .div2{ width: 200px; height: 200px; padding: 50px; /* 设置盒子的属性,让width和height就是最终盒子的大小 */ box-sizing: border-box; } </style> </head> <body> <div class="div2"> <div class="div1"></div> </div> </body> </html> float:浮动 left right 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css属性</title> <style> div{ border: 1px solid red; width: 100px; } .div3{ float: left; } .div4{ float: left; } .div5{ float: right; } </style> </head> <body> <div class="div2"> <div class="div1"></div> </div> <div class="div3">div3 left</div> <div class="div4">div4 left</div> <div class="div5">div5 right</div> </body> </html>
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>
4. JavaScript
4.1 JS基础语法
4.1.1 JS简介
概念:一门客户端脚本语言 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 脚本语言:不需要编译,直接就可以被浏览器解析执行了 功能: 可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。 JavaScript发展史: 1. 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C-- ,后来更名为:ScriptEase 2. 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript 3. 1996年,微软抄袭JavaScript开发出JScript语言 4. 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。 JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM) ECMAScript:客户端脚本语言的标准 1. 基本语法: 1. 与html结合方式 1. 内部JS: 定义<script>,标签体内容就是js代码 2. 外部JS: 定义<script>,通过src属性引入外部的js文件 注意: 1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。 2. <script>可以定义多个。 2. 注释 1. 单行注释://注释内容 2. 多行注释:/*注释内容*/ 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title >Title</title> <!-- 内部JS --> <script> alert("Hello World"); </script> <!-- 外部JS --> <script src="js/a.js"></script> </head> <body> <input type="text"> </body> </html>
4.1.2 JS 数据类型
3. 数据类型: 1. 原始数据类型(基本数据类型): 1. number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型) 2. string:字符串。 字符串 "abc" "a" 'abc' 3. boolean: true和false 4. null:一个对象为空的占位符 5. undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined 2. 引用数据类型:对象
4.1.3 JS 变量
4. 变量 变量:一小块存储数据的内存空间 Java语言是强类型语言,而JavaScript是弱类型语言。 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。 语法: var 变量名 = 初始化值; typeof运算符:获取变量的类型。 注:null运算后得到的是object 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量</title> <script > //定义变量 /* var a = 3; alert(a); a = "abc"; alert(a);*/ //定义number类型 var num = 1; var num2 = 1.2; var num3 = NaN; //输出到页面上 document.write(num+"---"+typeof(num)+"<br>");//1---number document.write(num2+"---"+typeof(num2)+"<br>");//1.2---number document.write(num3+"---"+typeof(num3)+"<br>");//NaN---number //定义string类型 var str = "abc"; var str2 = 'edf'; document.write(str+"---"+typeof(str)+"<br>");//abc---string document.write(str2+"---"+typeof(str2)+"<br>");//edf---string //定义boolean var flag = true; document.write(flag+"---"+typeof(flag)+"<br>");//true---boolean // 定义null,undefined var obj = null; var obj2 = undefined; var obj3 ; document.write(obj+"---"+typeof(obj)+"<br>");//null---object document.write(obj2+"---"+typeof(obj2)+"<br>");//undefined---undefined document.write(obj3+"---"+typeof(obj3)+"<br>");//undefined---undefined </script> </head> <body> </body> </html>
4.1.4 JS 运算符
5. 运算符 1. 一元运算符:只有一个运算数的运算符 ++,-- , +(正号) ++ --: 自增(自减) ++(--) 在前,先自增(自减),再运算 ++(--) 在后,先运算,再自增(自减) +(-):正负号 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换 其他类型转number: string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字) boolean转number:true转为1,false转为0 2. 算数运算符 + - * / % ... 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>算数运算符</title> <script> var a = 3; var b = 4; document.write(a+b +"<br>");//7 document.write(a-b +"<br>");//-1 document.write(a*b +"<br>");//12 document.write(a/b +"<br>");//0.75 document.write(a%b +"<br>");//3 </script> </head> <body> </body> </html> 3. 赋值运算符 = += -+.... 4. 比较运算符 > < >= <= == ===(全等于) 1. 类型相同:直接比较 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。 2. 类型不同:先进行类型转换,再比较 ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>比较运算符</title> <script> document.write((3 > 4) +"<br>");//false document.write(("abc" < "acd") +"<br>");//false document.write(("123" == 123) +"<br>");//true document.write(("123" === 123) +"<br>");//false </script> </head> <body> </body> </html> 5. 逻辑运算符 && || ! &&: 与(短路,左边能确定表达式的值则不对后面进行判断) ||: 或 (短路) !:非 其他类型自动转boolean规则: 1. number:0或NaN为假,其他为真 2. string:除了空字符串(""),其他都是true 3. null&undefined:都是false 4. 对象:所有对象都为true 应用:防止空指针异常\判断对象是否为空null var obj ; if(obj){ 为Null或undefined} else{对象不为空} 6. 三元运算符 ? : 表达式 var a = 3; var b = 4; var c = a > b ? 1:0; 语法: 表达式? 值1:值2; 判断表达式的值,如果是true则取值1,如果是false则取值2;
4.1.5 JS 流程控制语句
6. 流程控制语句: 1. if...else... 2. switch: 在java中,switch语句可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7) switch(变量): case 值: 在JS中,switch语句可以接受任意的原始数据类型 switch示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>switch语句</title> <script> var a; switch (a){ case 1: alert("number"); break; case "abc": alert("string"); break; case true: alert("true"); break; case null: alert("null"); break; case undefined: alert("undefined"); break; } </script> </head> <body> </body> </html> 3. while 4. do...while 5. for
4.1.6 JS特殊语法
7. JS特殊语法: 1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议) 2. 变量的定义使用var关键字,也可以不使用 用: 定义的变量是局部变量 不用:定义的变量是全局变量(不建议)
4.1.7 练习:99乘法表
案例效果图 |
案例代码:
<!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 = 1 document.write(i + " * " + j + " = " + ( i*j) +" "); document.write("</td>"); } /*//输出换行 document.write("<br>");*/ document.write("</tr>"); } //2.完成表格嵌套 document.write("</table>"); </script> </head> <body> </body> </html>
4.2 JS基本对象
4.2.1 Function:函数(方法)对象
1. Function:函数(方法)对象 1. 创建函数对象的三种方法: 1. var fun = new Function(形式参数列表,方法体); //不常用 2. function 方法名称(形式参数列表){ 方法体 } 3. var 方法名 = function(形式参数列表){ 方法体 } 2. 方法: 3. 属性: length:代表形参的个数 4. 特点: 1. 方法定义是,形参的类型不用写,返回值类型也不写。 2. 方法是一个对象,如果定义名称相同的方法,会覆盖 3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关 4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数 5. 调用: 方法名称(实际参数列表); 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Function对象</title> <script> //1.创建方式1 var fun1 = new Function("a","b","c","alert(a);"); //调用方法 // fun1(3,4); // alert(fun1.length); //2. 创建方式2 function fun2(a , b){ alert(a + b); } //fun2(3,4); //alert(fun2.length); var fun3 = function(a,b){ alert(a+b); } //alert(fun3.length); // fun3(3,4); /*fun2 = function(a , b){ alert(a - b); }*/ function fun2(a , b){ //alert(a - b); alert(a); alert(b); } //fun2(3,4); //方法调用 //fun2(1,2); //fun2(1); //fun2(); //fun2(1,2,3); /* * 求两个数的和 */ /*function add(a , b){ return a + b; }*/ /** * 求任意个数的和 */ //在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数 function add (){ var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } var sum = add(1,2,3,4); alert(sum); //add(1,3); </script> </head> <body> </body> </html>
4.2.2 Array:数组对象
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中,数组长度可变的。 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Array对象</title> <script > //1.创建方式1 /* var arr1 = new Array(1,2,3); var arr2 = new Array(5);//创建长度为5的数组 var arr3 = [1,2,3,4]; var arr4 = new Array();//创建空数组 document.write(arr1 +"<br>"); document.write(arr2 +"<br>"); document.write(arr3 +"<br>"); document.write(arr4 +"<br>");*/ var arr = [1,"abc",true]; document.write(arr +"<br>");//1,abc,true document.write(arr[0] +"<br>");//1 document.write(arr[1] +"<br>");//abc document.write(arr[2] +"<br>");//true //document.write(arr[10] +"<br>"); arr[10] = "hehe"; document.write(arr[10] +"<br>");//hehe document.write(arr[9] +"<br>");//undefined //alert(arr.length);//11 document.write(arr.join("--")+"<br>");//1--abc--true----------------hehe arr.push(11); document.write(arr.join("--")+"<br>");//1--abc--true----------------hehe--11 </script> </head> <body> </body> </html>
4.2.3 Date:日期对象
4. Date:日期对象 1. 创建: var date = new Date(); 2. 方法: toLocaleString():返回当前date对象对应的时间本地字符串格式 getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Date对象</title> <script > var date = new Date(); document.write(date + "<br>");//Fri Jun 17 2022 18:04:50 GMT+0800 (中国标准时间) document.write(date.toLocaleString() + "<br>");//2022/6/17 18:05:14 document.write(date.getTime() + "<br>");//1655460324344 </script> </head> <body> </body> </html>
4.2.4 Math:数学对象
5. Math:数学对象 1. 创建: 特点:Math对象不用创建,直接使用。 Math.方法名(); 2. 方法: random():返回 0 ~ 1 之间的随机数。 含0不含1 ceil(x):对数进行上舍入。 floor(x):对数进行下舍入。 round(x):把数四舍五入为最接近的整数。 3. 属性: PI 4.示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Math对象</title> <script > document.write(Math.PI +"<br>");//3.141592653589793 document.write(Math.random() +"<br>");//0.3802767618827676 document.write(Math.round(3.14) +"<br>");//3 document.write(Math.ceil(3.14) +"<br>");//4 document.write(Math.floor(3.14) +"<br>");//3 /** * 取 1~100之间的随机整数 * 1. Math.random()产生随机数:范围 [0,1)小数 * 2. 乘以 100 --> [0,99.9999] 小数 * 3. 舍弃小数部分 :floor --> [0,99] 整数 * 4. +1 -->[0,99] 整数 [1,100] */ var number = Math.floor((Math.random() * 100)) + 1; document.write(number);//93 </script> </head> <body> </body> </html>
4.2.5 RegExp:正则表达式对象
5. Boolean对象(略过) 6. Number对象(略过) 7. String对象(略过) 8. 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(参数):验证指定的字符串是否符合正则定义的规范 3.示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>RegExp对象</title> <script > //1. var reg = new RegExp("^\\w{6,12}$"); //2. var reg2= /^\w{6,12}$/; /*alert(reg); alert(reg2);*/ var username = "zhangsan"; //验证 var flag = reg.test(username); alert(flag); </script> </head> <body> </body> </html>
4.2.6 Global对象
9. Global(全局对象\顶层函数) 1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名(); 2. 方法: encodeURI():url编码 decodeURI():url解码 encodeURIComponent():url编码,编码的字符更多 decodeURIComponent():url解码 parseInt():将字符串转为数字 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number isNaN():判断一个值是否是NaN NaN六亲不认,连自己都不认。NaN参与的==比较全部问false eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。 3. URL编码 百度解释:url编码是一种浏览器用来打包表单输入的格式。浏览器从表单中获取所有的name和其中的值 将它们以name/value参数编码(移去那些不能传送的字符,将数据排行等等)作为URL的一部分 或者分离地发给服务器。不管哪种情况,在服务器端的表单输入格式样子象这样: theName=Ichabod+Crane&gender=male&status=missing& ;headless=yes 传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Global对象</title> <script > var str = "http://www.baidu.com?wd=传智播客"; var encode = encodeURI(str); document.write(encode +"<br>"); //http://www.baidu.com?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2 var s = decodeURI(encode); document.write(s +"<br>"); //http://www.baidu.com?wd=传智播客 var str1 = "http://www.baidu.com?wd=传智播客"; var encode1 = encodeURIComponent(str1); document.write(encode1 +"<br>"); //http%3A%2F%2Fwww.baidu.com%3Fwd%3D%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2 var s1 = decodeURIComponent(encode); document.write(s1 +"<br>"); //http://www.baidu.com?wd=传智播客 var str = "a234abc"; var number = parseInt(str); //alert(number + 1); //NaN六亲不认,连自己都不认。NaN参与的==比较全部为false var a = NaN; document.write(a == NaN);//false document.write(isNaN(a));//true var jscode = "alert(123)"; eval(jscode); </script> </head> <body> </body> </html>
4.3 BOM——浏览器对象模型
4.3.1 DOM简单学习&事件简单学习
为了更好地结合案例学习BOM,先学习一些DOM基础知识
DOM : 文档对象模型 DOM功能:控制html文档的内容 获取页面标签(元素)对象:Element document.getElementById("id值"):通过元素的id获取元素对象 操作Element对象: 1. 修改属性值: 1. 明确获取的对象是哪一个? 2. 查看API文档,找其中有哪些属性可以设置 2. 修改标签体内容: 属性:innerHTML 1. 获取元素对象 2. 使用innerHTML属性修改标签体内容 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="light" src="img/off.gif"> <h1 id="title">悔创阿里杰克马</h1> <script> //通过id获取元素对象 var light = document.getElementById("light"); alert("我要换图片了。。。"); light.src = "img/on.gif"; /* //1.获取h1标签对象 var title = document.getElementById("title"); alert("我要换内容了。。。"); //2.修改内容 title.innerHTML = "不识妻美刘强东";*/ </script> </body> </html> DOM : 文档对象模型 事件简单学习 事件功能: 某些组件被执行了某些操作后,触发某些代码的执行。 事件概念说明: xxx被xxx,我就xxx 我方水晶被摧毁后,我就责备队友。 敌方水晶被摧毁后,我就夸奖自己。 如何绑定事件 1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码 1. 事件:onclick--- 单击事件 2. 通过js获取元素对象,指定事件属性,设置一个函数 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件绑定</title> </head> <body> <img id="light" src="img/off.gif" οnclick="fun();"> <img id="light2" src="img/off.gif"> <script> function fun(){ alert('我被点了'); alert('我又被点了'); } function fun2(){ alert('咋老点我?'); } //1.获取light2对象 var light2 = document.getElementById("light2"); //2.绑定事件 light2.onclick = fun2; </script> </body> </html>
案例:电灯开关
<!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 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> </body> </html>
4.3.2 BOM简介
1. 概念:Browser Object Model 浏览器对象模型 将浏览器的各个组成部分封装成对象。 2. 组成: Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Location:地址栏对象
4.3.3 BOM对象——Window:窗口对象
3. Window:窗口对象 1. 创建 2. Window对象的方法 1. 特点 Window对象不需要创建可以直接使用 window使用。 window.方法名(); window引用可以省略。 方法名(); 2. 与弹出框有关的方法: alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框——防止误操作 1.如果用户点击确定按钮,则方法返回true 2.如果用户点击取消按钮,则方法返回false 3.示例代码: <script> var flag = confirm("您确定要退出吗?"); if(flag){ //退出操作 alert("欢迎再次光临!"); }else{ //提示:手别抖... alert("手别抖..."); } </script> prompt() 显示可提示用户输入的对话框。 返回值:获取用户输入的值 例程: var result = prompt("请输入用户名"); alert(result); 3. 与打开关闭有关的方法: close() 关闭浏览器窗口。 谁调用我 ,我关谁 open() 打开一个新的浏览器窗口 返回新的Window对象 例程: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Window对象</title> </head> <body> <input id="openBtn" type="button" value="打开窗口"> <input id="closeBtn" type="button" value="关闭窗口"> <script> //打开新窗口 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(); } </script> </body> </html> 4. 与定时器有关的方法 setTimeout()在指定的毫秒数后调用函数或计算表达式。 参数: 1. js代码或者方法对象 2. 毫秒值 返回值:唯一标识,用于取消定时器 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 例程1: //一次性定时器 setTimeout(fun(),5000); function fun(){ alert('boom~~'); } setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 例程2: <script> //循环定时器 function fun(){ alert('boom~~'); } var id = setInterval(fun,2000); </script> 3. Window对象的属性: 1. 获取其他BOM对象: history: 包含浏览器的历史 location:用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面 Navigator:包含有关访问者浏览器的信息 Screen:包含有关用户屏幕的信息 2. 获取DOM对象 利用document属性获取DOM对象: var openBtn = window.document.getElementById("openBtn"); alert(openBtn); /*document.getElementById("openBtn");*/ 3. Location:地址栏对象 1. 创建(获取): 1. window.location 2. location 2. 方法: reload() 重新加载当前文档。刷新 3. 属性 href 设置或返回完整的 URL。 4.例程: <body> <input type="button" id="btn" value="刷新"> <input type="button" id="gobaidu" value="去百度"> <script> //reload方法,定义一个按钮,点击按钮,刷新当前页面 //1.获取按钮 var btn = document.getElementById("btn"); //2.绑定单击事件 btn.onclick = function(){ //3.刷新页面 location.reload(); } //获取href var href = location.href; //alert(href); //点击按钮,去访问百度 //1.获取按钮 var gobaidu = document.getElementById("gobaidu"); //2.绑定单击事件 gobaidu.onclick = function(){ //3.百度 location.href = "https://www.baidu.com"; } </script> </body> 4. History:历史记录对象 1. 创建(获取): 1. window.history 2. history 2. 方法: back() 加载 history 列表中的前一个 URL。 forward() 加载 history 列表中的下一个 URL。 go(参数) 加载 history 列表中的某个具体页面。 参数: 正数:前进几个历史记录 负数:后退几个历史记录 3. 属性: length 返回当前窗口历史列表中的 URL 数量。 4.例程: <!DOCTYPE html> <html lang="en"> <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> //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> </html>
案例一:轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <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是否大于3 if(number > 3){ number = 1; } //获取img对象 var img = document.getElementById("img"); img.src = "img/banner_"+number+".jpg"; } //2.定义定时器 setInterval(fun,3000); </script> </body> </html>
案例二:自动跳转首页
<!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.显示页面效果 <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> </html>
4.4 DOM——文档对象模型
4.4.1 DOM概念
概念: Document Object Model 文档对象模型 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作 W3C DOM 标准被分为 3 个不同的部分: 1.核心 DOM - 针对任何结构化文档的标准模型 Document:文档对象 Element:元素对象 Attribute:属性对象 Text:文本对象 Comment:注释对象 Node:节点对象,其他5个的父对象 2.XML DOM - 针对 XML 文档的标准模型 3.HTML DOM - 针对 HTML 文档的标准模型
DOM——文档对象模型 |
4.4.2 核心DOM模型
核心DOM模型: Document:文档对象 1. 创建(获取):在html dom模型中可以使用window对象来获取 1. window.document 2. document 2. 方法: 1. 获取Element对象: 1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一 2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组 3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组 4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组 2. 创建其他DOM对象: createAttribute(name) createComment() createElement() createTextNode() 3. 属性(略过) 4. 例程: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document对象</title> </head> <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> //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> </html> Element:元素对象 1. 获取/创建:通过document来获取和创建 2. 方法: 1. removeAttribute():删除属性 2. setAttribute():设置属性 3.例程: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Element对象</title> </head> <body> <a>点我试一试</a> <input type="button" id="btn_set" value="设置属性"> <input type="button" id="btn_remove" value="删除属性"> <script> //获取btn var 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"); } //获取btn var 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> </html> Node:节点对象,其他5个对象的父对象 1.特点:所有dom对象都可以被认为是一个节点 2.方法: CRUD dom树: appendChild():向节点的子节点列表的结尾添加新的子节点。 removeChild() :删除(并返回)当前节点的指定子节点。 replaceChild():用新节点替换一个子节点。 3.属性: parentNode 返回节点的父节点。 4.例程: <!DOCTYPE html> <html lang="en"> <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> </html>
案例:动态表格
案例:动态地往表格添加或删除信息 |
代码:
<!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);" οnclick="delTr(this);">删除</a></td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);" οnclick="delTr(this);">删除</a></td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);" οnclick="delTr(this);" >删除</a></td> </tr> </table> <script> /*分析: 1.添加: 1. 给添加按钮绑定单击事件 2. 获取文本框的内容 3. 创建td,设置td的文本为文本框的内容。 4. 创建tr 5. 将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 的 td var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); //name 的 td var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); //gender 的 td var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); //a标签的td var 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.创建tr var tr = document.createElement("tr"); //5.添加td到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //6.获取table var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>
4.4.3 HTML DOM
HTML DOM 1. 标签体的设置和获取:innerHTML 2. 使用html元素对象的属性 3.示例代码: <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'>"; </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属性值 代码: <!DOCTYPE html> <html lang="en"> <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(){ //修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size--> fontSize div1.style.fontSize = "20px"; } //方式2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值 var div2 = document.getElementById("div2"); div2.onclick = function(){ div2.className = "d1"; } </script> </body> </html>
案例:动态表格(代码简化)
<!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);" οnclick="delTr(this);">删除</a></td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);" οnclick="delTr(this);">删除</a></td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);" οnclick="delTr(this);" >删除</a></td> </tr> </table> <script> //使用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; //获取table var 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>
4.5 事件监听机制
概念:某些组件被执行了某些操作后,触发某些代码的执行。 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了 事件源:组件。如: 按钮 文本输入框... 监听器:代码。 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。 常见的事件: 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 重置按钮被点击。
案例一:表格全选
<!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.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为选中 checked cbs[i].checked = true; } } document.getElementById("unSelectAll").onclick = function(){ //全不选 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为未选中 checked cbs[i].checked = false; } } document.getElementById("selectRev").onclick = function(){ //反选 //1.获取所有的checkbox var 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.获取所有的checkbox var 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>
案例二:
<!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,则监听器方法返回false 2.定义一些方法分别校验各个表单项。 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>
5. Bootstrap
Bootstrap中文网:https://www.bootcss.com/
本课程Bootstrap讲解
5.1 Bootstrap概念
1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。 好处: 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 同一套页面可以兼容不同分辨率的设备 2. 快速入门 1. 下载Bootstrap 2. 在项目中将这三个文件夹(CSS、fonts、js)复制导入 3. 创建html页面,引入必要的资源文件 4. 例程: <!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> </head> <body> <h1>你好,世界!</h1> </body> </html>
5.2 响应式布局
同一套页面可以兼容不同分辨率的设备。 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 步骤: 1. 定义容器。相当于之前的table、 容器分类: 1. container:两边留白 2. container-fluid:每一种设备都是100%宽度 2. 定义行。相当于之前的tr 样式:row 3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目 设备代号: 1. xs:超小屏幕 手机 (<768px):col-xs-12 2. sm:小屏幕 平板 (≥768px) 3. md:中等屏幕 桌面显示器 (≥992px) 4. lg:大屏幕 大桌面显示器 (≥1200px) 注意: 1. 一行中如果格子数目超过12,则超出部分自动换行。 2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。 3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。
5.3 CSS样式和JS插件
1. 全局CSS样式: 按钮:class="btn btn-default" 图片: 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" 2. 组件: 导航条 分页条 3. 插件: 轮播图
6. XML
XML视频链接XML视频链接
6.1 XML概念 、 快速入门
1. 概念:Extensible Markup Language 可扩展标记语言 可扩展:标签都是自定义的。 <user> <student> XML功能 存储数据 1. 配置文件 2. 在网络中传输 xml与html的区别 1. xml标签都是自定义的,html标签是预定义。 2. xml的语法严格,html语法松散 3. xml是存储数据的,html是展示数据 w3c:万维网联盟 2. 语法: 基本语法: 1. xml文档的后缀名 .xml 2. xml第一行必须定义为文档声明 3. xml文档中有且仅有一个根标签 4. 属性值必须使用引号(单双都可)引起来 5. 标签必须正确关闭 6. xml标签名称区分大小写 快速入门: <?xml version='1.0' ?> <users> <user id='1'> <name>zhangsan </name> <age>23 </age> <gender>male </gender> <br/> </user> <user id='2'> <name>lisi </name> <age>24 </age> <gender>female </gender> </user> </users> XML文档组成部分: 1. 文档声明 1. 格式: <?xml 属性列表 ?> 2. 属性列表: version:版本号,必须的属性 encoding:编码方式。告知解析引擎当前文档使用的字符集,默认值:ISO-8859-1 standalone:是否独立 取值: yes:不依赖其他文件 no:依赖其他文件 2. 指令(了解):结合css展示\改变样式 css文件a.css定义name属性的样式: name{ color:red; } XML文件代码: <?xml version="1.0" encoding="utf-8" standalone='no' ?> <?xml-stylesheet type="text/css" href="a.css" ?> <users> <user id='1'> <name>张三</name> <age>23</age> <gender>male</gender> <br/> </user> <user id='2'> <name>lisi</name> <age>24</age> <gender>female</gender> </user> </users> 4. 标签:标签名称自定义的 规则: 名称可以包含字母、数字以及其他的字符 名称不能以数字或者标点符号开始 名称不能以字母 xml(或者 XML、Xml 等等)开始 名称不能包含空格 5. 属性: 属性值唯一,如上面user的属性id不能同时为1 6. 文本: CDATA区:在该区域中的数据会被原样展示,特殊字符也会被原样展示 格式: <![CDATA[ 数据 ]]>
6.2 XML约束
6.2.1 XML约束作用
XML约束作用:规定xml文档的书写规则 |
约束:规定xml文档的书写规则 作为框架的使用者(程序员)要具备的能力: 1. 能够在xml中引入约束文档 2. 能够简单的读懂约束文档 约束的分类: 1. DTD:一种简单的约束技术 2. Schema:一种复杂的约束技术(能实现对内容的限定)
6.2.2 DTD约束
DTD: 引入dtd文档到xml文档中 内部dtd:将约束规则定义在xml文档中(不常用) (引入内部约束时在XML中加此条语句:<!DOCTYPE 根标签名 [内部约束命令]> ) 示例代码: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE students [ <!ELEMENT students (student+) > <!ELEMENT student (name,age,sex)> <!ELEMENT name (#PCDATA)> <!ELEMENT age (#PCDATA)> <!ELEMENT sex (#PCDATA)> <!ATTLIST student number ID #REQUIRED>]> <students> <student number="s001"> <name>zhangsan</name> <age>abc</age> <sex>hehe</sex> </student> <student number="s002"> <name>lisi</name> <age>24</age> <sex>female</sex> </student> </students> 外部dtd:将约束的规则定义在外部的dtd文件中 1.本地:<!DOCTYPE 根标签名 SYSTEM "dtd文件的位置"> 2.网络:<!DOCTYPE 根标签名 PUBLIC "dtd文件名字" "dtd文件的位置URL"> 3.外部约束示例: 1.约束文件student.dtd如下: <!ELEMENT students (student+) > <!ELEMENT student (name,age,sex)> <!ELEMENT name (#PCDATA)> <!ELEMENT age (#PCDATA)> <!ELEMENT sex (#PCDATA)> <!ATTLIST student number ID #REQUIRED> 2.XML文件代码如下: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE students SYSTEM "student.dtd"> <students> <student number="s001"> <name>zhangsan</name> <age>abc</age> <sex>hehe</sex> </student> <student number="s002"> <name>lisi</name> <age>24</age> <sex>female</sex> </student> </students>
6.2.3 Schema约束
Schema:可以对XML的内容进行更详细的限定 1.引入Schema: 1.填写xml文档的根元素 2.引入xsi前缀. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3.引入xsd约束文件命名空间. xsi:schemaLocation="http://www.itcast.cn/xml student.xsd" 4.为每一个xsd约束声明一个前缀,作为标识 xmlns="http://www.itcast.cn/xml" <students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.itcast.cn/xml" xsi:schemaLocation="http://www.itcast.cn/xml student.xsd"> 2.示例代码: 1.schema约束文件student.xsd : <?xml version="1.0"?> <xsd:schema xmlns="http://www.itcast.cn/xml" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.itcast.cn/xml" elementFormDefault="qualified"> <xsd:element name="students" type="studentsType"/> <xsd:complexType name="studentsType"> <xsd:sequence> <xsd:element name="student" type="studentType" minOccurs="0" maxOccurs="unbounded"/> </xsd:sequence> </xsd:complexType> <xsd:complexType name="studentType"> <xsd:sequence> <xsd:element name="name" type="xsd:string"/> <xsd:element name="age" type="ageType" /> <xsd:element name="sex" type="sexType" /> </xsd:sequence> <xsd:attribute name="number" type="numberType" use="required"/> </xsd:complexType> <xsd:simpleType name="sexType"> <xsd:restriction base="xsd:string"> <xsd:enumeration value="male"/> <xsd:enumeration value="female"/> </xsd:restriction> </xsd:simpleType> <xsd:simpleType name="ageType"> <xsd:restriction base="xsd:integer"> <xsd:minInclusive value="0"/> <xsd:maxInclusive value="256"/> </xsd:restriction> </xsd:simpleType> <xsd:simpleType name="numberType"> <xsd:restriction base="xsd:string"> <xsd:pattern value="heima_\d{4}"/> </xsd:restriction> </xsd:simpleType> </xsd:schema> 2.XML文件student.xml如下: <?xml version="1.0" encoding="UTF-8" ?> <!-- 1.填写xml文档的根元素 2.引入xsi前缀. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3.引入xsd文件命名空间. xsi:schemaLocation="http://www.itcast.cn/xml student.xsd" 4.为每一个xsd约束声明一个前缀,作为标识 xmlns="http://www.itcast.cn/xml" --> <students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.itcast.cn/xml" xsi:schemaLocation="http://www.itcast.cn/xml student.xsd" > <student number="heima_0001"> <name>tom</name> <age>18</age> <sex>male</sex> </student> </students>
6.3 XML解析
6.3.1 解析概念 及 两种解析方式
3. 解析:操作xml文档,将文档中的数据读取到内存中 操作xml文档 1. 解析(读取):将文档中的数据读取到内存中 2. 写入:将内存中的数据保存到xml文档中。持久化的存储 两种解析xml的方式(面试题): 1. DOM:将标记语言文档一次性加载进内存,在内存中形成一颗dom树 优点:操作方便,可以对文档进行CRUD的所有操作 缺点:占内存(生成了树形结构),DOM不适用于一些内存较小的设备 2. SAX:逐行读取,基于事件驱动的。 优点:不占内存。 缺点:只能读取,不能增删改
DOM:在内存中形成一颗dom树 | SAX:逐行读取,基于事件驱动的 |
6.3.2 xml常见的解析器
xml常见的解析器: 1. JAXP:sun公司提供的解析器,支持dom和sax两种思想(基本不用) 2. DOM4J:一款非常优秀的解析器 3. Jsoup:jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。 它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。 4. PULL:Android操作系统内置的解析器,sax方式的。
6.3.3 Jsoup解析器
Jsoup:jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。 它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。 快速入门: 1.步骤: 1. 导入jar包jsoup-1.11.2.jar和JsoupXpath-0.3.2.jar 2. 获取Document对象——基于XML文档来获取(Document对象就对应着dom树) 3. 获取对应的标签Element对象 4. 获取数据 2.代码: //2.1获取student.xml的path String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath(); //2.2解析xml文档——加载文档进内存,获取dom树--->Document Document document = Jsoup.parse(new File(path), "utf-8"); //3.获取元素对象 Element Elements 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); 3.完整Java代码: package cn.itcast.xml.jsoup; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org.jsoup.select.Elements; import java.io.File; import java.io.IOException; /** * Jsoup快速入门 */ public class JsoupDemo1 { public static void main(String[] args) throws IOException { //2.获取Document对象,根据xml文档获取 //2.1获取student.xml的path String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath(); //2.2解析xml文档,加载文档进内存,获取dom树--->Document Document document = Jsoup.parse(new File(path), "utf-8"); //3.获取元素对象 Element Elements 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); } } Jsoup中常见对象的使用: 对象的使用: 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的文档对象 Java代码示例: package cn.itcast.xml.jsoup; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org.jsoup.select.Elements; import java.io.File; import java.io.IOException; import java.net.URL; /** * Jsoup对象功能 */ public class JsoupDemo2 { public static void main(String[] args) throws IOException { //2.1获取student.xml的path String path = JsoupDemo2.class.getClassLoader().getResource("student.xml").getPath(); //2.2解析xml文档,加载文档进内存,获取dom树--->Document /* Document document = Jsoup.parse(new File(path), "utf-8"); System.out.println(document);*/ //2.parse(String html):解析xml或html字符串 /* String str = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n" + "\n" + "<students>\n" + "\t<student number=\"heima_0001\">\n" + "\t\t<name>tom</name>\n" + "\t\t<age>18</age>\n" + "\t\t<sex>male</sex>\n" + "\t</student>\n" + "\t<student number=\"heima_0002\">\n" + "\t\t<name>jack</name>\n" + "\t\t<age>18</age>\n" + "\t\t<sex>female</sex>\n" + "\t</student>\n" + "\n" + "</students>"; Document document = Jsoup.parse(str); System.out.println(document);*/ //3.parse(URL url, int timeoutMillis):通过网络路径获取指定的html或xml的文档对象 URL url = new URL("https://baike.baidu.com/item/jsoup/9012509?fr=aladdin");//代表网络中的一个资源路径 Document document = Jsoup.parse(url, 10000); System.out.println(document); } } 2. Document:文档对象。代表内存中的dom树 获取Element对象的方法: getElementById(String id):根据id属性值获取唯一的element对象 getElementsByTag(String tagName):根据标签名称获取元素对象集合 getElementsByAttribute(String key):根据属性名称获取元素对象集合 getElementsByAttributeValue(String key, String value):根据对应的属性名和属性值获取元素对象集合 示例代码: package cn.itcast.xml.jsoup; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org.jsoup.select.Elements; import java.io.File; import java.io.IOException; import java.net.URL; /** * Document/Element对象功能*/ public class JsoupDemo3 { public static void main(String[] args) throws IOException { //1.获取student.xml的path String path = JsoupDemo3.class.getClassLoader().getResource("student.xml").getPath(); //2.获取Document对象 Document document = Jsoup.parse(new File(path), "utf-8"); //3.获取元素对象了。 //3.1获取所有student对象 Elements elements = document.getElementsByTag("student"); System.out.println(elements); System.out.println("-----------"); //3.2 获取属性名为id的元素对象们 Elements elements1 = document.getElementsByAttribute("id"); System.out.println(elements1); System.out.println("-----------"); //3.2获取 number属性值为heima_0001的元素对象 Elements elements2 = document.getElementsByAttributeValue("number", "heima_0001"); System.out.println(elements2); System.out.println("-----------"); //3.3获取id属性值的元素对象 Element itcast = document.getElementById("itcast"); System.out.println(itcast); } } 3. Elements:元素Element对象的集合。可以当做 ArrayList<Element>来使用 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():获取标签体的所有内容(包括子标签的标签和文本内容) 4.Java代码: package cn.itcast.xml.jsoup; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org.jsoup.select.Elements; import java.io.File; import java.io.IOException; /**Element对象功能*/ public class JsoupDemo4 { public static void main(String[] args) throws IOException { //1.获取student.xml的path String path = JsoupDemo4.class.getClassLoader().getResource("student.xml").getPath(); //2.获取Document对象 Document document = Jsoup.parse(new File(path), "utf-8"); //通过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); } } 5. Node:节点对象 是Document和Element的父类
6.3.4 快捷查询方式一:选择器查询
快捷查询方式: 1. selector:选择器 使用的方法:Elements select(String cssQuery) 语法:参考Selector类中定义的语法 2.示例代码: package cn.itcast.xml.jsoup; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org.jsoup.select.Elements; import java.io.File; import java.io.IOException; /**选择器查询*/ public class JsoupDemo5 { public static void main(String[] args) throws IOException { //1.获取student.xml的path String 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_0001 Elements 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); } }
6.3.5 快捷查询方式二:XPath
2. XPath:XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言 1.使用Jsoup的Xpath需要额外导入jar包。 2.查询w3cshool参考手册,使用xpath的语法完成查询 3.代码: //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属性值为itcast List<JXNode> jxNodes4 = jxDocument.selN("//student/name[@id='itcast']"); for (JXNode jxNode : jxNodes4) { System.out.println(jxNode); } 4.Java完整代码: package cn.itcast.xml.jsoup; import cn.wanghaomiao.xpath.exception.XpathSyntaxErrorException; import cn.wanghaomiao.xpath.model.JXDocument; import cn.wanghaomiao.xpath.model.JXNode; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.select.Elements; import java.io.File; import java.io.IOException; import java.util.List; /**XPath查询*/ public class JsoupDemo6 { public static void main(String[] args) throws IOException, XpathSyntaxErrorException { //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 jxNodes = jxDocument.selN("//student"); for (JXNode jxNode : jxNodes) { System.out.println(jxNode); } System.out.println("--------------------"); //4.2查询所有student标签下的name标签 List jxNodes2 = jxDocument.selN("//student/name"); for (JXNode jxNode : jxNodes2) { System.out.println(jxNode); } System.out.println("--------------------"); //4.3查询student标签下带有id属性的name标签 List jxNodes3 = jxDocument.selN("//student/name[@id]"); for (JXNode jxNode : jxNodes3) { System.out.println(jxNode); } System.out.println("--------------------"); //4.4查询student标签下带有id属性的name标签 并且id属性值为itcast List jxNodes4 = jxDocument.selN("//student/name[@id='itcast']"); for (JXNode jxNode : jxNodes4) { System.out.println(jxNode); } } }
说明:本内容整理自B站黑马程序员Java web课程视频及文档>>B站黑马程序员Java web课程视频