unit01-HTML、CSS
HTML: 用于开发网页的一门技术
CSS: 用于修饰、渲染网页的一门技术
HTML+CSS可以开发一个非常美观、非常漂亮的网页
开发网页 盖房子
HTML标签搭建网页的结构 砖块(搭建房子的结构)
CSS属性 石灰、油漆等涂料
HTML概述
HTML是什么
HTML(Hyper Text Markup Language): 超文本标记语言
超文本: 超级文本、超过文本（其中可以包含除了文本以外的其他数据，例如图片、音频、视频等各种格式）
标记：也叫标签、元素、节点等，就是用尖括号(<>)括起来的一组内容，例如：
<head> <body> <div> <span> <table>等HTML是最基础的开发网页的语言。
HTML由W3C组织提供(CSS/xml)
关于HTML的细节:
(1)使用HTML开发的网页文件通常以 .htm或 .html 为后缀!
(2)使用HTML开发的网页文件由浏览器负责解析并显示（浏览器就是一个html解析器）
(3)HTML是文档的一种(txt/word/ppt/pdf等)
总结: HTML就是用于开发网页的一门语言!!
HTML的结构
1、案例：编写我的第一个HTML网页，并用浏览器打开
新建一个txt文档，将后缀名改为.html，代码实现如下：
<!DOCTYPE html>
<html>
<head>
<title>网页的标题</title>
</head>
<body>
<h1>Hello CGB2003...</h1>
</body>
</html>2、HTML结构详解
(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本
上面是html5.0的声明, 也是目前最常用的版本
(2)<html></html> 根标签, 用于包裹所有的网页内容(除了文档声明)
(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3)<body></body> 体部分, 用来存放可视化的网页内容. 即真正的网页数据
(4)<title></title> 声明网页的标题
(5)<meta charset="utf-8" > 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.HTML语法(了解)
1、html标签
标签：也叫做标记、元素等，标签分为开始标签，例如：
<head>、<body>和结束标签，例如:
</head>、</body>开始标签和结束标签之间还可以包含其他内容。
<head>
<titile>声明网页的标题</title>
<meta charset="utf-8">
</head>有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签，例如：
<br/> <hr/> <input/> <img/> <link/>等2、html属性
在标签上可以声明属性(属性不能独立存在,必须声明在标签上)
<div id="d1" class="c1" style="color:red;">这是一个div元素</div>标签上可以声明多个属性，多个属性之间用空格分隔
标签上的属性的值可以使用单引号或者双引号引起来
<meta charset="UTF-8" id="m1">
<meta charset='UTF-8' id='m1'>3、html注释
格式: <!-- 注释内容 -->
注释的作用: (1)为代码添加解释说明
(2)将一些暂时不需要执行的代码注释
浏览器对于html注释中的内容不会解析，也不会显示！
4、html空格和换行
在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：
如何在网页中做一个换行：可以使用 <br/> 标签做换行
如何在网页中做一个空格：可以使用 或 做空格
补充: HTML中是不区分大小写的！
HTML中对语法要求非常不严格！（比如大小写混用，或者标签只有开始没有结束，或者标签的不合理嵌套），但是我们在书写HTML时要按照规范来写。
HTML标签
图像标签
通过img标签可以在网页中插入一副图像
<!--
不推荐写带盘符的绝对路径,因为将来项目发布,位置会改变,到时还要修改图片的路径
<img src="D:/JavaDevelop/WS_CGB2003_WEB/day05-htmlcss/WebContent/img/meinv.jpg"/>
-->
<!--
./: 表示当前目录(当前文件所在的目录),由于当前html在WebContent目录下
因此 ./叫表示WebContent目录, 另外 ./ 可以省略!
../: 表示当前目录的上一级目录里(也就是当前目录的父目录)
../../: 表示当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目录)
-->
<img src="./img/meinv.jpg" width="50%"/>
<img src="./img/lpx.jpg" width="50%"/>其中src属性用于指定图片的路径（图片的路径不要是带盘符的绝对路径，推荐使用相对路径）
width属性用于指定图片的宽度
height属性用于指定图片的高度
超链接标签
超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接
点击超链接可以跳转到另外一个网页(图片/下载路径等)，示例:
<!-- 跳转到本地的一个网页 -->
<a href="01-第一个网页.html">01-第一个网页.html</a>
<!-- 跳转到百度首页 -->
<a href="http://www.baidu.com">百度一下，你就不知道</a>
<br/>
<!-- 点击图片跳转到tmooc -->
<a target="_blank" href="http://www.tmooc.cn">
<img alt="tmooc" src="imgs/tmooc.png" />
</a>其中 href 属性用于指定点击超链接后将要跳转到的URL地址
target属性用于指定以何种方式打开超链接
_self：默认值, 表示在当前窗口中打开超链接
_blank：表示在新的窗口中打开超链接
表格标签
1.案例：在网页中插入一个3*3的表格
<h1>案例：在网页中插入一个3*3的表格</h1>
<table><!-- 用于在网页中定义一个表格 -->
<tr><!-- 用于定义一个表格行 -->
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>11</td><!-- 用于定义一个单元格 -->
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>在浏览器中显示效果如下：
在head标签内添加如下内容：
<style>
/* style标签内只能书写css注释和css代码 */
table{
border:*2px solid red; /* 为表格添加边框 */
border-collapse: collapse; /* 设置边框合并 */
background-color: pink; /* 为表格设置背景颜色 */
width: 70%; /* 为表格设置宽度 */
/* margin-left: 15%; */
/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
margin-left: auto;
margin-right: auto;
}
td,th{
border:2px solid red; /* 为单元格添加边框 */
border-collapse: *collapse*; /* 设置边框合并 */
padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}
h1{
/* border: 2px solid blue; */
text-align: *center*; /* 设置元素中的内容水平居中 */
}
</style>再次刷新浏览器显示效果为：
2、表格标签介绍
table -- 用于在网页中定义一个表格
tr -- 用于定义表格中的行
td -- 用于定义表格中的单元格
th -- 用于定义表头行中的单元格（th中的文本默认居中，并且加粗）3、练习：使用表格标签在网页中生成一个表格，如下图：
要求如下:
(1) 表格内容如下图, 并设置表格边框
(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题表单标签
1、表单的作用: 用于向服务器提交数据
向服务器提交数据的两种方式：
(1)通过表单向服务器提交数据
表单中可以包含表单项标签，在表单项中可以填写数据（比如用户名、密码等），填写完成后通过提交表单，可以将表单中的数据提交给相应的服务器。
(2)通过超链接向服务器提交数据
http://www.baidu.com?username=张三&pwd=123&like=篮球
<a href="http://www.baidu.com?username=张三&pwd=123&like=篮球" target="_blank">百度一下,你就不知道!</a>在地址栏URL地址的后面通过问号(?)可以拼接参数，参数可以有多个，多个参数之间用&分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后访问百度服务器的同时，就可以将问号后面拼接的参数一并带给百度服务器。
2、表单标签
<form action="url地址" method="提交方式"></form>其中action属性用于指定表单的提交地址，例如，将action指向百度服务器，就意味着将来填写完表单后，提交表单将会把表单中的数据提交给百度服务器。
method="GET/POST" 属性是用于指定表单的提交方式，常用的就是GET和POST提交。
表单项标签
1、input元素：
(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)
<input type="text" name="username"/>(2)密码输入框(比如:密码/确认密码等)
<input type="password" name="pwd"/>(3)单选框(比如:性别/部门等)
<input type="radio" name="gender"/>男(4)复选框/多选框(比如:爱好/岗位等)
<input type="checkbox" name="like"/>(5)普通按钮(比如:换一张图片)
<input type="button" value="换一张"/>普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为
(6)提交按钮(比如:提交/注册/登录)
<input type="submit" value="提交/注册/登录"/>提交按钮用于提交表单中的数据到服务器中!
2、select、option标签：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>select用于定义一个下拉选框
option用于定义下拉选框上的选项
selected设置当前option选项默认被选中
3、textarea多行文本输入区域：
<textarea name="description" cols="30" rows="5"
placeholder="请输入描述信息..."></textarea>cols属性: 用于设置文本输入框的列数(宽度)
rows属性: 用于设置文本输入框的行数(高度)
placeholder属性: 设置输入框中的提示消息!
表单细节问题
1、提交表单时，表单中的数据为什么没有被提交？
对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被忽略。例如：
<input type="text" name="username"/>
<input type="password" name="psw"/>2、如何让多个单选框只能有一个被选中？
要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！
<td>性别:</td>
<td>
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
</td>3、为什么单选框、复选框选择某一项后提交的值都是on?
因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。
因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女4、如何设置单选框或复选框默认选中某一项?
可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。例如：
<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球5、如何设置下拉选框默认选中某一项?
在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中，例：
<select name="city">
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>6、下拉选框中option选项上的value属性的作用是什么？
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。
如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容
其他标签
在html5之前，大多数的音频和视频是通过插件（比如flash）来播放的，html5规定了一种通过 audio和video元素来包含音频和视频的标准方法。
1、audio标签（html5）
audio标签能够播放声音文件或者音频流，例如：
<audio controls referrerpolicy="no-referrer" src="audio/沙漠骆驼_展展与罗罗.mp3"></audio>其中audio标签的属性：
src属性：用于指定要播放的音频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：音频在就绪后马上播放（自动播放）
loop="loop"：当音频完成播放后，再次开始播放（循环播放）
width、height：设置音频播放器的宽度和高度<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的
<audio controls src="audio/沙漠骆驼_展展与罗罗.mp3">
如果您可以看到此内容，说明您的浏览器不支持此标签!
</audio>2、video标签（html5）
video标签能够播放视频流，目前支持三种视频格式：MPEG4、Ogg、WebM。
<video controls src="video/小芳_李荣浩版.mp4" width="50%"></video>其中video标签的属性：
src属性：用于指定要播放的视频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：视频在就绪后马上播放（自动播放）
loop="loop"：当视频完成播放后，再次开始播放（循环播放）
width、height：设置视频播放器的宽度和高度<video> 与 </video> 之间插入的内容是供不支持 audio 元素的浏览器显示的（这里不再给出示例）
3、div、span、p标签
div、span、p元素都是非常普通、但是又很常用的标签，它们都是容器标签，可以用来包裹其他元素或文本，将样式添加在这些元素上，就可以为包含在其中的内容设置样式。
div、p：块元素，默认独占一行，可以设置宽高（其中div元素通常用于布局，而p元素通常用于定义段落）
span：行内元素，行内元素可以显示在同一行，不可以设置宽高（span用于包含文本或组合行内元素，以便于统一设置样式）
4、header、footer标签（html5）
<header> 标签定义文档的页眉（介绍信息）或页面的头部分
<footer>标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
注册表单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* style标签内只能书写css注释和css代码 */
table {
border: 2px solid red; /* 为表格添加边框 */
border-collapse: collapse; /* 设置边框合并 */
background-color: lightgrey; /* 为表格设置背景颜色 */
/* margin-left: 15%; */
/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
margin-left: auto;
margin-right: auto;
}
td, th {
border: 2px solid red; /* 为单元格添加边框 */
border-collapse: collapse; /* 设置边框合并 */
padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}
h1 {
/* border: 2px solid blue; */
text-align: center; /* 设置元素中的内容水平居中 */
}
</style>
</head>
<body>
<h1>欢迎注册</h1>
<form action="#">
<table>
<tr>
<!-- 用户名输入框 -->
<td>用户名:</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<!-- 密码输入框 -->
<td>密码:</td>
<td><input type="password" name="pwd" /></td>
</tr>
<tr>
<!-- 性别单选框 -->
<td>性别:</td>
<td><input type="radio" checked="checked" name="gender"
value="male" />男 <input type="radio" name="gender" value="female" />女
</td>
</tr>
<tr>
<!-- 爱好复选框/多选框 -->
<td>爱好:</td>
<td><input type="checkbox" name="like" value="basketball" />篮球
<input type="checkbox" checked="checked" name="like"
value="football" />足球 <input type="checkbox" name="like"
value="volleyball" />排球</td>
</tr>
<tr>
<!-- 城市下拉选框 -->
<td>城市:</td>
<td><select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select></td>
</tr>
<tr>
<!-- 自我描述 多行文本输入框 -->
<td>自我描述:</td>
<td><textarea name="description" cols="30" rows="5"
placeholder="请输入描述信息..."></textarea></td>
</tr>
<tr>
<!-- 提交按钮 -->
<!-- colspan: 设置单元格横跨的列数 -->
<td colspan="2" style="text-align: center;"><input
type="submit" value="提交" /></td>
</tr>
</table>
</form>
</body>
</html>CSS概述
什么是CSS？(了解)
CSS: 层叠样式表，用于修饰、渲染网页的一门技术
使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！
在HTML中引入CSS
方式1：通过style属性引入css（不推荐）
<!--
1.通过标签上的style属性给div设置样式
边框:2px solid red
字体大小:26px
背景颜色为:pink
-->
<div style="border:2px solid red;font-size:26px; background:pink;">这是一个div...</div>由于上面这种方式是将css样式代码，直接写在标签上的style属性内部，如果属性太多，容易造成页面结构的混乱，不利于后期的维护。
将样式代码写在标签上，样式代码只对当前标签生效，代码无法复用！
并且使用这种方式无法将html标签和css样式进行分离!
因此不推荐使用这种方式！（这种通过style属性添加的样式，叫做行内样式/内联样式）
方式2：通过style标签引入css
在head标签内部可以添加一个style标签，在style标签内部可以直接书写css样式
这种方式是将所有的css样式代码集中在一个style标签内部统一管理，这种方式不会造成页面结构的混乱，并且可以实现代码的复用！
初步的实现了将html标签代码和css样式代码进行了分离!
代码示例 ：
<!-- 2.通过style标签给span设置样式如下：
边框: 2px solid green
字体大小: 30px
字体加粗
-->
<head>
<meta charset="utf-8">
<style type="text/css">
/* ****** CSS样式 ****** */
span{ /* 为当前html中的所有span标签设置样式 */
border:2px solid green;
font-size:30px;
font-weight:bolder; /* bold/bolder */
}
</style>
</head>方式3：通过link链接引入外部的css文件
在head标签内部，通过一个link标签可以引入外部的CSS文件
这种方式是将所有的css代码集中在一个单独的css文件中统一管理，真正的实现了将css代码和html代码的分离，实现了代码的复用。
代码示例：html中引入demo.css文件
<!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下：
边框: 2px solid blue;
字体颜色:red
字体设置为华文琥珀
设置首行文本缩进50px
-->
<!-- 引入demo.css文件(中的样式) -->
<link rel="stylesheet" href="demo.css" />demo.css文件
@charset "UTF-8";
p{
border: 2px solid blue;
color: red;
font-family: "华文琥珀";
text-indent: 50px;
}CSS选择器
所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。
标签名选择器
通过元素名称(或标签名称)选中指定名称的所有标签
格式: 元素名/标签名{ css样式... }
/* ----- 1.标签名选择器练习 -----
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */
background-color:#efbdef;
font-size: 22px;
font-weight: bolder;
}class选择器
可以为元素添加一个通用的属性 -- class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。
格式：.class值{ css样式... }
实例:
/* ----- 2.类选择器练习 -----
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e；*/
.s1{ /* 选中所有class值为s1的元素 */
background: #faf77b;
border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */
background: #5eff1e;
color: #ec0e7e;
}另外，一个元素也可以设置多个class值，多个class值中间用空格分隔，例如：
<span class="s1 s2" >span111</span>表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元素上。
如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，写在后面的样式会覆盖前面的样式！
内容补充：选择器优先级顺序：
（1）如果是同一类选择器，同时给某些元素设置了样式，如果样式冲突了，那么写在后面的样式会覆盖前面的样式。
（2）如果是不同的选择器，设置的样式优先级顺序是：id选择器(100) > 类选择器(10) > 元素名选择器(1)
id选择器
通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。
格式：#id值{ css样式 }
/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
#p1{ /* 选中id值为p1的元素 */
font-size:24px;
color: #a06649;
text-indent: 20px;
}<p id="p1">这是一个p元素!!!</p>后代选择器
选中指定元素内部的指定后代元素
格式: 祖先 后代{ css样式... }
/* ----- 4.后代选择器练习 -----
为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */
font-size:18px;
color: red;
background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */<p id="p1">
这是一个p元素!!!
<span>这是一个span元素!!!</span>
</p>属性选择器
在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素
格式：选择器[属性条件1][属性条件2]...{ css样式 }
/* ----- 5.属性选择器 -----
为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */
background: #FF7CCC;
font-size: 22px;
text-indent: 15px;
}
input[type='text'][name='email']{
/* 选中所有的input并且type值为text、并且name为email的元素 */
background : yellow;
}常用属性总结
文本属性
1、text-align：设置元素内的文本水平对齐方式，其常用取值为:
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐2、text-decoration：设置文本的下划线样式，其常用取值为:
underline: 有下划线
none: 没有下划线3、text-indent：设置文本首行缩进，单位: 像素/百分比
4、letter-spacing：设置字符间隔/间距，其常用取值为:
normal
像素值5、text-shadow：设置字体阴影，其取值为:
像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色字体属性
font-size：设置字体大小
font-weight：设置字体粗细 normal、bold、bolder 100/200/300../900
font-family：设置字体，比如微软雅黑、黑体、楷体等
color：设置字体颜色
背景属性
background-color：设置背景颜色
background-image：设置背景图片，url('图片的路径');
background-repeat：设置或检索对象的背景图片是否及如何排列，常用取值：
repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)background-position：设置或检索对象的背景图片位置
background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置
边框（border）
border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色)
border属性可以拆分为如下设置:
border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：
border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度其他属性
width：设置元素的宽度
height：设置元素的高
margin: 设置元素的外边距
margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;补充: 颜色设置
颜色取值方式常见的方式有三种:
方式一：设置颜色名，例如：
red、green、blue、yellow、cyan、pink、white、black等方式二：设置#加上六位的十六进制数值
#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等方式三：设置rgb颜色值 ( 课间休息：14：46-15：06 )
rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
（red） （green） （blue） （yellow） （cyan）网页开发实战
完成JT项目中的登录页面!
完成JT项目中的注册页面!(选作!)
注册页面视频：https://www.bilibili.com/vide...
扩展内容
display属性
display用来设置元素的类型，常用取值：
block：块级元素的默认值
默认情况下独占一行
可以设置宽高
inline：行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
inline-block：行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素元素类型(了解)
div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）
p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）
div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。
span：行内元素，默认可以和其他元素显示在同一行。
(1)块级元素（block）
默认情况下，块级元素独占一行
可以设置宽和高，如果设置了就是设置的宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
比如: div/p/h1~h6/form/table 等元素都是块级元素
(2)行内元素（inline）
默认情况下，多个行内元素可以处在同一行
不能设置宽和高
比如: span/input/img/i/b 等元素都是行内元素
(3)行内块元素（inline-block）
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)
unit02-JavaScript
JavaScript简介
什么是JavaScript(了解)
全称叫做JavaScript，简称叫做JS
由NetScape(网景)公司提供，是一门专门嵌入在浏览器中执行的脚本语言
LiveScript JavaScript
JS运行在浏览器中，负责实现网页中的动画效果
或者是实现表单校验等功能
JS特点和优势(了解)
1、特点：
(1)JS是一门直译式的语言(边解释边执行，没有编译的过程)
java--> 编写时 xx.java --->编译成 xx.class --> 运行class文件
js ---> 编写时 html, 编写时 js文件, 直接运行, 没有编译过程
(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)
JS中是有对象的(内置对象、自定义对象)
(3)JS是一门弱类型的语言(Java:强类型)
//在java中: 变量一旦声明, 就属于固定的数据类型, 不能被改变
String str = "abc";
int number = 100;
//在JS中: 变量是不区分类型的, 可以指向任意的数据类型
var s = 100; //number(数值类型)
s = "abc"; //string(字符串类型)
s = true; //boolean(布尔类型)
s = []; //object(对象类型)
s = function(){} //function(对象类型) 2、优势：
(1)JS具有良好的交互性
(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)
(3)JS具有跨平台性(JS 浏览器)
( JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台
Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )
在HTML书写JS的方式
1、在script标签内部可以书写JS代码：
在head或者body标签内部可以添加一个script标签，在script标签内部可以直接书写JS代码！
<!-- 在script标签内部可以书写JS注释和JS代码 -->
<script type="text/javascript">
//JS的单行注释
/* JS的多行注释 */
alert( "在html中引入JS的第一种方式..." );
</script>2、通过script标签引入外部的JS文件
在head或body标签内部，可以通过script标签引入外部的JS文件。例如：
<!-- 通过script标签可以引入外部的JS文件 -->
<script src="demo.js"></script>注意：(1)在引入js文件的script标签内部不要书写JS代码,例如:
<script src="demo.js">
alert( 111 ); //这里的代码不会执行
</script>(2)不要将引入JS文件的script标签自闭，因为可能会导致文件引入失败，如下：
<script src="demo.js" />扩展内容：也可以直接在元素上书写JS代码
<!-- 直接在元素上书写JS代码：
onclick属性用于给当前元素绑定点击事件：点击元素就会触发事件，执行相应函数
-->
<input type="button" value="点我~" onclick="alert('叫你点你还真敢点啊!!!')"/>
<input type="button" value="别点我" onclick="console.log( new Date() )"/>JavaScript语法
注释格式
JS的注释符号和Java的注释符号相同，如下：
// 单行注释内容
/* 多行注释内容 */数据类型
1、基本数据类型
(1)数值类型(number)
在JS中，所有的数值在底层都是浮点型，但是在处理和显示的过程中会自动的和整型进行转换。
例如：2.4+3.6=6
特殊值：Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)(2)字符串类型(string)
在JS中，字符串类型属于基本数据类型，字符串常量可以使用单引号或者使用双引号引起来。例如：
var s1 = "Hello JS";
var s2 = 'Hello JS';另外，JS中字符串类型有对应的包装对象（String），在需要时会自动的和包装对象进行转换。
var s1 = "Hello JS"; //基本数据类型, string
console.log( typeof s1 ); //string
var s2 = new String("Hello JS"); //复杂数据类型, object
console.log( typeof s2 ); //object
//不管是基本数据类型s1, 还是对象类型s2, 都可以当作对象来用
console.log( s1.valueOf() ); //s1是基本数据类型, 会转成对象, 调用valueOf函数
console.log( s2.valueOf() );(3)布尔类型(boolean)
布尔类型的值有两个，分别为true和false。
(4)undefined类型
undefined类型的值只有一个，就是undefined，表示变量未定义(但不是指变量没有声明)。
是指声明了变量，但没有为变量赋值，该变量的值就是undefined。
/* 1.undefined类型 */
var x;
alert( x ); //undefined
alert( y ); //抛异常(5)null类型
null类型的值也只有一个，就是null，表示空值。
可以作为函数的返回值，表示函数返回的是一个空的对象。
注意：null和undefined类型的变量是不能调用函数或属性的，会抛异常！
2、复杂数据类型
主要指对象(JS的内置对象、自定义的对象、函数、数组)
变量声明
JS中是通过var关键字声明变量，声明的变量是不区分类型，可以指向任意的数据。例如：
var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};另外，JS中多次声明同名的变量不会出现语法错误，例如：
/* 2.变量的定义 */
var s = "Hello"; // var s; s="Hello";
var s = 123; // var s; s=123; 第二次声明变量x没有生效
alert( s ); //123JS是严格区分大小写的!
JS运算符
JS和Java中的运算符大致相同，例如：
算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，|| ( false && 表达式, true || 表达式 )
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式
。。。JS语句
JS中的语句和Java中的语句也大致相同
1、if分支结构
if分支结构用于基于不同的条件来执行不同的动作。语法结构如下：
if (条件 1){
当条件 1 为 true 时执行的代码
}else if (条件 2){
当条件 2 为 true 时执行的代码
}else{
当条件 1 和 条件 2 都不为 true 时执行的代码
}2、switch语句
使用 switch 语句来选择要执行的多个代码块之一。语法结构如下：
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
...
default:
与 case 1 和 case 2 不同时执行的代码
}执行原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break来阻止代码自动地向下一个 case 运行。
3、for循环语句 -- 循环代码块一定的次数
for 循环的语法结构如下：
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}4、while循环 -- 在指定条件为真时循环执行代码块
JS中while循环也分为while和do/while循环，下面为while循环语法结构:
while (条件){
需要执行的代码
}while 循环会在指定条件为真时循环执行代码块。
案例1：if分支案例: 接收用户输入的成绩，判断成绩所属的等级
80~100(包括80，也包括100) 优秀
60~80(包括60，但不包括80) 中等
0~60(包括0，但不包括60) 不及格
其他值 输入有误代码实现如下：
propmt( 参数1, 参数2 )函数：在页面上弹出一个消息输入框，接收的参数1是在弹框中显示的提示内容，用户输入的内容，会作为函数的返回值直接返回。
参数2, 是输入框中的默认值, 可以修改
var score = prompt("请输入您的成绩: ");
if( score >= 80 && score <=100 ){
alert("您的成绩属于: 优秀!");
}else if( score >= 60 && score < 80 ){
alert("您的成绩属于: 中等!");
}else if( score >= 0 && score < 60 ){
alert("您的成绩属于: 不及格!");
}else{
alert("您的输入有误, 请重新输入!");
}案例2：switch语句案例—实现一个简易的计算器：
可以接收用户输入的两个数值和一个运算符(+、-、*、/)，根据运算符号的不同，对两个数值执行不同的运算。
代码实现如下：
//1.接收用户输入的数值和运算符, 中间用空格分隔
var str = prompt("请输入数值1、运算符、数值2，中间用空格分隔："); //"10 + 5"
//2.对用户输入的内容进行切割(以空格作为分隔符切割)
var arr = str.split(" "); // ["10", "+", "5"]
var num1 = arr[0] - 0 ;
var opt = arr[1];
var num2 = arr[2] - 0 ;
//3.通过switch分支实现计算器
switch( opt ){
case "+":
alert( "两个数的和为: "+( num1+num2 ) );
break;
case "-":
alert( "两个数的差为: "+( num1-num2 ) );
break;
case "*":
alert( "两个数的乘积为: "+( num1*num2 ) );
break;
case "/":
alert( "两个数的商为: "+( num1/num2 ) );
break;
default:
alert( "您输入的运算符有误, 请重新输入!" );
}案例3：for循环语句案例
遍历1\~100之间的所有整数，求1\~100之间所有整数的和，并输出到控制台;
代码实现如下：
//--------------------------------------
var i = 1;
var sum = 0;
while( i <= 100 ){
sum += i;
i++;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
var sum = 0;
for( var i=0; i<=100; i++){
sum += i;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------案例4：while循环语句案例
遍历下面数组中的元素，将元素输出到控制台。
var arr = [123, "abc", false, new Object() ];代码实现如下：
var arr = [123, "abc", false, new Object() ];
var index = 0;
while( index < arr.length ){
console.log( arr[index] );
index++;
}
for( var i=0; i<arr.length; i++ ){
console.log( arr[i] );
}JS数组
Array 对象用于在单个的变量中存储多个值。
JS数组的声明方式一:
//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组，并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];JS数组的声明方式二:
//声明一个空数组，长度为零
var arr3 = new Array();
//声明一个数组，并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());数组中的细节问题:
(1)JS中的数组可以存储任意类型的数据
(2)JS中的数组长度是可以被任意改变的
var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100JS函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块，前面使用了关键词 function。
JS中声明函数的方式为:
function 函数名称([参数列表]){
函数体
}或者：
var 变量名/函数名 = function([参数列表]){
函数体
}调用函数: 函数名称([参数列表]);
综合练习
(自己完成)声明一个函数fn，在函数中实现：遍历指定的两个数值(例如1和100)之间的整数，将是3的倍数的数值存入到一个数组中，并将数组返回。
1、声明fn函数
//声明一个fn函数,接收两个参数
function fn(x,y){
//声明一个数组,用于存储是3的倍数的数值
var arr = [];
//循环x到y之间的所有整数
for(var i=x,j=0;i<y;i++){
//判断i(当前正在遍历的整数)是否为3的倍数
if(i%3==0){
arr[j] = i; //如果是,则将i存入arr数组中
j++; //j自增
}
}
return arr; //返回arr数组
}2、调用fn函数, 获取1\~100之间是3的倍数的数值组成的数组
var arr = fn(1,100);3、遍历数组中的元素, 输出在网页上(提示: document.write("输出的内容") )
for(var i=0;i<arr.length;i++){
document.write(arr[i]+" ");
}DOM操作
DOM: Document Object Model，文档对象模型，其实就是JS专门为访问html元素提供的一套API。
案例:电灯开关
点击电灯可以实现开/关灯，代码实现如下：
var flag = "off"; //标记灯的状态, off表示灯是关闭的!
function changeImg(){
//获取img元素,返回的是一个JS对象
var oImg = document.getElementById("img1");
if( flag == "off" ){ //表示灯之前是关闭状态,点击之后则需要打开
oImg.src = "imgs/on.gif"; //灯打开了
flag = "on"; //更新灯的状态为on,表示灯打开了
}else{ //on,表示灯之前是打开状态,点击之后则需要关闭
oImg.src = "imgs/off.gif"; //灯关闭了
flag = "off"; //更新灯的状态为off,表示灯关闭了
}
}案例:二级联动下拉框
var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"山东省": ["青岛","济南","烟台"]
}
/* 练习2: 实现二级联动下拉框 */
function selectCity(thisobj){
//1.获取用户选中的省份
var prov = thisobj.value;
//2.根据省份获取该省份下所有的城市列表 北京市
var arrCity = data[prov];
//console.log(arrCity);
//3.将该省份下所有的城市 作为option选项填充到第二个select列表中
//>>获取第二个select
var oCity = document.getElementById("city");
//>>先清空上个省份对应的城市列表
//方式一
//oCity.innerHTML = "<option>--选择城市--</option>";
//方式二 JS中的数组的特点
var opts = oCity.getElementsByTagName("option");
//循环遍历, 挨个删除每一个option
var len = opts.length;
for(var i=0; i<len-1; i++){
oCity.removeChild(opts[1]);
}
//海淀区 --> <option>海淀区</option>
for(var i = 0; i<arrCity.length; i++){
var oOpt = document.createElement("option");
oOpt.innerHTML = arrCity[i];
oCity.appendChild(oOpt);
}
}案例:表格隔行换色
练习1：点击按钮让表格行隔行换色
/* 练习1：点击按钮让表格行隔行换色 */
function changColor(){
//获取所有tr元素组成的数组
var aTr = document.getElementsByTagName("tr");
//循环遍历tr数组中的每一个tr元素
for(var i=1; i<aTr.length; i++){
if(i%2 == 0){//奇(偶)数行,设置为one
aTr[i].className = "one";
}else{//偶(奇)数行,设置为one
aTr[i].className = "two";
}
}
}练习2：当鼠标悬停在表格行元素上时，让当前行变色；当鼠标移开元素，恢复默认样式
/* 练习2：当鼠标悬停在表格行元素上时，让当前行变色；当鼠标移开元素，恢复默认样式
onload：当页面加载完所有的html元素后，立即执行function */
window.onload = function(){
//获取所有tr元素组成的数组
var aTr = document.getElementsByTagName("tr");
for(var i=1; i<aTr.length; i++){
var classNameTemp;
//当光标移入元素时
aTr[i].onmouseover = function(){
classNameTemp = this.className;//记住改变之前的class
this.className = "hover";
}
//当光标移出元素时
aTr[i].onmouseout = function(){
this.className = classNameTemp;
}
}
}总结:JS中如何获取元素
document是一个js对象，用于表示当前html网页。当浏览器加载完整个html网页后，会用document对象表示整个html网页！
document.getElementById( id值 ) -- 通过元素的id值，获取一个元素。返回的是表示该元素的js对象。
<div id="div1">xxxx</div>
//获取id为div1的元素
var oDiv1 = document.getElementById("div1");
//oDiv1是一个js对象,表示获取的div元素document.getElementsByTagName( 元素名 ) -- 通过元素名称获取当前文档中的所有指定名称的元素，返回的是一个数组，其中包含了所有指定名称的元素。
document.body -- 获取当前文档中的body元素
element.parentNode -- 获取当前元素的父元素。element表示当前元素
总结:JS如何增删改元素
document.createElement( 元素名称 ) -- 根据元素名称创建指定名称的元素，返回的表示新元素的js对象
parent.appendChild( child ) -- 通过父元素添加子元素，其中parent表示父元素，child表示子元素
parent.removeChild( child ) -- 通过父元素删除子元素，其中parent表示父元素，child表示子元素
element.innerHTML -- 获取当前元素的html内容(从开始标签到结束标签之间的所有内容)，或者设置当前元素的html内容(如果元素内部有内容，将会覆盖原有内容)
<div id="div1">
这是一个div元素...
<span>这是一个span元素</span>
</div>
//获取div元素
var oDiv1 = document.getElementById("div1");
oDiv1.innerHTML;//获取div元素的内容element.value -- 获取表单项元素的 value内容，或者设置表单项元素的value值（如果元素有value值，原值会被覆盖）
扩展内容
JS中的常用事件
| 事件 | 描述 |
|---|---|
| onclick | 在绑定的元素被点击后，立即触发执行onclick指定的函数 |
| onchang | 在绑定的元素发生变化时，立即触发执行onchang指定的函数 |
| onmouseover | 当鼠标移入到元素上时，立即触发onmouseover指定的函数 |
| onmouseout | 当鼠标从元素上移开时，立即触发onmouseover指定的函数 |
| ondblclick | 在绑定的元素被双击后，立即触发执行ondblclick指定的函数 |
| onload | 在浏览器加载完页面中的所有元素后，立即执行onload指定的函数 |
unit03-jQuery
jQuery简介
什么是jQuery(了解)
jQuery: JavaScript Query JS查询
jQuery是一门轻量的、免费开源的JS函数库（就是JS的简单框架）
jQuery可以极大的简化JS代码
jQuery的核心思想：“写的更少，但做的更多”
轻量的：是指一个技术或框架对代码或程序的侵入程度是比较低的。
或者说代码对该技术依赖程度越低，这个技术越轻。对该技术的依赖程度越高，这个技术越重。
jQuery本质就是一个包含了很多函数的JS文件，如果要在某一个HTML中使用这个JS文件中的函数，就必须得将JS文件引入到HTML中（想使用jQuery，就得引入jQuery的函数库文件，就是一个JS文件）
jQuery的优势(了解)
(1) 可以极大的简化JS代码
(2) 可以像CSS选择器一样获取html元素
css中获取所有的div,给div添加样式:
div{ css属性... }jQuery中获取所有div,给div添加边框样式:
$("div").css("border", "2px solid red");JS获取id为div1的元素: document.getElementById("div1")
jQuery获取id为div1的元素: $("#div1")(3) 可以通过修改css属性控制页面的效果
(4) 可以兼容常用的浏览器
比如: JS中的innerText属性、removeNode()函数、replaceNode( )函数 这些函数在某些浏览器中是无法使用的。
jQuery中提供了相应的函数（ text函数、remove函数、replaceWith函数 ）
常用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等
jQuery引入
jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样。
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败，如下图：
文档就绪事件函数
<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script referrerpolicy="no-referrer" src="js/jquery-1.8.3.js"></script>
<script>
//1.获取id为demo的h1元素
var h1 = document.getElementById( "demo" );
//2.获取h1元素中的内容( innerHTML )
alert( h1.innerHTML );
</script>
</head>
<body>
<h1 id="demo">jQuery的引入示例...</h1>
</body>问题描述：上面的代码在执行时，会报一个错误：
原因描述：在执行获取id为demo的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。
解决方式一：
将script标签移到body内部，也就是h1元素的后面
这样浏览器在加载时，会先加载h1元素，再执行获取h1元素的代码，由于在获取h1元素之前，h1元素已经被浏览器加载过了，所以后面再获取就能够获取到！
代码示例：
<body>
<h1 id="demo">jQuery的引入示例...</h1>
<script>
//1.获取id为demo的h1元素
var h1 = document.getElementById( "demo" );
//2.获取h1元素中的内容( innerHTML )
alert( h1.innerHTML );
</script>
</body>解决方式二：
将获取元素的代码放在文档就绪事件函数中，文档就绪事件函数会在浏览器加载完所有的html元素后（也就是加载完最后一个html元素时）立即执行。
由于当前网页中的所有元素都被加载了，h1元素肯定也被加载了，此时再获取h1元素就一定能获取到。
<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script referrerpolicy="no-referrer" src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
//1.获取id为demo的h1元素
var h1 = document.getElementById( "demo" );
//2.获取h1元素中的内容( innerHTML )
alert( h1.innerHTML );
});
</script>
</head>
<body>
<h1 id="demo">jQuery的引入示例...</h1>
</body>解决方式三：
将获取元素的代码放在一个自定义的函数中，并将该函数绑定在h1元素的点击事件上，当我们点击h1元素时会执行自定义的函数，函数执行时才获取h1元素，此时就能够获取到h1元素。
<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
function fn1(){
//1.获取id为demo的h1元素
var h1 = document.getElementById( "demo" );
//2.获取h1元素中的内容( innerHTML )
alert( h1.innerHTML );
}
</script>
</head>
<body>
<h1 id="demo" onclick="fn1()">jQuery的引入示例...</h1>
</body>总结：什么时候该使用文档就绪事件函数?
如果在获取元素时，获取元素的代码执行的时机，比元素本身加载的时间还要早，如果元素还没有加载就获取，必然是获取不到的。
可以将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到！
jQuery提供的文档就绪事件函数（简写形式）：
<script>
$(function(){
//在浏览器加载完整个html网页后立即执行
});
</script>其完整写法为：
<script>
$(document).ready(function(){
//在浏览器加载完整个html网页后立即执行
});
</script>JS也为我们提供了文档就绪事件函数，其写法为：
<script>
window.onload = function(){
//在浏览器加载完整个html网页后立即执行
}
</script>jQuery选择器(重点)
基本选择器
(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素
(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素
(3)id选择器
$("#one") -- 选中id为one的元素
(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素层级选择器
$("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素
$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素
$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素
$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素基本过滤选择器
(1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)
(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)
(3) 选中第n+1个div元素(n从零开始)
$("div:eq(n)")
$("div").eq(n)综合案例
创建表格元素
练习1：创建单行单列的表格
function createTable1(){
//1.创建一个table元素
var $tab = $("<table></table>");
//2.创建一个tr元素
var $tr = $("<tr></tr>");
//3.创建一个td元素, 并为td添加内容
var $td = $("<td></td>");
$td.html("Hello TD~~");
//4.将td添加到tr元素内部
$tr.append( $td );
//5.将tr添加到table元素内部
$tab.append( $tr );
//6.将table添加到body元素内部
$("body").append( $tab );
//$("body").append( "<table><tr><td>Hello~~TD...</td></tr></table>" );
}练习2.1：创建单行6列的表格
function createTable2(){
//1.创建一个table元素
var $tab = $("<table></table>");
//2.创建一个tr元素
var $tr = $("<tr></tr>");
for(var i=0;i<6;i++){
//3.创建一个td元素, 并为td添加内容
var $td = $("<td></td>");
$td.html("Hello TD~~");
//4.将td添加到tr元素内部
$tr.append( $td );
}
//5.将tr添加到table元素内部
$tab.append( $tr );
//6.将table添加到body元素内部
$("body").append( $tab );
}练习2.2：创建5行6列的表格
function createTable2(){
//1.创建一个table元素
var $tab = $("<table></table>");
for(var j=0;j<5;j++){ //外层循环:控制行数
//2.创建一个tr元素
var $tr = $("<tr></tr>");
for(var i=0;i<6;i++){ //内层循环:控制列数
//3.创建一个td元素, 并为td添加内容
var $td = $("<td></td>");
$td.html("Hello TD~~");
//4.将td添加到tr元素内部
$tr.append( $td );
}
//5.将tr添加到table元素内部
$tab.append( $tr );
}
//6.将table添加到body元素内部
$("body").append( $tab );
}练习3：创建指定行和列的表格
function createTable3(){
//获取用户输入的行数和列数(js方式)
//var rows = document.getElementById("rows").value;
//var cols = document.getElementById("cols").value;
var rows = $("#rows").val();
var cols = $("#cols").val();
console.log(rows+" : "+cols);
//1.创建一个table元素
var $tab = $("<table></table>");
for(var j=0;j<rows;j++){ //外层循环:控制行数
//2.创建一个tr元素
var $tr = $("<tr></tr>");
for(var i=0;i<cols;i++){ //内层循环:控制列数
//3.创建一个td元素, 并为td添加内容
var $td = $("<td></td>");
$td.html("Hello TD~~");
//4.将td添加到tr元素内部
$tr.append( $td );
}
//5.将tr添加到table元素内部
$tab.append( $tr );
}
//6.将table添加到body元素内部
$("body").append( $tab );
}仿QQ好友列表
/** 通过jQuery实现仿QQ列表好友列表 */
function openDiv(thisobj){ //thisobj是一个js对象 --转成--> jQuery对象
//先将其他三个分组关闭( 将其他三个分组内的div设置为隐藏 )
$("table span").not(thisobj).next("div").hide(); //css("display", "none")
//根据被点击的分组找到分组内的好友列表, 切换好友列表的展示状态
$(thisobj).next("div").toggle(); //如果元素显示则切换为隐藏, 如果隐藏则切换为显示
}模拟员工信息管理系统
练习1：添加员工信息
function addEmp(){
//1.获取要添加的员工信息(id, name, email, salary)
var id = $("#box1 input[name='id']").val().trim();
var name = $("#box1 input[name='name']").val().trim();
var email = $("#box1 input[name='email']").val().trim();
var salary = $("#box1 input[name='salary']").val().trim();
console.log(id+" : "+name+" : "+email+" : "+salary);
//2.校验员工信息
//2.1.添加的员工信息不能为空!
if( id == "" || name == "" || email == "" || salary == "" ){
alert( "添加的员工信息不能为空!" );
return;
}
//2.2.添加的员工id不能重复! (id=3)
//获取所有的tr元素, 并遍历所有的tr元素
var flag = false; //false表示id是不存在的!!!
$("table tr").each(function(){ //this(JS对象)表示当前被遍历的元素
// this --转换为jQuery对象--> $( this )
var _id = $(this).find("td:eq(1)").text();
//拿着用户输入的id和当前员工的id进行比较
if( id == _id ){ //只要有一个相等,就说明id已存在,则停止添加
alert("您输入的员工ID已存在, 请重新添加!");
flag = true; //true表示id已存在!!
//return; 放在这里的return不能终止程序的执行
}
});
if( flag ){ //true表示id已存在!!
return;
}
//3.将员工信息添加到页面上(添加到table中)
//>>创建一个tr元素
var $tr = $("<tr></tr>");
//>>创建5个td元素,并将员工信息添加到td中
var $td1 = $("<td><input type='checkbox'/></td>"); //复选框
var $td2 = $("<td>"+id+"</td>"); //ID
var $td3 = $("<td>"+name+"</td>"); //name
var $td4 = $("<td>"+email+"</td>"); //email
var $td5 = $("<td>"+salary+"</td>"); //email
//>>将td元素添加到tr中
$tr.append( $td1 ).append( $td2 ).append( $td3 ).append( $td4 ).append( $td5 );
//>>将tr元素添加到table中
$("table").append( $tr );
}练习2：删除员工信息
function delEmp(){
//1.获取所选中员工所在的tr行 (获取所有被选中的复选框)
//$("input:checked").parents("tr").remove(); //会连接表头一起删除
$("input:checked").parent("td").parent("tr").remove();
}练习3：修改员工信息（自己完成）
练习4：实现全选或全不选
function checkAll(){
//1.获取全选复选框的选中状态( 选中(true)? 没选中(false)? )
var isCheck = $("#all").prop("checked"); //true|false
//2.获取所有普通复选框, 将全选框的选中状态设置给所有普通复选框
$("input[type='checkbox'][id!='all']").prop("checked",isCheck);
}jQuery总结
html元素操作
1、创建元素
$("<div></div>") -- 创建一个div元素，返回的是一个jQuery对象,表示创建的div元素
$("<div>xxxx</div>") -- 创建一个包含内容的div元素，返回的是一个jQuery对象,表示创建的div元素2、添加子元素
$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素3、删除元素
$("div").remove() -- 删除所有的div元素
JS删除所有div元素：
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName("div"); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i<len;i++){
//通过当前元素的父元素删除当前元素(始终删除第一个)
divArr[0].parentNode.removeChild( divArr[0] );
}4、替换元素
$("div").replaceWith("<p>我是来替换的…</p>")html元素内容和值的操作
<div>
这是一个div11元素
<span>这是一个span元素</span>
这是一个div1111元素
</div>
<input type="text" name="user"/>1、html()函数 (类似于js中的innerHTML属性)
-- 用于获取或设置元素的内容，比如为div、span、p、h1~h6、table、tr、td、form等元素设置内容
$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容2、text()函数 (类似于js中的innerText属性，innerText在部分浏览器中不兼容)
-- 用于获取或设置元素的文本内容
$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容3、val()函数 (类似于js中的value属性)
-- 获取或设置表单项元素的value值(input/select/option/textarea)
$("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值元素属性和css属性操作
<input type="text" name="username" id="inp"/>1、prop()函数 -- 用于获取或设置元素的属性值
在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery可以使用attr()函数
$("input[type='checkbox']").prop("checked")
// 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
// 设置所匹配的复选框元素为选中状态
$("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme
$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user2、css()函数 -- 用于获取或设置元素的css属性值
$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({
"width" : "200px",
"height" : "150px",
"border" : "5px solid red",
"background" : "pink"
}); // 为id为div1的元素设置宽度为200px、高度为150px、边框以及背景颜色等样式其他函数
1、each() 函数
$(selector).each(function( index,element ){})
// each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
// function中的index -- 表示遍历的元素的下标
// function中的element -- 表示当前正在遍历的元素(也可以通过this获取)示例：
$("table tr").each(function(){
//从当前行中获取第二个单元格的内容(当前行的id值)
var tempId = $(this).find("td").eq(1).html();
//拿着用户输入的id 和 每一行中的id值进行比较
if( id == tempId ){
alert("添加失败，id已存在！");
flag = true; //id存在，更新flag的值，true表示已存在！
}
});2、show()/hide() 函数
show() -- 设置元素由隐藏变为显示
$("div").show() -- 设置所有的div元素为显示等价于:
$("div").css("display", "block");hide() -- 设置元素由显示变为隐藏
$("div").hide() -- 设置所有的div元素为隐藏等价于:
$("div").css("display", "none");2、toggle()/slideToggle()
toggle() -- 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏，否则切换为显示，切换为显示为下拉状态，隐藏为收缩状态。
扩展内容
为元素绑定点击事件
以点击事件为例，为元素绑定点击事件的方式为:
方式1(js版)：
<script>
function fn(){
alert("input按钮被点击了...");
}
</script>
<body>
<input onclick="fn()" type="button" value="点我~!" />
</body>方式2(js版)：
<script>
window.onload = function(){
//获取id为btn的元素
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("input按钮被点击了...");
}
}
</script>
<body>
<input id="btn" type="button" value="点我~!" />
</body>方式3(jQuery版)：
<script>
$(function(){
//当点击btn按钮时,触发点击事件执行其中的函数
$("#btn").click( function(){
alert("input按钮被点击了...");
});
});
</script>
<body>
<input id="btn" type="button" value="点我~!" />
</body>js对象和jQuery对象的互相转换
通过JS的方式获取元素，返回的是JS对象，JS对象只能调用JS的属性或函数
通过jQuery选择器获取元素，返回的是jQuery对象（结构像一个集合），jQuery对象只能调用jQuery的属性或函数。
如果现有JS对象，但我们需要调用jQuery的属性或函数，可以将JS对象转成jQuery对象；
如果现有jQuery对象，但我们需要调用JS的属性或函数，可以将jQuery对象转成JS对象；
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。