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"; //根本数据类型, stringconsole.log( typeof s1 ); //stringvar s2 = new String("Hello JS"); //简单数据类型, objectconsole.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 ); //undefinedalert( 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 ); // 0arr1.length = 5;console.log("此处数组的长度为: "+arr1.length ); // 5arr1[9] = "a";console.log("此处数组的长度为: "+arr1.length ); // 10arr1[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对象；