前端基础（国税）
一、前端概要
web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点“SRP单一职责”的意思，如字体大小应该是CSS控制的，就不应该使用HTML标签完成，如果CSS能解决的问题尽量不要用JavaScript完成。
HTML - 结构
CSS - 表现
JavaScript - 行为
二、HTML5
2.1、什么是HTML
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。
2.2、HTML是什么样的
简单地来说，HTML的语法就是给文本加上表明文本含义的标签(Tag)，让用户（人或程序）能对文本得到更好的理解。
下面是一个最简单的HTML文档：
<html> <head> <title>第一个Html文档</title> </head> <body> 欢迎访问<a href="http://best.cnblogs.com">Hello HTML5</a>! </body> </html>
所有的HTML文档都应该有一个<html>标签，<html>标签可以包含两个部分:<head>和<body>。
<head>标签用于包含整个文档的一般信息，比如文档的标题（<title>标签用于包含标题），对整个文档的描述，文档的关键字等等。文档的具体内容就要放在<body>标签里了。
<a>标签用于表示链接，在浏览器（如IE,Firefox等）中查看HTML文档时，点击<a>标签括起来的内容时，通常会跳转到另一个页面。这个要跳转到的页面的地址由<a>标签的href属性指定。上面的<a href="http://best.cnblogs.com">中，href属性的值就是http://best.cnblogs.com。
2.3、HTML文档可以包含的内容
通过不同的标签，HTML文档可以包含不同的内容，比如文本，链接，图片，列表，表格，表单，框架等。
- 文本
- HTML对文本的支持是最丰富的，你可以设置不同级别的标题，分段和换行，可以指定文本的语义和外观，可以说明文本是引用自其它的地方，等等等等。
- 链接
- 链接用来指出内容与另一个页面或当前页面某个地方有关。
- 图片
- 图片用于使页面更加美观，或提供更多的信息。
- 列表
- 列表用于说明一系列条目是彼此相关的。
- 表格
- 表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。
- 表单
- 表单通常由文本输入框，按钮，多选框，单选框，下拉列表等组成，使HTML页面更有交互性。
- 框架
- 框架使页面里能包含其它的页面。
2.4、HTML文档格式详细说明
前面介绍了HTML文档的基本格式，下面再做一个详细说明。
HTML文档可以用任何文本编辑器（比如记事本，UltraEdit等）创建，编辑，因为它的内容在本质也只是一些文本。
在HTML文本中，用尖括号括起来的部分称为标签。如果想在正文里使用尖括号（或者大与号小与号，总之是同一个东西），必须使用字符转义，也就是说转换字符的原有意义。<应该使用<代替，>则使用>，至于&符号本身,则应该使用&替代（不得不说的是有很多HTML文档没有遵循这个规则，常用的浏览器也都能够分析出&到底是一个转义的开始，还是一个符号，但是这样做是不推荐的）。
标签本质上是对它所包含的内容的说明，可能会有属性，来给出更多的信息。比如<img>（图片）标签有src属性（用于指明图片的地址），width和height属性（用于说明图片的宽度和高度）。HTML里能使用哪些标签，这些标签分别可以拥有哪些属性，这些都是有规定的，知道了这里说的基本知识之后，学习HTML其实也就是学习这些标签了。本文后面会对常用的HTML标签做出简短的介绍。
标签通常有开始部分和结束部分（也被称为开始标签和结束标签），它们一起限定了这个标签所包含的内容。属性只能在开始标签中指定，属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时候，有些标签并不包含其它内容（只包括自己的属性，甚至连属性都没有），这种情况下，可以写成类似这样：<img src="logo.gif" />。注意最后的一个空格和一个反斜杠，它说明这个标签已经结束，不需要单独的结束标签了。
某些标签包含的内容中还可以有新的标签，新的标签名甚至可能还可以与包含它的标签的名称相同（哪些标签可以包含标签，可以包含哪些标签也是有规定的）。比如：
<div> <div>分类目录...</div> <div>当前分类内容列表...</div> </div>
在这种情况下，最后出现的标签应该最先结束。
HTML文档里所有的空白符（空格，Tab，换行，回车）会被浏览器忽略，唯一的例外是空格，对空格的处理方式是所有连续的空格被当成一个空格，不管有一个，还是两个，还是100个。之所以有这样的规则是因为忽略空白符能让使用HTML的作者以他觉得最方便的格式来排列内容，比如可以在每个标签开始后增加缩进，标签结束后减少缩进。由于英语文本中空格用得很普遍（用于分隔单词），所以对空格做了这样的特殊处理。如果要显示连续的空格（比如为了缩进），应该用 来代表空格。
2.5、常用标签介绍
2.5.1、文本
最常用的标签可能是<font>了，它用于改变字体，字号，文字颜色。被弃用，不建议使用。
<font size="6">6</font> <font size="4">4</font> <font color="red" size="5">红色的5</font> <font face="黑体">黑体的字</font>
加粗，下划线，斜体字也是常用的文字效果，它们分别用<b>,<u>,<i>表示：
<b>Bold</b> <i>italic</i> <u>underline</u>
还有一些标签，用来指出包含的文本有特殊的意义，比如<abbr>（表示缩写），<em>（表示强调），<strong>（表示更强地强调）,<cite>（表示引用），<address>（表示地址）等等。这些标签不是为了定义显示效果而存在的，所以从浏览器里看它们可能没有任何效果，也可能不同的浏览器对这些标签的显示效果完全不同。
一篇很长的文章，如果有合适的小标题的话，就可以快速地对它的内容进行大致的了解。在HTML里，用来表示标题的标签有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它们分别表示一级标题，二级标题，三级标题...
<h1>HTML 30分钟教程</h1> <h2>什么是HTML</h2> ... <h2>HTML是什么样的</h2> ...
2.5.2、图片
<hr>标签用于在页面上添加横线。可以通过指定width和color属性来控制横线的长度和颜色。 <hr width="90%" color="red" /> <img>标签用于在页面上添加图片，src属性指定图片的地址，如果无法打开src指定的图片，浏览器通常会在页面上需要显示图片的地方显示alt属性定义的文本。 <img src="http://www.w3.org/Icons/valid-xhtml10" alt="图片简介" />
2.5.3、链接
超级链接用<a>标签表示，href属性指定了链接到的地址。<a>标签可以包含文本，也可以包含图片。
<a href="http://deerchao.net">deerchao的个人网站</a> <a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a>
2.5.4、分段与换行
由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。
<p>这是第一段。</p> <p>这是第二段。</p>
也有人不用<p>，而用<br>。<br>只表示换行，不表示段落的开始或结束，所以通常没有结束标签。
这是第一段。<br> 这是第二段。<br /> 这是第三段。
有时，要把文档看作不同的部分组合起来的，比如一个典型的页面可能包括三个部分：页头，主体，页脚。<div>标签专门用于标明不同的部分：
<div>页头内容</div> <div>主体内容</div> <div>页脚内容</div>
2.5.5、表格
HTML文档在浏览器里通常是从左到右，从上到下地显示的，到了窗口右边就自动换行。为了实现分栏的效果，很多人使用表格（<table>）进行页面排版（虽然HTML里提供表格的本意不是为了排版）。
<table>标签里通常会包含几个<tr>标签，<tr>代表表格里的一行。<tr>标签又会包含<td>标签，每个<td>代表一个单元格。
<table> <tr> <td>2000</td><td>悉尼</td> </tr> <tr> <td>2004</td><td>雅典</td> </tr> <tr> <td>2008</td><td>北京</td> </tr> </table> <tr>标签还可以被<table>里的<thead>或<tbody>或<tfoot>包含。它们分别代表表头，表正文，表脚。在打印网页的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现。 <th>和<td>非常相似，也用在<tr>里边，不同的是<th>代表这个单元格是它所在的行或列的标题。 <table> <thead> <tr><th>时间</th><th>地点</th></tr> </thead> <tbody> <tr><td>2000</td><td>悉尼</td></tr> <tr><td>2004</td><td>雅典</td></tr> <tr><td>2000</td><td>北京</td></tr> </tbody> </table>
2.5.6、列表
表格用于表示二维数据（行，列），一维数据则用列表表示。列表可以分为无序列表（<ul>），有序列表（<ol>）和定义列表（<dl>）。前两种列表更常见一些，都用<li>标签包含列表项目。
无序列表表示一系列类似的项目，它们之间没有先后顺序。
<ul> <li>苹果</li> <li>桔子</li> <li>桃</li> </ul>
有序列表中各个项目间的顺序是很重要的，浏览器通常会自动给它们产生编号。
<ol> <li>打开冰箱门</li> <li>把大象赶进去</li> <li>关上冰箱门</li> </ol>
2.5.7、内嵌框架
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>框架</title> </head> <body> <h3>内嵌框架</h3> <p> <a href="d1.html" target="f1">d1</a> | <a href="d2.html" target="f1">d2</a> | <a href="d3.html" target="f1">d3</a> | <a href="d4.html" target="f1">d4</a> </p> <iframe src="login.html" name="f1" width="90%" height="300" frameborder="0"></iframe> <iframe src="http://www.baidu.com" width="90%" height="300"></iframe> </body> </html>
结果：
2.5.8、行内标签与块标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="login.html" target="_top">登录</a> <pre> Hello HTML! </pre> <h1>版权所有 © 珠海国税</h1> <p> Tomcat是基于Java的一个开放源代码、运行<br/>servlet和JSP Web应用的Web应用软件容器。Tomcat是Apache软件基金会（Apache Software Foundation）的Jakarta项目中的一个核心项目，由Apache、Sun和其他一些公司及个人共同开发而成。 </p> <div> <!--层 块--> div1 </div> <div> <!--层 块--> div2 </div> <p> 段落标签p 块 <img src="https://www.baidu.com/img/bd_logo1.png" height="50" align="absmiddle"/> <span>这是一个span，行内标签这是一个span，行内标签这是一个span，行内标签这是一个span，行内标签这是一个span，行内标签这是一个span，行内标签这是一个span，行内标签这是一个span，行内标签</span> <img src="img/cover.png" width="300" title="JavaEE" alt="请到http://www.tax.com查看该图片"/> </p> <ul> <li>中国</li> <li>美国</li> <li>德国</li> </ul> <hr size="7" /> <ol> <li>中国</li> <li>美国</li> <li>德国</li> </ol> <a href="http://www.baidu.com">百度</a> </body> </html>
2.5.9、表格
脚本：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1" width="100%"> <tr><th>姓名</th><th>语文</th><th>数学</th></tr> <tr><td rowspan="3">张三</td><td>88</td><td>75</td></tr> <tr><td>97</td><td>64</td></tr> <tr><td>25</td><td>49</td></tr> <tr><td>总分</td><td colspan="2">54675</td></tr> </table> </body> </html>
结果：
2.5.10、表单
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <form method="get"> <h2>用户注册</h2> <fieldset> <legend>用户信息</legend> <p> <label for="uid">帐号：</label> <input type="text" name="uid" id="uid" required="required" maxlength="2" /> </p> <p> <label for="pwd">密码：</label> <input type="password" name="pwd" id="pwd" /> </p> <p> <label for="sexFemale">性别：</label> <input type="radio" name="sex" id="sexMale" value="男" /><label for="sexMale">男</label> <input type="radio" name="sex" id="sexFemale" value="女" /><label for="sexFemale">女</label> <input type="radio" name="sex" id="sexSecret" value="保密" /><label for="sexSecret">保密</label> </p> <p> <label for="h1">爱好：</label> <input type="checkbox" name="hobbies" id="h1" value="购物" /><label for="h1">购物</label> <input type="checkbox" name="hobbies" id="h2" value="阅读" /><label for="h2">阅读</label> <input type="checkbox" name="hobbies" id="h3" value="运行" /><label for="h3">运行</label> </p> <p> <label for="address">籍贯：</label> <select id="address" name="address"> <option value="广东">广东</option> <option value="广西">广西</option> <option value="江苏">江苏</option> </select> </p> <p> <label for="memo">简历：</label> <textarea id="memo" name="memo" cols="50" rows="5"></textarea> </p> <p> <input type="submit" value="提交" /> </p> </fieldset> </form> </body> </html>
结果：
三、CSS3
3.1、CSS3概要
CSS（Cascading Style Sheet）是层叠样式表的意思，CSS3就是在CSS2.1的基础上升级的CSS新版本，属于HTML5的一部分。它可以有效地对页面的布局、字体、颜色、背景、动画和其它效果实现。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
3.2、盒子模型
盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 100px; height: 100px; margin: 20px; padding: 20px; border: 10px solid blue; } </style> </head> <body> <div id="box"> Box Model </div> </body> </html>
运行结果：
宽度测试
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 800px; padding: 10px; border: 5px solid blue; margin: 10px; } .sbox{ display: inline-block; padding: 10px; margin: 10px; border: solid 10px coral; background: lightblue; width: ?; } </style> </head> <body> <div id="box"> <div class="sbox">Left</div><div class="sbox">Right</div> </div> </body> </html>
要达到如下效果，请问?处最大可以设置为多少像素？
340px
3.3、选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3</title> <style type="text/css"> /*标签选择器*/ h2,p{ color:red; } /*ID选择器，选中一个特定的元素*/ #p2{ color:blue; } /*类样式*/ .g1{ color:green; } .bg{ background: yellow; } </style> </head> <body> <h2>CSS3</h2> <p> web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点“SRP单一职责”的意思，如字体大小应该是CSS控制的，就不应该使用HTML标签完成，如果CSS能解决的问题尽量不要用JavaScript完成。 </p> <p id="p2"> HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看 </p> <div> <input type="button" value="确认" class="g1 bg"/> <input type="button" value="取消" style="color:red;background: greenyellow;"/> <input type="button" value="删除" class="g1"/> </div> </body> </html>
效果：
3.4、盒子模型示例
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3</title> <style type="text/css"> /*类样式*/ .g1 { color: green; } .g1:hover { background: red; color: white; } #div1 { width: 300px; /*宽度*/ height: 200px; /*高度*/ background: lightblue; /*背景色*/ border: 10px solid red; /*3个像素宽，实心，红色的边框*/ margin: 20px; /*外边距20px*/ padding: 30px 10px 10px 40px; /*填充距离*/ margin: 0 auto; /*居中*/ } </style> </head> <body> <h2>CSS3</h2> <div id="div1"> Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box </div> <div> <input type="button" value="确认" class="g1 bg" /> <input type="button" value="取消" style="color:red;background: greenyellow;" /> <input type="button" value="删除" class="g1" /> </div> </body> </html>
结果：
3.5、背景、字体、行高、对齐
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3</title> <style> *{ padding: 0; margin: 0; } #div1 { width: 300px; border: 2px solid #1E90FF; margin: 0 auto; /*background: lightblue url(../img/kingo.png) no-repeat center center;*/ background-color: lightcoral; /*背景颜色*/ background-image: url(../img/kingo.png) /*背景图片*/; background-repeat: no-repeat; /*是否重复*/ background-position: right bottom; /*位置 top right bottom left*/ height: 200px; } #div1 h2{ font-size: 20px; /*字号*/ font-family: "microsoft yahei"; /*字形*/ font-weight:normal; /*粗细*/ color:blue; /*前景色*/ text-align: center; /*水平居中*/ line-height: 40px; /*行高*/ height: 40px; margin-top: 10px; } #div1 p{ text-align: center; line-height: 50px; height: 50px; } </style> </head> <body> <h2>CSS3</h2> <div id="div1"> <h2>用户登录</h2> <p> <label for="uid">帐号：</label> <input type="text" name="uid" id="uid" required="required" maxlength="2" /> </p> <p> <label for="pwd">密码：</label> <input type="password" name="pwd" id="pwd" /> </p> <p> <input type="submit" value="登录" /> </p> </div> </body> </html>
结果：
3.6、浮动布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .item { width: 200px; height: 200px; background: lightgreen; margin: 10px; float: left; } #div1 { border: 1px solid #008000; margin: 20px; overflow: hidden; } </style> </head> <body> <div id="div1"> <div class="item"> item1 </div> <div class="item"> item2 </div> <div class="item"> item3 </div> </div> </body> </html>
结果：
3.7、布局示例
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Book</title> <style type="text/css"> * { margin: 0; padding: 0; } #container { width: 1004px; margin: 0 auto; } #header { height: 200px; background: url(images/top.png) no-repeat; } #menu { background: orangered; } #menu a { width: 100px; display: inline-block; /*行内块标签，行内标签设置宽度无效*/ background: orangered; height: 30px; text-align: center; line-height: 30px; text-decoration: none; /*去下划线*/ color: white; } #menu a:hover { background: mistyrose; color: orangered; } #banner img { width: 1004px; } #main { clear: both; overflow: hidden; margin-bottom: 10px; } #main #left { width: 30%; float: left; background: lightblue; height: 400px; } #main #right { width: 70%; float: left; } #main .bookitem { width: 30%; float: left; margin-right: 3%; } #footer { clear: both; text-align: center; background: lightsalmon; height: 65px; line-height: 30px; padding-top: 5px; } </style> </head> <body> <div id="container"> <div id="header"></div> <div id="menu"> <a href="#">图书列表</a> <a href="#">用户登录</a> <a href="#">后台管理</a> <a href="#">图书列表</a> <a href="#">用户登录</a> <a href="#">后台管理</a> </div> <div id="banner"> <img src="images/adv3.jpg" /> </div> <div id="main"> <div id="left"> 分类 </div> <div id="right"> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> </div> </div> <div id="footer"> <p> 关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机书店 | 友情链接 | 销售联盟 </p> <p> Copyright @ 2004 - 2018 国税JavaEE版权所有 </p> </div> </div> </body> </html>
结果：
四、JavaScript
4.1、JavaScript简介
JavaScript是一种解释执行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，它遵循ECMAScript标准。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，主要用来给HTML增加动态功能。
几乎所有主流的语言都可以编译为JavaScript，进而能够在所有平台上的浏览器中执行，这也体现了JavaScript的强大性和在Web开发中的重要性。如Blade：一个Visual Studio扩展，可以将C#代码转换为JavaScript，Ceylon：一个可编译为JavaScript的、模块化的、静态类型JVM语言。
JavaScript是一种可以同时运行在前端与后台的语言，如Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境（类似Java或.NET）。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
4.1.1、JavaScript组成
ECMAScript，描述了该语言的语法和基本对象，如类型、运算、流程控制、面向对象、异常等。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
JavaScript由对象组成，一切皆为对象。
4.2、Hello World
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello JavaScript</title> </head> <body> 姓名：<input /> <input type="button" value="问好" id="btnHello"/> <script type="text/javascript"> //在页面中找到编号为btnHello的元素，指定单击事件要执行的函数 document.getElementById("btnHello").onclick=function () { alert("Hello JavaScript"); } </script> </body> </html>
结果
4.3、JavaScript语法
示例1：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS语法</title> </head> <body> <input type="button" id="btnShow" value="显示100以内的偶数" onclick="fun1(100)" /> <div id="div1"></div> <script> //定义函数 function fun1(n) { for (var i=1;i<=n;i++) { if(i%2==0){ document.getElementById("div1").innerHTML+="<h2>"+i+"</h2>"; } } } //调用函数 //fun1(15); </script> </body> </html>
结果：
示例2：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello JavaScript</title> </head> <body> 数字： <input type="text" id="txtName" /> <input type="button" value="加法" id="btnHello" /> <script type="text/javascript"> //在页面中找到编号为btnHello的元素，指定单击事件要执行的函数 document.getElementById("btnHello").onclick = function() { alert(100 +parseInt(document.getElementById("txtName").value)); } </script> </body> </html>
结果2：
4.4、JavaScript事件
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event</title> <style type="text/css"> .error{ color:red; font-size:14px; margin-left: 10px; } </style> </head> <body> <img src="../images/book(10).jpg" id="book" /> <p> 帐号：<input id="txtUid" /><span id="spanUid" class="error"></span> </p> <p> 密码：<input id="txtPwd" /><span id="spanPwd"></span> </p> <script type="text/javascript"> var book = document.getElementById("book"); var txtUid = document.getElementById("txtUid"); var spanUid = document.getElementById("spanUid"); //鼠标移入 book.onmouseover = function() { this.src = "../images/book(11).jpg"; } //鼠标移出 book.onmouseout = function(event) { this.src = "../images/book(10).jpg"; alert(event.clientX + "," + event.clientY); console.log(event); } //获得焦点 txtUid.onfocus = function() { spanUid.innerHTML = "请输入6-16位的数字、字母或下划线"; } //失去焦点 txtUid.onblur = function() { if(txtUid.value.length >= 6 && txtUid.value.length <= 16){ spanUid.innerHTML = ""; }else{ spanUid.innerHTML = "必填"; } } </script> </body> </html>
结果：
4.5、表单验证
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .notice { font-size: 14px; margin-left: 10px; color:#999; } .error{ color: red; } </style> </head> <body> <form method="get" action="d4.html"> <h2>用户登录</h2> <p> 帐号：<input id="txtUid" name="uid" /><span id="spanUid" class="notice">*</span> </p> <p> 密码：<input id="txtPwd" name="pwd" /><span id="spanPwd" class="notice"></span> </p> <p> <input type="submit" value="确定" id="btnSubmit" /> </p> <script type="text/javascript"> var txtUid = document.getElementById("txtUid"); var spanUid = document.getElementById("spanUid"); var btnSubmit = document.getElementById("btnSubmit"); btnSubmit.onclick = function() { if(txtUid.value == "") { spanUid.innerHTML = "必填"; return false; /*阻止默认事件与冒泡*/ } //定义正则表达式，[0-9]表示可输入的范围，5表示长度，^表示开始，$表示结束，i忽视大小写，g全局，m表示多行 var reg=/^[0-9A-Za-z]{5,10}$/; if(!reg.test(txtUid.value)){ spanUid.innerHTML = "请输入5-10位数字或字母"; spanUid.className+=" error"; //添加样式 return false; /*阻止默认事件与冒泡*/ } } </script> </form> </body> </html>
结果：
4.6、延时器setTimeout
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="cleartimer()" value="清除延时器" /> <script type="text/javascript"> //5000毫秒后执行指定的函数，只延时一次 var timer1=setTimeout(function(){ alert("Hello Timeout"); },5000); //清除延时器 function cleartimer(){ clearTimeout(timer1); } </script> </body> </html>
结果：
4.7、定时器setInterval
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2 id="txtN"></h2> <img src="../images/book(1).jpg" id="imgPic"/> <input type="button" onclick="cleartimer()" value="清除定时器" /> <script type="text/javascript"> var i=0; //每隔500毫秒执行函数，返回定时器对象 var timer1=setInterval(function(){ document.getElementById("txtN").innerHTML=i++; document.getElementById("imgPic").src="../images/book("+i+").jpg"; if(i>=33) i=0; },500); //清除定时器 function cleartimer(){ clearInterval(timer1); } </script> </body> </html>
结果：
五、jQuery
5.1、jQuery概要
jQuery是继Prototype之后又一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。
jQuery凭借简介的语法和跨浏览器的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发AJAX的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、还是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够多的理由去学习jQuery。
5.2、jQuery Hello World
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery Hello</title> </head> <body> 姓名：<input type="text" id="txtName"/> <input type="button" value="问好" id="btnHello"/> <script src="js/jQuery1.11.3/jquery-1.11.3.min.js"></script> <script> //找到id为btnHello的元素，绑定单击事件 $("#btnHello").click(function () { //找到#txtName的value值，并以警告框的形式输出 alert("你好，"+$("#txtName").val()); }); </script> </body> </html>
结果：
5.3、选择器与级联操作
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <body> <div> <input type="button" id="btnShow" value="执行" /> </div> <img src="../img/animals/1.jpg"/> <img src="../img/animals/2.jpg"/> <img src="../img/animals/3.jpg"/> <img src="../img/animals/4.jpg"/> <img src="../img/animals/5.jpg"/> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> alert($("img").size()); $("#btnShow").click(function(){ $("img").hide(500).show(500); $("img").eq(1).width(500).fadeOut(2000); //DOM对象 alert(document.getElementById("btnShow").value); //jQuery对象 alert($("#btnShow").val()); $("#btnShow").val("执行jQuery操作"); }); </script> </body> </html>
结果
5.4、DOM操作
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <body> <div> <input type="button" id="btnShow" value="执行"/> <input type="text" id="txtName" size="10"/> <input type="button" id="btnLenght" value="点击加长" /> </div> <img src="../img/animals/1.jpg"/> <img src="../img/animals/2.jpg"/> <img src="../img/animals/3.jpg"/> <img src="../img/animals/4.jpg"/> <img src="../img/animals/5.jpg"/> <div id="div1"> div1 </div> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#btnShow").click(function(){ //$("img").first().appendTo("#div1"); $("#div1").append($("img").first().clone()); //$("img").first().prependTo("#div1"); }); $("img").dblclick(function function_name () { $(this).remove(); }); $("#btnLenght").click(function(){ //获得元素txtName的size属性的值 var len=$("#txtName").prop("size"); //设置属性值 $("#txtName").prop("size",len+5); }); </script> </body> </html>
结果
5.5、DOM示例
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <body> <div> 姓名：<input type="text" id="txtName" size="10" /> <input type="button" id="btnAdd" value="添加" /> <ul id="ulStu"> </ul> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#btnAdd").click(function() { //创建li元素，在li中添加txtName输入的内容 var li=$("<li/>").html($("#txtName").val()) //创建一个按钮元素，添加到li中 $("<input type='button' value='删除' class='del'/>").appendTo(li); //将li添加到ulStu中 li.appendTo("#ulStu"); }); //以body为基础在中间找到所有的.del元素，绑定click单击事件 $("body").on("click",".del",function(){ //移除当前元素的父元素 $(this).parent().remove(); }); </script> </div> </body> </html>
结果：
5.6、全选与反选
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <style type="text/css"> #tabBooks, #tabBooks td, #tabBooks th { border-collapse: collapse; border: 1px solid gray; } #tabBooks tr:hover{ background: lightcyan; } </style> </head> <body> <form action="" method="get"> <table border="1" width="70%" id="tabBooks"> <tr> <th style="text-align: left; width: 40px;"><input type="checkbox" id="chbAll" /></th> <th>姓名</th> <th>分数</th> </tr> <tr> <td><input type="checkbox" name="chbItem" value="1" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="3" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="5" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="7" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="9" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="11" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="13" /></td> <td>李白</td> <td><input type="checkbox" value="15" /></td> </tr> </table> <input type="submit" value="提交" /> </form> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //绑定chbAll元素的值的变化事件 $("#chbAll").change(function() { //找到tabBooks元素中所有的input元素且存在属性name=chbItem，将它的checked属性设置成与chbAll一致 $("#tabBooks input[name=chbItem]").prop("checked", $(this).prop("checked")); }); </script> </body> </html>
结果
5.7、jQuery校验
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .notice { font-size: 14px; margin-left: 10px; color: #999; } .error { color: red; } </style> </head> <body> <form method="post" action="d4.html"> <h2>用户登录</h2> <p> 帐号：<input id="txtUid" name="uid" /><span id="spanUid" class="notice">*</span> </p> <p> 密码：<input id="txtPwd" name="pwd" /><span id="spanPwd" class="notice"></span> </p> <p> <input type="submit" value="确定" id="btnSubmit" /> </p> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //当txtUid中按键弹起时执行 $("#txtUid").keyup(validate); $("#btnSubmit").click(validate); function validate(){ //帐号必须填写 if(!$("#txtUid").val()) { $("#spanUid").html("必填").addClass("error"); //添加类样式 return false; }else{ $("#spanUid").html(""); } //定义正则表达式，[0-9]表示可输入的范围，5表示长度，^表示开始，$表示结束，i忽视大小写，g全局，m表示多行 var reg = /^[0-9A-Za-z]{5,10}$/; if(!reg.test($("#txtUid").val())) { $("#spanUid").html("请输入5-10位数字或字母").addClass("error"); return false; /*阻止默认事件与冒泡*/ }else{ $("#spanUid").html("正确").removeClass("error"); //移除类样式 } } </script> </form> </body> </html>
结果
5.8、jQuery插件 JPicture图片轮播
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Book</title> <link rel="stylesheet" type="text/css" href="js/jPicture.min.css" /> <style type="text/css"> * { margin: 0; padding: 0; } #container { width: 1004px; margin: 0 auto; } #header { height: 200px; background: url(images/top.png) no-repeat; } #menu { background: orangered; } #menu a { width: 100px; display: inline-block; background: orangered; height: 30px; text-align: center; line-height: 30px; text-decoration: none; color: white; } #menu a:hover { background: mistyrose; color: orangered; } #banner img { width: 1004px; } #main { clear: both; overflow: hidden; margin-bottom: 10px; } #main #left { width: 30%; float: left; background: lightblue; height: 400px; } #main #right { width: 70%; float: left; } #main .bookitem { width: 30%; float: left; margin-right: 3%; } #footer { clear: both; text-align: center; background: lightsalmon; height: 65px; line-height: 30px; padding-top: 5px; } #left a { width: 100%; display: inline-block; /*行内块标签，行内标签设置宽度无效*/ background: orangered; height: 30px; text-align: center; line-height: 30px; text-decoration: none; /*去下划线*/ color: white; } #banner{ width: 1004px; height: 300px;} </style> </head> <body> <div id="container"> <div id="header"></div> <div id="menu"> <a href="#">图书列表</a> <a href="#">用户登录</a> <a href="#">后台管理</a> <a href="#">图书列表</a> <a href="#">用户登录</a> <a href="#">后台管理</a> </div> <div id="banner"> <div> <div> <a href="#"> <img src="images/adv3.jpg" /> </a> </div> <div> <a href="#"> <img src="images/adv2.jpg" /> </a> </div> <div> <a href="#"> <img src="images/adv1.jpg" /> </a> </div> </div> </div> <div id="main"> <div id="left"> <a href="#">图书列表</a> <a href="#">用户登录</a> <a href="#">后台管理</a> <a href="#">图书列表</a> <a href="#">用户登录</a> <a href="#">后台管理</a> </div> <div id="right"> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基础学Java </p> <p class="state"> 未租出 </p> </div> </div> </div> <div id="footer"> <p> 关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机书店 | 友情链接 | 销售联盟 </p> <p> Copyright @ 2004 - 2018 国税JavaEE版权所有 </p> </div> </div> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jPicture.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> jPicture("#banner", { type: "slide", autoplay: 2000 }); </script> </body> </html>
结果
六、作业
6.1、WeRead图书租赁系统前端页面
1、使用HTML5+CSS3+JavaScript技术完成一个图书租赁系统的前端内容，页面要求如下：
本站首页：头部、搜索栏、图书列表、页脚与版本声明区
详细页面：点击图书列表中的图书详细图书的详细信息
后台：
添加图书：头部、添加图书的表单、页脚，要求使用JavaScript验证必填项与内容格式，至少包含5个字段
编辑图书：内容与添加图书类似
2、不需要实现功能，界面要求美观大方，可以借助Photoshop等工具
3、要求兼容IE8+、Chrome、Firefox主流浏览器
首页：
详细：
管理员登录页
后台首页
图书列表
添加图书
编辑图书
6.2、jQuery作业
