后端:
前端:
理解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各类标签