后端：
前端：
理解web工作原理
主机（服务器）-----------------------客户端 终端输入输出，显示，起先：
缺点：1.单一。2.难于维护。3.专一特性难于集成
优点：保密性好
CS----------------------------------BS客户端—服务器模式，有了图形化界面交互。
传统：运算，显示使用，。第二代，强大运算能力。
CS：开发信息共享性好，传输量小。缺点，不已维护，操作界面风格不一致，数据类型不易扩展。等
BS:Browser/Server：浏览器服务器模式，扩大地扩大了企业级应用系统功能覆盖的范围
优化。
Browser================web applicationserver===================database server
Web工作原理：浏览器------http协议------web服务器
组成部分1：网页：网页结构HTML语言，XML使用一种格式对HTML加了一些扩展性的东西。
标记
头部标题 等等
书写文档表现形式的语言是CSS，字体大小，字体颜色，版面布局，背景
网页的行为：JS 使用网页行为语言。
展示网页：
<html>
标题
<!--头部-->
<head>
</head>
<!--身体-->
<body>
</body>
</html>
Gb2312中文字符集 utf-8
理解XHTML语法基础与标记
</p>一个段落利用
<image src = “hello.gif”/>设置属性的话，只需在设定内容最后加一个/。Html htm，如head，body都是一个元素。大部分都不是使用的空标记。
元素：开始标记<p> </p>,有开始就有结束。
元素内容，
空标记<img src=”hello.gif” />空标签，没有中间html内容，即为一个空标记，一般后面要跟一个属性
元素和属性名字必须小写。属性均定义在标签内部
注释<!-- -->
不会出现在浏览器中，注释内容中间不能出现--
文档正文标题
六个级别的正文标题，标题重要性随标签的数字递减
标题以较大粗体显示
段落
引用文本：自己放在中间，左右都有一个空白区域
列表
ul 无序列表<li>
ol 有序列表<li>
dl 自定义列表<dt><dd>可以不写标题
设置样式
预编排文本
<pre>
</pre>
加入图片，绝对路径，相对路径
超链接：跳转<a href="http://www.baidu.com">百度</a>也可以写相对路径
跨字符元素span <p>666<spanstyle="color:red;font-weight:bold">8888</span></p>
锚点：书签
<p id="bigtitle" style="font-weight:bold;font-size:300%">无序列表示例</p>
<a href="#bigtitle">书签</a>
<a herf=”http://www.sample.com/book.XHTML#chapter01>转到第一章</a>
创建文字<label>
判断空标记判断是否自动写出
内嵌样式表<style type=”text/css”>设置所有的样式
P{
Color:blue;//把所有段落变成蓝色
}
如果后面又自己设计样式就会覆盖
创建样式：
Style
内嵌
外联：创建css层叠样式表，不直观
margin-top与上面的间距
表格与表单
表格，定义表格的行和列，先去确定行，再去确定列
用于布局
<table border="1">
<tr>
<td>张小花 </td>
<td>唱歌跳舞</td>
B标签
<Th>标题</th> <th>另一标题</th>
空白单元格：不写
合并单元格：2个属性：colspan和rowspan
表单：在网页上提供一个用户图形界面，以采集和提交用户输入的数据到服务器。
分为2种类型：整体结构，创建输入控件的元素
基本表单结构：使用form标记创建表单
Form标记对内包括表单元素和其他XHMLS的元素
表单格式：
<form action=”表单处理程序的URL”method=”get|post”控件数据如何提交，即采用什么协议传输>
Get将数据与实际的的URL文本附加在一起
Post采用了加密，较为安全
<form action="#"method="get">
<p><input name="radioSex" type="radio"/>男</p>
<p><input name="radioSex" type="radio"/>女</p>
</form>
http://www.example.com/forums.cgi?id=1234&data=guest这种get出的数据一般都是不安全的
accept-charset服务器采用哪种字符集处理表单（utf-8-unicode 字符编码 ISO-8859-1拉丁字母表字符编码gb2312 简体中文）
name和id
fieldset表单内元素分组，排版
lengend元素自定义标题
创建下拉列表 select option
多行输入文本框：textarea,单独定义出来
文本框size:文本长度 maxlength:指输入内容的长度 value:表示文本框的值
密码框
单选按钮：name是否一组 checked选中使用js也可以对其进行判断选中。Value是提交表单的当前按钮提交的标记
复选框：如果放在了lable中，点字即可选中，以上均要设置value
隐藏字段 name checked:是否选中 value
多选下拉列表multiple="multiple" size显示多少行
Option特征属性：selected = “selected”默认选中
Textarea: cols和rows行和列
提交和重置按钮：
Type=”submit”和reset属性为value，提交至action的表单，恢复默认值为reset，全部还原为初始默认值
提交图片”img”,文件：file
设置name和id使用表单提交
A跳其他用锚点name
Label for属性联系
 空格
® 注册符号R
< 左尖括号
&
Label不会换行
视频，flash使用object标记
<objecttype="application/x-shockwave-flash"data="image\1470324850506.gif" width="550"height="50"></object>
<object type=""data="" width="" height="">
<param name="movie" value="flash文件路径">//参数
<paramname=”autostart” value=”true”/>
</object>
想要获取什么信息找到其对应的参数
内嵌网页：用iframe实现框架结构<iframe src="newHtml.html" width="400"height="300" scrolling="no" //是否可以滚动 frameborder="1"//边框></iframe>
Div域布局使用
块级元素（换行），内嵌元素（不换行）
第四章：css基础
层叠样式表：优点，语法，盒模型 Cascading Style Sheets 改变背景自设，排版。使用CSS优点：1.提高网页浏览速度，2.缩短时间，降低维护费用，3.强大的字体控制和排版能力，4.易编写，5.更好控制页面布局，6.实现表现，结构，内容相分离。7.更方便搜索引擎的搜索
使用方法:
1. 外部样式表：不需要style标签<link rel=”stylesheet”样式表 href=””链接/>
样式可以进行叠加可以多次调用
2. 嵌入式样式表：<style type=”text/css”>可以写在body里面，但是格式上来说不能写进去
P{
}
</style>自能自己使用
3.内联样式表仅限于自己使用
一般外联样式表用的最多
样式规则：
P,label（选择器）{
Font-weight:bold；属性:值
}
如果属性值中包含了空格，需要使用双引号引起来
选择器范围非常广，可以是id，name，类型等
理解样式表的层叠：多个层次可以影响多个文章，优先级：由小到大
用户浏览器的设置
外部样式表
嵌入式样式表
内联样式表
创建样式规则
选择器
元素选择器：可以选择元素
元素{属性：值；}
类选择器：每个元素都可以有一个class属性
.类名{属性：值} 可以元素.类名{属性：值}
ID选择器：
#id名{属性：值；} 只能选择一个东西，只能选择一次
包含选择器（后代选择器）如textarea不能再嵌其他组件
h1 a{color:blue;}
通配选择器
所有的*{color:red}优先级最小
伪类选择器
伪类和伪元素是特殊的类和元素，能自动的被支持css浏览器所识别。
伪类区别开不同种类的元素。例如，visited links和active links描述了2个锚点的类型
伪元素指元素的一部分，例如段落的第一个字母 textarea采用伪元素
A:link{color:yellow text-decoration:none} 未访问的链接
A:visited 已访问的链接
A:hover 鼠标覆盖之后的颜色
A:active 激活链接
因为这些均不是a的属性，所以叫伪连接
选择器可以组合起来使用。
另外：a.red:link,对不同的超链接的class设置属性
第一个字变大p:first-letter{font-size:%200;}
程序顺序执行时不考虑优先级
div:域，块级元素，根据放进的东西进行拉伸
熟悉css的属性，理解网页布局
CSS属性单位
1. 长度单位
绝对长度：cm,mm,in英寸,pt点1/72英寸,pc 12点
相对长度：px,em 当前字体中M字母的宽度,ex 当前字体中x字母的高度，指元素尺寸相对于浏览器的系统默认值来相应缩放
常用px和pt
2.颜色单位
使用百分比值来表示，如color:rgb(%50,0,%50)
也可以使用0-255之间的数来表示
可以使用十六进制数组定义颜色如：#ff6600,#ffffff,#000000
简化的十六进制定义颜色#080
直接使用名字
3.URL地址p{background-image:url(“”或单引号)}
4.字体属性：
Font 一次性设置字体多个属性，一个是没有效果的，具体可以设置规定文本的字体、字体尺寸、字体颜色
Font-style 文本是斜体还是正常的一个样式 斜体。。。
Font-variant 规定字体异体 比如英文设置成大写small-caps
Font-weight 字体加粗inherit
Font-size 设置字体的尺寸
Line-height 行高，每行有多高，letter-spacing字间距
Font-family 字体类型
常用
5.文本属性
Line-height行高
Letter-spacing字间距
Text-aligin:位置
Text-decoration:下划线
text-transform: uppercase;控制元素的字母
vertical-align: sub;设置元素的垂直对齐方式，按列对齐的方式即
6.颜色与背景属性：
Color
Background-color
Background-image
Background-repeat如何铺排,设置重复repeat-x横向复制
Background-attachment:scroll/fix随对象内容滚动还是固定
Background-position：设置图片的位置
Background:设置以上属性
Css盒模型
盒模型是将所有元素放在一个正方形或者矩形的盒子中，这个盒子可以用多个可设置的属性来分层
可控制三个不同的分层属性
Margin:设置四个外边距，不常用，设置顺序上，右，下，左
Padding：元素与元素之间的属性
Border:边线
Margin：margin-bottom下
Padding:
border
border-color: transparent;边框透明
border-style:
double, dashed , dotted ,hidden, inherit，solid继承
position,top,bottom,left,right,z-index
position:static按规则正常定位。Relative定在前一个的原始位置的尾端位置，absolute定位在框架的左上角位置，默认static
CSS定位属性，使用width和height控制宽高，clip和
Top和left表示与父的或是相对位置调整元素与其之间的位置，一般加上relative
z-index几个元素可能会重叠在一起，值越大表示放到越前面。
宽度和裁剪：clip overflow指定时必须为absolute
Clip:rect(10px,80px,0px,10px),一般用于裁剪图片 overflow：如果超出了这个范围怎么办
用的比较少
显示属性：display 元素会移除去 visibility，也有一个hidden，元素还在原来的地方
列表属性：list-style,list-style-image,list-style-position,list-style-type
鼠标属性：cursor
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}
表格布局 框架布局 CSS布局
Float:left float:right;
首先要确定大的
JavaScript核心基础语法
概念和作用
如何使用
体系架构
变量 整数和小数都是number
数据类型
函数
什么是
一种嵌入在网页的程序段，解释型语言，只能在浏览器中解释运行，Netscape发明，ECMA将其标准化，与java无关，出于安全考虑，有一些限制，增强客户端的交互能力。
组成：
EcmaScript规范 bom dom
ECMAScript核心：基础语言
DOM(文档对象模型)：规定了访问HTML和XML的接口
BOM(浏览器对象模型):提供了独立于内容而在浏览器窗口之间进行交互的对象和方法
JS与Java的区别：
JS只在浏览器上执行，java可在各种平台上执行
JS也有变量，常量，运算符，关键字，数据类型，语句等
借用Java的语法，运算符和表达式与Java相似。
作用：
增，删，改网页上的属性和元素
在HTML网页中动态写入文本
响应网页中的事件，并作出相应的处理
检验客户端提交的数据
检测浏览器类型和版本
处理Cookie：用户信息
技术体系：
核心语言的定义ECMA
原生对象和内置对象：有JS语言原生对象，还有自带的，等等
BOM浏览器对象模型
DOM文档对象模型
事件处理模型
如何使用：
1. 在Html中直接嵌入JavaScript脚本
2. 在Html中外联一个文件
3. 直接编写在事件中
内嵌式：<script type=”text/javascript”>
</script>
alert("66666666");输出
外联<script type=”text/javascript” src=”.js”></script>
优点，结构表现分离，缺点，不支持动态
事件处理程序和伪装
<input type="button" value="测试"οnclick="alert('测试')" />
伪url :<ahref="javascript:alert('测试');">超链接</a>
弱类型语言，不一定要初始化
定义使用var来定义，如：
Var
Var title=”hello”,cost=10000,
不一定初始化
保留关键字：
Break,for,double,import,public,else,new,try,if,in,while,typeof,void,var
数据类型：原始类型和引用类型
Undefined未初始化或无返回结果最后结果
Null：null派生出来，表示不存在对象
Boolean
Number：即可表示32位整数，又可以表示64位浮点数
Number.MAX定义上下限
Number可以看是否为无穷或者，isNA
String判断类型，String内部为单引号，都可声明
Typeof运算符
对变量使用得到他的返回类型null为object
示例：
Alert(typeof x),未声明的为undefind
数据类型转换
parseInt转换
不能转换返回NaN
强制类型转换：
Boolean(value) Number(value) String(value)
引用数据类型：原生对象JS提供，独立于浏览器对象Object,Array,String,Date,RegExp
内置对象：一种原生对象：Glabal全部，有各式各样的方法，math
宿主对象：与浏览器有关的对象。BOM,DOM
自定义对象：
原生对象：Object所有类的父类
Var x = new Object()
属性：constructor：指向创建函数的引用
Prototype：对该对象的对象的引用，返回Object类的一个实例
方法：
hasOwnproperty(“”)判断对象是否有指定属性
isprototypeof(object):判断对象是否为另一个对象的原型
var re = new Object()
Object.prototype.isPrototypeOf(re)
propertyIsenumerable(“property”)判断指定属性是否可以用for….in语句枚举
toString 返回对象原始字符串
valueOf：返回最适合该对象的原始值
包装器类
Boolean String Number
数组：var a = new Array();定义一个数组，长度不固定，开始为0
Push();定义后push join（“d”）在每个元素后加入d（最后一个除外）
原生对象– Date
//创建日期对象，保存当前时间。
var d = new Date();
//参数为1970/1/1到今的毫秒数。
var e = new Date(10);
//转换为1970/1/1至今的毫秒数
Date.parse("May 25, 2004“);
//转换为1970/1/1至今的毫秒数
Var x = new Date(Date.UTC(2003, 12,10));
//获得日期的年、月、日
alert(date.getYear()+" "+date.getMonth()+" "+date.getDate());
内置对象– Global
isNaN()是不是数字
isFinite()是不是无穷大
parseInt()
parseFloat()
//将URL中允许的字符编码,解码，如空格，汉字
encodeURI(),decodeURI()
//将特殊字符进行编码解码：如斜杠，问号等。
encodeURIComponent(),decodeURIComponent()
//解释执行一段字符串
eval(); eval(“alert(‘abc’)”); == alert(‘abc’);
Var x=eval(“2+3”) x=5
instanceof运算符
用于对象类型的比较
var s = new String("helloworld");
var b = s instanceof String;
alert(b); //输出true
function 函数名(参数1,参数2,……){
函数体
}
函数的返回值不需要声明
函数用return进行返回
如果函数没有明确的返回值，则返回值为undefined
document.write输出
浏览器对象模型BOM：
u BOM介绍
BOM是浏览器对象模型。
仅是 JavaScript实现的一部份，没有相关标准。
//BOM 能做什么？
操作浏览器窗口
提供导航对象
提供定位对象
提供跟屏幕相关对象
提供对cookie的支持
Window窗口：
打开浏览器后马上创建window对象，代表整个窗口。
window对象的作用:
操作窗口
导航和打开新窗口
系统对话框
状态栏
时间间隔和暂停
历史
1. 操作窗口
moveBy(dx,dy) : 移动指定的距离
moveTo(x,y) : 移动到指定位置
resizeBy(dx,dy) : 修改窗口的高宽
resizeTo(x,y) : 修改高宽为指定值
[IE]screenLeft,screenTop : 取得窗口距屏幕位置
[IE]document.body.offsetWidth/Height : 客户区高宽
[Mozila]screenX/screenY : 窗口位置
[Mozila]innerWidth/innerHeight : 客户区高宽
[Mozila]outerWidth/outerHeight : 窗口高宽
2.在新窗口打开链接
//parm1：要打开的url
//parm2: 子窗口名字
//parm3:left,top,width,height,toolbar,resizeable,status,location...见p64
//返回新窗口的window对象
window.open("url","新窗口名字","新窗口特性");
//关闭窗口，如果是主窗口会有提示
window.close();
//子窗口中可以取得父窗口对象，利用这个对象，可进行父子窗口传值。
top.opener
提示：新窗口可能被栏截
3.系统对话框
window.alert("字符串");
window.confirm("选择是或否");
是返回true
否返回false
window.prompt("提示信息","默认值");
OK返回输入的字符串
取消返回null
对话框的样式不可更改
对话框是模式窗口
4. 状态栏
window.defaultStatus = "默认在状态栏显示内容"
window.status = "状态栏内容";
注意：不要过度使用状态栏。
5. 时间间隔和暂停
var id=window.setTimeout("执行代码",毫秒数);
window.clearTimeout(id)
var id=window.setInterval("执行代码",毫秒数);
window.clearInterval(id);
6. 访问历史页面
window.history.go(-1);
参数是返回的页面数，正数为前进
window.history.back();
后退
window.history.forward();
前进
window.history.length;
返回历史页面的个数
7.document对象
document代表窗口的空白区域。
document是window的属性
DOM和BOM均定义了doucment。
属性
lastModify : 页面的最后修改日期
referrer : 浏览历史中的前一个URL
title : 标题栏
URL : 当前页面的URL。
集合属性
anchors : 页面中所有锚点的集合
applets : 页面中所有applet的集合
embeds : 页面中所有嵌入式对象集合（<embed/>）
forms : 表单集合
images : 图片集合。
document.images[0]
document.images["imageName"]
links : 超链接集合
方法：
write("")
writeln("");
var inputText =document.getElementById(“myPwd”)
在使用这两个方法时，要注意整个页面的元素会重新设置，所以不要轻易使用
8.location对象
location表示载入窗口的URL
解析URL
Host: URL中的主机名称
pathname : URL中主机名后的部份
prot : 端口
protocol : 协议
search : URL中问号后面的部份
跳转到新页面
location.href = "a.html"
location.assign("a.html");
location.replace(“a.html”);//替换没有历史信息
刷新页面location.reload(boolean);
true : 从服务器刷新
false : 本地刷新
9. navigator对象
保存跟浏览器相关信息
language
userAgent
onLine
各个浏览器实现不一致，见P74
10. screen对象
跟屏幕相关属性
availHeight : 窗口可以使用的高度
availWidth : 窗口可以使用的宽度
colorDepth : 颜色位数
height : 屏幕高度
width : 屏幕宽度
//全屏
window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);
文档对象模型：DOM操纵样式表
1. DOM简介
文档对象模型
2. DOM原理是将XML/XHTML文档装入内容，并以节点的形式解析为一颗节点数。
3. DOM提供相应的API，可以对节点树进行增删改查。
4. 利用DOM可让JavaScript对网页中的元素进行控制，实现动态网页的功能
对DOM的兼容情况：标记就是DOM,文档
节点树例子：<input….. <label……
节点类型：document节点，代表整个文章
DocType节点：DTD样式
DocumentFragment:片段节点
Element:元素节点
Text文本节点
Attr:属性节点
CDataSection：CData类型的文本节点
Comment：注释节点
节点属性：
nodeName节点
value：按钮中属性
nodeValue：节点值
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值
nodeType节点类型，返回1表示元素，2表示文本
nodeType 属性
nodeType 属性规定节点的类型。
nodeType 是只读的。
最重要的节点类型是：
| 元素类型 | 节点类型 |
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
document.documentElement：返回节点
owerd节点所属的文档
firstChild,lastChild
NodeList:节点集合
childNodes.item().nodeName//item()通过下标取到任意键
myBody.attributes[0]以键值对的形式存起来所有属性length 还可以removeNameItem(“”)根据名字删除属性。
访问元素节点：
获取元素属性的3种方法
getElementById("myId");获得节点
getElementByTagName(name)返回指定元素的称的元素节点集合，可以使用*所有，但IE不支持
getElementByName(name)按name属性值获取元素节点集合
innerHTML，innerText可使用获取内容，前者只是完全按字符串来获取内容，后者会去掉，一般使用HTML,可以直接让它等于一个值，一般用中间值接住，再使用+替换掉
也可以加标签
如何获取表单的值
文本框
Value
单选按钮
通过byName得到单选框
再循环如果checked，就接
复选框
下拉框
通过selected=true设为选中
Visibility hidden visible
Display:隐藏，以块级元素显示，默认非块级
Display不会保留显示block noneinline
回顾：innerHTML
访问元素节点
Dom
DOM节点树
操作页面元素，增删替换克隆
设置元素属性
操作元素节点
操作元素style样式表。
常见事件
Click
Dbclick
Mousedown
Mouseout
Mouseup
Mousemove 移动一次触发一次
页面上所有元素均支持鼠标事件
发生顺序
单击：Mousedown Mouseup Click
双击：Mousedown Mouseup Click Mousedown Mouseup Click Doubleclick
获取元素属性
GetAttribute(attName)获取属性
setAttribute(attName,value)设置属性
没有就是空，返回style只会找内联
节点的增删替换
createElement(元素标签)：创建一个新的元素
createTextNode(text):创建一个文本节点
appendChild(node):添加元素节点到子节点中
removechild(node):从childNode中删除节点
replaceChild(newnode,oldnode):替换节点
clonenode(node)克隆节点，包括属性，最好将id也克隆下来里面有一个布尔值，如果为true，则子节点椰壳龙；
操作元素style属性
每个css样式，style对象都包含了一个名称类似的属性。
一个单词的样式通常名称相同
两个单词的样式通常改为驼峰命名法。
只需要对style的相应属性赋值，就可以操纵其样式。
div1.style.border = "1px solidblack "
Style对象提供cssText描述样式表属性
操作外部样式表中的样式
style对象无法得到外部样式表的样式。
document.styleSheets得到所有样式表的集合。
DOM为样式表指定了一个称为cssRules的集合。
IE有一个名称为rules的集合。
//获取并操作外部样式表
var cssRules =
document.styleSheets[0].cssRules || document.styleSheets[0].rules;
alert(cssRules[0].style.color);
//修改外部样式表
cssRules[1].style.backgroundColor ="red";
js操作table样式表
rows：表格所有<tr>节点集合
deleteRows(pos)删除指定位置的<tr>节点
inserRow(pos):插入
cells:tr节点中所有<td>集合
deleteCell（pos）:删除指定位置上的td节点
insertCell(pos)指定位置插入一个td节点
class属性例外，它为关键字，应换成className
navigator.appName:浏览器名字
navigator.appVersion版本号
对form元素进行脚本编写
对文本框进行脚本编写
对列表框和组合框进行脚本编写
对复选框和单选框进行脚本编写
对表单进行验证
表单编程：
Settimeout指定时间，调用代码，执行一次
setInterval周期性调用代码，直到窗口被关闭或调用clearInterval
对form元素进行脚本编写
获取表单元素
var frm =document.getElementById("form1");//dom
var frm = document.forms[0]; //bom
var frm = document.forms[“form1”];//对IE是通过name值获得，对firefox是通过ID获得
var frm=document.表单名
提交submit
访问表单域（字段）
—var frm = document.getElementById("form1");//dom
var field1 = frm.elements[0]; //第一个表单域，可用于遍历表单域
var field1 =frm.elements["name"];//得到名为name的表单域
var field1 = frm.name;//直接用名称得到表单域,要把id和name都加上去
var field1 = frm[“my name”];//得到name值有空格的表单域
var field1 = frm[0];//得到第几个表单元素
表单提交
<input type="submit" value="submit">//提交按钮
<input type="image"src="submit.gif">//提交图片
doucment.forms["form1"].submit();//使用js提交
提交表单时，会触发表单的submit事件，在onsubmit中返回false可以阻止表单提交。
使用submit()方法提交表单，不会触发submit事件。
这里在注册时填不对时不会提交
表单重置
<input type="reset"value="reset"> //重置按钮
表单重置时，会触发表单的reset事件，在onreset中返回false可以阻止表单重置。
使用reset()方法提交表单，但仍会触发reset事件。
非隐藏表单字段的共有属性和方法
disabled:是否可用，当设置为不可用时，表单的值不会随表单提交
readOnly:只读。当设置之后，表单的内容不可改变，表单的值会随表单提交。只能用于文本框
form:得到表单
blur():使表单域失去焦点。
focus():使表单得到焦点。
blur事件：失去焦点时触发，并调用onblur()函数。
focus事件：得到焦点时触发，并调用onfocus()函数。
对文本框进行脚本编写
单行文本框text和多行文本框textarea
value属性得到或设置文本内容。
value.length可以得到文本长度。
选择文本框
select()：选择文本内容。
文本框事件
blur,focus事件
change事件:用户改变文本框的值，并失去焦点后触发。注意和blur事件的区别
select事件：文本被选中，或select()被调用时触发。
实现自动选择文本
onfocus = "this.select();"
对列表框和组合框进行脚本编写
访问选项
listbox.options[0].firstChild.nodeValue;//取得选项文本
listbox.options[0].getAttribute("value");//取得选项值，设置的value值
listbox.options[0].text;//获得文本
listbox.options[0].value;//获得值
listbox.options.length;//获取选项数量
listbox.selected; //选项是否被选中
listbox. selectedIndex;
获得选择的序号，未选返回-1
multiple=multiple设为多选时，获得第1个。
对复选框和单选框进行脚本编写
checked属性:是否被选中
defaultChecked属性：默认是否被选中
click():模仿点击，会触发click事件，改变选择状态。
对于复选框，可以进行进行遍历操作。
表单验证
一个常用的功能，能有效降低服务器负担。
捕获错误的时机
错误发生前
keyPress事件
错误发生时
change事件
错误发生后
submit事件
表单验证最佳实践
提示应对用户有帮助
不要使用alert()
长度验证用maxLength比用js验证更好
一次显示所有错误
早点捕获错误
拿不准校验规则，不需太严格
正则表达式：
New regexp（表达式）
Var reg=/\d/;
\w任何单字字符，等价于a-zA-Z0-9
\W任何非单字字符
\s任何空白\t\n\r\f\v
\S任何非空白符
\d任何数字[0-9]
\D除数字外任何字符
/[a-z]/
JQuery
jQuery 是一个 JavaScript 库（兼容多浏览器）
jQuery 极大地简化了 JavaScript 编程。
write less,do more
jQuery 很容易学习。
辅助JavaScript开发的库
JQuery和DOM对象的区别
DOM:使用传统方法
JQuery：使用类库选择器获取对象
JQuery包装DOM产生JQuery对象
JQuery不能使用DOM的方法。
$( “#div” ).attr(“name”);=document.getelementbyid(“div”).getAttribute(“Name”);
转化：var divjobj=$(divjobj)
转DOM:1.var v=v[0];
2. var v=v.get(0);
选择器：id选择器：$(“#myP”).hide();
元素选择器：$(“label”).hide();
类选择器：$(“.hideelement”).hide();
通配选择器:$(“*”);
组合选择器：$(“myP,.hideelement”);
包含选择器：$(“p span”);
子元素选择器$(“dl>dt”);只能筛选前面节点的子节点，不能再选出下面节点
$(document).ready(init());
$(document).ready(fuction());
操作属性：.attr
.removeAttr(“name”)
.css();
addClass(“class”)
.removeclass(“class”)
.html();
.text();
.val();获取当前的value值
Show
Hide
Fadein
Fadeout
JQ动态绑定事件
Click();
Dblclick()
Mousedown()
Mouseenter()
Mousemove()
Mouseout()
Jq轻量级框架
Html各类标签
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
