共计 33195 个字符，预计需要花费 83 分钟才能阅读完成。
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 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 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 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 对象；
