XML、HTML、CSS、JavaScript、JQuery、DHTML、AJAX

Java Web

一、WEB概述

WEB，在英语中web即表示网页的意思，它用于表示Internet主机上供外界访问的资源。
Internet上的资源分类
Internet上供外界访问的Web资源分为：
静态web资源（如html 页面）：指web页面中供人们浏览的数据始终是不变。
动态web资源：指web页面中供人们浏览的数据是由程序产生的，不同时间点访问web页面看到的内容各不相同。
静态web资源开发技术
Html、CSS、javaScript
常用动态web资源开发技术：
JSP/Servlet、ASP、PHP等
在Java中，动态web资源开发技术统称为Javaweb，我们课程的重点也是教大家如何使用Java技术开发动态的web资源，即动态web页面。
B/S： Browser Server 浏览器服务器模型，如 京东、淘宝、网页版QQ、页游
优点：不需要下载客户端程序，使用浏览器可以直接访问。程序的升级操作是在服务器端进行，浏览器只需要刷新页面就可以看到升级后的效果。
缺点：浏览器具有一定的局限性，页面的展示能力依然很差。所有的页面数据都需要从服务器实时的获取。所以对网速的依赖很高。
主流浏览器都为确定窗口大小提供了4个属性:innerWidth、innerHight、outerWidth和outerHight;
C/S：Client Server客户端服务器模型，如QQ
优点：可以任意设计，页面的展示能力可以很强。由于大量的资源都已经保存在客户端，和服务器的交互仅仅是一些变化的数据，所以对网速的依赖很低。
缺点：第一次使用时需要下载客户端程序。一旦程序需要升级操作，所有的客户端程序都需要升级（在有些场景中是不能被接受的）。
发展趋势：往B/S方向发展

无状态协议指比如客户获得一张网页之后关闭浏览器，然后再一次启动浏览器，再登录该网址，但是服务器并不知道客户关闭了一次浏览器。
http是一种无状态协议。（为了保证服务器内存）
DNS是有状态协议。

二、XML概述

1.什么是XML

xml：extensible markup language:可扩展标记语言
html：超文本标记语言
http：超文本传输协议
xml是一种存储格式，本质上就是字符串，传输，存储数据的，结构化数据。
由w3c(World wide web consortium万维网联盟)组织提供，2000年开发出1.0版本。
2.xml是如何存储数据的
由开始标签和结束标签及中间的内容存储数据，并有标签之间的嵌套关系，维护数据之间的关系。
3.xml的应用场景
(1).传输、存储数据
(2).作为配置文件
4.xml文件&校验
在 XML 中，有 5 个预定义的实体引用分别是如下:
& lt; < 小于
& gt; > 大于
& amp; & 和号
& apos; ’ 单引号
& quot; " 引号 (quotation mark)

三、XML语法

1.声明
解析器根据声明解析xml数据

文档声明： <?XML version=”1.0” encoding=”utf-8”?>
注意：
1、文档声明必须在第一行
2、良好的xml要写上声明
encoding=“utf-8” 表示浏览器使用什么编码格式读取xml
2.元素
一个标签就是一个元素，或者说开始标签和结束标签及中间的标签体是一个元素。
一个xml文档只能有一个根标签。
标签可以包含子标签，但一定要合理嵌套。
标签里没有内容，可以写成自闭标签<标签名/>
命名规范：
①　严格区分大小写
②　不能以数字或标点符号开头
③　不能以xml的大小写不同结合形式开头
④　不能有空格、冒号
3.属性
一个标签可以有多个属性，多个属性之间用空格隔开，属性值一定要用双引号”或单引号’包起来。
4.注释

注释不能嵌套！
注释会被编译期忽略。
5.转义字符
用其他符号来代替特殊符号。

含义	转义字符
<	&lt;
>	&gt;
&	&amp;
‘	&apos;
“	&qot;

6.约束：用一个文档约束另外一个文档。
DTD约束
schema约束
四、xml解析
解析parse ：String–》某种格式
格式化format：某种格式（比如Date类型）–》String
解析方式：
1.DOM解析：官方提供的
DOM=Document Object Model文档对象模型
实现Node接口，Document/Element/Att等都实现了该接口，提供了增删改查节点的方法。
优点：①可以十分方便对节点进行增删改查的操作。
②在内存中保存了一颗文档结构树，只需解析一次就可以重复使用这些数据。
缺点：①将整个文档都加载到内存中用对象表示，比较占用内存空间。
②将整个文档解析完成才可以操作，相对耗费时间，效率低。
2.SAX解析：社区提供的
SAX=Simple API for XML，是一种XML解析的替代方法。相比于DOM，SAX是一种速度更快，更有效的方法。它逐行扫描文档，一边扫描一边解析。而且相比于DOM，SAX可以在解析文档的任意时刻停止解析，但任何事物都有其相反的一面，对于SAX来说就是操作复杂。
解析器 事件处理器（接口）
理论上对xml大小没有限制。
优点：①无需将整个xml文档都加载到内存，占用内存小。
②由于逐行解析，遇到想要的内存可以停下来处理，效率高。
缺点：①因不能保存到内存，每次需要时都要重新解析。
②只能读取文档，不能进行增删改。
解析开发包：jaxp(Java API for XML Parsing，sun公司提供，写起来较麻烦)、jdom、dom4j(Document Object Model for Java用的最多)
英文的命名习惯：2代表to，4代表for，例如b2c=business to customer
SAXReader：SAX解析器类
XMLWriter：写XML类

public static void main(String[] args) throws DocumentException {
		//查询第一本书的书名，并输出到控制台
		//1.创建解析器
		SAXReader reader = new SAXReader();
		//2.利用解析器读取xml文件
		//可以用alt+shift+l可以快速接收
		Document dom = reader.read("book.xml");
		//3.获取根元素
		Element root = dom.getRootElement();
		//4.获取第一本书
		Element bookEle = root.element("书");
		//5.获取书名
		Element name = bookEle.element("书名");
		//6.获取书名内容
		String text = name.getText();
		
		System.out.println("书名为："+text);
		
	}

2.查询第二本书的售价，并输出到控制台
创建Demo2：

public static void main(String[] args) throws DocumentException {
		//创建解析器
		SAXReader reader = new SAXReader();
		//读取xml
		Document dom = reader.read("book.xml");
		//获取根元素
		Element root = dom.getRootElement();
		//获取第二本书
		List<Element> list = root.elements();
		Element bookEle2 = list.get(1);
		//获取书名元素
		Element element = (Element) bookEle2.elements().get(0);
		System.out.println(element.getName());
		//获取书名内容
		String text = element.getText();
		
		System.out.println("书名为："+text);
		
	}

3.给第一本书添加一个特价节点（2种方式）
先创建工具类

import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.io.SAXReader;
    
    public class XMLUtils {
    	
    	/**
    	 * 创建解析器并读取xml
    	 */
    	public static Document getDocument(String xmlPath){
    		try {
    			//创建解析器
    			SAXReader reader = new SAXReader();
    			//读取xml
    			Document dom = reader.read(xmlPath);
    			return dom;
    		} catch (DocumentException e) {
    			e.printStackTrace();
    			throw new RuntimeException();
    		}
    	}
    }

//3.给第一本书添加一个特价节点（2种方式）

Document dom = XMLUtils.getDocument("book.xml");
//获取根元素
Element root = dom.getRootElement();
//获取第一本书
Element bookEle = root.element("书");
//方式一:
//创建游离的特价节点，挂在到父节点上
/*Element price2 = DocumentHelper.createElement("特价");
price2.setText("28元");
bookEle.add(price2);*/
//方式二:
//直接在节点上添加一个节点
Element price2 = bookEle.addElement("特价");
price2.setText("16.6");

//将内存中的document写入xml文档中
XMLWriter writer = new XMLWriter(new FileOutputStream("book.xml"),OutputFormat.createPrettyPrint());
writer.write(dom);
writer.close();
System.out.println("over");

4.给第二本书在作者节点前插入一个特价节点
在工具类中添加代码：

/**
	 * 将内存中的document写入xml文档中
	 */
	public static void write2xml(Document dom,String xmlPath){
		try {
			XMLWriter writer = new XMLWriter(new FileOutputStream(xmlPath),OutputFormat.createPrettyPrint());
			writer.write(dom);
			writer.close();
		} catch (Exception e) {
			e.printStackTrace();
			throw new RuntimeException();
		}
	}

//读取xml

Document dom = XMLUtils.getDocument("book.xml");
//获取根元素
Element root = dom.getRootElement();
//获取第二本书
List<Element> list = root.elements();
Element bookEle2 = list.get(1);
//创建元素
Element price2 = DocumentHelper.createElement("特价");
price2.setText("38元");
//获取list并添加元素
List list2 = bookEle2.elements();
list2.add(1, price2);

XMLUtils.write2xml(dom, "book.xml");

5.删除第二本书的特价节点（2种方式）

        //读取xml
		Document dom = XMLUtils.getDocument("book.xml");
		//获取根元素
		Element root = dom.getRootElement();
		//获取第二本书
		List<Element> list = root.elements();
		Element bookEle2 = list.get(1);
		//方式1：
		//从list中删除
		/*List list2 = bookEle2.elements();
		list2.remove(1);*/
		//方式2
		//获取要删除的节点，从父节点删除
		Element price2 = bookEle2.element("特价");
		bookEle2.remove(price2);
		XMLUtils.write2xml(dom, "book.xml");

6.更新第一本书的特价节点的内容为19.8元
//读取xml

Document dom = XMLUtils.getDocument("book.xml");
dom.getRootElement().element("书").element("特价").setText("19.8元");

XMLUtils.write2xml(dom, "book.xml");

属性案例：
1.给第一本书添加一个属性，如：出版社=“清华大学出版社”(2种方式)

//1.给第一本书添加一个属性，如：出版社="清华大学出版社"(2种方式)
		Document dom = XMLUtils.getDocument("book.xml");
		Element bookEle = dom.getRootElement().element("书");
		//方式1：创建游离属性，挂载到父节点
		/*Attribute attr = DocumentHelper.createAttribute(bookEle, "出版社", "清华大学出版社");
		bookEle.add(attr);*/
		//方式2：直接在父节点添加属性
		bookEle.addAttribute("版次", "1.0");
		XMLUtils.write2xml(dom, "book.xml");

2.在控制台上打印输出第一本书的出版社属性的值,并更新属性的值为“人民出版社”(3种方式)

        Document dom = XMLUtils.getDocument("book.xml");
		Element bookEle = dom.getRootElement().element("书");
		//获取属性
		Attribute attr1 = bookEle.attribute(0);
		Attribute attr2 = bookEle.attribute("出版社");
		
		String value = bookEle.attributeValue("出版社");
		
		attr1.setValue("人民出版社");
		
		System.out.println(attr1.getValue());
		System.out.println(attr2.getValue());

3.删除第一本书的出版社属性(2种方式)

Document dom = XMLUtils.getDocument("book.xml");
Element bookEle = dom.getRootElement().element("书");
//方式1：获取属性并从父节点删除
/*Attribute attr = bookEle.attribute("出版社");
bookEle.remove(attr);*/
//方式2
bookEle.addAttribute("出版社", null);
XMLUtils.write2xml(dom, "book.xml");
System.out.println("over");

HTML 和 XML的区别:

xml对语法的要求非常严格, 如区分大小写, 标签不能交叉嵌套,标签一定要关闭等

HTML对语法的要求非常不严格. 如: 标签名可以大小写混用, 标签即使没有结束或者交叉嵌套, 可能也会被浏览器正常解析(最好按照规范来书写!!)
xml中允许用户自己定义标签
HTML中的标签都是预定义好的, 不允许用户自己定义

HTML

定义：Hyper Text Markup lauguager超文本标记语言
HTML是一门标记语言, 标记也叫做元素/标签, 标签分为开始标签和结束标签, 如果标签内没有内容要修饰, 可以合并一个自闭标签.
如:

---

等等
互联网上大部分网页是用html编写，浏览器可以识别html语言。
后缀名：.html
大多的html标签都必须闭合

//网页展示不显示注释部分 //格式声明，标识这是一个html文件 //根标签，所有的html内容都要写到这个根标签内 // 头标签，一般存放属性或标题，指定字符集，链接样式，链接js文件 :用来指定浏览器用那种编码解析html文档 //title给网页设置一个标题，在浏览器页夹上显示 //头信息结束 中国，我爱你！ //指定网页内容 //可以规定文本字体face、大小size和颜色color，建议用css样式文件 //主体结束 //html标识结束 html通过不同的标签，可以定义不同的内容。比如文本、标题、列表、图片、超链接、表单。 可以通过W3CSchool.chm来学习标签。   //空格
//换行符

---

//是一根直线，线型：直线（solid）、虚线（dashed）、点线

//块，占一行,

结尾。 文本标签： 文本标签font，有三个属性： ①size：大小，范围为1-7 ②face：字体 ③color：颜色，有三种形式，英文、16色、RGB（RGB颜色部分浏览器不支持） 标题标签：

-

-

标签可定义标题。

定义最大的标题。

定义最小的标题。 属性：align left 左对齐 center 居中 right 右对齐 justify 两端对齐 列表标签： type：表示列表前面的形状，取值有disc（默认）：实心圆，circle：空心圆，square：方块 （1）无序列表

• 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表始于
  • 标签。每个列表项始于
  • 。
    • Coffee
    • Milk
    浏览器显示如下： Coffee Milk 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 （2）有序列表
    1. 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于
       1. 标签。每个列表项始于
       2. 标签。
          1. Coffee
          2. Milk
          浏览器显示如下： 1.Coffee 2.Milk 图片标签： 必须属性 值 描述 alt text 规定图像的替代文本。 src URL 规定显示图像的 URL（引用地址）。 替代文本：当图片无法显示时提示的文字 width: 宽度，可以是像素，也可以是百分比 hight：高度 border：边框的宽度 px 超链接标签： 用来创建锚。href 属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。 这个锚定义了指向 w3school 的链接： Visit W3School! target：在何处打开目标url，常用有_self:当前页面打开，_blank:新页面打开，_top:回到顶部 title：鼠标移到改标签时所显示内容 可以通过来定义锚点。如果需要回到指定位置，需要在指定位置加入 学习就上tmooc
          回到顶部
          表格标签： 表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由

          标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 在浏览器显示如下： row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 属性 值 描述 DTD abbr text 规定单元格中内容的缩写版本。 STF align left right center justify char 规定单元格内容的水平对齐方式。 STF axis category_name 对单元进行分类。 STF bgcolor rgb(x,x,x) #xxxxxx colorname 不赞成使用。请使用样式取而代之。 规定单元格的背景颜色。 TF char character 规定根据哪个字符来进行内容的对齐。 STF charoff number 规定对齐字符的偏移量。 STF colspan number 规定单元格可横跨的列数。 STF headers header_cells'_id 规定与单元格相关的表头。 STF height pixels % 不赞成使用。请使用样式取而代之。 规定表格单元格的高度。 TF nowrap nowrap 不赞成使用。请使用样式取而代之。 规定单元格中的内容是否折行。 TF rowspan number 规定单元格可横跨的行数。 STF scope col colgroup row rowgroup 定义将表头数据与单元数据相关联的方法。 STF valign top middle bottom baseline 规定单元格内容的垂直排列方式。 STF width pixels % 不赞成使用。请使用样式取而代之。 规定表格单元格的宽度。 TF cellspacing="0" //设置表格框线没有空隙 cellpadding="20px" //设置表格内容到边框的距离为20个像素 表格的表头使用

          标签进行定义。 在大多数浏览器中，没有内容的表格单元显示得不太好。 注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。 浏览器向服务器发送数据的两种方式： (1) 通过超链接向服务器发送数据 https://www.baidu.com/?user=zhangsan&password=123&like=lanqiu&like=zuqiu 其实就是在超链接后面通过?拼接参数将数据带给服务器 参数和参数值之间用等号分隔, 参数可以有多个, 多个参数之间用&分隔, 并且参数的名字可以重复 (2) 通过表单向服务器发送数据 其实里通过表单及表单项标签, 用户可以通过表单项输入数据, 通过提交表单向服务器发送数据 表单标签： 定义和用法 标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 type属性规定input元素的类型。type属性能够改变input元素的类型，type属性的值有：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 以及url; search定义用于搜索的文本字段; url定义用于url的文本字段; week定义日期字段的周(带有calendar控件) range定义带有滑块控件的数字字段 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据 必需的属性 属性 值 描述 DTD action URL 规定当提交表单时，向何处发送表单数据。 STF method 可选属性, 用来指定以何种方式来提交表单, 如果不指定, 默认是GET提交。 HTTP协议中规定了7种提交方式, 其中5种都不常用, 只用GET和POST. 只有使用表单, 并且明确的指定了提交方式为POST时, 才是POST提交, 其他方式都是GET提交。 GET和POST提交的区别: 主要区别在于请求参数传输过程的不相同 GET提交: 通过在地址栏拼接参数将数据发送给服务器 数据显示在地址栏, 非常不安全 通过地址栏发送数据, 数据量不能太大, 不能超过1kb或者4kb POST提交: 通过底层的流将数据发送给服务器 没有将数据显示在地址栏, 相对更安全 没有通过地址栏发送数据, 数据量理论上没有限制 可选的属性 属性 值 描述 DTD accept MIME_type 规定通过文件上传来提交的文件的类型。 STF accept-charset charset 服务器处理表单数据所接受的字符集。 STF enctype MIME_type 规定表单数据在发送到服务器之前应该如何编码。 STF method get post 规定如何发送表单数据。 STF name name 规定表单的名称。 TF target _blank _parent _self _top framename 规定在何处打开 action URL。 TF 表单中的项 表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它 标签用于搜集用户信息，属性如下： 属性 值 描述 DTD accept mime_type 规定通过文件上传来提交的文件的类型。 STF align left right top middle bottom 不赞成使用。规定图像输入的对齐方式。 TF alt text 定义图像输入的替代文本。 STF checked checked 规定此 input 元素首次加载时应当被选中。 STF disabled disabled 当 input 元素加载时禁用此元素。不能提交 STF maxlength number 规定输入字段中的字符的最大长度。 STF name field_name 定义 input 元素的名称。 STF readonly readonly 规定输入字段为只读。可以提交 STF size number_of_char 定义输入字段的宽度。 STF src URL 定义以提交按钮形式显示的图像的 URL。 STF type button 按钮 checkbox 复选框 file 上传文件 hidden 隐藏域 image 图片 password radio 单选框 reset 重置 submit 提交按钮 text 文本域 规定 input 元素的类型。 STF value value 规定 input 元素的值。 STF  标签 select 定义一个下拉选框 option 用来定义下拉选框中的选项 select属性: name属性 -- name指定该项提交时参数的名字 size属性 –- 指定可见选项的个数 北京 下拉列表 οnclick=”alert(404)” 点击button按钮时，弹出警告提示404 οnclick="method()" 点击button按钮时调用方法method()，弹出方法运行结果。  文本域 请输入个人信息… 属性: cols 设置列数, 即输入框的宽度 rows 设置行数, 即输入框的高度

CSS

1.css概述

：Cascading Style Sheets 层叠样式表
用途：美化HTML页面。
css代码可以和html代码完全分离

2.如何在html页面引入css？

①通过标签上的style属性引入，可以通过stype属性设置当前标签的css样式。不推荐使用，会造成页面混乱。

哈哈哈,这是一个div

②在标签中通过标签
③在标签内部添加标签引入外部的css文件。
这种方式真正的实现了css代码和html代码的分离。

demo.css代码：

dotted:点划线;
border:是边框;
solid:是实线;
dashed:由短线组成的虚线;

3.div、span、p标签

这三个标签都可以看作是一个容器, 可以用来包裹其他的 html内容, 被包裹起来的内容形成了一个组, 可以通过css样式对这一组的内容统一设置样式.
div：独占一行，标签可以把文档分割为独立的、不同的部分。
p：独占一行，但是元素会自动在其前后创建一些空白，是段落标签
span：并非独占一行，多个span会并排排列，直到一行满才会换行，标签被用来组合文档中的行内元素
元素类型：
块级元素：默认情况下独占一行的元素，如div、p、h1~h6、br、hr
行内元素：默认情况下，多个行内元素可以处在同一行。span、input、font
注意：属性语句结束一定要加分号“;”，注意单词拼写一定要准确。
4.选择器
选择器可以帮助我们选中想要修饰的标签进行修饰。
(1)基本选择器
①标签名选择器
通过标签的名称选中指定名称的标签进行样式的修饰
格式: 元素名{}, 如: span{}


②类选择器
通过标签上的class属性, 可以为标签设置所属的类, 所有class值相同的标签则为一类, 可以通过标签名选择器选中这一类的标签进行修饰.
格式: .类名{ css属性 }, 如: .c1{}

③id选择器：通过标签上的ID属性，可以为标签设置所属的编号，id值的特点是在整个html中独一无二，可以通过id值选中想要修饰的标签。 格式: #id值{ css属性 }, 如: #d1{}

(2)扩展选择器 ①后代选择器：在父选择器的内部选中后代元素进行修饰。 格式: 父选择器 后代选择器{ } 如: 选中div下所有的后代span #d1 span{}  ②子元素选择器：选中指定的子、0元素进行样式的修饰 格式：父选择器>子元素选择器 在父选择器选中元素的内部, 选中指定的子元素进行样式的修饰 格式: 父选择器>子元素选择器{ } 如: 选中div下所有的子元素span #d1>span{}  ③分组选择器 可以将多个选择器选中的元素统一来设置样式 格式:选择器1,选择器2,选择器3,…选择器n{}

④兄弟选择器
如果两个元素具有相同的父元素, 并且是紧挨着的, 这两个元素就是相邻兄弟, 可以通过相邻兄弟选择器选中A元素后的B元素.
格式: 大哥+小弟{ }

⑤属性选择器
可以通过属性条件选中元素进行修饰
格式: 选择器[属性条件…]{}
如: 选中所有的普通文本输入框 input[type=’text’]{}

<input type=”text” name=”xx”/> 
<input type=”submit” name=”xx”/> 

⑥伪元素选择器
伪元素选择器选中的不仅仅是元素本身, 还包括元素的状态
状态分为如下几种:
:link 表示元素未被点击时的状态
:hover 表示光标(鼠标)悬停时的状态(掌握!)
:active 表示元素被点击时的状态
:visited 表示元素被点击之后的状态

/* 1.后代选择器 */
			#d1 span{
				font-size: 22px;
				background-color: #DDA0DD;
			}
			/* 2.子元素选择器 */
			#d1>span{
				font-size: 16px;
				background-color: #DEB887;
			}
			/* 3.分组选择器 */
			.c1,.c2,#p1 span{
				background-color: #F4A460;
			}
			/* 4.属性选择器 */
			*[class]{
				border: 2px solid grey;
			}
			input[type="text"]{
				background-color: red;
				text-indent: 10px;
			}
			/* 5.相邻兄弟选择器 */
			#p1+p{
				background-color: #DB7093;
			}

			/* 6.伪元素选择器 */
			a:link{
				font-size:24px;
				text-decoration: none;
			}
			a:hover{
				color:green;
				font-size:36px;
				text-decoration: underline;
			}
			a:active{
				color:#8FBC8F;
				font-size:50px;
				text-decoration: none;
			}
			a:visited{
				color:gray;
				font-size:24px;
			}

案例6：easymall注册页面
regist.html代码：

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>用户注册</title>
	<link rel="stylesheet" href="css/regist.css"/>
	
</head>
<body>
	<h1>欢迎注册EasyMall</h1>
	<table>
		<tr>
			<td class="left_td">用户名：</td>
			<td>
				<input type="text" name="username"/>
			</td>
		</tr>
		<tr>
			<td class="left_td">密码：</td>
			<td>
				<input type="password" name="password"/>
			</td>
		</tr>
		<tr>
			<td class="left_td">确认密码：</td>
			<td>
				<input type="password" name="password2"/>
			</td>
		</tr>
		<tr>
			<td class="left_td">昵称：</td>
			<td>
				<input type="text" name="nickname"/>
			</td>
		</tr>
		<tr>
			<td class="left_td">邮箱：</td>
			<td>
				<input type="text" name="email"/>
			</td>
		</tr>
		<tr>
			<td class="left_td">验证码：</td>
			<td>
				<input type="text" name="valistr"/>
				<img src="img/regist/yzm.jpg"  alt="验证码" />
			</td>
		</tr>
		<tr>
			<td colspan="2" id="sub_td">
				<input type="submit" value="注册用户" />
			</td>
		</tr>
	</table>
</body>
</html>

regist.css代码

body{  /*标签名选择器*/
	font-family: 微软雅黑;
	/*背景图片：引用相对路径：img的上一层文件夹为当前文件*/
	background-image: url("./img/regist/zc.jpg");
	/*背景铺排方式:不拼接（拉伸）*/
	background-repeat: no-repeat;
	/*背景图片的位置，第一个参数为左右，第二个为上下*/
	background-position: center 0;
}
h1{
	/*标题文档格式：居中*/
	text-align: center;
	/*设置外边距：距离上边190像素，距离底部30像素*/
	margin-top: 190px;
	margin-bottom: 30px;
	/*标题字体颜色：16位数表示的颜色色系*/
	color: #990000;
}
table{
	/*边界距离：上下边距为0像素， 左右边距为auto：浏览器计算外边距。*/
	margin: 0px auto;
}
.left_td{  /*类选择器  html文件格式:class="left_td"  css文件中名字前加符号. */
	/*设置字体大小为：18像素*/
	font-size: 18px;
	/*文本格式：靠右对齐*/
	text-align: right;
}
input{
	/*输入框 宽度：150像素，高度：22像素，边框：1像素、实线、颜色为#cccccc*/
	width: 150px;
	height: 22px;
	border: 1px solid #cccccc;
}
input[name="valistr"]{
	width: 80px;
}
td{
	padding-top: 10px;  /*单元格内容距离边距的距离为10像素*/
}

#sub_td{ /*id选择器  文件格式:id="sub_td"  css文件中名字前加符号# */
	text-align: center;  /*文档居中*/
}
input[type="submit"]{ /*属性选择器  格式：标签名[其下属性值]{}*/
	border: none; /*无边框*/
	width: 127px;
	height:44px;
	font-size: 20px;
	color: #ffffff;
	font-weight: bold;  /*设置字体粗细*/
	background-image: url("./img/regist/zc_btn01.jpg"); /*输入框背景图片*/
}
input[type="submit"]:hover{ /*伪元素选择器： 额外增加:hover	表示光标(鼠标)悬停时的状态*/
	background-image: url("./img/regist/zc_btn02.jpg");
}
input[name="valistr"],input[name="valistr"]+img{
	vertical-align: middle;
}

5.盒子模型

/*外边距*/
margin: 20px;/*四边*/
margin: 20px 40px;/*上下、左右*/
margin: 20px 30px 40px 50px;/*上右下左*/
margin-top: 40px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 30px;

注意: 垂直外边距合并的现象:
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

/*边框*/
border: 10px solid pink;
border-bottom: 20px solid grey;
border-top: 20px solid green;
border-left: 20px solid blue;
border-right: 20px solid yellow;

/*内边距*/
	padding: 20px;/*四边*/
	padding: 30px 10px;/*上下、左右*/
	padding: 10px 20px 30px 40px;/*上右下左*/
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;

6.属性
6.1 元素类型的补充（案例8）
块级元素:
默认情况下, 块级元素可以独占一行
块级元素可以设置宽和高
如果不设置宽度: 其中宽是默认填满父元素, 高是由内容决定(由内容撑起来)
如果设置, 就是设置的宽和高.
给块级元素设置的外边距/边框/内边距都会起作用
块级元素中可以包含任何元素

行内元素:
默认情况下, 多个行内元素可以处在同一行
不可以设置宽和高, 其中宽和高由内容决定
给行内元素设置的左右外边距/边框/内边距都会起作用, 但是上下外边距将不会起作用!
行内元素内不能包含块级元素

6.2.display属性 – 设置元素的显示方式
block: 块级元素的默认值
inline: 行内元素的默认值
inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)
none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间
visibility: hidden 这种方式也可以隐藏一个元素, 但是这种隐藏只是元素不显示了, 在原位置仍然占用空间（很少用到）

6.3. text-align 设置元素中文本水平对齐方式
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

6.4.list列表属性
list-style-type: none/disc/square/circle…

6.5. 字体属性
font-size： 字体尺寸
font-weight： 字体加粗
font-family： 字体样式
color： 字体颜色
line-height： 行高
text-decoration： 下划线

6.6.背景属性
background-color： 背景颜色设置
background-image： 背景图片设置
background-repeat：设置背景图像是否及如何铺排
background-position：设置或检索对象的背景图像位置

6.7.其他
width 设置宽度
height 设置高度
7.框架标签（案例9）
frameset – 定义一个框架集
frame – 定义框架集中的一个窗口
JavaScript
JavaScript是一种解释型的、基于对象的脚本语言（后面提到均简称js）。
可以与用户进行交互。

1.JavaScript概述

1.1.JavaScript的用途
1.1.1.HTML定义网页的内容
1.1.2.CSS描述网页的布局
1.1.3.JavaScript指定了网页的行为
1.2.JavaScript的历史
1995年5月，网景公司，一个叫Brendan Eich的工程师用10天时间开发除了LiveScript语言。
1995年12月，改名为JavaScript
1996年8月，微软开发出了Jscript
1997-1999年，ECMA国际组织，ECMAScript，基于已有的JavaScript和Jscript，提出了标准的Script语法规则，JavaScript和Jscript都遵循这套标准。
1999-以后，ECMAScript不断的更新
1.3.JavaScript的特点
1.3.1.是脚本语言，不需要编译，解释运行
1.3.2.可以嵌入html页面运行
1.3.3.是弱类型语言（对比：java是强类型语言）
1.3.4.容易学习，可以参考查阅《Script手册》
1.4.JavaScript的优点
1.4.1.交互性：可以与用户进行动态交互
1.4.2.安全性：只能在浏览器内部运行，不能访问浏览器之外的资源
1.4.3.跨平台：有浏览器即可运行，与平台无关
2.在html中引入JavaScript
2.1.通过script标签引入
在html中可以在script标签内写入js代码，次标签通常写到head中

2.2.引入外部的js文件
如果js代码特别多，可以将js抽取到js文件中，在html中通过script标签引入外部的js文件

注意：①此script标签不要自闭 ②此script标签内不要添加任何其他代码

3.JavaScript语法

3.1.注释
3.1.1.单行注释： //
3.1.2.多行注释： /**/
3.2.数据类型
3.2.1.基本数据类型
3.2.1.1.数值类型 number：所有数字（与java不同，不区分整型、浮点型）
在底层全部都是浮点型，在需要时，整型和浮点型会自动进行类型的转换。如2.4+3.6=6
在 Javascript 中大多数字是用十进制表示的。加前缀“0”表示 8 进制的整型值，只能包含 0 到 7 的数字。前缀为“0”同时包含数字“8”或“9”的数被解释为十进制数。
加前缀“0x”（零和x|X）表示 16 进制整型值。可以包含数字 0 到 9，以及字母 A 到 F（大写或小写）。使用字母 A 到 F 表示十进制 10 到 15 的单个数字。就是说 0xF 与 15 相等，同时 0x10 等于 16。
数字 描述 等价十进制数
.0001, 0.0001, 1e-4, 1.0e-4 四个相等的浮点数。 0.0001
3.45e2 浮点数。 345
42 整数。 42
0378 整数。虽然看起来是八进制数（以 0 开头），但是 8 不是有效的八进制数字，所以为十进制数。 378
0377 八进制整数。注意它虽然看起来比上面的数只小 1，但实际数值有很大不同。 255
0.0001 浮点数。虽然以零开头，但由于带有小数点所以不是八进制数。 0.0001
00.0001 错误。两个零开头表示为八进制，但八进制数不能带有小数部分。 N/A （编译错误）
0Xff 十六进制整数。 255
0x37CF 十六进制整数。 14287
0x3e7 十六进制整数。注意‘e’并不被认为指数。 999
0x3.45e2 错误。十六进制数不能有小数部分。 N/A （编译错误）
正 0 和负 0。Javascript 区分正 0 和负 0。
特殊值： infinity正无穷大
-infinity负无穷大
NaN（not a number非数字），：和任何值都不相等，包括本身。用方法isNaN判断一个值是否是NaN类型，不能用NaN==xx来判断。
number包装对象Number
3.2.1.2.字符串型 string
字符串常量可以用单引号也可以用双引号引起来，如 var s1=”string”;var s1=’string’
string包装对象String
注意：JavaScript 中没有表示单个字符的类型。要表示单个字符，应创建一个只包含一个字符的字符串。包含零个字符（“”）的字符串是空（零长度）字符串。
3.2.1.3.布尔类型 boolean
只有2个值，true和false。
boolean包装对象Boolean
if (x = y + z) // 这可能不是想要的结果 – 如下！
注意上面的代码并不检查 x 是否与 y+z 相等，因为仅使用了一个等号（赋值）。相反的，上面的代码将 y+z 赋给变量 x，然后检查整个表达式的值是否为零。要检查 x 是否与 y+z 相等，使用如下代码。
if (x == y + z) // 这与上面的代码不同！
3.2.1.4.undefined类型
如下情况使返回 undefined 值：
对象属性不存在，
声明了变量但从未赋值。
3.2.1.5.null类型
常用作函数的返回值，表示该返回值是一个没有任何内容的空对象。
null是关键字，null变量没有保存有效的数、字符串、Boolean、数组或对象。可以通过给一个变量赋 null 值来清除变量的内容。
3.2.2.复杂数据类型
比如：对象（数组、函数、普通对象）
Javascript 有11 种内置对象： Array、String、Date、Math、Boolean、Number、 Function、Global、Error、RegExp、Object.
3.2.3.数据类型的转换
js中的数据类型在需要的时候回自动进行类型转换。

数值类型转换：
转字符串类型，直接转出对应值的字符串, 3 --> “3”
转布尔类型, 0和NaN转成false, 其他数值转成true
在需要时, 会自动转成对应的包装对象 100 --> new Number(100)
字符串转换：
空字符串(“”): 转数值为0, 转布尔值为false
非空纯数值字符串(“123”): 转数值为对应的数值, 转布尔值为true
非空非数值字符串(“123abc”): 转数值为NaN, 转布尔值为true
在需要时, 会自动转成对应的包装对象. “aaa” --> new String(“aaa”)
只要加号“+”遇到字符串，加号就是拼接。例：alert(6+”66”)弹窗666
注意单词的拼写，编写过程没有报错提示。
在需要时包装类型会自动转换成对应的数值类型，例：alert(“1000”-334)弹窗666
布尔类型转换:
true: 转数值为 1, 转字符串为"true"
false: 转数值为 0, 转字符串为"false"
在需要时, 会自动转成对应的包装对象.
var a=[3>2>1,1<2<3]，alert(a[0])弹窗false，alert(a[1])弹窗true。3>2是true，转换为数值1,1>1是false。1<2是true，转换为数值1，1<3是true。
undefined转换：
转数值为NaN, 转字符串为"undefined", 转布尔值为false, 转对象会抛出异常!
null转换：
转数值为 0, 转字符串为"null", 转布尔值为false, 转对象会抛出异常!
3.3.变量的定义：
变量不区分类型，所有的变量都是var(varible)，例var a=”abc”；var i=10;
如果在 var 语句中没有初始化变量，变量自动取值 undefined。
JavaScript 变量可以是局部变量和全局变量。
命名规则：
区分大小写。
第一个字符必须是一个 ASCII 字母（大小写均可），或一个下划线 (_)。注意第一个字符不能是数字。
后续的字符必须是字母、数字或下划线。
变量名称一定不能是保留字。
Jscript 保留字
Jscript 有一些保留字不能在标识符中使用。保留字对 Jscript 语言有特殊的含义，它们是语言语法的一部分。使用保留字在加载脚本的时候将产生编译错误。
Jscript 还有一些留作将来使用的保留字。这些字不是现在的 Jscript 语言的一部分，然而它们是为将来的使用保留的。

保留字

break delete function return typeof continue FALSE instanceof throw while
case do if switch var debugger finally new TRUE with
catch else in this void default for null try

将来的保留字

abstract double goto native static char extends int protected throws
boolean enum implements package super class final interface public transient
byte export import private synchronized const float long short volatile

当选择标识符时避免使用已经在内部 Jscript 对象或函数中使用的词，如 String 或 parseInt。
3.4.运算符
和java的运算符大致相同。
算术运算符 逻辑运算符 位运算符
描述 符号 描述 符号 描述 符号
负值 - 逻辑非 ! 按位取反 ~
递增 ++ 小于 < 按位左移 <<
递减 – 大于 > 按位右移 >>
乘法 * 小于等于 <= 无符号右移 >>>
除法 / 大于等于 >= 按位与 &
取模运算 % 等于 == 按位异或 ^
加法 + 不等于 != 按位或 |
减法 - 逻辑与 && 杂项运算符
赋值运算符 逻辑或 || 描述 符号
描述 符号 条件（三元运算符） ?: 删除 delete
赋值 = 逗号 , typeof 运算符 typeof
运算赋值 OP= 严格相等 === void void
非严格相等 !== instanceof instanceof
new new
in in

不同之处：比较运算符除了“”还有“=”。
“”数据类型不同则先转换为同一种类型，再进行比较。“=”如果不是同一种数据类型直接返回false。
例：alert（666==”666”）弹窗true，alert（666===”666”）弹窗false。
typeof：用来返回变量的数据类型，例：var x=123;alert(typeof x)弹窗number
注意：typeof只是一个运算符，后面只能接一个值，例alert（typeof 6+”66”）弹窗number66
delete：用来删除数组中的元素或者删除对象中的属性或方法。
调用函数时，后面的分号“;”可加可不加。
var arr=[111,”abc”,true];alert(arr)弹窗111,abc,true;
delete arr[1];alert(arr)弹窗111,true
alert(arr[1])弹窗undefined
3.5.语句
和java语句大致相同。
if条件语句：如果判断条件不是布尔类型，会自动转换成布尔值。
循环语句：和java相似，除了不支持增强for循环
3.6.函数
3.6.1.通过function关键字定义一个函数
function函数名(形参列表){
函数体
}
调用函数：函数名（实参）
3.6.2.通过函数表达式定义一个函数
var 函数名=function(形参列表){
函数体
}
调用函数：函数名（实参）
3.7.数组
3.7.1.通过Array()构造函数来创建数组
var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(10); //创建一个长度为10的空数组
var arr3 = new Array(“aa”, 55, true); //创建一个具有指定初始值的数组
3.7.2.通过数组直接量来创建数组
var arr4 = []; //创建一个空数组
var arr5 = [“x”, 100, false]; //创建一个具有指定初始值的数组
和java的不同之处：
①数组的长度可以被任意改变
var arr =[“aa”, “bb”, “cc”]; arr.length=1; //[“aa”]
②如果数组中某一个位置没有元素, 该位置的值为undefined
var arr =[“aa”, “bb”, “cc”]; arr[10]; //undefined
③JS中的数组可以存放任意类型的数据
var arr = [“x”, 100, false];
3.8.内置对象API
3.8.1.String对象
var str1 = new String(“xxx”); //创建字符串对象
var str2 =“xxx”; //创建字符串基本类型，但是也可以
常用属性和方法：
str.length // 返回字符串长度。
str.charAt(index) // 返回指定索引位置处的字符。
例如：var str = “abcdeabc”; str.charAt(3) // d
str.indexOf(subString, startIndex) 返回第一次出现子字符串的位置。
例如：var str = “abcdeabc”; str.indexOf(“bc”,2) // 6，从第3个开始数
str.lastIndexOf(substring, startindex) 返回最后出现子字符串的位置。
例如：var str = “abcdeabc”; str.lastIndexOf(“bc”,8); // 6，从后往前数
str.split(delimiter) 将字符串按照指定字符分割为字符串数组。
例如：var str = “a🅱️c:d”; str.split(“:”) //返回为一个数组[a,b,c,d]
str.slice(start, end) 提取字符串的某个部分，含头不含尾。
例如：var str = “abcdeabc”; str.slice(2,4); // cd
str.substr(start, length) 返回从指定位置开始的指定长度的子字符串。
例如：var str = “abcdeabc”; str.substr(2,4); //cdea
str.toLowerCase( ) 字符串中的字母转换为小写。
例如：var str = “ABCDE”; str.toLowerCase(); //abcde
str.toUpperCase( ) 字符串中的字母转化为大写。
例如：var str = “abcde”; str.toUpperCase(); //ABCDE
str.match(regexp) 在字符串中查找指定匹配正则表达式的值。（对比：java是mathes）
str.replace(regexp, replaceText) 字符串中匹配正则的值替换为其他值。
str.search(regexp) 查找与正则表达式匹配的第一个子字符串的位置。
注意：null和undefined没有toString()方法.
3.8.2.正则表达式RegExp
创建：
var reg1 = new RegExp(“”, “”);
var reg2 = /xxx/;
标识符: g Global 全局查找 i IgnoreCase 忽略大小写
如果正则需要从头到尾都匹配，需要以”^”开头，以”$”结尾。
reg.test(str); 检查字符串是否符合该正则, 如果符合返回true, 不符合返回false！
3.8.3.Array对象
创建：
var arr1 = new Array();
var arr2 = [];
常用属性和方法：
arr.length 返回数组中元素的个数
例如：var arr = [“a”,“b”,“c”]; arr.length; // 3
arr.concat(arr1,arr2,arr3…) 将多个数组合并成一个
例如：var arr1 = [“a”,“b”,“c”]; var arr2 = [“d”,“e”,“f”]; var arr3 = [“x”,“y”,“z”];
arr1.concat(arr2,arr3);// [“a”,“b”,“c”,“d”,“e”,“f”,“x”,“y”,“z”]
arr.join(string) 将数组中所有元素按照指定字符串连接成一个字符串
例如：var arr = [“aaa”,123,true]; arr.join(“-”); // aaa-123-true
arr.reverse( ) 返回一个元素顺序被反转的 Array 对象。
例如：var arr = [“a”,“b”,“c”]; arr.reverse(); //[“c”,“b”,“a”]
arr.slice(start, end) 返回一个数组的一段，含头不含尾。
例如：var arr = [“a”,“b”,“c”,1,2,3]; arr.slice(2,4); // [“c”,1]
arr.splice(start, deleteCount,value…) 从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
例如：var arr = [“a”,“b”,“c”,“d”,“e”,“f”]; arr.splice(2,2,“zzz”);
// 返回值为[“c”,“d”]，arr则变为[“a”,“b”,“zzz”,“e”,“f”]，中间被替换
arr.pop( ) 移除数组中的最后一个元素并返回该元素
例如：var arr = [“aaa”,123,“x”,true,8]; arr.pop();
//返回值为 8，arr则变为[“aaa”,123,“x”,true]
arr.push(value) 在数组的末尾加上一个或多个元素，并返回新数组的长度值
例如：var arr = [“aaa”,123,“x”,true,8]; arr.push(“last”)
//返回值为6，arr则变为 [“aaa”,123,“x”,true,8,“last”]
arr.shift( ) 移除数组中的第一个元素并返回该元素
例如：var arr = [“aaa”,123,“x”,true,8]; arr.shift()
//返回值为 “aaa” ，arr则变为[123,“x”,true,8]
arr.unshift(value) 为数组的开始部分加上一个或多个元素,并且返回该数组的新长度
例如：var arr = [“aaa”,123,“x”,true,8]; arr.unshift(“first”)
//返回值为6，arr则变为[“first”,“aaa”,123,“x”,true,8]
arr.sort(sortfunction) 返回排序后的数组。
3.8.4.Date对象
创建：
var date1 = new Date(); // 当前时间
var date2 = new Date(年,月,日[,时,分,秒]); //指定时间，可以只有年月日
注意：当创建指定时间的时候，月是从0开始，例如：
var date2 = new Date(2008,7,8,20,0,0); //这个时间是2008年8月8日晚上8点整
常用方法：
data.toLocaleString() 把日期(一个数值)转变成本地日期格式字符串
例如：var date2 = new Date(2008,7,8); date2.toLocaleString();
// “2008/8/8 上午12:00:00”
data.getFullYear() 获取日期对象中所表示时间的年份
例如： var date = new Date(2008,7,8); date.getFullYear(); // 2008
data.getMonth() 获取日期对象中所表示时间的月份，返回一个 0 到 11 之间的整数，0表示一月。
例如：var date = new Date(2008,7,8); date.getMonth(); // 7
data.getDate() 获取日期对象中所表示一个月的日期值，返回值是一个处于 1 到 31 之间的整数，代表了相应的日期值。
例如：var date = new Date(2008,7,8); date.getDate(); // 8
data.getDay() 获取日期对象中所表示一个周的日期值。 返回的值是一个处于 0 到 6 之间的整数，0表示周日，6表示周六。
例如：var date = new Date(2008,7,8); date.getDay(); // 5，表示周五
data.getTime() 返回从 1970 年 1 月 1 日至指定时间的毫秒数。
例如：var date = new Date(2008,7,8); date.getTime(); //1218124800000
3.8.5.Math对象
Math可以直接拿来用！
常用属性和方法：
Math.PI 返回圆周率的值，约等于 3.141592653589793。
例如：var num = Math.PI; // num 的值为3.141592653589793。

Math.exp(number) 返回 e（自然对数的底）的幂。
例如：Math.exp(1) // e1 约等于2.718281828459045
Math.abs(number) 返回数字的绝对值。
例如：Math.abs(-5) // 5
Math.ceil(number) 向上取整
例如：Math.ceil(3.14) // 4
Math.floor(number) 向下取整
例如：Math.floor(3.14) // 3
Math.round(number) 四舍五入到整数
例如：Math.round(5.67) // 6
Math.random() 返回介于 0 和 1 之间的伪随机数。
Math.pow() 方法可返回 x 的 y 次幂的值
例如：Math.pow(10,3); //1000
3.8.6.Global对象
也叫全局对象，没有语法，直接调用。
parseFloat(numString) 将字符串转换成浮点数。
例如：parseFloat(“13.14”) // 返回number类型的13.14
parseInt(numString) 将字符串转成整数，非四舍五入。
例如：parseInt(“9.99”) // 返回number类型的9
isNaN(numValue) 判断一个值是否为非数字。
例如： isNaN(“abc”) // true
isNaN(“123”) // false
eval(codeString) 判断一个字符串并将其以脚本代码的形式执行
例如：eval(“alert(1+2)”); //会直接将"alert(1+2)“当作代码执行，弹出3
JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象
3.9.自定义对象
3.9.1.通过构造函数定义对象
function Person(){} //定义一个空对象
function Person2(形参列表){
对象内容
} //定义一个带参数有内容的对象
3.9.2.通过对象直接量定义
var p3 = {
“name” : “宋小宝”,
“age” : 19,
“run” : function(){
alert(this.name+”?"+this.age)
}
}
3.9.3.对象的取值
p3.name 或者 p3[“name”]/p3[key]
对象底层也是函数，对象名首字母大写。

jQuery

1.jQuery概述

是一个快速、简洁的JavaScript框架。
封装了JavaScript常用的功能代码
提供一种简便的JavaScript的设计模式
优化HTML文档操作、事件处理、动画设计、Ajax交互。
1.1.jQuery的优势特点：
①　具有独特的链式语法和短小清晰的多功能接口
②　可对CSS选择器进行扩展
③　拥有便捷的插件扩展机制和丰富插件
④　兼容各种主流浏览器

1.2.jQuery版本

jQuery分为很多版本, 还分为未压缩版和压缩版, 根据需要选择对应的版本进行下载!
1.x 支持常用的浏览器和IE6+
2.x 支持常用的浏览器和IE9+
3.x 支持常用的浏览器和IE9+
注意: jQuery不兼容老版本. 因为jQuery升级除了会做一些内部优化之外, 还会删除以前的一些代码, 比如删除一些方法. 或者是添加一些新的方法。所以在升级之后， 以前的代码可能会无法执行。
1.3.jQuery的引入
与引入普通js文件一样

2.jQuery的语法

2.1.符号$介绍
$等价于jQuery，是jQuery单词的简写。例如：$()相当于调用jQuery()，该函数会返回一个jQuery对象, 这个jQuery对象中包含零个或多个html元素, 比如: $("div")，可以通过jQuery中提供的方法来操作这些匹配的元素，比如$(“div”).remove()；
2.2.文档就绪事件
所谓的文档就绪事件, 就是在整个html文档加载完之后立即触发, 执行一些操作，格式如下：
$(document).ready(function(){
//xxxx
});

该函数会在整个html文档加载完之后立即执行! 其作用相当于:
window.onload = function(){ //xxx }

其简写形式为:
$(function(){
//xxxx
});
2.3.Dom对象和jQuery对象的转换
JS对象只能调用JS上提供的属性和方法, 不能调用jQuery提供的属性和方法, 如果非要使用, 必须将JS对象转化成jQuery对象！反之亦然。
2.3.1.dom对象转jQuery对象:
var dom = document.getElementById(“username”);
var $jQuery= $(dom ); // js对象转成jQuery对象
2.3.2.jQuery对象转dom对象:
var $jQuery = $(“#username”);
//方式一:
var dom1 = $jQuery[0]; // jQuery对象转成js对象

//方式二:
var dom2 = $jQuery.get(0); // jQuery对象转成js对象

3.jQuery选择器

详细参阅《jQuery参考》文档。
3.1.基本选择器
3.1.1.元素名选择器
$(“div”) – 匹配所有的div元素

3.1.2.class选择器
$(“.c1”) – 匹配所有class值为c1的元素
$(“div.c1”) – 匹配所有class值为c1的div元素

3.1.3.id选择器
$(“#d1”) – 匹配所有id值为d1的元素
$(“div#d1”) – 匹配所有id值为d1的div元素

3.1.4.号匹配符
$("") – 匹配所有的元素

3.1.5.多元素选择器
$(“div,span,#d1,.c1”) – 匹配所有的div/span元素以及id值为d1的元素和class值为c1的元素。。。
3.2.层级选择器
如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。
$(“div span”) – 匹配div下所有的span元素
$(“div>span”) – 匹配div下所有的span子元素
$(“div+span”) – 匹配div后所有紧邻的span兄弟元素
$(“div~span”) – 匹配与div同辈的span元素
3.3.基本过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头
$(“div:first”) – 匹配所有div中的第一个div元素
$(“div:last”) – 匹配所有div中的最后一个div元素
$(“div:even”) – 匹配所有div中索引值为偶数的div元素，0开始
$(“div:odd”) – 匹配所有div中索引值为奇数的div元素，0开始
$(“div:eq(n)”) – 匹配所有div中索引值为n的div元素，0开始
$(“div:lt(n)”) – 匹配所有div中索引值小于n的div元素，0开始
$(“div:gt(n)”) – 匹配所有div中索引值大于n的div元素，0开始
$(“div:not(.one)”) – 匹配所有class值不为one的div元素
3.4.内容选择器
$(“div:contians(‘abc’)”) – 匹配所有div中包含abc内容的div元素
如:

xxxabcxx

$(“div:has§”) – 匹配所有包含p元素的div元素
如:

$(“div:empty”) – 匹配所有内容为空的div元素
如:

$(“div:parent”) – 匹配所有内容不为空的div元素
如:

xxxxx

3.5.可见选择器
$(“div:hidden”) – 匹配所有隐藏的div元素
$(“div:visible”) – 匹配所有可见的div元素
3.6.属性选择器
$(“div[id]”) – 匹配所有具有id属性的div元素
$(“div[id=‘d1’]”) – 匹配所有具有id属性并且值为d1的div元素
$(“div[id!=‘d1’]”) – 匹配所有id属性值不为d1的div元素
$(“div[id^=‘d1’]”) – 匹配所有id属性值以d1开头的div元素
$("div[id$=‘d1’]“) – 匹配所有id属性值以d1结尾的div元素
3.7.子元素选择器
$(“div:nth-child(n)”) – n从1开始, 匹配div中第n个子元素。
$(“div:first-child”) –匹配div中第1个子元素。
$(“div:last-child”) –匹配div中最后一个子元素。。。
3.8.表单选择器
$(”:input") – 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。
$(“:password”) – 匹配所有的密码框
$(“:radio”) – 匹配所有的单选框
$(“:checkbox”) – 匹配所有的复选框
$(“:checked”) – 匹配所有的被选中的单选框/复选框/option
$(“input:checked”) – 匹配所有的被选中的单选框/复选框
$(“:selected”) – 匹配所有被选中的option选项

4.文档操作

parent()
$(“#d1”).parent() – 获取id为d1元素的父元素

parents()
$(“#d1”).parents() – 获取id为d1元素的祖先元素
$(“#d1”).parents(“tr”) – 获取id为d1元素的tr祖先元素

next()
$(“div”).next() – 获取所匹配元素后面紧邻的兄弟元素
$(“div”).next(“span”) – 获取所匹配元素后面紧邻的span兄弟元素

nextAll()
$(“div”).nextAll() – 获取所匹配元素后面所有的兄弟元素
$(“div”).nextAll(“span”) – 获取所匹配元素后面所有的span兄弟元素

prev()
$(“div”).prev() – 获取所匹配元素前面紧邻的兄弟元素
$(“div”).prev(“span”) – 获取所匹配元素前面紧邻的span兄弟元素

prevAll()
$(“div”).prevAll() – 获取所匹配元素前面所有的兄弟元素
$(“div”).prevAll(“span”) – 获取所匹配元素前面所有的span兄弟元素

siblings()
$(“div”).siblings() – 获取所匹配元素前后所有的兄弟元素
$(“div”).siblings(“span”) – 获取所匹配元素前后所有的span兄弟元素

$(“#div”).find(“span”) – 获取所匹配元素后代中的所有span元素

each(function(){ }) – 遍历选中元素

$(“

abc

”) – 创建一个游离的p元素。

append()
$(“div”).append(“abc”) –为所匹配元素追加一个span子元素

remove()
$(“div”).remove() – 删除所匹配元素

html()
$(“div”).html() – 获取所匹配元素的html内容
$(“div”).html(“xxx”) – 为所匹配元素设置html内容

text()
$(“div”).text() – 获取所匹配元素的文本内容
$(“div”).text(“xxx”) – 为所匹配元素设置文本内容

attr()
$(“div”).attr(“id”) – 获取所匹配元素的id属性值
$(“div”).attr(“id”, “xx”) – 为所匹配元素设置id属性

css
$(“div”).css(“width”) – 获取所匹配元素的width样式属性值
$(“div”).css(“width”, “200px”) – 为所匹配元素设置width样式属性
$(“div”).css({“width”:“200px”, “color”:“red”,“font-size”:“24px” }) ; – 为所匹配元素设置width样式属性

5.事件

click()
$(“div”).click(function(){}) – 为所匹配元素绑定点击事件

blur()
$(“input”).blur(function(){}) – 为所匹配元素绑定失去输入焦点事件

focus()
$(“input”).focus(function(){}) – 为所匹配元素绑定获得输入焦点事件

change()
$(“select”).change(function(){}) – 为所匹配元素绑定选项切换事件

ready()
$(document).ready(function(){}) – 文档就绪事件
其作用相当于: window.onload = function(){}
简写形式为:
$(function(){}) – 在整个文档加载完成后立即执行
6.效果
show()
$(“div”).show() – 将隐藏元素设置为显示(底层操作的是display);

hide()
$(“div”).hide() – 将显示元素设置为隐藏;

toggle()
$(“div”).toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.
jquery ajax中都支持(xml、html、jsonp、json、script、text)等返回类型.

7.Json

7.1.json是什么?
JavaScript Object Notation
json是JavaScript提供的一种轻量级数据交换(存储)格式。
是JavaScript中的对象和数组。
创建JS对象:
var person = {
“name”:“张飞”,
“age”: 18,
“gender”: “男”
}

7.2.json语法
数据在名称/值对中
数据由逗号分隔
花括号保存对象
7.2.1对象
{}括起来的就是一个对象。数据结构为{key:value,key:value,……}

• json的属性名只能用双引号引起来, 不能用单引号!
  7.2.2数组
  数组是js中用中括号扩起来的内容，数据结构为[“java”,”javascript”,”vb”,……]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以使数字、字符串、数组、对象几种。
• json的属性值:
  数字（整数或浮点数）
  字符串（在双引号中）
  逻辑值（true 或 false）
  数组（在方括号中）
  对象（在花括号中）
  null
  7.3.json和xml比较
• 可读性: xml比json具有更好的可读性
• 解析度: xml解析麻烦, 而json是js提供的对象, 可以非常方便的进行解析
• 流行度: xml虽然发展了很多年, 但是由于json易于操作, 所以在某些场景中json比xml更常用.

7.4.json格式:
格式一:

	var p1 = {
		"name" : "兰刚",
		"age" : 18,
		"gender" : "男"
	}



格式二
	var p2 = {
		"name" : "兰刚",
		"age" : 18,
		"gender" : "男",
		"friends" : ["赵栋","王涛","朴乾"],
		"gf" : {
			"name" : "凤姐",
			"age" : "17",
			"gender" : "女"
		}
	}

	格式三
	var p3 = {
		"name" : "兰刚",
		"age" : 18,
		"gender" : "男",
		"friends" : [
		{
			"name" : "赵栋",
			"age" : 20,
			"gender" : "男"
		},{
			"name" : "王涛",
			"age" : 19,
			"gender" : "男"
		},{
			"name" : "朴乾",
			"age" : 21,
			"gender" : "男"
		}
		]
	}

4.DHTML

4.1.概述
可以参考查阅《DHTML手册》。
DHTML: Dynamic HTML 动态的 html
DHTML并不是一门新的技术, 而是将现有的HTML, CSS, JavaScript整合在一起, 形成了DHTML技术。
CSS嵌入样式代码

常用事件：
onclick事件 – 当窗口被点击时触发
onfocus事件 – 当窗口获得焦点时触发
onblur事件 – 当窗口失去焦点时触发
onload事件 – 当整个html文档加载完之后立即触发
常用方法：
alert() – 消息对话框
confirm() – 确认对话框 点击确定，返回true，取消则返回false
4.2.2.location对象
属性：
href：获取或设置浏览器地址栏url
host: 设置或获取 location 或 URL 的 hostname 和 port 号码
4.3.DOM
4.3.1.获取元素
通过document获取数据：
① document.getElementById(“id值”); 通过id值获取指定id的元素
② document.getElementsByName(“name属性值”); 通过name属性获取指定name值的所有元素组成的集合数组
③ document.getElementsByTagName(“元素名”); 通过元素(标签)的名称获取指定元素名的所有元素组成的集合数组

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>如何通过document获取数据</title>
<style>
	input{ margin: 5px 5px;}	
</style>
<script>
	/* --通过ID获取并弹出用户名输入框的值-- */
	function demo1(){
		var uInp = document.getElementById("username");
		alert(uInp.value)
		uInp.value="凤姐"
	}
	/* --通过name属性获取并弹出密码输入框的值-- */
	function demo2(){
		var pInp = document.getElementsByName("password")[0]
		alert(pInp.value)
	}
	/* --通过元素(标签)名称获取并弹出确认密码输入框的值-- */
	function demo3(){
		var inp = document.getElementsByTagName("input")[2]
		alert(inp.value)
	}	
	/* --获取元素内容-- */
	function demo4(){
		var p = document.getElementById("pid");
		//alert(p.innerText)  //(部分浏览器不支持) 获取或设置元素内的文本内容
		alert(p.innerHTML)
		p.innerHTML = "<font color='green'>我要变身了！</font>"
	}
</script>
</head>
<body>
	用户名：<input type="text" name="username" id="username"  value=""/><br />
    密码：<input type="password" name="password" id="password" /><br />
    确认密码：<input type="password" name="rd" id="password2" /><br />
    
    <hr />
    <input type="button" value="通过ID获取并弹出用户名输入框的值" id="b1" onclick="demo1()"/>

    <input type="button" value="通过name属性获取并弹出密码输入框的值" id="b2" onclick="demo2()"/>

    <input type="button" value="通过元素名称获取并弹出确认密码输入框的值" id="b3" onclick="demo3()"  />        
    
    <hr  />
    <p id="pid"><font color="red">这是P标签中的文字</font></p>
	<input type="button" value="获取P中的文字" onclick="demo4()" />
	
</body>
</html>

div.getElementById(“id值”);
value属性： 获取或设置输入框的value值
innerText： (部分浏览器不支持) 获取或设置元素内的文本内容
innerHTML： 获取或设置元素的html内容
4.3.2.元素的增删改
CRUD表示增删改查：create增、read查、update改、delete删
var oDiv = docuemnt.createElement(“div”); 创建一个div元素
body.appendChild(oDiv); 往body中追加一个子元素
body.removeChild(oDiv); 删除oDiv子元素
body.replaceChild(oNewDiv, oDiv); 用oNewDiv替换已有的子元素oDiv
body.insertBefore(oDiv1, oDiv); 往body中插入一个子元素oDiv1, 子元素是插入在oDiv的前面
oDiv.cloneNode([boolean]); 克隆oDiv元素, 参数默认值为false, 表示只克隆元素本身, 不克隆oDiv内的所有子孙元素, 如果希望克隆元素还克隆元素内容所有子孙元素, 可以传入参数true！

一.AJAX

1.1.AJAX是什么: 
	* asynchronous JavaScript and xml: 异步的js和xml,是一种创建交互式网页应用的网页开发技术,一种用于创建快速动态网页的技术。
	* 可以利用js访问服务器, 而且是异步访问! 
	* 通常服务器给浏览器响应的是一个完整的页面, 而在AJAX中, 由于是利用js访问服务器, 再由js接受响应, 局部刷新页面, 所以服务器不用给浏览器响应整个页面了, 而只是数据。
	* 服务器响应的数据:
		> text 纯文本 "用户名已存在!!"
		> xml 
		> json: js提供的一种数据交互格式, 在js中很受欢迎 
		ajax --> ajaj --> aj

AJAX四大技术体系:
①　javaScript
②　CSS 层叠样式表
③　DOM 文档对象模型
④　XMLHttpRequest
XMLHttpRequest 对象用于在后台与服务器交换数据,能够在不重新加载整个网页（刷新）的情况下,对网页进行部分更新
1.2.同步交互和异步交互
同步:
* 向服务器发一个请求, 必须等待响应结束, 才能发送第二个请求, 在服务器处理期间, 浏览器不能干别的事儿
* 刷新整个页面
异步:
* 向服务器发一个请求, 不用等待响应结束, 就可以发送第二个请求, 在服务器处理期间, 浏览器可以干别的事儿
* 可以使用js接受服务器的响应, 再利用js局部刷新页面

1.3.AJAX的应用场景
	* 百度的搜索框
	* 注册用户时, 校验用户名是否被注册过
	...

1.4.AJAX的优点和缺点
Ajax的优势:
1.可搜索性
2.开放性
3.费用
4.易用性
5.易于开发
Ajax的劣势:
1.它可能破坏浏览器的后退功能
2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中,不过这些都有相关方法解决
优点:
* 异步交互, 提高了用户体验!
* 服务器只响应部分数据, 而不是整个页面, 所以降低了服务器的压力!
…
缺点:
* ajax不能应用所有的场景
* ajax会无端的增加访问服务器的次数, 给服务器带来了压力!!

1.5.JavaScript实现AJAX(只需四步)
	1.5.1.第一步, 获取XMLHttpRequest对象
		var xmlHttp = ajaxFunction();
		function ajaxFunction(){
			var xmlHttp;
			try{
				//现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象
				xmlHttp = new XMLHttpRequest();
			}catch(e){
				try{
					//IE6.0
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				}catch(e){
					try{
						//IE5.0及更早版本
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e){
						alert("...");
						throw e;
					}
				}
			}
			return xmlHttp;
		}

	1.5.2.第二步, 打开与服务器的连接
		xmlHttp.open(method, url, async);
			> method: 请求方式, 可以是GET或POST
			> url: 所要访问的服务器中资源的路径 如: /Day10/servlet/AServlet
			> async: 是否为异步传输, true 表示为异步传输 一般都是true
		
	1.5.3.第三步, 发送请求
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");	//通知服务器发送的数据是请求参数
		xmlHttp.send("xxxx"); //注意, 如果不给参数可能会造成部分浏览器无法发送请求
		> 参数: 
			如果是GET请求, 可以是null, 因为GET提交参数会拼接在url后面
			如果是POST请求, 传入的就是请求参数
				"username=张飞&psw=123"
		
	1.5.4.第四步, 注册监听
		> 在XMLHttpRequest对象的一个事件上注册监听器: 	
			onreadystatechange
		> 一共有五个状态:(xmlHttp.readyState)
			0状态: 表示刚创建XMLHttpRequest对象, 还未调用open()方法
			1状态: 表示刚调用open()方法, 但是还没有调用send()方法发送请求 
			2状态: 调用完了send()方法了, 请求已经开始
			3状态: 服务器已经开始响应, 但是不代表响应结束 
			4状态: 服务器响应结束!(通常我们只关心这个状态) 
		> 获取xmlHttp对象的状态:
			var state = xmlHttp.readyState;//可能得到0, 1, 2, 3, 4 
		> 获取服务器响应的状态码
			var status = xmlHttp.status;
		> 获取服务器响应的内容
			var data = xmlHttp.responseText;//得到服务器响应的文本格式的数据  

			xmlHttp.onreadystatechange = function(){
				//当服务器已经处理完请求之后
				if(xmlHttp.readyState == 4){
					if( xmlHttp.status == 200 ){
						//获取响应数据
						var result = xmlHttp.responseText;
						result = xmlHttp.responseXML;
					}
				}
			}
1.6.jQuery实现AJAX
	1.6.1. load方法
		$(selector).load(url,data,callback);
			selector -- 选择器, 将从服务器获取到的数据加载到指定的元素中
			url -- 发送请求的URL地址
			data -- 可选, 向服务器发送的数据 key/value数据 如:{"username" : "张飞", "psw" : "123"}
			callback -- 可选, load方法完成后所执行的函数
		示例:
			$("#username_msg").load("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username});
	1.6.2. $.get方法/& $.post方法
		$.get(url, [data], [callback]);
			url -- 发送请求的URL地址
			data -- 可选, 向服务器发送的数据
			callback -- 可选, 请求成功后所执行的函数
		示例:
			$.get("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username}, function(result){
				$("#username_msg").html("<font style='color:red'>"+result+"</font>");
			});

1.6.3. $.ajax方法
$.ajax(url, [data], [async], [callback]);
url – 发送请求的URL地址
data – 可选, 发送至服务器的key/value数据
async – 可选, 默认为true, 表示异步交互
type – 可选, 请求方式 , 默认为"GET"。
dataType – 表示服务器返回数据处理后的类型
success – 可选, 请求成功后执行的函数, 函数参数:
result – 服务器返回的数据
示例:
$.ajax({
“url” : “<%= request.getContextPath() %>/AjaxCheckUsernameServlet”,
“data” : {“username”: username},
“async” : true,
“type” : “POST”,
“success” : function(result){
$(“#username_msg”).html(“”+result+“”)
}
});
Ajax 的 XMLHttpRequest 对象属性的有：onreadystatechange、responseText、status、readState
XMLHttpRequest 对象的方法:open()、send()、
与AJAX相关的jQuery内置函数有： $.Ajax()、$.get()、$.post()、$.load()、$.getJSON()