HTML
表单标签
<form></form>
-属性
action:提交到地址，默认提交到当前的页面
method:表单提交方式
-常用的方式有两种 get和post 默认是get
get和post的区别：
1.get请求地址栏会携带提交的数据，post不会携带（在请求体里面）
2.get请求安全级别较低，post较高
3.get请求数据大小有限制，post没有限制
enctype：一般请求不需要这个属性，做文件上传时候需要设置这个属性
JavaScript
脚本放置在body标签最后
放在head处的缺点:js中使用了html中的元素，但是还未加载html
先加载js，后加载html，导致页面空白或者反应很久才显示出来
js的使用方法有两种
第一种:写在srcipt标签之间
第二种:写在js文件中，通过<srcipt src="https://www.shangyouw.cnz.js"></script>将js文件引入
链入外部js，则body里面的js无效
基本数据类型
五种基本数据类型:number,string,boolean,null,undefined
undefineed:表示变量不含有值、未声明的变量或者用var声明但未初始化的变量
null：空，可以将变量的值设置为null来清空变量
数字：isNaN()判断是否为数值、parseInt()、parseFloat()用来转化成数值
布尔：true（非空字符串、非零数值、非空对象）、false（空字符串、0、null和undefined）
字符串：使用单引号或双引号包括
变量作用域
全局变量：在函数外声明的变量是全局变量或在函数内没有用var声明的变量，网页上的所有脚本和函数都能访问它。
局部变量：在函数内声明的变量(使用var)是局部变量，只能在函数内部访问它。
==与===的区别：两者都可以做比较，前者只是单纯地作值的比较，后者要值与类型均相等才判断为true
2 == '2' true
2 === '2' false
数组
js数组的三种定义方式
第一种：var arr=[1,2,3]; var arr = [1,"abc",true];
第二种（使用内置对象 Array对象）：var arr = new Array(5);
第三种：var arr = new Array(1,2,3);
增加数组元素：使用"[ ]"运算符置顶一个新下标
push() ：在数组末尾添加元素
unshift()：在数组头部添加元素
concat()：合并数组
删除数组元素：delete 数组名[下标];
pop() ： 删除并返回数组最后一个元素
shift()：删除并返回数组第一个元素
遍历数组：
for(var i=0;i<arr.length;i++){}
for(var 数组元素变量 in 数组)
获取数组片段
slice(start,end)：从数组中返回选定的元素
splice() ：方法向/从数组中添加/删除项目，然后返回被删除的项目
删除任意数量的项：splice(要删除的起始下标,要删除的项数)
在指定位置插入指定的项：splice(起始下标, 0 , 要插入的项)
替换任意数量的项：splice(起始下标, 要删除的项数 , 要插入的项)
其他
join(separator)：把数组中的所有元素放入一个字符串
reverse() ： 颠倒数组中元素的顺序
sort(sortby)： 方法用于对数组的元素进行排序。
函数
js定义函数的三种方式
第一种方式：使用到一个关键字 function
function 方法名(参数列表){ //参数不需要写类型
方法体;
返回值可有可无（根据实际需要）;
}
第二种方式：匿名函数
var add = function(参数列表){
方法体和返回值
}
第三种方式（用得少）：使用js里面的一个内置对象Function
动态函数
var add = new Function("参数列表","方法体和返回值");
数据验证
前端验证：避免将数据传给服务器，给服务器带来麻烦
服务端验证：在服务器端对数据进行验证
前端验证：节约资源；
不可靠，容易篡改
服务端验证：
--> 前端验证了，后台还要验证
String对象
属性：
length：字符串长度
方法：
charAt(index)：返回指定位置的字符 或直接使用arr[i]
indexOf(searchvalue,fromindex) ：返回某个指定的字符串值在字符串中首次出现的位置，未找到返回-1，第二个参数可以省略
lastIndexOf(searchvalue,fromindex)：反向检索
replace(regexp/substr,replacement)：在字符串中用一些字符替换另一些字符
split(separator,howmany)：把一个字符串分割成字符串数组
substr(start,length)：在字符串中抽取从 start 下标开始的指定数目的字符
toLowerCase()：把字符串转换为小写
toUpperCase()：把字符串转换为大写
BOM模型（浏览器模型）
bom中的window对象----------------------
页面加载完才会触发这个事件
window.onload = function(){
----javascript代码-----
这样可以将js代码放在头部，会先执行完html代码再执行这个函数
}
window的属性:
window.opener 跨页面操作，得到创建这个窗口的窗口
-做定时器
** setInterval("js代码",毫秒数) 1秒=1000毫秒
- 表示每三秒执行一次alert()
window.setInterval("alert('123')",3000);
** setTimeout("js代码",毫秒数)
- 表示在毫秒数之后执行，但是只会执行一次
- 表示四秒之后执行js代码，只会执行一次
window.setTimeout("alert('abc')",4000);
** clearInterval():清除setInterval设置的定时器
** clearTimeout():清除setTimeout设置的定时器
location 用来打开新连接
location.url('链接地址');
location.href=地址
history
go(-1)上一个页面
back()上一个页面
DOM模型(文档模型)
js中的dom对象--------------------------
(文档对象模型，用来操作内容文档内容)
document对象
---获取操作元素---
** getElementById();
- 通过id得到元素(标签)
- //使用getElementById的到input标签对象
var input1 = document.getElementById("nameid");
//得到input里面的value值
alert(input1.name); //标签对象.属性名称
//向input里面设置一个值value
input1.value = "bbbb";
** getElementsByName();
- 通过标签的name属性值得到标签
- 返回的是一个集合（数组）
- //使用getElementsByName得到input标签
var inputs = document.getElementsByName("name1"); //传递的参数是标签里面name的值
//alert(inputs.length);
//遍历数组取值
for(var i = 0;i < inputs.length;i++){
alert(inputs[i].value);
}
** getElementsByTagName("标签名称");
-通过标签名称的到元素
var inputs = document.getElementsByTagName("input");
//alert(inputs.length);
for(var i = 0;i < inputs.length;i++){
var input = inputs[i];
alert(input.value);
}
document.getElementsByClassName(class);
-通过类名来获取dom元素集合，ie9以上支持
获取元素后的操作：
改变 HTML 元素的内容 (innerHTML)
改变 HTML 元素的属性
改变 HTML 元素的样式（CSS）
document.getElementById(id).style.border = '5px solid #00f';
采用驼峰写法，- 会被认为是减号
.style.backgroundColor
对 HTML DOM 事件对出反应：
HTML 事件属性来绑定函数
<button onlick="displayDate()">单击这里</button>
使用 HTML DOM 来分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};
常用事件：
onload：页面加载
onchange：内容改变
onmouseover：鼠标进入
onmouseout：鼠标移出
onmousedown：鼠标按下
onmouseup：鼠标释放
onclick：鼠标单击
onfocus：获得焦点
onblur：失去焦点
案例：在末尾添加节点
第一步：获取到ul标签
第二步：创建li标签对象
document.createElement("标签名称");
第三步：创建文本对象
document.createTextNode("文本内容");
第四步：把文本添加到li下面
appendChild();
第五步：把li添加到ul的下面
//添加li项
function add1(){
//获取到ul标签
var ul1 = document.getElementById("ulid");
//创建标签
var li1 = document.createElement("li");
//创建文本
var tex1 = document.createTextNode("5555");
//把文本加入到li下面
li1.appendChild(tex1);
//把li加入到ul下面
ul1.appendChild(li1);
}
element对象
** 要操作element对象，首先必须要获取到element对象
- 使用document里面相应的方法获取
** 方法
** 获取属性里面的值
getAttribute("属性名称")
var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));
//alert(input1.class);//class属性必须通过下面方法获取
alert(input1.getAttribute("class"));
input1.setAttribute("class","haha");
//alert(input1.getAttribute("class"));
alert(input1.getAttribute("name"));
input1.removeAttribute("name");
alert(input1.getAttribute("name"));
** 获取标签下面的子标签
** 使用属性childNodes，但是这个属性兼容性很差
** 获得标签下面的子标签的唯一有效的办法，使用getElementsByTagName方法
var ul1 = document.getElementById("ulid1");
//var lis = ul1.childNodes;
//alert(lis.length);
var lis = ul1.getElementsByTagName("li");
alert(lis.length);
Node对象属性
* nodeName
* nodeType
* nodeValue
*标签节点对应的值
nodeType : 1
nodeName : 大写标签名称 比如SPAN
nodeValue : null
*属性结点对应的值
nodeType : 2
nodeName : 属性名称
nodeValue : 属性的值
*文本节点对应的值
nodeType : 3
nodeName : #text
nodeValue : 文本内容
操作dom对象：
appendChild() 添加子结点
insertBefore() 插入子结点
removeChild() 删除结点
1、获取父节点
2、获取要删除的结点
3、执行删除
cloneNode(boolean) 复制结点到剪切板
操作dom总结
*获取节点使用方法
getElementById()：通过结点的id属性，查找对应结点
getElementsByName():通过结点的name属性，查找对应结点
getElementsByTagName():通过结点名称，查找对应结点
*插入结点的方法
insertBefore()：在某个结点之前插入
appendChild():在末尾添加，剪切黏贴
*删除结点方法
removeChild():通过父节点删除
*替换结点的方法
replaceChild():通过父节点替换
innerHTML属性
*这个属性不是dom的组成部分，但是大多数浏览器都支持的属性
第一个作用:获取文本内容
var span1 = document.getElementById("span1");
alert(span1.innerHTML);
第二个作用:向标签里面设置内容
var div1 = document.getElementById("div1");
div1.innerHTML = "<h1>aaaa</h1>"
表单提交方式
* 使用submit提交
<form>
...
<input type="submit" />
</form>
* 使用button提交表单
- 代码
//实现提交方法
function submit1(){
//获取form
var form1 = document.getElementById("form1");
设置action
form1.action = "https://www.baidu.com";
//提交form表单
form1.submit();
}
* 使用超链接提交
-代码
<a href="https://www.baidu.com?username=1234">使用超链接进行提交</a>
* onclick:鼠标点击事件
onchange:改变内容（一般和select一起使用）
onfocus:得到焦点
onblur:失去焦点
XML
*CDATA区
*可以解决多个字符都需要转义的操作 if(a<b && b<c){}
*把这些内容放到CDATA区里面，不需要转义了
** 写法
<![CDATA[内容]]>
-代码
<![CDATA[ <b>if(a<b && b<c){}</b>]]>
**把特殊字符，当作文本内容，而不是标签
*PI指令（处理指令）
* 可以在xml中设置样式
* 写法：<?xml-stylesheet type="text/css" href="css的路径"?>
* 设置样式，对英文元素起作用，对中文不起作用
*dtd的快速入门
步骤：
（1）看xml中有多少个元素，有几个元素，在dtd文件中写几个<!ELEMENT>
（2）判断元素是简单元素还是复杂元素
- 复杂元素：有子元素的元素
<!ELEMENT 元素名称(子元素)>
- 简单元素：没有子元素
<!ELEMENT 元素名称(#PCDATA)>
（3）需要在xml文件中引入dtd文件
<!DOCTYPE 根元素名称 SYSTEM "dtd文件路径">
**打开xml文件使用浏览器打开的，浏览器只负责校验xml的语法，不负责校验约束
**如果想要校验xml约束，需要使用工具（myeclipse工具）
*dtd的三种引入方式
（1）引入外部的dtd文件
<!DOCTYPE 根元素名称 SYSTEM "dtd路径">
（2）使用内部的dtd文件
<!DOCTYPE 根元素名称 [
<!ELEMENT person (name,age)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
]>
（3）使用外部的dtd文件（网络上的dtd文件）
<!DOCTYPE 根元素 PUBLIC "DTD名称" "DTD文档的URL">
struts2 使用配置文件 使用 外部的dtd文件
*使用dtd定义元素
* 语法：<!ELEMENT 元素名 约束>
* 简单元素：没有子元素的元素
<!ELEMENT name (#PCDATA)
*** (#PCDATA)：约束name是字符串类型
*** EMPTY：元素为空（没有内容）
- <sex></sex>
*** ANY：任意
* 复杂元素:
<!ELEMENT person (name,age,sex,school)>
-子元素只能出现一次
* <!ELEMENT 元素名称 (子元素)>
* 表示子元素出现的次数
+：表示一次或多次
*：表示零次或多次
？：表示零次或一次
, ：逗号表示出现的顺序
|：子元素之间使用|隔开，表明列出的对象中只能出现其中一个
*使用dtd定义元素属性
*语法 <!ATTLIST 元素名称
属性名称 属性类型 属性的约束
>
* 属性类型
-CDATA:字符串
<!ATTLIST birthday
ID1 CDATA #REQUIRED
>
- 枚举：表示只能在一定的范围内出现值，但是只能每次出现其中的一个
** 红绿灯效果
** (aa|bb|cc)
<!ATTLIST age
ID2 (AA|BB|CC) #REQUIRED
>
- ID: 值只能是字母或者下划线开头
<!ELEMENT name (#PCDATA)>
<!ATTLIST name
ID3 ID #REQUIRED
>
*属性的约束
- #REQUIRED:属性必须存在
<!ATTLIST birthday
ID1 CDATA #REQUIRED
>
- #IMPLIED:属性可有可无
- #FIXED：表示一个固定值 #FIXED "AAA"
-属性的值必须是固定的值
<!ATTLIST sex
ID4 CDATA #FIXED "AAA"
>
- 直接值（默认值）
<!ATTLIST school
ID5 CDATA "WWWW"
*实体的定义
*语法：<!ENTITY 实体名称 "实体的值">
*** <!ENTITY TEST "zzy">
***使用实体：<name ID3="A1">&TEST;</name>
** 注意：
定义实体需要写在内部dtd里面，如果写在外部的dtd里面，在某些浏览器下，内容得不到
xml的解析的简介
** xml的解析方式（技术）：dom和sax
** dom解析和sax解析的区别：
* dom方式解析
* 根据xml的层级结构在内存中分配一个树形结构，把xml的标签，属性和文本都封装成对象
* 缺点：如果文件过大，造成内存溢出
* 优点：很方便实现增删改操作
* sax方式解析
* 采用事件驱动，边读边解析
- 从上到下，一行一行的解析
* 缺点：不能实现增删改操作
* 优点：如果文件过大，不会造成内存溢出，方便实现查询操作
