《Web前端设计与开发》学习笔记（HTML+CSS+JavaScript+HTML5+jQuery）

一，HTML概述

1.HTML

HTML是一种描述性标记语言，描述网页内容的显示方式，以HTML语言为主编写的HTML文件是一种纯文本文件，以

           .html，.htm为后缀。基本组成为元素。

 

2.HTML常识

 HyperText Markup Language。李爵士创立了HTML，离开公司后创办了一个组织——W3C委员会。 W3C根据浏览器的实际情况总结制定HTML规范文档。

  HTML有很多版本，从HTML4.01到XHTML再到HTML5，版本类型由HTML文件头部的DOCTYPE声明，比如HTML5的声明为。这里注意我们现在常说的H5并不是指html5，H5是能运行在微信上的网页的统称，和实现技术无关。XHTML、HTML4.01、HTML5都可以。
  在HTML5中，声明的DOCTYPE一定要大写，html可以小写。

 

3.语法

<标签>内容<标签>：标签通常都是成对出现，内容为一些文本文字或子标签；HTML元素指的是从开始标签到结束标签的所有代码。

4.HTML文档构成

   文档类型申明（告诉浏览器用什么方式解析XTHML中HTML要小写）+网头部分（标题，关键字，描述，编码方式等浏览器需要的基本信息）+网页部分（页面具体内容，文字，表格，图片，视频等）HTML由这三大元素构成。

 

1. 元素：HTML以标签开始，以结束，文档的所有内容都要方到两个标签内。包含

   边框与背景

   CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。

   边框宽度(width)：

   边框宽度border-width的取值：thin(细边框),medium(中等边框),thick(粗边框)。边框宽度参数遵循TRBL原则顺时针(四个参数)，上-左右-下(三个参数),上下-左右(两个参数),全部(一个参数)

   边框样式：border-style；

    

   边框样式取值

   none	无边框
   hidden	隐藏边框
   dotted	定义点状边框，大多为实线
   dashed	定义虚线，大多为实线
   solid	定义实线
   doubld	定义双线，双线的宽度等于border-width的值
   groove	定义3d凹槽边框，效果取决于border-color的值，以下都是
   ridge	定义3D菱形边框
   inset	定义3D凹边
   outset	定义3D凸边

   
   
   
   
       
       
       
   
   
   
       
   边框与背景
       
   CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
       
       
   样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
       CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。
   
   
   

   圆角边框(radius)：

   在CSS3中提供圆角边框属性，通过border-top-left-radius,border-top-right-radius,border-dottom-right-radius，border-bottom-left-radius对四个角分别设置。 使用border-radius统一设置。一个圆角边框有两个参数，HR(水平半径)和VR(垂直半径)。

   当水平半径与垂直半径等时，只有一个参数(border-radius:10px)全部，当有两个参数时(border-radius:10px 20px)对角相同(\/),当有三个参数时(%),当有四个参数时(TRBL)。

   当水平半径与垂直半径不相等时(水平/垂直)：1/1(全部,全部),2/2(\,/),3/2(%,\/),2/4(\/,TRBL).

   边框阴影(box-shadow)：可以为元素添加一个或多个阴影。属性由2~6个参数构成，语法：box-shasow：h-shadow v-shadow[blur] [spraed] [color] [inset];

    

   box-shadow属性

   h-shadow	必须，指定水平阴影的位置，允许为负
   v-shadow	必须，指定垂直阴影的位置，允许为负
   blur	可选，指定模糊距离
   spread	可选，指定阴影尺寸
   color	可选，指定阴影颜色
   inset	可选，将外部阴影变为内部阴影

   
   
   
   
       
       
       
   
   
   
       
   CSS3圆角边框
       
   
       
   
       
   
       
   
   
   
   

   
   
   
   
       
       
       
   
   
   
       
   CSS3边框阴影
       
   
           
           
   花名：郁金香——Ballade Dream
       
   
   
   

   图像边框(border-image):

   CSS3 中新增border-image属性，图像边框相关属性；

    

   border-image属性

   border-image-source	边框的图像的路径，可以是none(没有边框图像)或使用url("")函数指定图像地址
   border-image-slice	图像边框向内偏移，该属性可以是1~4个整数或百分数，表示从四个方面对边框图片进行切割，确定边框样式，TRBL原则，默认中间不填，加fill填，角不会变化，例：border-image-slice：10 20 30 40 (fill);
   border-image-width	图像边框的宽度，参数可以为1~4，遵循TRBL
   border-inage-repeat	设置图像边框是否应平铺覆盖(repeat),取整覆盖(round)或拉伸覆盖(stretch)，参数1个全部，参数2个(上下/左右)
   border-image	简写形式border-image：URL("图像路径") 图像分割方式(slice)/图像边框宽度(width)图像平铺方式(repeat) 例：border-image：url("图片地址") 40/40px stretch;

   
   
   
   
       
       
       
   
   
   
       
   图像边框border-image
       
   
       
   
       
   
       
   
       
   
       
   
       
   
   
   
   

   repeat：以中心位置为中心，等比例平铺。round：灵活显示全部图片。stretch:拉伸；

   在class属性中，要引用两个类选择器，则类选择器之间用空格隔开。

   内边距(padding):指内容区与边框之间的距离，可以分开或统一设定(与宽度相同)。padding-top/right/borrom/left(设置元素上右下左)的内边距，简写padding：可以有1~4个按照TRBL原则。

   外边距(margin)：指元素与元素之间的距离，即围绕在元素边框之外的空白区域。设定方式与内边距相同，margin-top/right/bottom/left。

   外边距合并：当两个垂直外边距相遇时，将形成一个外边距的高度等于合并前的两个外边距中较大的，

   包含元素的外边距合并：当没有内边距的元素包含在一个没有内边距和边框的父元素里时，外边距会合并。

   空元素的外边距合并：空元素只包含外边距而无边框和填充时，上下边距会合并。

   DIV与CSS布局：

   一个标准的Web页面由结构，外观和行为构成。

   页面结构布局对于与页面的信息进行整理与分类，核心目标是实现结构与外观相分离通常涉及HTML，XHTML和HTML5等标签，页面外观是对结构化的内容进行修饰，通常采用CSS样式修饰。页面行为是指页面元素进行的交互操作，其中常用的技术有JavaScript，JQuery等。

   常见的页面布局有表格布局，框架布局，DIV+CSS布局。表格布局代码臃肿，标签层次较多，页面不利于搜索引擎抓取，框架布局在搜索引擎检索时不完整，打印不方便。目前比较流行的是DIV+CSS布局，通过

   标签整体进行划分，然后逐块CSS定位，最后在完整各个块中的局部布局，

   五，JavaScript语言基础

   JavaScript是一种脚本语言，可以直接嵌入HTML页面中，目前JavaScript由ECMAScript，DOM和BOM三者组成，JavaScript和JScript在ECMAScript方面是相同的。但在操作浏览器对象（DOM和BOM）等方面又各有各自独特的方法。

   JavaScript特点及规范：

   解释型——JavaScript是一种解释型语言，与编译性语言不同，JavaScript脚本不需要编译，可以直接被浏览器解释并执行。

   嵌套在HTML中——JavaScript可以嵌套在HTML代码中，通常位于标签之间，在文档加载或页面控制的事件触发时执行。

   弱数据类型——在JavaScript中，定义变量时无须指定变量的类型，浏览器会根据变量的取值情况确定变量类型，变量的类型会随着 值的改变而改变。

   跨平台——JavaScript与操作系统无关，有支持JavaScript的浏览器即可。

   基于对象——JavaScript是一种基于对象的语言，提供内置对象，用户可以根据需要来创建对象，通过调用对象的方法和属性来实现页面的某些特效。JavaScript不是一门纯面向对象的语言，语法灵活。

   基于事件驱动——事件驱动是指在页面中执行某种操作时所产生的动作。浏览器根据用户的操作进行响应，并执行相应的JavaScript脚本。

   JavaScript规范

   • 浏览器解析JavaScript脚本时，会忽略标识符与运算符之间的多余的空白字符；
   • 每条语句单独占一行，并以英文分号结束。
   • 代码要有缩进，以增加代码的层差感。

   JavaScript使用形式

   在页面中使用JavaScript的三种形式：行内JavaScript脚本，内部JavaScript脚本，外部JavaScript脚本。

    行内JavaScript脚本：点击图片触发JavaScript脚本。

   内部JavaScript脚本：将JavaScript脚本提取出来统一放到标签中，称为内部的JavaScript脚本。

   外部JavaScript脚本：将JavaScript与HTML代码彻底分离，类似于CSS文件，在

   基本语法

   标识符命名规则：

   与Java的基本相同。不能与javaScript中的关键字相同。推崇使用小写形式与骆驼命名法(骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母)

   关键字(Reserved Words)：

   关键字是指JavaScript中预定义的，有特变意义的标识符，

   JavaScript关键字

   abstract	arguments	boolean	break	case	catch	byte
   char	calss	const	continue	debugger	default	delete
   do	double	else	enum	eval	export	extends
   false	final	finally	float	for	function	goto
   if	implements	import	in	instanceof	int	interface
   let	long	native	new	null	package	private
   protented	public	return	short	static	super	switch
   synchronized	this	throw	throws	transient	true	try
   typeof	ver	void	volatile	while	with	yield

   数据类型：

   在JavaScript中，变量的类型可以改变，但某一时刻的类型是确定的，常见的数据类型有String，Boolean，Array，Number，Undefinded等类型。

   JavaScript常用类型

   String	字符串是由有‘’||“”括起来的0~n个字符
   Boolean	布尔类型包括true与false
   Null	表名某个变量值为空
   Undefined	当声明的变量为初始化时，默认值为undfined
   Array	一系列变量或者函数的集合，可以存放类型相同或不同的数据的集合，JavaScript数组的length属性是可变的，
   Number	JavaScript中数值类型可以是32位的整数，或64位的浮点数，整数可以是十/八/十六进制
   Function	JavaScript函数是一种特殊的对象数据类型，可以被存储在变量，数组或对象
   Obiect	通过属性和方法定义的软件对象：对象中的命名变量称为属性，对象中的函数称为方法，常见的对象string,Date,Math和Array等

   变量的定义：var 变量1[变量2……]；在JavaScript中可以不用定义直接使用。

   变量类型：与Java不同JavaScript中的变量是弱数据类型，在声明变量时不需要指明变量的数据类型，类型由所赋值确定，动态改变，通过typeof运算符或typeof()函数可以获取当前数据类型，例：typeof X；typeof(X);

   变量的作用域：

   全局变量：未定义的变量直接赋值时，浏览器会将变量定义为全局变量。而未定义变量直接使用会报错。

   局部变量：与Java一样。

   注释与Java一样。

   赋值，算数，逻辑，比较运算符，三元运算符与Java一样。比较运算符多(!==严格不等于(值类型不相同为真，反之),===严格等于(值，类型相同为真，反之))与==的区别：==支持自动类型转换，忽略数据类型转换。

   流程控制：

   分支结构，if条件语句与switch语句(default(default子句可以放到switch语句的开始位置和末尾)，

   循环结构：while循环，do……while循环，for循环，for in循环(for in循环是JavaScript提供的特殊的循环，可以对 字符串，数组，对象集合，对象属性等进行遍历 for(i  in Object){}i表示索引)

   转移语句：btrak ,continue,return。

   支持三元运算法:

   with语句：通过with语句简化，例：

   函数：

   一组延迟动作集的定义，可以通过事件触发或在其他脚本进行调用。在JavaScript中，通过函数对脚本有效的组织，使脚本更加结构化，模块化。

   预定义函数

   parseInt()	将字符串转换成整形，存在非法值时停止转换，都是非法值时返回NaN，小数点后截断
   parseFloat()	将字符串转换为浮点型， 不是数字返回NaN
   isNaN()	测试是否是一个数字。布尔型,是返回false，否则返回true
   idFinite()	测试是否是一个无穷，如果是，返回一个false，布尔值
   escape()	将字符串转换为Unicode码
   unescape()	解码由escape函数编码的字符
   eval()	计算表达式的结果，若是脚本，则执行相应脚本
   alert()	显示一个提醒对话框，包括一个OK按钮
   confirm()	显示一个确认对话框，包括OK(返回true)和Cancel(false)按钮
   prompt()	显示一个输入对话框，提示等待用户输入

   自定义函数：在JavaScript为弱数据类型语言，自定义函数时不需要声明函数的参数类型返回类型，javaScript目前支持的自定义方式有命名函数，匿名函数，对象函数和自调用函数。

   命名函数的定义：函数由函数定义和函数调用两部分组成。在同一个标签中，JavaScript允许函数的调用在函数定义之前，不同的

   匿名函数的定义：前端经常使用，通过表达式来定义函数，定义格式与命名函数基本相同，没有函数名称，函数以分号结束，需要使用变量接受，方便后面函数调用；

   语法：var 变量=function ([parameters]){statementes;[retunr expression];};

   对象函数的定义：JavaScript提供Function类，用于定义函数。

   语法：var funcName =new Function([parameters]<参数为字符串时逗号隔开>,statements;<字符串格式，也是函数的执行体，语句以分号隔开>);

   自调用函数：函数本身不会自动执行，只有调用时才会被执行，定义与调用一并实现。将函数的定义用小括号括主，说明是一个函数表达式，函数表达式后面紧跟一对小括号，表示自动调用。

   语法：(function ([parameters]<型参可选>){statementes; [return 表达式];})([params]<实参，调用时传入数据>);函数可以时候使用外部变量

    

   JavaScript对象

   JavaScript是一种基于对象的语言。对象是一种特殊的数据类型，有变量和函数共用构成，其中变量称为对象的属性，函数称为对象的方法，对象分为内置对象和自定义对象；

   内置对象：

   Array数组对象：

   使用单独的变量名存储有序的数据集合，可以将不同的数据类型的数据存放在一个数组中，创建数组对象，

   new Array（）//使用无参构造函数创建数组，返回一个空数组，数组长度为0 ；
   new Array（size）//使用一个参数的构造函数时，返回一个长度为size的数组，数组中元素默认为undefined；new Array（多个参数）//使用参数指定的初值来初始化数组，长度为参数个数。
   var 数组名 = [多个参数];//简写形式创建数组；

   Array对象的属性包括constructor(返回创建对象的构造函数的引用(String/Array等))，length(数组长度)，prototype(为对象添加属性方法)

   数组对象的常用方法

   concat()	连接两个或多个数组，返回合并后数组，原数组不变move.concat(asd);	reverse()	反转数组
   join(“ ”)	返回数组中所有元素的连接字符串，用指定符号连接	slice()	从已有的数组中返回选定元素
   push()	向数据末尾添加一个或多个元素，返回新长度	sort()	对数组元素排序
   pop()	删除并返回数组中的最后一个元素，	splice()	向数组中添加或删除一个多个元素，返回删除元素.类似于元素的替换
   shift()	删除并返回数组中的第一个元素	UNshift()	开头添加一个或多个元素，返回新长度

   ArrayObject.concat(param1,param2,……paramX):

   //至少一个参数，值或者数组对象，逗号隔开，返回合并数组，原数组不变，

   ArrayObject.join(separator)；

   //参数separrtor为分隔符，默认逗号，返回字符串，separator将元素连接;

   ArrayObject.push(newElement1,newElement2,……newElementX)

   //至少一个参数，不创建新数组，返回新长度，

   ArrayObject.slice(start,[end])

   //start必须表示开始位置，end表示结束，默认结尾，允许负值，-1表示最后一个。

   ArrayObject.sort([sortby]);

   //参数为排序函数，可选，默认字符编码大小排序，没有返回值。

   ArrayObject.splice(index,howmany,[item1,……item2])

   //index(必须，删除元素开始位置，可负)，howmany(必须，删除数量，0表不删除)，当删除返回删除元素，item1(可选，添加或替换的新元素，没有返回值)；

    
   
   
   
       
       
   
   
   
       
       
    **************************
   
       
   
   
   

   二维数组：没有二维和多维的概念，一维数组存放元素为一维数组实现，

   创建二维数组：var as =new Array() as[0] =new Array(‘值’)……;||var as = [[],[],[]……]；

   String字符串对象：

   用于对文本字符串进行进行处理，设置文本的字体大小，字体颜色，上标和下标的操作。

   字符串对象的创建：字面量类型(var  name = " ")和new类型(var name=new String(""))

   字符串类型是一个基本的数据类型，字符串对象是将字符串封装成一个对象。变量.toString（）//转换为字符串

   使用字面量方式创建的字符串的类型为string，而通过new方式创建的返回String对象，仅使用构造方法没有new也是string。

   可以使用typeof()函数或者typeof运算符查看字符串类型，String是构造函数，string为基本类型。string没有提供prototype原型对象，而String对象具有prototype原型对象，通过浏览器的端点试调可以查看。使用typeof()函数查看类型时，String返回function，String对象返回Object，string返回string。使用==比较时，string类型判断其中值是否相等，而String对象判断是否属于同一对象的引用。String对象一直有效，string在执行后销毁。

   字符串对象的常用方法

   anchor(name)	创建一个锚点元素(具有id或name特性而不是href特征的标签)
   bold()	用于将字符串加粗
   charAt(index)	返回指定位置的字符
   fontcolor(color)	用于指定字符 串的字体颜色
   fontsize(size)	用于指定字符串的显示尺寸，size为1~7的数字
   indexOf(searchValue,[fromIndex])	返回searchValue在字符串中首次出现的位置，没有返回-1
   slice(start,[end])	抽取重start到end的所有字符，允许负数
   lastindexOf(searchValue,[fromIndex])	重后向前返回searchValue在字符串中首次出现的位置
   substring(start,[stop])	截取start到stop-1的符串，不接受负数，
   subsrt(start,[length])	同上
   split(separator，[howmany])	把字符串分割为字符数组,(separator为字符串或者正则表达式，howmany]指定返回长度
   sub()	如果位于标签中，用于把字符串显示为下标，
   sup()	如果位于标签中，用于把字符串显示为上标，
   toLowerCase()	用于把字符串转换为小写
   toUpperCase()	转换为大写
   search(regExp)	用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串
   replace(regExp/subStr,replacement)	用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
   march(searchValue/ergExp)	在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

   转义字符 与其他类似；

   Data日期对象：

   Javascript通过日期对象来操作日期和时间，通过日期对象的构造函数创建一个系统当前时间或指定的日期对象。

   使用无参构造函数创建日期对象，返回系统当前时间的日期对象： new Date();

   new Date（millisenconds）；参数表示毫秒数 new Date(month dd,yyyy hh:mm:ss);month表示英文月份

   new Date（yyyy,MM,dd）;年月日 new Date(yyyy,MM,dd,hh,:mm:ss);年月日时分秒 

   getDate()	返回一个月中的某一天	getDay()	返回一周中的某一天
   getMonth()	返回月份	getFullYear()	返回4位数字的年份//getFullYear(year,month,day),第一个必须，剩下可选
   getHours()	返回Date对象的小时	getMinutes()	返回Date对象的分钟
   getSeconds()	返回Date对象的秒数	getTime()	返回初始时间和到现在的毫秒数
   setDate()	设置Date对象中的日期	setMonth()	设置Date对象中的月份
   setFullYear()	设置Date对象中的年份	setHours()	设置Date对象的小时//setHours(hour,min,sec,millsec),第一必选，其他可选。
   setMinutes()	设置Date对象中的分钟	setSeconds()	设置Date对象中的秒数
   setTime()	以毫秒设置Date的对象		Math

   范围大部分从0开始，到实际日期-1；

   Math数学对象：没有构造方法，可以直接使用；

   Math常用属性

   E	返回算数常量e，
   IN2	返回2的自然对数，约2.718
   LN10	返回10的自然对数，约2.302
   LOG2E	返回以2为底的e的对数，约1.442
   LOG10E	返回以10为底的e的对数，约0.434
   PI	返回圆周率 约3.1415926
   SORT2	返回2 的平方根 约1.414
   SQRT1_2	返回2的平方根的倒数，约0.7071

   Math的常用方法

   Math的常用方法

   ads(x)	绝对值	ceil(x)	向上取整	floor(x)	向下取整
   round(x)	四舍五入	exp(x)	e的指数	log(x)	数字的自然对数
   max(x)	最大值	min(x)	最小值	pow(x，y)	x的y次
   sqrt(x)	平方根	random()	0~1随机数	(a)sin/cos/tan(x)	计算(反)正弦余弦正切

   RregExp正则表达式对象

   正则表达式是一种字符串匹配模式，通过单个字符串来描述和匹配一系列符合某个句法的规则。Javascript提供RegExp对象完成正则表达式的匹配功能。

   RegExp对象(正则表达式)的创建：

   直接量方法：var = /pattern/attributes;例：var reg = /^\d*$/;匹配数字，没有返回空

   构造函数的方法:var regExp=new RegExp("pattern","attributes");例:var regExp = new RegExp("^\\d*$"); \需要转义。

   pattern表示要匹配的字符串或表达式(可以包括元字符，括号表达式以及量词，可以混合使用)，attributes表示操作属性，取值为g(全局匹配)、i(忽略大小写)、m(多行匹配，^匹配开头$匹配结尾)。

   常见的元字符，括号表达式，量词

   元字符	描述	表达式	描述	量词	描述
   .	单个字符，除了换行,行结束符	[abc]	括号内的任意字符	n+	任何含至少一的n的字符串
   \w	下划线任何单词，等价于[A-Za-z0-9_]	[^abc]	除了括号内的任意字符	n*	任何含0个或多个n的字符串
   \W	任何非单词字符，等价于[^A-Za-z0-9_]	[0-9]	0-9的任意数字	n?	任何含一个或0个n的字符串
   \d	查找数字	[a-z]	a-z的任意字符	n{x}	含x个n的序列的字符串
   \D	非数字字符	[A-Z]	A-Z的任意字符	n{x,y}	含x或y个n的序列的字符串
   \s	空白字符	[A-z]	A-z的任意字符	n{x,}	含至少x个n的序列的字符串
   \S	非空白字符	(boy|girl)	括号内的一项	n$	含任何结尾为n的字符串
   \n	换行符	[a|b|c]	括号内的任意一个字符	^n	含任何开头为n的字符串
   \r	回车符			? =n	其后紧跟字符串n的字符串
   \xxx	八进制规格字符			?!n	没有紧跟字符串n的字符串
   \xdd	十六进制规格字符

   例；创建匹配电话号码的RegExp对象：

   var srt = new RegExp("1[3|4|5|8][0-9]");\\手机     var srt = /^((\d{3}-d{8})|(\d{4}-\d{7}))$/;  //电话

   RegExp对象的方法

   compile：编译正则表达式；编译后执行速度回提高，rgExp.compile(pattern, [flags])；

   exec():检索字符串中正则表达式的匹配情况。匹配成功返回内容和所在位置。var result = RegExpObject.exec(string);result表示匹配的字符串，result.index表示位置。

   test():匹配成功返回true，否者返回false。

   String与RegExp：在String对象中有三种方法以RegExp对象为参数。

   search(regExp)	检索与正则表达式相匹配的子字符串
   replace(regExp/subStr,replacement)	替换一个与正则表达式匹配的子串
   march(searchValue/ergExp)	在字符串内检索指定的值，或找到一个或多个正则表达式的匹配信息

   自定义对象：

   在JavaScript中，用户可以自定义对象，定义的对象的方式有5种：(方法后要有；)

   原始方式，：var 对象名 = new Object(); 对象名.属性名 = value; 对象名 .方法名 = functionname | function(){};事先的函数或匿名函数；

   构造函数函数方式，：function 对象名(构造参数1，……){this.属性名 = value;this.方法名 = functionname | function(){…}}

   原型方式，：object.prototype.属性名 = value；object.prototype.方法名 = functionname | function(){};为自定义和内置对象添加属性方法。

   混合方式，：构造函数和原型方法结合；

   JSON(JavaScript Object Notation)方式。：

   是一种基于ECMAScript的轻量级数据交换格式，采用完全独立于语言的文本格式，以{}的形式出现，属性与属性值成对。

   var 对象名 = {属性名：属性值，方法名：function(){}}；

   在数据传输过程中，JSON数据往往以字符串的形式进行传输，在页面中要通过JavaScript中eval()或Function对象的方式将字符串解析为JavaScript对象。var movie  = eval("+JSON字符串+");alert(typeof(eval("({})"))); var movie = (new  Function("","return","JSON字符串"))；

   BOM与DOM编程

   BOM模型(Browser Object Model ,浏览器对象模型)

   定义JavaScript操作浏览器的接口，提供与浏览器窗口交互的功能，用于描述浏览器中对象与对象之间的层次关系的模型，提供了独立以页面内容并能够与浏览器窗口进行交互的对象结构。

   				window
   screen	history	loction	navigator	document	frames
   				link	form	div	..	..

   window对象

   是BOM 的顶层对象，其他对象都是该对象的子对象，浏览器会为每一个页面自动创建window，document，location，navigator和history对象；

   window对象是BOM模型中的最高一层，通过window 对象的属性和方法来实现对浏览器窗口的操作，

   window对象的属性

   closed	只读，返回窗口是否已被关闭
   defaultStatus	可返回或设置窗口状态栏中的缺省内容，定义浏览器状态栏默认显示的内容
   inerWidth	只读，窗口的文档显示区的宽度(单位为像素)IE不支持，可用document.documentElement或doc.body的clientHeight属性替代
   name	当前窗口的名称
   opener	可返回对创建该窗口的window对象的引用，只有表示顶层窗口的window对象的opener属性有效，框架无效
   parent	如果当前窗口有父窗口，表示当前窗口的父窗口对象
   self	只读，对窗口自身的引用
   top	当前窗口的最顶层窗口对象
   status	可返回或设置窗口状态栏中显示的内容，临时给变状态栏内容

   在JavaScript中window对象为全局对象，在使用窗口的属性和方法时，允许以全局变量或系统函数的方式使用哦，

   window对象的常用方法

   alert()	显示带有一段消息和一个确认按钮的对话框
   prompt()	显示可提示用户输入的对话框
   confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
   close()	关闭浏览器窗口
   open(url,name,features,replace)	打开一个新的浏览器窗口或查找一个已命名的窗口,
   createPopup()	创建一个pop-up窗口
   focus()	可把键盘焦点给一个窗口
   blur()	可把键盘焦点从顶层窗口移开
   moveBy(x,y)	可相对当前窗口的坐标移动到指定的像素
   moveTo(x,y)	可把窗口的左上角移动到一个指定的坐标(x,y),但不能移出屏幕
   resizeTo(w,h)	把窗口大小调整到指定的宽度和高度
   resizeBy()	根据指定的像素来调整窗口大小
   scrollBy()	可把内容滚动指定的像素数
   scrollTo()	可把内容滚动到指定的坐标
   setTimeout(code,milisec)	在指定的毫秒数后调用函数或计算表达式，仅执行一次
   setInterval(code,millisec)	按照指定的周期(毫秒)来调用函数或计算表达式
   clearTimeout()	取消setTimeout()方法设置的计时器
   clearInterval()	取消由setInterval()设置的计时器

   var tagetWindow  =window.open(url,name,features,replace);//返回一个窗口对象

   url:声明新窗口显示文档URL,当URL为空字符串或省略时，新窗口将不会显示任何内容。

   name：新窗口名称，可用于a,form标签target属性(框架名称),当name窗口存在时，open不创建窗口，返回窗口引用，featurres将被忽略。

    features：声明新窗口的浏览的特征。默认为浏览器默认值，

   特征值：（top,left,height,width,toolbar,titlebar,status,scrollbars,resiabar,menubar,location,fullscreen,direcries,channelmode）多个逗号隔开。

   close():关闭指定的浏览器窗口。 

   setTimeout(code，millisec):设置一个计时器，在指定的时间间隔调用函数或计算表达式，执行一次。返回计时器ID；

   clearTimeout（ID_Of_timeout）:取消上面的方法。

   setInterval（code，millisec）：按照指定的计时器周期调用函数，返回计时器ID

   clearInterval（ID_Of_Interval）：取消上 面的定时器。

   location对象：

   包含当前页面的URL地址，如协议，主机名，端口号和路劲等信息；

   location对象的属性列表

   protocol	设置或返回当前URL协议
   host	设置或返回当前URl 的主机名和端口号
   hostname	设置或返回当前URL的主机名
   port	设置或返回当前URL的端口部分
   pathname	设置或返回当前URL的路径部分
   href	设置或返回当前显示文档的完整URL(直接location也可以)
   hash	URL的锚部分(#之后)
   search	设置或返回当前URL的查询部分（问号后部分）

   location对象的方法

   assign(url)	可加载一个新的文档，与location.href实现的页面导航效果相同
   reload(force)	用于重新加载当前文档，默认参数false，当参数为false且文档内容没有改变时,从缓存区从新加载文档，参数false但文档内容改变时,从服务器从新加载文档，当参数为true时，每次都从服务器加载文档，
   replace(url)	使用一个新的文档取代当前文档，且不会在history对象中生成新的记录

   navigator对象：

   与浏览器相关的信息（APPName，appVersion，platform，userAgent，onLine，cookieEnabied）

   history对象：

   包含浏览器的历史访问记录，访问过的URL，访问数量等。用于保存用户在浏览网页时的URL地址。length属性表示访问URL 的数量，JavaScript不允许通过history获取URL地址。

   history对象方法

   back()	可加载历史列表的前一个URL
   forward()	可加载历史列表的后一个URL
   go( n | url)	可加载历史列表中某个具体页面，参数n为要访问的History的URl 列表中的相对位置，n>0,前进n个地址，n<0,后退n个地址，n=0刷新当前页面，

   
   
     
   	
   	
       
     
     
       
       
   
       
       
   
       进入下一个页面并返回，测试前进按钮
     
   
   

   DOM模型：

   (Document Object Model,文档对象模型)，属于BOM的一部分，用于对BOM中核心对象document进行操作，DOM是一种与平台语言无关的接口，允许程序和脚本动态的访问或跟新HTML或XML文档的内容，结构，样式。

   document对象是BOM对象的核心，提供访问HTML文档对象的属性方法及事件处理。

   document.write():用于向文档流中写入内容，当文档流在加载过程中，可写，无需打开关闭，加载完毕，不可在写需要用open方法打开输出流，但打开输出流会清除当前的文档所有内容。

   HTML文档中DOM模型

   						document
   				form	link	div
   radio	checkbox	button	select	textrea	……

   document对象是window的子对象，是指浏览器窗口中显示的内容部分，可以通过window.document来访问当前文档的属性和方法，当页面中包含框架时，可以通过window.frames[n].document来访问框架的属性和方法。

   document对象的attribute list

   body	提供对body元素的直接访问，对于框架定义，该attribute import最外层的frameset元素
   cookie	设置或查询与当前文档有关的所有cookie
   referrer	返回载入当前文档的文档URL
   URL	返回载入当前文档的URL
   lastModified	返回文档最后被修改的日期和时间
   domain	返回下载当前文档的服务器域名
   all[]	返回对文档中所有HTML元素的引用，all[]已经被documen对象的getElementById()等方法代替
   forms[]	返回对文档中所有的form对象集合(表单)
   images[]	返回对文档中所有的image对象集合，但不包括,

   referrer attribute：用于返回加载指定文档的URL，即跳转前的文档的URL，但要部署在服务器上。

   cookie attribute：浏览器保存用户访问服务器的会话信息，允许服务器端下次访问，本质为字符串。document.cookie =cookieStr;

   
   
     
   	
   	
      
     
     
       
   
           用户名：
   
           密　码：
   
           保存时间：
               一天
               一周
               一月
               -不保存-
           
           
           
           
   
           
           
   
       
   	
   cookie信息显示位置
   	
      
   
   

   cookie本身有一定的大小限制，，每个cookie所存放的数据不能超过4KB。cookie由一些键值对(cookieName--value)构成，根据cookieName来检索的cookie中的信息，包括expires(表示cookie的过期时间，是UTC格式，可以通过Data.toGMTString()方法来生成，当cookie到达过期时间时，cookie就会被删除，默认情况下，当浏览器关闭时cookie立即失效)，path(表示允许访问的cookie路径，只有在此路径下才可以读写cookie，一般情况下将path设为“/”,表示同一站点下的所有页面都可以访问cookie)和domain(表示域，可以使浏览器确定哪些cookie能够被提交，如果没有指定域，则域值为该cookie页面所对应的域)等信息。一般情况下，cookie信息都没有经过编码，当cookie中包含空格分号，逗号等特殊符号时，需要使用escape()函数进行编码，当cookie中取出数据时，需要使用UNescape（)函数进行解码。

   οnlοad=“”//加载页面后执行一段JavaScript文档。可以对cookie信息进行提取匹配

   document对象的方法：分为文档流的操作和文档元素到的操作。

   document对象的方法

   open()	打开一个新文档，并擦除当前文档的内容
   write()	向文档写入HTML或JavaScript代码
   writeln()	作用于write相同，内容输出后额外加换行符，在使用 标签时有用
   close()	关闭一个由document.open()方法打开的输出流，并显示选定的数据
   getElementById()	返回对拥有指定ID的第一个对象，多个时返回第一个符合的
   getElementsByName()	返回带有指定名称的对象的集合，用于单行文本框的复选框
   getElementByTagName()	返回带有指定标签名的对象的集合，顺序于文档中的一样，参数为*时，返回页面中所有的标签元素
   getElementByClassName()	返回带有指定Class属性的对象的集合，HTML5有
   querySelector()	返回满足条件的CSS选择器的单个元素，当多个时，返回一个
   querySelectorAll()	返回满足条件的集合

   
   
     
   	
   	
       
     
     
       
   
           用户名：
   
           爱　好：看电影
           购物
           品味美食
   
           
       
      
   
   

   
   
   
   
       
       
       
   
   
   
       
   
           购物栏目
           影视栏目
           餐饮栏目
       
       
   
   
   

   Form对象

   Form对象是document的子对象，通过form对象实现表单验证效果，通过form对象可以方位对象的属性和方法，

   document.表单名称.属性/document.表单名称.方法(参数)/document.form[索引].属性/document.form[0].方法(参数)；

   form对象的属性

   elements[]	返回包含表单中所有元素的数组，元素在数组中出现的顺序于表单顺序相同，元素.type:表示元素的类型
   enctype	设置或返回用于编码表单内容的MIME类型。默认application/x-www-form-urlencoded上传文件时为：multpart/form-data
   target	可设置或返回在何处打开表单中的action-URL
   method	设置或返回用于提交表单的HTTP方法
   length	用于返回表单中的元素的数量
   action	设置或返回表单的action属性
   name	返回表单的名称

   form的方法

   submit()	表单数据提交到Web服务器
   reset()	对表单中的元素进行重置

   提交表单有两种方式：submit()提交按钮，和submit()提交方法，在

   标签中onsubmit属性用于指定在表单提交时调用的事件处理函数，在onsubmit属性中使用return关键字表示根据被调用的的返回值来决定是否提交表单，当函数返回值为true时提交表单，反之。

   focus()方法用于某元素重新获取焦点。select()用于将元素内容出于选中状态。

   
   
     
   	
   	
   	
     
     
       
           用户名：
   
           密　码：
   
          	邮　箱：
   
           手机号：
           
   		
   		
           
       
      
   
   

   Table对象：

   在JavaScript中提供Table，TableRow和TableCell对象用于对表格，行和单元格进行操作。

   中定义的所有行

   Table对象的属性列表

   rows[]	返回表格中所有行(TableRow对象)的一个数组集合，包括
   cells[]	返回表格中所有单元格(TableCell对象)的一个数组集合
   border	设置或返回表格边框的宽度(以像素为单位)
   caption	设置或返回表格的caption元素
   width	设置或返回表格的宽度
   cellPadding	设置或返回单元格边框与单nr之间的间距
   celllSpacing	设置或返回在表格中的单元格之间的距离

   元素元素元素元素

   Table对象常用方法

   元素

   元素

   createcCaption()	在表格中获取或创建
   createTFoot()	在表格中获取或创建
   createTHend()	在表格中获取或创建
   insertRow(index)	在表格的指定位置插入一个新行，新行将被插入index所在行之前，参数index小于0或大于等于表中的行时，抛出异常
   deleteRow(index)	从表格中删除指定位置的行
   deleteCaption()	在表格中删除
   deleteTFoot()	在表格中删除
   deleteTHend()	在表格中删除

   TableRow对象的属性和方法(行)

   cells[]	返回当前行所包含的单元格数组
   sectionRowIndex	返回某一行在他tBody，tHead,TFoot中的位置
   rowIndex	返回某一行在表格的行集合中的位置
   innerHTML	设置或返回表格行的开始和结束标签之间的HTML内容。
   insertCell()	在HTML表中一行的指定位置插入一个空的	标签
   deleteCell()	删除表格行中的单元格

   TableCell对象的属性

   width	设置或表元的宽度返回
   rowSpan	设置或返回表元纵跨的行数
   colSpan	设置或返回表元横跨的列数
   cellIndex	返回行的单元格集合中单元格的位置
   innerHTML	设置或返回单元格的开始和结束标签的HTML内容

   this表示当前对象元素，parentNode表示当前对象的外层容器(即父节点)。

    

   DOM节点

   在DOM模型中，HTML的结构文档是一种树形结构，HTML中标签和属性可以看做是DOM树中的节点，节点分为元素节点，属性节点，文本节点，注释节点，文档节点和文档类型节点，各个节点统称为NOde对象，通过NOde对象的属性和方法可以遍历整个文档类型节点。Node对象的nodeType属性用于获得该节点的类型

   DOM节点的常用类型

   节点类型	nodeType值	描述	示例
   元素(Elenemt)	1	HTML标签
   属性(Attribute)	2	HTML标签属性	type = "text"
   文本(Text)	3	文本内容	Hello HTMl!
   注释(comment)	8	HTML注释段	<-- 内容-->
   文档(DOcument)	9	HTML文档根节点
   文档类型(DocumentType)	10	文档类型

   Element对象继承了NOde对象，是Node对象的一种。

   Element对象的属性和方法

   attribute	返回指定节点的属性集合
   children	非标准属性，返回直接后代的元素节点的集合，类型为Array
   childNodes	标准属性，返回直接后代的元素节点和文本节点的集合，类型为NodeList
   innerHtML	设置或返回元素的内部HTML
   className	设置或返回元素的class属性
   firstChild	返回指定节点的首个子节点，
   lastChild	返回指定节点的最后一个子节点
   nextSibling	返回同一父节点的指定节点之后紧跟的节点
   pareviousSibling	返回同一父节点的指定节点之前的节点
   parentNode	返回指定节点的父节点，没有父节点时，返回空
   nodeType	返回指定节点的节点类型
   nodeValue	设置或返回指定节点的节点值
   tagName	返回元素的标签名(始终大写)

   Element对象的常用方法

   getAttitbute()	返回指定属性对应的属性值
   getelementsByTagName	返回具有指定标签名的元素子元素的集合，类型为NodeList
   hasAttribute()	指定属性存在时返回true，反之
   hasChildNodes()	检查元素是否有子节点
   removeAttribute()	删除指定属性
   replaceChild()	用心节点替换子节点
   removeChild()	删除某个子节点，并返回该节点
   setAttribute()	为节点添加属性，当属性存在时，则进行替换

   NodeList对象是一个节点集合，其item(index)方法用于从节点集合中返回指定索引的节点，length用于返回节点数量。

   获取一个节点所包含的子节点时，可以使用从Node对象中继承的childNodes属性，也可以使用Element对象的children属性，childNodes属性返回集合中包含的元素节点和文本节点，而children属性返回的集合中仅包含元素节点

   
   
   
   
       
       
       
   
   
   
       
   
           
   
               
   ID
               
   姓名
               
   销售额度(W)
           
           
   
               
   2
               
   郭全友
               
   3000
           
           
   
               
   3
               
   郑建华
               
   2600
           
           
   
               
   合计
               
   0.0
           
       
       
   
   
   

   事件处理

   JavaScript采用事件驱动的响应机制，用户在页面上进行交互操作时会触发相应的事件，(Event)驱动是指在页面中响应用户操作的一种处理方式，而事件处理是指页面在响应用户操作时所调用的程序代码。事件的产生于响应都由浏览器完成。

   事件流和事件对象：DOM结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按照特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。

   事件流顺序有两种，事件冒泡，事件捕获。

   冒泡型事件(Event Bubbing)是指从叶子节点沿祖先节点一直向上传递到根节点，基本思路是按照从特定的事件到最不特定的事件目标，IE浏览器对事件的实现模式，

   捕获事件(Event Capuring )与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素。

   当浏览器检查到事件时，调用事件指定的事件处理函数对事件进行处理，在此过程中。s事件中需要传递的信息都是通过事件(Event)对象来完成的，事件(Event)对象包含当前触发事件的状态，大多数的event对象的属性是只读的。因为event对象是事件对象的快照。

   Event对象的常见属性

   screenX	返回事件发生时鼠标指针相对于屏幕的水平坐标
   screenY	返回事件发生时鼠标指针相对于屏幕的垂直坐标
   clientX	返回当事件被触发时鼠标指针相对于当前窗口的水平坐标
   clientY	返回当事件被触发时鼠标指针相对于当前窗口的垂直坐标
   button	可返回一个整数，指示当事件被触发时那个鼠标按键被击中，1左2中3右4(IE中)
   altKey	返回一个布尔值，表示ALT键是否一直被按住
   ctrlKey	返回一个布尔值，表示Ctrl键是否一直被按住
   shiftKey	返回一个布尔值，表示Shift键是否一直被按住
   type	返回事件发生的类型，图submit，load或click等
   target	返回触发事件的目标元素

   Event对象提供了preventDefault()方法用于通知浏览器不在执行与事件关联的默认动作，stopPropagation()用于终止事件的进一步传播。

   鼠标事件：

   当鼠标在页面某一元素上单击，移动或悬停时，都会触发一个相应的 事件，常见的鼠标事件

   常见的鼠标事件

   onclick	单击对象触发
   ondblclick	双击对象触发
   onmouseout	在鼠标指针移动到指定的对象上时触发事件
   onmouseout	在鼠标指针移动出到指定对象时触发事件
   onmousemove	在鼠标指针移动时触发的事件
   onmousedown	当鼠标指针被按下时执行脚本
   onmouseup	当鼠标按钮被松开时执行脚本

   
   
   
   
       
       
   
   
   
   
       
   
           
           
           
   
               复制
   
               粘贴
   
               删除
   
           
       
   	
   
   
   

   键盘事件

   常见的键盘事件

   onkeydown	在用户按下一个键盘时触发事件
   onkeyup	在键盘按键松开时触发的事件
   onkeypress	在键盘按键被按下并释放一个键时触发的事件

   当键盘按下时将Event对象传入事件处理函数，在事件处理函数中通过Event对象可以获得键盘锁按下的键值，

   文档事件

   文档事件

   onload	在页面或图像加载完成后立即触发事件
   onunload	在用户退出页面时触发事件
   onresize	在窗口或框架被调整大小时触发事件

   表单即表单元素事件

   使用表单输入信息，当表单元素获取焦点，失去焦点，元素内容的改变都会触发相应的事件，提交或重置表单数据时也会触发相应的表单事件。

   表单即表单元素事件

   表单元素事件	onblur	在对象失去焦点时触发的事件
   	onfocus	在对象获得焦点时触发的事件
   	inchange	在域的内容给变时触发的事件
   	onselect	在文本框中的文本被选中时触发的事件
   表单事件	onreset	在表单中的重置按钮被单击时触发的事件。例：onreset ="return resetForm()"
   	onsubmit	在表单中提交按钮被提交时触发的事件。例： onsubmit ="return checkForm()"

   
   
     
   	
   	
       
     
     
       
   
   		
       	
   
   			 
   			
   			
   
   				
               
               	--请选择--
                   管理员
                   普通会员
               
   
               
               
               
   
               
               
           
       
      
   
   

   HTNL5基础

   HTML5概述：HTML5不仅是一次简单的技术升级，更代表了未来web的开发方向，HTML5直接使用

   1. 语义特性：HTML5通过一组丰富的页面标签(如：header，footer，article等)更好的实现了HTML的结构化和语义化，
   2. 本地存储特性：HTML5 AppCahe，Local，Storage，Indexed DB和File API等技术使得Web应用程序启动时间变短，加载速度跟快，并拥有离线操作等能力。
   3. 设备访问特性：HTML5中的设备感知能力有所增强，使得Web程序也能实现传统应用程序的功能，
   4. 通信特性：通信能力的增强使得基于页面的聊天程序实时性更高，游戏体验更加流畅，HTML5拥有更高效的服务器推送技术，Server-Sent Events和web Socket使得客户端和服务器之间的通信效率达到了前所未有的高度。
   5. 多媒体特性：HTML5引入原生体的多媒体支持，可以在浏览器中直接播放音频和视频文件，不在需要借助视频插件.
   6. 三维及图形特性：SVG，Canvas，WebGL及CSS中的3D功能使得图像渲染变得高效方便，在生成图表。2D/3D游戏方面应用比较广泛，
   7. 性能与集成特点：Web Worker的出现，使得浏览器支持多线程和后台任务处理，而在XHTMHTTPRequest(Level 2)中新纳入的事件，使跨域请求与表单操作更加简单。
   8. CSS3特性：提供圆角，半透明，阴影，渐变，多背景图以及强大的选择器，变形动画。
   9. 移动端特性：使用HTML5进行开发成本低，开发周期短，编写一次代码，能够运行在不同的系统的设备上，HTML5对屏幕适应性好，能够自由嵌入音频视频，且多媒体形式更加灵活。

   HTML5语法特征

   html5标记方式；文档类型声明方式；指定字符编码：；

   HTML5语法差异：标签不区分大小写，允许部分结束标签可以省略，允许部分标签全部省略(等)。允许使用单标签，可以结束标签中的结束符/。允许省略结束标签的有

   .

2. 等。boolean属性的设置，如readonly，disabled，checked，selected和multiple等，只写属性名而不指定属性值时，默认为true，当属性值与属性名相同时或属性值为空字符串时，属性值为true，当省略Boolean属性时，属性值为false。属性的属性值不包含特殊字符时，引号可以省略。

   HTM文档结构：html文档除了div布局，还添加了

   等标签做为块区元素。

   HTML文档结构元素：

   :标签用于表示文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，该内容可以是一篇文章，短文等。在

   标签中可以使用

   标签来定义文章的标题部分。

   定义文章的脚注部分，多个

   标签将文章分为多个字块，多个嵌套的

   标签。

   标签用于定义文章的页眉信息，其中包含多个标题(h1~h6),导航部分(nav)或普通内容部分(p,span).

   标签用于网页或区段(section)的标题进行组合，当

   标签中包含多个标题时，可以考虑使用

   标签将标签组成一组。

   标签用于定义页面的各种导航，在一个页面中可以拥有多个

   元素，做为页面不同部分的内容导航：常见 的内容导航有顶部导航，侧边栏导航，页内导航和翻页导航等。

   标签用于对文章内容进行分块，例如章节，页眉，页脚或文档中的其他部分。通常包含一个标题，可以包含多个

   标签，表示多篇文章，也可以嵌套

   标签，表示分块中包含多个子分块。

   标签：专门用于定义当前页面或当前文章的附属信息，包括当前页面或当前文章的相关引用，侧边栏，广告以及导航等有别于主体的内容部分。位于内部时，作为整个页面的侧边栏，位于

   内部时，作为整片文章的侧边栏。

   标签：用于定义脚注部分，包括文章的版权信息，作者授权等信息。

   HTML5其他标签

   	用于定义选项列表与配合使用，
   	用于描述文档或文档某个部分的细节.默认隐藏
   	用于包含 的标题部分
   	用来定义带有标记的文本
   	用来度量给定范围内的数据
   	用来表示任务的进度
   	用于定义字符的注释
   	用于定义字符的解释或发音
   	在中使用<浏览器不支持时使用>
   	定义一个公历时间

   HTML5的拖放API

   拖放(draggable)是HTML5标准中非常重要的部分，通过拖放API可以让页面的任意元素变得可拖动的，需要将该元素的属性draggable设置为true，表示可拖放，但不携带数据，使用拖放时，通过ondragstart事件绑定事件监听器，并在监听器中设置所需的携带的数据。

   拖放时可能触发的事件

   ondragstart	被拖放的HTML元素	开始拖动元素时触发该事件
   ondrag	被拖放的HTML元素	拖动元素过程中触发该事件
   ondragend	被拖动的HTML元素	拖动元素结束时触发该事件
   ondragenter	拖动时鼠标所进入的目标元素	被拖动的元素进入目标元素的范围内时触发该事件
   ondragleave	拖动时鼠标所离开的元素	被拖动的元素离开当前元素的范围内时触发该事件
   ondragover	拖动时鼠标所经过的元素	在所经过的范围内，拖动元素时会不断地触发该事件
   ondrop	停止拖放时鼠标所释放的目标元素	被被拖拽的元素释放到当前元素中，会触发该事件

   标签和带有href属性的标签默认是可拖动的。

   通过dropEffect与effectAllowed属性相结合可以自定义拖放的效果，使用setData()和getData()方法可以将拖放元素的数据传递给目标元素。

   dataTransfer对象的属性和方法列表

   dropEffect	设置或返回允许操作类型，可以是none，copy，link或mover；如果操作的类型不是effectAllowed属性所允许的类型，则操作失败
   effectAllowed	设置或返回被拖放的操作效果类别，可以是none，copy，copyLink，copyMove,link,linkMove,move,all或uninitialized
   items	返回一个包含拖拽数据的dataTransferList对象
   types	返回一个DOMStringList。包括了存入dataTransfer对象中数据的所有类型
   files	返回一个拖拽文件的集合，如果没有拖拽文件，该属性为空
   setData(format,data)	向dataTransfer对象中添加数据
   getData(format)	从data Transfer对象读取数据
   clearData(format)	清除dataTransfer对象中指定格式的数据
   setDragImage(icon,x,y)	设置拖放过程中的图标，参数x,y表示图标的相对坐标

   在dataTransfer对象所提供的方法中，参数format用于表示在读取，添加或清空数据时的数据格式，包括text/plain(文本文字格式)，text/html（HTML页面代码格式），text/xml(XML字符格式)和text/url-list(URL格式列表)。

   HTML5表单元素

   HTML5采用了Web Forms 2.0标准新增了许多属性。

   form和input标签新增属性

   autocomplete	设置表单是否用自动完成的功能，取值可以为on/off，用于form和input标签，同时设置时，后者会覆盖前者。
   novalidate	设置表单提交时是否进行验证，使用该属性不进行验证
   input标签新增属性
   form	为表单元素指定关联的表单，即表单可以位于form标签之外，form="表单ID"
   formaction	让按钮动态改变表单提交的URL，即动态的改变表单的的提交服务器处理程序
   formenctype	让按钮动态改变表单的enctype属性，
   formmethod	让按钮动态设置表单的提交方式，即指定表单不同的提交方式post(隐式)、get(显示)
   formtarget	让按钮动态设置表单的target属性，表单提交服务端后返回的处理结果在何处显示“_seif等”
   formnovalidate	设置当前元素是否采用HTNL5表单验证，通常提交按钮使用，该属性会覆盖novalidate属性
   autofocus	设置在页面加载时是否获得焦点，也页面上只能有一个表单元素具有autofocus属性，无参
   placeholder	设置文本框未获得焦点时未输入时，显示的提示信息，当输入内容时，提示信息就会消失
   list	引用预定义的datalist，即与datalist数据项绑定在一起，
   multiple	允许一个以上的值，
   required	输入字段不能为空，提示信息
   pattern	规定输入字段的值需要符合指定的模式(正则表达式)，当不符合指定模式，提示信息为title的属性值，并阻止表单提交。

   新增的input属性

   HTML5为标签新增特定类型，特定范围，数据的有效性验证，日期控件等，

   新增标签

   email	创建一个email输入框，并检验其内容是否符合email格式，允许为空，除非加上required，multiple属性允许输入多个email地址。地址之间逗号隔开
   url	创建一个url输入框，并检验其内容是否符合正确的url格式，
   number	创建一个只能输入数字的文本框，属性有max(设置可输入的最大数值)，min(可输入的最小数值)，step(数值之间的合法间隔，默认1)，value(默认值)，不在指定范围，就会弹出提示，阻止提交。
   range	生成一个拖动条，只允许输入一定范围内的数值，默认0~100范围属性与number相同
   datePickers	日期与时间的输入文本框，包括data(选取年月日)，month(选取年月)，week(年周)，time(时间，小时分钟)，datetime(年月日及时间)等
   color	颜色选择文本框，其值为“FFFFFF”格式的文本，
   search	专门用于搜索关键字的文本框，多用于手机客户端

   自定义表单验证

   HTML5提供了checkValidity()和setCustomValidity()方法，用来实现自定义表单。

   checkValidity()方法：用于检测表单中的某个输入是否有效，并返回一个布尔值，当通过验证时返回true否则返回false。表单及表单元素都可以调用checkValidity()方法，默认情况下，在表单提交时调用。

   setCustomValidity()方法：默认情况下，浏览器为每个HTML5校验都提供了相应的提示信息，可以使用setCustomValidity()方法来实现。

   多媒体播放

   HTML5中提供了和

   src	指定要播放的视频或音频的URL地址
   autoplay	指定该属性时，视频或音频装载完后会自动播放，无参
   controls	指定该属性时，视频或音频显示播放控制条，无参
   loop	指定该属性，视频或音频播放完会再次重复播放，无参
   perload	用于是否预加载视频或音频，取值为auto(预加载),meta(只载入元数据)，none(不执行加载)，会被autoplay覆盖
   muted	指定该属性时，视频或音频输出被静音 ，无参
   poster	仅对
   width	该属性仅对标签有效，设置视频播放器的宽度
   height	同上，用于设置高度

   到目前为止HTML5支持三种视频格式，WebM，Ogg，Mp4。WebM格式具有VP8视频编码和Vorbis音频编码的特点，Oggi格式带有Theora视频编码和Vorbis音频编码格式，Mp4格式带有H.264视频编码格式和AAC音频编码格式，HTNL5推荐使用VP8作为视频编码格式，

   未解决浏览器对视频，音频格式的支持问题，可以使用标签为视频或音频指定锁哥媒体源，标签的属性列表；

   media：设置媒体资源类型，所有浏览器不支持。

   src：指定要播放的视频或音频的URL地址，

   type：用于设置媒体资源的MIME类型，视频的MINE类型有：vide/ogg ，vide/mp4，video/webm，音频的有MiMe类型有：audio/ogg，audio/mpeg，audio/x-wav；

   HTML5多媒体APL:HTML5中提供Video和Audio对象，用于控制视频或音频的回放及当前状态，Video和Vudio对象基本相同，

   Video与Audio对象常用的属性

   autoplay	用于设置返回是否在就绪后随即播放音频
   contrls	用于设置或返回视频(音频)是否该显示控件
   currentSrc	用于返回当前视频或音频的URL
   currentTime	用于设置返回视频音频中当前播放位置(以秒记)
   duration	返回视频(音频)的总长度
   defaultMuted	用于设置或返回音频(视频)是否默认静音
   ended	返回视频音频的播放是否以结束
   readyState	返回视频音频当前的就绪状态
   paused	用于设置或返回音频视频是否暂停
   volume	用于设置或返回音频视频的音量
   loop	用于设置视频或音频结束时是否再次播放
   networkState	返回视频(音频)的网络状态
   src	用于设置或返回视频的src属性的值
   play()	开始播放视频(音频)
   pause()	暂停当前播放的视频(音频)
   load()	重新加载视频(音频)
   canPlayType()	检查浏览器是否能够播放指定的视频(音频)
   addTexTrack()	向视频(音频)添加新的文本轨道

   Web存储

   在HTML5提供了两个与本地存储相关的技术，Web Storage和本地数据库。Web Storage存储机制是针对HTML4中的Cookice存储机制的一种改善，本地数据库是HTML5中一个新增的功能，用于在客户端本地创建一个数据库，将原来保存在服务器数据库中的数据直接保存在客户端端本地，减轻了服务器压力，提高了访问速度。

   Web Stotage用于在客户端本地保存数据，包括两种数据存储方式：

   window对象提供sessionStorage和localStorage两个子对象，分别用于Session Storage和Local Storage的数据存储，sessionStorage和localStorage对象都是Storage接口的实例，两者对应的属性和方法基本相同，区别在与保存数据的生命周期不同。

   （1）,Session Storage：将数据保存在Session对象中，Session是指用户在浏览某个网站时，从进入浏览器到关闭的时间，Session对象用于保存用户浏览器在这段时间内所保存的任何数据，当会话失败时，Session Storage保存的数据也会随之丢失。

   interface Storage{
       readonly attribute unsigned long length;//返回Storage中保存的key/value键值对的数量
       DOMString? key(unsigned long index);//返回Storage中第index个key；
       getter DOMString? getItem(DOMString key);//返回Storage中指定的key对应的value值
       setter create void setItem(DOMString key,DOMString value);//方法用于向Storage存入指定的key/value键值对；
       deleter void reoveTtem(DOMString key);//用于将Storage中删除指定key对应的key/value键值对；
       void clear();//删除所有键值对；
   };
   

    

   （2）,Local Storage：将数据保存在客户端的硬件设备中，当浏览器关闭后，数据任然存在，在下一次打开浏览器可以继续使用，

   LocalStorage与SessionStorage的用法基本相同，都是以key/value键值对的方式来存放数据的，区别在与存放时间更久。当需要存放复杂的数据时，可以借助JSON对数据进行包装。然后存储。读取数据时，可以将JSON字符串转换为JSON对象，然后在页面显示。保存时，将JSON对象转换为JSON字符串，然后将JSON字符串保存到LocalStorage中。

   本地数据库

   在HTML5中内置了两种本地数据库：SQLLite和IndexedDB。SQLite数据库是一种通过SQL语言进行访问的文件型SQL数据库，IndexedDB数据库是一种轻量级NOSQL数据库。

   SQLlite数据库：SQLite数据库是一个开源的嵌入式关系型数据库，实现了自包容，零配置和支持事务的SQL数据库引擎，在HTML5中，通过JavaScript对SQLite数据库进行访问操作的具体步骤如下：

   （1），创建数据库访问对象：

   在创建数据库访问对象时，需要用到openDatabase()方法来创建一个数据库访问对象：

   var db = openDatabase(databaseName ,version,description,size);

   databaseName表示数据库的名称,version表示数据库版本号,description表示数据库的描述,size表示数据库的大小，该方法返回一个数据库访问对象，当数据库不存在时，则创建一个新数据库并返回数据库访问对象。

   （2），使用事务处理：

   当访问数据库时，需要使用事务来完成数据库的访问操作事务分为只读事务和读写事务，只读事务使用readTransation()方法实现数据库的查询操作，读写事务使用transaction()方法来实现数据更新及表的基本操作。语法格式基本相同。

   db.transaction(function(tx){
       tx.executesql(sqlString,[params],
       function(tx,rs){
       //数据库操作成功数据处理
       },
       function(tx,error){
       }
       );
   });
   db//表示数据库处理对象，tx//表示事务处理对象，rs//表示结果集
   executesql()//用于执行sql语句，sqlString表示sql语句，params(可选)表示执行SQL语句所需的参数数组，
   第三个参数表示成功执行SQL语句时调函数，第四个参数表示执行失败时调用的SQL语句，
   
   

   IndexdDB数据库

   IndexedDB是一种轻量级NOSQL数据库，与传统的关系型数据库相比通过数据仓库实现对数据的存取，数据库中可以包含一个或多个对象仓库，每个对象仓库是一个记录集合，在对象仓库中，数据以key/value键值对的方式进行保存，每个数据库都对应的键名，且键名不能重复，每条记录由键和值两部分构成。

   在HTML5中使用IndexeDB数据库的具体操作步骤，

   （1）代码初始化，获得IndexedDB对象。

   var IndexedDB = window.indexdDB||window.webkitIndexedDB||window.mozIndexedDB||widow.msIndexedDB;

   （2）打开IndexedDB数据库，并且开启一个具体的事务(Transation);通过IndexedDB对象的open()方法打开数据库。当数据库存在时，返回一个请求连接数据库的请求对象(IDBOpenDBRequest)，当数据库不存在时，会先创建一个数据库并返回该数据库的请求对象。

   var dbRequest = IndexedDB.open(dbName,dbVersion);dnNamr表示数据库名称，dbVersion表示数据库版本，通过请求对象DBRequest的onsuccess(成功)或onerror(失败)事件来指定数据库连接成功(失败)时所执行的事件处理函数。

   var Request = indexedDB.deleteDatabase(databaseName);//删除数据库

   var dbRequest = indexedDB.open("MYDataBase",1);//获取数据库连接请求
   dbRequest.onsuccess = function(e){//成功触发
     var idb = e.target.result;
     alert('数据库连接成功');  
   };
   dbRequset.onerror = function(e){//失败触发
       alert('数据库连接失败');
   }
   dbrequest.onupgradeneeded = function(e){
       var tx = e.target.transaction;
       alert('数据库版本更新成功！版本'+e.oldVersion+'=>版本'+e.newVersion);
   };
   

   （3）创建对象仓库(Object Store):IndexedDB数据库使用对象仓库(又称对象存储空间)来存放数据，一个数据库中可以包含任意数量的对象仓库，创建对象仓库的格式：

   var store = idb.createObjectStore(storeName，optionlParameters)；idb表示以连接的数据库对象，storeName表示数据库名称，optionalParameters(可选)，是JSON对象类型，用于设置记录中的主键信息。var optionalParameters  ={keyPath:'id',autoIncrement:true};//keyPath属性用于设置主键，autoIncrement属性设置主键自动增长。

   （4）执行数据库的相关操作(通过监听DOM事件等待操作完成)：在IndexedDB API中，数据操作只能在事务中被执行，当事务处理过程中出现异常时，整个事务操作都将取消。事务分为三类：版本更新事务(Onupgraddeneeded)，只读事务(Readonly)和读写事务(Readwrite）

   //开启事务
   var tx  = idb.transaction(storeNames,[mode]);
   //idb表示某个已连接的数据库对象，参数storeNames表示数据仓库名，或是由字符串数组组成的字符串数组
   //mode(可选)表示定义事务的读写模式，readonly和readwrite；
   //事务开启及监听事务处理结果
   var tx = idb.transaction('users','readwrite');
   tx.oncomplete = function(){
       alerta("数据保存成功");
   };
   tx.onabort = function(){
       alert("数据保存失败");
   };

   （5）根据操作结果进一步操作：数据保存，数据遍历等。在数据仓库中保存数据时，首先获得数据库访问对象IndexedDB。然后使用该对象的transaction()方法开启一个读写事务，并使用事务对象的objectStore()方法获得对象仓库。var objectStore = tx.objectStore(storeName);//tx为具有读写属性的事务对象，参数storeName表示数据仓库，调用对象仓库的add()(如果主键在数据仓库中存在数据则保存失败)或put()(主键在对象仓库中存在，将主键对应的数据进行更新，不存在，保存)方法实现数据保存。数据遍历：当遍历数据时，使用对象仓库的openCursor()方法获取游标对象，然后通过游标的移动来实现数据的遍历

   //数据保存
   var user = {
   userName:'guoqy',
   age:20,
   };//
   var tx = idb.transaction('users','readwrite');
   var objectStore = tx.objectStore('users');
   objectStoer.add(user);
   //数据遍历
   var trquest  = objectStore.openCursor();//返回一个IDBRequest对象
   request.onsuccess  =function(e){
       var cursor = e.target.result;
       if(cursor){
           alert(cursor.value.usewrName);//获取游标中的内容
           cursor.continue();//继续检索
       }else{
           console.log("检索结束！");
       }
   };
   request.onerror = function(e){
       consile.log("检索失败！");
   };

   Web Worker

   HTML5新增了Web Worker技术，通过多线程的方式将执行时间较长的程序段交由后台现程处理。Web Worker技术多用于预先抓取数据缓存本地，供后期使用，后台I/O处理，大数据分析与计算处理，Canvas绘图中的图形数据运算及生成处理，本地数据库中的数据存取及计算处理。

   Web Worker基本应用：

   使用Worker类的构造函数创建一个Wroker对象(即后台线程)，语法：var worker =  new Worker(URL);//URL为在后台线层中执行的脚本文件的URL地址。

   通过worker对象的postMassage()方法向后台线程发送消息：worker.postMassage(message);

   通过监听worker对象的onmessage事件接受后台线程回穿的数据并进行处理：worker.onmessage  =function(e){alert(e.data);};

   当内部线程执行完毕后，浏览器仍在继续监听对象，直到被终止为止。：worker.terminate();

   由于后台线程代码位于独立的JS文件中，所以无法访问当前页面中的window，document，parent等对象。当需要输出测试信息时，可以使用console.log()方法向控制台输出信息。

   Worler线程嵌套：在HTML5中，Worker线程中允许嵌套子线程，通过线程的嵌套将一个大的后台线程切分成多个子线程，每个子线程各自完成相对独立的一部分工作。

   使用Chrome浏览器使用Web worker需要发布到服务器上才可以用。Firefox与IE11可以本读预览

   在HTML5中使用

   jQuery基础

   Jquery是一个基于JavaScript的开源框架。设计理念为“少写多做”是一种将JavaScript，CSS，DOM，Ajax等特征集于一体的强大框架，通过简单的代码来实现各种页面特效。提供功能有：访问和操作DOM元素，强大的选择器，可靠的事件处理机制，完善的Ajax操作，链式操作方式。

   一，搭建jQuery开发环境：

   引入jQuery库：、

   jQuery的简单测试：在页面中引入JQuery库后，通过$()函数来获取页面元素，并对元素进行定位，或效果处理，$("muDiv")与$jQuery("muDiv")完全等价。

   二，DOM对象和jQuery对象：

   在JavaScript中通过getElementById(),getElementsClassName(),querySelector()等方法回去HTMl元素。

   jQuery对象通过jQuery库中的提供的方法来获取元素对象，jQuery对象本身不能直接调用DOM对象的方法，而是将jQuery对象转换成DOM对象后在调用DOM对象的方法，

   DOM对象转成jQuery对象：使用jQuery库中的$()方法将DOM对象封装起来，并返回一个jQuery对象，

   jQuery对象转换为DOM对象，可以把jQuery对象看做是一个数组，通过索引[index]或者get(index)方法来获取DOM对象。

   var domObject  =document.getElementById("myDiv");
   alert(domObject.innerHTML);
   var jQueryObject = $(domObject);//将dom对象转换成jquery对象
   alert( jQueryObject.html() );
   var domObject1 = jQueryObject[1]//将jQuery对象转换为DOM对象，通过下标获取DOM对象;
   var domObject2  = jQueryObject.get(1);//通过get方法获取DOM对象。

   jQuery选择器：冒号开头，修饰元素

   基本选择器

   $("#ID")	根据元素的ID属性进行匹配	单个jQuery对象
   $(".class")	根据元素的class属性进行匹配	jQuery对象数组
   $("element")	根据元素的标签名进行匹配	jQuery对象数组
   $("selector1 ,select2……")	将每个选择器匹配的结果合并后其一返回	jQuery对象数组
   $("*")	匹配页面所有元素	jQuery对象数组

   层次选择器

   $("ancestor descendant")	选取ancsstor元素中的所有的子元素	jQuery对象数组
   $("parent >chid")	获取parent元素中的直接子元素	jQuery对象数组
   $("prev+next")	获取紧邻prev元素之后的next元素(有共同的父元素)与$("prev").next("next")相同	jQuery对象数组
   $("prev~siblings")	获取prev元素之后的siblings兄弟元素，有共同的父元素，不必紧邻与$("prev").nextAll("siblings")相同	jQuery对象数组

   过滤选择器

   简单过滤选择器

   ：first	选取第一个元素	单个jQuery对象
   ：last	选取最后一个元素	单个jQuery对象
   ：even	选取所有索引值为偶数的元素，从0开始	jQuery对象数组
   ：odd	选取所有索引值为奇数的元素，从0开始	jQuery对象数组
   ：header	选取所有标题元素	jQuery对象数组
   ：foucs	选取当前获取焦点的元素	jQuery对象数组
   ：root	获取文档的根元素	单个jQuery对象
   ：animated	选取所有正在执行动画效果的元素	jQuery对象数组
   ：eq(index)	选取所有索引等于index的元素，0开始	单个jQuery对象
   ：gt(index)	选取索引大于index的元素，0开始	jQuery对象数组
   ：lt(index)	选取所有小于index的元素，0开始	jQuery对象数组
   ：no(selector)	选取selector之外的元素，0开始	jQuery对象数组

   内容选择过滤器

   内容过滤选择器

   ：contains(text)	选取包含text内容的元素	jQuery对象数组
   ：has(selector)	选取包含标签名selector的元素	jQuery对象数组
   ：empty	选取所有不包含子元素或文本的空元素	jQuery对象数组
   ：parent	选取含有子元素或文本的元素	jQuery对象数组

   可见性过滤选择器

   ：hidden	选取所有不可见的元素，或者type为hidden的元素	jQuery对象数组
   ：visible	选取所有可见元素	jQuery对象数组

   属性过滤选择器

   [attribute]	选取包含给定属性的元素	jQuery对象数组
   [attribute = value]	选取属性等于某个特定值的元素	jQuery对象数组
   [attirbute !=value ]	选取属性不等于或不包含某个特定值的元素	jQuery对象数组
   [attribute^=value]	选取属性以某个值开始的元素	jQuery对象数组
   [attribute$=value]	选取属性以某个值结尾的元素	jQuery对象数组
   [attribute*=value]	选取属性中包含某个值的元素	jQuery对象数组
   [attribute1][attribute2][atttibute3]	复合属性选择器，需要同时满足对个条件时使用	jQuery对象数组

   子元素过滤器

   ：first-child	选取每个父元素中的第一个元素，结构上第一个	jQuery对象数组
   ：last-child	选取每个父元素的最后一个元素，结构上第一个	jQuery对象数组
   ：only-child	当父元素只有一个子元素时，进行匹配，负责不匹配	jQuery对象数组
   ：nth-child(N|odd|even)	选取每个父元素中第N个子元素或奇偶元素	jQuery对象数组
   ：first-of-type	选取每个父元素中的第一个元素，相同类型第一即可	jQuery对象数组
   ：last-of-type	选取每个父元素的最后一个元素，相同类型第一即可	jQuery对象数组
   ：only-if-type	当父元素只有一个子元素时匹配，否则不匹配，相同类型一个即可	jQuery对象数组

   表单对象属性过滤选择器

   ：enabled	选取表单中属性为可用的元素	jQuery对象数组
   ：disabled	选取表单中属性为不可用的元素	jQuery对象数组
   ：checked	选取表单中被选中的元素(单选，复选)	jQuery对象数组
   ：selected	选取表单中被选中的选项元素	jQuery对象数组

   在jQuery对象中，text()方法用于设置或显示元素的文本内容，html()显示设置元素是HTML内容，length用于表示所选元素集合的数量

   ：input	选取input,textarea,select,button元素	：submit	返回jQuery对象数组
   ：text	返回jQuery对象数组	：image	返回jQuery对象数组
   ：password	返回jQuery对象数组	：button	返回jQuery对象数组
   ：radio	返回jQuery对象数组	：file	返回jQuery对象数组
   ：chrckbox	返回jQuery对象数组	：hidden	返回jQuery对象数组

   jQuery的基本操作

   通过jQuery的选择器定位到页面得每个元素后，可以对元素进行各种操作。

   属性操作

   属性操作函数

   attr(name|pro|key,val|key,fn)	获取或设置元素的属性，参数name表示获取该元素的属性值，properties表示由key/value键值对构成的集合，如JSON对象，key,val表示需要设置的属性名和属性值，key,fu表示使用函数返回值做属性的值。
   removeAttr(name)	删除元素匹配元素的指定属性，name为属性名
   prop(name|pro|key,val|fn)	获取或设置匹配元素集合中的第一元素属性,多用于boolean类的属性操作，参数与attr相同,只能设置特性
   removeProp(name)	删除由prop()方法对属性进行操作的属性集，

   参数function(index,oldAttr):表示使用函数的返回值作为属性的值，index表示当前元素的索引位置，oldAttr表示当前元素在修改之前的属性值。

   样式操作

   样式操作

   addClass(className|calssName1 className2...calssNamen|function(index,oldClassNmae))	方法用于对一个或多个匹配元素追加样式,calssname 表示样式名
   removerClass( |className|calssName1 className2...calssNamen)	方法用于移除匹配元素的一个或对个样式，也可以一次性移除元素的所以样式
   toggleClass(className|calssName,switch)	方法法用于元素之间的重复切换，当元素的指定样式存在时，将该样式移除，否者添加该样式，className表示切换样式名，参数switch表示切换开关，默认为true，当为true时允许切换，反之不切换。
   css(attrName|key,value|properties|attrName,function(index,oldValue))	参数attrName表示要访问的属性名称，返回该属性的值，key,value表示设置某一样式，key为属性名，value表示属性值，properties表示由key/value键值对构成的集合，如JSON对象，key,val表示需要设置的属性名和属性值，attr,fu表示使用函数返回值做属性的值。
   hasClass（）	是否有该属性

   内容操作

   在jQuery中提供html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值，当方法没有提供参数值时，表示获取匹配元素的内容或值，当方法携带参数时，表示对匹配元素的内容或值的修改，

   内容操作方法

   html(         |htmlCode|function(index,oldHtmCode))	html()方法用于获取第一个匹配元素的HTML内容或修改元素的HTML内容，该方法仅对XHTML文档有效，不能用于XML文档，参数function(index,oldHtmlCode)表示将函数的返回值作为当前元素的HTML内容，index表示当前元素在集合中的位置，oldHtmlCode表示当前元素在修改之前的HTNL内容
   text(  |textContent|function(index,oldTextContent))	无参方法用于返回第一个匹配元素的文本内容，有参方法用于设定文本内容，同上
   val( |newValue|arrayValue|function(index,oldValue) )	val()方法用于设置或获取表单元素的值，包括文本框，下列列表，单选框和复选框等元素，当元素允许多个时，返回一个包含被选项的数组，val()参数同上。

   
   
       提交 喜欢我的理由：
       
           可爱
           温柔
           大方
       
       

   嗯，她讲，我看的是未来而不是现在，很高兴听到她讲这样的话，至少算是对你的答复吧，所以那，要努力学习，不浪费一点时间，提高自己的各方面能力，嗯，要变得很厉害才可以去喜欢她，加油吧生活，不要忧郁那么多事情啦，为了父母，为了她，为了自己还不愿死去的心那。

                                                                                        18.10.3 早           

   jQuery事件处理

   事件处理是指在某一时刻页面元素对某种操作的响应处理，jQuery中的事件处理是在JavaScript事件处理机制基础上的进一步扩展与增强，提高了事件处理能力。

   页面加载事件：对整个页面而言，可以看做一个DOM树，在jQuery中$(document).ready()方法用于处理页面加载完毕时的事件，极大的提高了web响应速度，DOM元素 就绪就会进行事件处理，可以多次执行。

   $(domcument).ready()有两种简写形式：

   $(function(){});$().ready();

   事件绑定：所谓事件绑定，是指将页面元素的事件类型与事件处理函数关联到一起，当事件触发时调用事先绑定的事件处理函数，在jQery中，提供了强大的API来执行事件的绑定操作，如bind(),one(),live(),toggle(),delegate(),on()和hober()等

   bind():方法用于对匹配元素的特定事件绑定的事件处理函数：bind(types,[data],fu);参数types表示事件类型。是一个或多个事件类型构成的在字符串，类型之间空格隔开，事件如鼠标键盘事件，鼠标事件click，submit，mouseover和mouseup等，参数data(可选)表示传递给函数的额为数据，在事件处理函数中通过event.data来获取所传入的额为数据；参数fu是指所绑定的事件处理函数。

   $("p").bind("click",function(){
          alert($(this).text());        
   });//绑定一个事件
   $("p").bind("mouseenter mouseleave",function( ){
        $(this).toggleClass("entered");
   });
   $("button").bind({
       click:function(){$("p").slideToggle();},
       mouseover:function(){$("body").css("background-color","red");},
       mouseout:function(){$("body").css("background-color","#ffffff");}
   });//绑定多个事件
   function handler(event){
       alert(event.data.foo);
   }//传递数据
   $("p").bind("click",{foo:"bar"},handler);
   

   mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言。

   mouseenter(当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件)和mouseleave(当鼠标指针离开被选元素时，会发生 mouseleave 事件。)只在父元素触发，当鼠标穿过一个元素时，只会触发一次。

   mouseover和mouseout比mouseenter和mouseleave先触发

   因此一般mouseover和mouseout一起使用，mouseenter和mouseleave一起使用

   jQuery为常用的事件(如click，mouseover和mouseout等)提供一种简单的写法

   $("input[type=button]").click(function)(){$(this).toggleClass("entered");});

   this是执行上下文(Excution Context)的一个重要的对象，用于指明触发事件的对象本身，$(this)是jQuery对this对象的封装，用于在事件处理中收集事件触发者的信息。

   one():用于对于匹配元素的特定事件绑定一个一次性的事件处理函数，事件处理函数只会被执行一次，one()方法的语法格式与bind（）方法基本相同，one(types,[data],fn),参数意思相同。$("p").one("click",function(){alert($(this).text(0);});

   toggle([speed],[easing,[fu1,fu2,fu3,fu4...]):方法用于模拟鼠标连续单机事件，参数speed用于设置元素的隐藏(显示)速度，默认0，取值范围是slow，normal，fast或毫秒数。参数easing表示指定动画的切换效果，取值是swing(默认)和linear。参数fn1,fn2表示1~n次单机的事件处理函数，在事件处理时为循环机制即最后一次处理完循环到第一次。同时具有参数speed和fu时，表示以speed上速度显示或隐藏，在动画完成后在执行fu事件处理函数。该方法在1.9版本中被删除。

   live()：bind()方法绑定的事件，只能针对页面中存在的元素进行绑定，而bind()绑定后新增的元素没有事件响应，使用live()方法能够对页面所有匹配元素绑定操作事件，包含存在的元素和新增加的元素，1.7+需要版本插件，live(types，fu)参数types表示事件类型，是一个或多个事件构成的字符串，空格隔开，fu表示事件处理函数。

   delegate(childSelector,[types],[data],fu)方法在匹配元素的基础上，对其内部符合条件的元素绑定事件处理函数。参数childSelector表示一个选择器字符串，筛选触发事件的元素，参数types表示事件类型，是一个或多个事件构成的字符串，空格隔开，参数data(可选)表示传递给函数的额外数据，通过event.data调用，fu表示事件处理函数，

   $("div").live("click",function(){
   alert($(this).html());
   });
   &("div").delegate("buntton","click",function(){
       $("p").slideToggle();
   });
   $("div").delegate("#DataBindBtn","click",{mas:"额外传递的数据"},function(e){
           alert(e.data.mas);
   });

   delegate()事件处理程序优于live(),适用于当前存在和未来增加的元素。在.17+要优先考虑on()方法。

   on(types,[childSelector],[data],fu)1.7+中新增，用于绑定事件所需的函数，可以代替bind(),line(),delegate()等方法。参数types表示事件类型，是一个或多个事件类型构成的字符串，childSelector表示一个选择器字符串，筛选元素，data(可选)表示传递给函数的数据，fu表示事件函数。

   hover(overfu,[outfu])方法用于模拟鼠标悬停事件，当鼠标悬停在某元素上是触发overfu函数，移除是触发outfu，只有一个时触发两次overfu。

   解除事件绑定：在jQuery中提供了unbind()he undelegate()方法，分别解除bind()方法和delegate方法通过参数指明解除的绑定事件，默认全部解除，在1.7+中提供off()方法用于解除on(),bind(),delerate()方法，参数与on相同。

   事件对象（event）

   jQuery事件解决浏览器兼容问题

   事件对象常见属性

   pageX	鼠标指针相对文档的左边缘的位置
   pageY	鼠标指针相对文档的上边缘的位置
   target	返回触发事件的元素
   type	返回事件的类型
   whilch	返回鼠标键盘按下的键
   data	用于传递事件之外的额外数据

   事件对象常用的方法列表

   preventDefaule()	阻止元素发生默认的行为(当单机提交按钮时阻止提交)
   stopPropagation()	阻止事件冒泡
   isDefaultPrevented()	根据事件的冒泡是否调用过preventDefaule()方法返回一个布尔值
   isPropagationStopped()	根据事件对象中是否调用stopPropagation()方法来返回一个布尔值

   jQuery进阶

    

   jQuery文档处理

   DOM元素有两个属性，innerHTML和outerHTML。其中innerHTML表示当前元素中HTML内容(不包括元素的标签部分)，outerHTML表示当前元素的所有内容(包括元素的HTML内容和元素的标签两部分)。

   代码中$("span",this)表示在当前元素中查找元素，$("span",this).length表示当前元素中拥有的元素个数。

   1，创建节点，根据W3c中的HML DOM标准，HTML文档的所有内容都是由节点，包括文档节点，元素节点，文本节点，属性节点和注释节点构成，节点相互关联，形参DOM树，在页面添加元素，需要找到该元素的上一级节点，再通过$()完成节点的创建，然后完成节点的添加操作，$()函数用于动态创建元素节点，

   $(htmlcode);//htmlCode表示动态创建DOM元素的HTML字符串；返回由该元素封装的jQuery对象。var span1  = $("");

    2,插入节点：在动态创建HTML元素后，还需要将节点插入到文档，分内部插入和外部插入

   插入节点的方法列表

   内部插入	$(selector).append(content|function(index,oldHtmlCode))	向每个匹配的selector元素内部尾部追加由content|fu指定的内容，selector表示追加内容的元素，content表示要追加的内容
   	$(content|selector).appendT(selector)	把所有匹配的元素或内容追加到指定的元素的尾部，content|selector表示要追加的内容，selector表示追加内容的元素
   	$(selector).prepend(content|function(index,oldHtmlCode))	向每个匹配的元素内部头部前置内容，select表示插入内容的元素，content表示要插入的内容
   	$(content|selector).prependTo(selector)	把所有匹配的元素|内容前置到指定的元素的头部，content|selector表示插入的内容，selector表示插入内容的元素
   外部插入	$(selector).after(content|function(index[,htmlCode])).	在每个匹配元素之后插入内容，selector表示所匹配 的元素，content|fu表示插入的内容，
   	$(content|selector).insertAtter(selector)	把所有匹配的元素插入指定元素的后面,content|selector表示被插入的内容，selector表示所匹配的元素
   	$(select).before(content|function(index[,htmlCode]))	在每个匹配的元素之前插入内容，selector表示所匹配的元素，content|fu表示被插入的内容。
   	$(selector|selector)insertBefore(selector)	把所有匹配的元素插入到指定元素的前面，selector|content表示要插入的内容，selector表示匹配的元素。

   function(indec,oldHtmlCode):表示将函数的返回值作为插入的内容，index表示当前元素在集合索引中的位置，oldHtmlCode表示当前元素在修改前的HTML内容。

   function(index[,htmlCode]):表示将函数的返回值内容作为插入的内容，index表示当前元素在集合的索引位置，htmlCode表示当前元素的HTNL内容，当插入内容时，不会改变元素中的HTMl内容。

   在追加和插入元时，插入的内容可以是HTML字符串，DOM元素（或数组）,Jquery对象，函数(返回值)，当操作内容是DOM元素时（即appendTo()与prependTo(),insertAtter()，insertBofore）,该元素将从原位置上消失，即该操作属于元素的移动，不是复制。

      3，  复制节点：在jQuery中提供clone()方法，用于复制DOM节点(包括子节点和属性节点)

   语法：$(selector).clone(includeEvents[,deepEvents]):selector表示需要复制的节点元素，includeEvents(可选，布尔型)，表示是否同时复制元素的附加数据和绑定事件，默认false。参数deeEvents(可选，布尔型)表示是否同时复制元素中的所有子元素的附加数据和绑定事件，默认false。

     4，  删除节点：在jQuery中提供remover()和datach()方法，用于删除元素节点，empty()方法用于清空当前颜色中的内容，标签部分保留

   remover():删除所匹配的元素，包括元素的文本节点和子节点。返回jQuery数组，包含被删除元素的基本内容，不包含所绑定的事件和附加数据信息。$(selector).remover();

   detach():方法用于删除所匹配的元素，包括该元素的文本节点和子节点。返回jQuery对象或数组，包含含被删除元素的所有数据，

   empty():用于清空元素的内容(包括所有的文本和子节点)，但不删除该元素。

   5，包裹节点：指在现有节点的外围包裹一层其他的元素标签，使当前节点成为新的元素子节点，jQuery提供了wrap()与wrapAll()方法

   $(selector).wrap(html|Element):用于将所匹配的元素使用HTML或DOM元素包裹(单个包裹)selector 表示被包裹的匹配元素，html表示用于包裹的html标签，Element表示用于包裹的DOM元素

   $(selector).wrapAll(html|Element):用于将所匹配的元素使用HTML或DOM元素整体包裹，selector表示被包裹的匹配元素，html和Element表示包裹的HTML标签和DOM元素。

   unwrap():用于删除所匹配的元素的父节点，能够快速取消wrap()方法产生的效果。

   遍历节点：在jQuery中对DOM遍历操作：祖先遍历，后代遍历，同胞遍历，和筛选遍历

   祖先遍历：又称向上遍历，常用的方法有：

   $(selector).parent([childSelector]):用于返回所匹配元素的直接父元素，并允许使用选择器进行筛选，

   $(selector).parents([childSelector]):用于返回所匹配元素的所有的祖先节点，并允许使用选择器进行筛选，

   $(selector).parentsUntil([childSelctor|element]):用于返回所匹配元素与改定元素之间的所有祖先节点，并允许选择器筛选。

   • $(selector):表示所匹配的元素，参数childSelector(可选)表示指定的选择器，用于筛选$("span").parent(".imageDiv")//返回span标签具有.image样式的直接父元素。

   后代遍历：又称向下遍历，通过向下遍历查找元素的后代元素

   $(selector).children([childSelector])方法用于返回所匹配元素的直接子元素，允许选择器筛选。

   $(selector).find(expression|jQuery|element):用于返回所匹配元素的所有后代元素，允许表达式，jQuery对象或DOM对象对元素筛选。

   $(selector).contents():用于返回所匹配元素的子元素(包括文本节点和注释节点)，还可以用于查找iframe页面的子元素

   • $(selector):表示所匹配的元素，参数childSelector(可选)表示指定的选择器，参数expression|jQuery|element表示表达式，jQuery对象或DOM对象，用于筛选。

   同胞遍历：同胞节点指拥有相同父元素的节点，jQuery同胞遍历的方法：

   $(selector).siblings():用于返回所匹配元素的同胞元素(但不包括匹配元素)，并使用选择器进行筛选。

   $(selector).next([childSrlrctor]):用于返回所匹配元素的紧邻的同胞元素，并允许使用选择器进行筛选，

   $(selector).nextAll([childSelector]):用于返回所匹配的元素所有紧随的同胞元素，并允许使用选择器进行筛选，

   $(selector).nextUntil([express|element]):用于返回用于返回所匹配元素与改定元素之间的所有同胞元素

   节点过滤：

   $(selector).first(expression|jQueryObject|element|function(index)):用于返回符合筛选规则的元素。

   $(selector).not(expression|jQueryObject|element|function(index)):返回规则之外的其他元素，功能与first相反。

   expression：表示对匹配的元素使用expression选择器进行筛选。

   jQueryObject：表示在匹配的元素中筛选jQueryObject类型的元素。

   elememt:表示在匹配的元素中筛选element类型的元素

   function(index)：表示使用函数筛选，index表示当前元素在集合中的位置，当函数返回true时符合筛选条件，反之。

   jQuery动画效果：

   动画及特效的方法

   $(selector).show([speed],[fu])	显示被隐藏的元素，speed表示速度，默认0，取值可以为slow，normal，fast，fu表示动画完成时触发的函数
   $(selector).hide([speed],[fu])	隐藏可见元素，speed表示速度，默认0，取值可以为slow，normal，fast，fu表示动画完成时触发的函数
   $(selector).slideDown([speed],[easing],[fu]);	以滑动的方式显示隐藏可见元素，
   $(selector).slideUp([speed],[easing],[fu])	以滑动的方式隐藏可见元素
   $(selector).slideToggle([speed],[easing],[fu])	使用滑动效果，在显示和隐藏状态之间进行切换，
   $(selector).fadeIn([speed],[easing],[fu])	使用淡入效果显示一个隐藏的元素
   $(selector).fadeTo([speed],[easing],[fu])	使用淡出效果隐藏一个显示的元素，隐藏后占据空间
   $(selector).fadeToggle([speed],[easing],[fu])	在fadeTo和FadeIn之间切换，隐藏后不占据空间
   $(selector).amimate(([speed],[easing],[fu])	创建自定义动画函数
   $(selector).stop()	停止当前正在运行的动画
   $(selector).delay(毫秒数])	将队列中的函数延时执行，即两次动画的时间间隔
   $(selector).finish()	停止当前正在运行的动画，删除所有排练动画，并完成匹配元素的所有动画

   数组和对象的擦操作：

   $(selector).each(function(index,element)):多用于DOM对象数组中的元素遍历

   $.each(object,function(index,element)):Array数组和JSON对象遍历

   function表示回调函数，用于对数组中的元素遍历，index表示遍历下标，element表示值。

   $.extend(target,object..)|({propertyName:propertyValue})|({functionName:function(){}}):

   参数target表示扩展的目标对象，参数object表示扩展对象的参照，将参照的属性扩展到目标对象。参数propertyName|functionName表示扩展jQuery对象本身的属性方法，用于在jQuery命名空间上新增一个新属性方法。

   $.merge(firstArray,secondArray):用于将两个数组进行合并。把第二和合并到第一个。返回第一个。

   $.unique(target):根据元素在文档中出现的先后顺序对DOM元素数组进行排序。

   $.parseJSON(JSON字符串)：用于将JSON字符串转换为JSON对象。

   jQuery插件：开发的jQuery插件常见的有三种：封装全局函数的插件，封装对象方法的插件，自定义选择器插件。

   封装全局函数的插件：将独立的函数追加到jQuery命名空间之下，通过jQuery或$进行访问。

   封装对象方法插件：指将对象方法封装起来，用于对选择器所获得的jQuery对象进行操作。通过$.fu.方法名的方式添加。

   自定义选择器插件

   在开发jQuery插件时注意：

   1. 插件名推存使用jQuety.[插件名].js
   2. 所有的对象方法都附件到Jquery.fu对象上，所有的全局函数都附加到jQuery对象本身。
   3. 在插件内部this表示获取当前选择器的jQuery对象，在普通事件中表示this表示触发事件的当前DOM元素。
   4. 以分号结束。
   5. 插件返回一个jQuery对象，保证链式操作。

   嗯，前端的笔记就做到这里啦，还差的很远，路漫漫其修远兮，要抽时间实验，以后做什么在想吧，她呀！还是先找一份工作重要吧。我想，我并不赞同《瓦尔登湖》中讲的那样，倘若只有自己，谁不愿意过那样的生活呢。打工去买车票是一个正常人，而行走去旅行那么异类的事，爸爸妈妈怎么办哎？好困哎，我要休息啦！！！

                                                                             2018.10.14