第一章:JavaScript基础
1.组成
1.ECMAScript
2.BOM
3.DOM
2.在网页中引用JavaScript的方式
1.内部JavaScript文件
2.使用外部JavaScript文件
3.直接在HTML标签中
3.JvaScript核心语法
1.变量的声明和赋值
语法：
var 合法的变量名
2.数据类型
undefined(未定义类型)
null(空类型)
number(数值类型)
String(字符串类型)
boolean(布尔类型)
3.typeof
typeof运算符来判断一个值或变量究竟属于那种数据类型
语法:
typeof(变量或值)
4.String对象常用方法
String对象常用方法
方法 描述
indexOf(str,index) 查找首次出现的位置
chatAt(index) 返回在指定位置的字符
toLowerCase() 把字符串转化为小写
toUpperCase() 把字符串转化为大写
substring(index1,index2) 截取
split(str) 分割
5.数组
数组的下标从0开始
数组也需要先创建,赋值,再访问数组元素
1.创建数组
语法:
var 数组名称 = new Array(size)
2.为数组元素赋值
语法:
var 数组名称 = new Array(值)
语法:
var 数组名称 = [值]
3.数组的常用属性和方法
数组的常用属性和方法
名称 描述
length 设置或返回数组中元素的数目
join() 把数组的所有元素放入一个字符串,通过一个分隔符进行分割
sort() 对数组排序
push() 向数组末尾添加一个或多个元素,并返回新的长度
6.逻辑运算符
语法:
for(变量 in 对象){
//JavaScript语句
}
7.常用的输入/输出
1.警告(alert)
语法：
alert("提示信息")
2.提示(prompt)
语法:
prompt("提示信息","输入框的默认信息")
4.常用语法-函数
1.常用系统函数
1.parseInt()(返回一个整数)
语法:
parseInt(“字符串”)
2.parseFloat()(返回一个整数)
语法:
parseFloat("字符串")
3.isNaN()(检查其参数是否是非数字)
语法:
isNaN(x)
2.自定义函数
语法:
function 函数名(参数1,参数2,参数3){
//JavaScript语句
}
3.调用函数
语法:
事件名 = "函数名()"
5.常见的事件
常见的事件
名称 说明
onload 一个页面或一副图像完成加载
onlick 鼠标单机某个对象
onmouseover 鼠标指导移到某元素上
onkeydown 某个键盘键被按下
onchange 域的内容被改变
第二章：JavaScript操作BOM对象
1.window对象
window对象是整个BOM的核心
1.常用的属性
window对象的常用属性
名称 说明
history 有关客户访问过的URL的信息
location 有关当前URL的信息
screen 只读属性,包含有关客户端显示屏幕的信息
2.常用的方法
window对象的常用方法
名称 说明
prompt() 显示可提示用户输入的对话框
alert() 警告对话框
confirm() 显示一个带有提示信息,"确定"和"取消"按钮的对话框
close() 关闭浏览器窗口
open() 打开一个新的浏览器窗口,加载给定URL所指定的文档
setTimeout() 在指定的毫秒数后调用函数或计算表达式
setInterval() 按照指定的周期(以毫秒计)来调用函数或表达式
3.窗口的特征属性
窗口的特征属性
名称 说明
height,width 窗口文档显示区的高度,宽度,以像素计
left,top 窗口的x坐标,y坐标,以像素计
toolbar=yes|1|0 是否显示浏览器的工具栏,默认是yes
scrollbars=yes|no|1|0 是否显示滚动条,默认是yes
location=yes|no|1|0 是否显示地址栏,默认是yes
status=yes|no|1|0 是否显示状态栏,默认是yes
menubar=yes|no|1|0 是否显示菜单栏,默认是yes
resizable=yes|no|1|0 窗口是否可调节尺寸,默认是yes
titlebar=yes|no|1|0 是否显示标题栏,默认是yes
fullscreen=yes|no|1|0 是否使用全屏显示浏览器,默认是yes
2.history对象与location对象
1.history对象
history对象的方法
名称 描述
back() 加载history对象列表中的前一个URL
forward() 加载history对象列表中的后一个URL
go() 加载history对象列表中的某个具体的URL
2.location对象
location对象的属性和方法
名称 描述
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
reload() 重新加载当前文档
replace() 用新的文档替换当前文档
3.document对象
document对象的常用属性
属性 描述
referrer 返回载入当前文档的URL
URL 返回当前文档的URL
document对象的常用方法
方法 描述
getElementById() 返回对拥有指定id的第一个对象的引用
getElementsByName() 返回带有指定名称的对象的集合
getElementsByTagName() 返回带有指定标签名的对象的集合
write() 向文档写文本,HTML表达式或JavaScript代码
4.JavaScript内置对象
1.Date对象
语法:
var 日期实例 = new Date(参数)
Date对象的常用方法
方法 说明
getDate() 返回Date对象的一个月中的每一天
getDay() 返回Date对象的星期中的每一天
getHours() 返回Date对象的小时数
getMinutes() 返回Date对象的分钟数
getSeconds() 返回Date对象的秒数
getMonth() 返回Date对象的月份
getFullYear() 返回Date对象的年份
getTime() 返回自某一时刻(1970年1月1日)以来的毫秒数
5.Math对象
Math对象的常用方法
方法 说明
ceil() 对数进行上舍入
floor() 对数进行下舍入
round() 把数四舍五入为最接近的数
random() 返回0-1中的随机数
6.定时函数
1.常用定时函数
1.setTimeout()
语法:
setTimeout(“调用的函数名称”,等待的毫秒数)
2.setInterval()
语法:
setInterval("调用的函数名称",周期性调用函数之间间隔的毫秒数)
2.cleatTimeout()和clearInterval()
1.cleatTimeout()
语法:
cleatTimeout(setTimeout()返回的ID值)
2.clearInterval()
语法:
clearInterval(setInterval()返回的ID值)
第三章：JavaScript操作DOM对象
1.节点
节点属性
属性名称 描述
parentNode 父节点
childNodes 节点集合
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
2.IE浏览器中节点
节点属性
属性名称 描述
firstElementChild 第一个子节点
lastElementChild 最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
3.节点信息
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
节点类型
节点类型 NodeType值
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
4.操作节点
1.操作节点的属性
getAttribute(“属性名”);用来获取属性的值
setAttribute(“属性名”,“属性值”);用来设置属性的值
2.创建和插入节点
创建节点
名称 描述
createElement(tagName) 创建一个新标签的新元素节点
A.appendChild(B) 把B节点追加至A节点的末尾
insertBefore(A,B) 把A节点插入B节点之前
cloneNode(deep) 复制某个指定的节点
注意:
cloneNode(deep)中的参数deep为布尔值,若deep值为true,则复制该节点及该节点的所有子节点,
若deep值为false,则只复制该节点和其属性
3.删除和替换节点
删除和替换节点的方法
名称 描述
removeChild(node) 删除指定的节点
replaceChild(newNode,oldNode) 用其他的节点替换指定的节点
4.操作节点样式
1.style属性
语法:
HTML元素.style.样式属性="值";
style对象的常用属性
属性 描述
backgroundColor 背景颜色
backgroundImage 背景图像
backgroundRepeat 设置是否及如何重复背景图像
fontSize 字体大小
fontWeight 字体的粗细
textAlign 排列文本
textDecoration 文本的修饰
font 设置同一行字体的属性
color 文本的颜色
padding 设置元素的填充
padding(Top,Buttom 设置元素的上,下,左,右填充边距
Left,Right)
border 设置四个边框的属性
border(Top,Buttom 设置元素的上,下,左,右边框的属性
Left,Right)
常用事件
名称 描述
onclick 单击事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
2.className属性
在HTML DOM中,className属性可设置或返回元素的class样式
语法:
HTML元素.className="样式名称"
3.获取元素的样式
语法:
HTML元素.style.样式属性
4.获取样式属性的值
语法:
HTML元素.currentStyle.样式属性
IE浏览器语法:
document.defaultView.getComputedStyle(元素,null).属性
例如:
function clos(){
document.getElementById(“close”).style.display=“none”;
document.getElementById(“float”).style.display=“none”;
}
var closeTop;
var closeLeft;
var floatTop;
var floatLeft;
var closeObject;
var floatObject;
function inix(){
closeObject=document.getElementById(“close”);
floatObject=document.getElementById(“float”);
//判断是IE浏览器
if(closeObject.currentStyle){
closeTop=parseInt(closeObject.currentStyle.top);
closeLeft=parseInt(closeObject.currentStyle.left);
floatTop=parseInt(floatObject.currentStyle.top);
floatLeft=parseInt(floatObject.currentStyle.left);
//或者非IE浏览器
}else{
closeTop=parseInt(document.defaultView.getComputedStyle(closeObject,null).top);
closeLeft=parseInt(document.defaultView.getComputedStyle(closeLeft,null).left);
floatTop=parseInt(document.defaultView.getComputedStyle(floatObject,null).top);
floatLeft=parseInt(document.defaultView.getComputedStyle(floatObject,null).left);
}
}
function move(){
var closeScrollTop=parseInt(document.documentElement.scrollTop || document.body.scrollTop);
var closeScrollLeft=parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
var floatScrollTop=parseInt(document.documentElement.scrollTop || document.body.scrollTop);
var floatScrollLeft=parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
closeObject.style.top=closeTop+closeScrollTop+“px”;
closeObject.style.Left=closeLeft+closeScrollLeft+“px”;
floatObject.style.top=floatTop+floatScrollTop+“px”;
floatObject.style.Left=floatLeft+floatScrollLeft+“px”;
}
window.inix;
window.οnscrοll=move;
5.获取元素位置
HTML中元素的属性
属性 描述
offsetLeft 返回当前元素左边界到它上级元素的左边界的距离,只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离,只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器,即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
第四章：JavaScript对象及初始面向对象
1.对象
1.创建对象
* 自定义对象
* 内置对象
1.自定义对象
语法:
var 对象名称 = new Object();
2.构造函数和原型对象
1.构造函数
使用构造函数创建新对象四个步骤:
* 1.创建一个新对象
* 2.将构造函数的作用域赋给新对象(this就指向了这个新对象)
* 3.执行构造函数中的代码
* 4.返回新对象
2.原型对象
在JavaScript中创建的每个函数多有一个prototype属性,这个属性是一个指针,指向一个对象
例如:
function Flower(){
}
Flower.prototype.name="值"
注意:name是随便起的名字(属性)
创建了自定义的构造函数之后,其原型对象默认会取得constructor属性,这个属性包含一个指向prototype属性所在函数的指针
3.继承
1.原型链
2.对象继承
1.借用构造函数
语法:
apply([thisOjb[,arhArray]])
应用某一个对象的一个方法,用另一个对象替换当前对象
call(thisObj[,arg1[,arg2[, [,argN]]]]])
2.组合继承
指的是将原型链和借用构造函数的技术组合到一块
第五章：初始jQuery
1.jQuery只是JavaScript的程序库,相当于JavaScript技术的一个子集
2.jQuery语法结构
语法:
$(selector).action();
1.工厂函数$()
2.选择器selector
3.acton()方法(click(),mousever()和mouseout等)
3.addClass()方法
语法:
jQuery对象.addClass([样式名])
其中样式名可以是一个,也可以是多个,多个样式名需要用空格隔开
4.css()方法
语法:
css(“属性”,“属性值”)//设置一个css属性
css({“属性1”:“属性值1”,“属性2”:“属性值2”…})//同时设置多个css属性
5.css()方法和addClass()方法的区别:
addClass()方法向所匹配的元素添加一个或多个类,该方法不会删除已经存在的类,
仅在原有基础上追加新的类样式
6.显示和隐藏
1.显示
$(selector).show()
2.隐藏
$(selector).hide()
7.jQuery对象与DOM对象的相互转换
1.jQuery对象转换成DOM对象
1.可以通过[index]的方法得到相应的DOM对象
var $txtName = $("#txtName") //jQuery对象
var txtName = $txtName[0] //DOM对象
alert(txtName.checked); //检测到这个checkedbox是否被选中
2.通过get(index)方法
var $txtName = $("#txtName") //jQuery对象
var txtName = $txtName.get(0) //DOM对象
alert(txtName.checked); //检测到这个checkedbox是否被选中
2.DOM对象转换成jQuery对象
var txtName = document.getElementById("txtName") //DOM对象
var $txtName = $(txtName) //jQuery对象
第六章：jQuery选择器
1.基本选择器
基本选择器的详细说明
名称 示列
标签选择器 $("h2")选取所有h2元素
类选择器 $(".title")选取所有以class为title的元素
id选择器 $("#title")选取以id为title的元素
并集选择器 $("div,p,.title")选取所有以div,p和class为title的元素
全局选择器 $("*")选取所有元素
2.层次选择器
层次选择器的详细说明
名称 示列
后代选择器 $("#menu span")选取#menu下所有的<span>元素
子选择器 $("#menu>span")选取#menu下的子元素<span>
相邻元素选择器 $("h2+dl")选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器 $("h2~dl")选取<h2>元素之后所有的同辈元素<dl>
3.属性选择器
属性选择器的详细说明
示列
$("[href]")选取含有href属性的元素
$("[href='#']")选取href属性值为"#"的元素
$("[href!='#']")选取href属性值不为"#"的元素
$("[href^='en']")选取href属性值以en开头的元素
$("[href$='.jpg']")选取href属性值以.jpg结尾的元素
$("[href*='txt']")选取href属性值中含有txt的元素
4.基本过滤选择器
基本过滤选择器的详细说明
语法 描述 示列
:first 选取第一个元素 $("li:first")选取所有<li>元素中的第一个<li>元素
:last 选取最后一个元素 $("li:last")选取所有<li>元素中的最后一个<li>元素
:not(se) 选取去除所有与给定选择器匹配的元素 $("li:not(.three)")选取class不是three的元素
:even 选取索引为偶数的所有元素 $("li:even")选取<li>中为偶数的所有<li>元素
:odd 选取索引为奇数的所有元素 $("li:even")选取<li>中为奇数的所有<li>元素
:eq(index) 选取索引等于index的元素(index从0开始) $("li:eq(1)")选取索引等于1的<li>元素
:gt(index) 选取索引大于index的元素(index从0开始) $("li:gt(1)")选取索引大于1的<li>元素(大于1,不包括1)
:lt(index) 选取索引小于index的元素(index从0开始) $("li:lt(1)")选取索引小于1的<li>元素(小于1,不包括1)
:header 选取所有标题元素,如h1-h6 $(":header")选取网页中的所有标题元素
:focus 选取当前获取焦点的元素 $(":focus")选取当前获取焦点的元素
:animated 选取所有动画元素 $(":animated")选取当前所有动画元素
5.可见性过滤选择器
可见性过滤选择器的详细说明
选择器 描述 示列
:visible 选取所有可见的元素 $(":visible")选取所有可见的元素
:hidden 选取所有隐藏的元素 $(":hidden")选取所有隐藏的元素
6.jQuery选择器的注意事项
示列:
错误代码:
$("#id#a")
$("#id[2]")
正确代码:
$("#id\\#a")
$("#id\\[2\\]")
第七章：jQuery中的事件与动画
1.基础事件
语法:
事件名=“函数名()”
或者
DOM对象.事件名=函数
2.鼠标事件
常用鼠标事件的方法
方法 执行时机
click() 鼠标单击时
mouseover() 鼠标指针移过时
mouseout() 鼠标指针移出时
mouseenter() 鼠标指针进入时
mouseleave() 鼠标指针离开时
3.键盘事件
常用键盘事件的方法
方法 执行时机
keydown() 按下按键时
keyup() 释放按键时
keypress() 产生可打印的字符时
4.浏览器事件
语法:
$(selector).resize()
5.绑定和移除事件
1.绑定事件
语法:
bind(type,[data],fn)
参数类型
type: 事件类型
[data]: 可选参数,event.data属性值传递给事件对象的额外数据对象,该参数不是必需的
fn: 处理函数,用来绑定处理函数
2.移除事件
语法:
unbind([type],[fn])
参数类型
[type]: 事件类型
[fn]: 处理函数,用来解除绑定的处理函数
6.复合事件
1.hover()方法
hover()方法用于模拟鼠标指针移入和移出事件
语法:
hover(enter,leave)
当鼠标指针移至元素上时,会触发指定的第一个函数(enter),
当鼠标指针移出元素上时,会触发指定的第一个函数(leave)
2.toggle()方法
toggle()分为带参数的方法和不带参数的方法,带参数的方法用于模拟鼠标连续click事件,第一次单击元素,触发第一个函数,以此类推
语法:
toggle(fn1,fn2,...fnN)
toggle()不带参数时,与show()和hide()方法的作用一样,切换元素的可见状态
语法:
toggle()
3.toggleClass()方法
语法:
toggleClass(className)
toggleClass()可以对样式进行切换
7.控制元素显示与隐藏
1.控制元素显示
语法:
$(selector).show([speed],[callback])
show()的参数说明
参数
speed: 可选,规定元素从隐藏到完全可见的速度,默认为"0"
callback: 可选,show函数执行完之后,要执行的函数
1.控制元素隐藏
语法:
$(selector).hide([speed],[callback])
hide()的参数说明
参数
speed: 可选,规定元素从可见到完全隐藏的速度,默认为"0"
callback: 可选,show函数执行完之后,要执行的函数
8.改变元素透明度
1.控制元素淡入
fadeIn()方法控制元素淡入,它和show()方法相同,可以定义元素淡入时的效果
语法:
$(selector).fadeIn([speed],[callback])
fadeIn()的参数说明
参数
speed: 可选,规定元素从隐藏到完全可见的速度,默认为"0"
callback: 可选,fadeIn函数执行完之后,要执行的函数
2.控制元素淡出
fadeOut()方法控制元素淡入,它和hide()方法相同,可以定义元素淡出时的效果
语法:
$(selector).fadeOut([speed],[callback])
fadeOut()的参数说明
参数
speed: 可选,规定元素从可见到完全隐藏的速度,默认为"0"
callback: 可选,fadeOut函数执行完之后,要执行的函数
3.控制元素淡入淡出效果的不透明度
语法:
$(selector).fadeTo([speed],opacity,[callback])
第一个参数为所用的秒数,第二个参数为透明度,第三个参数为执行后要执行的函数
9.改变元素高度
如元素的display属性值为none,当调用slideDown()方法时,这个元素会从上向下延伸显示
而slideUp()方法正好相反,元素从下到上缩短直至隐藏
语法:
$(selector).slideUp([speed],[callback])
$(selector).slideDown([speed],[callback])
与fadeIn()和fadeOut()方法中的参数一样,speed为可选参数,改变时长
示列:
$(document).ready(function(){
$("h2").click(function(){
//class为txt的内容先缓慢向上收起,然后缓慢向下展开
$(".txt").slideup("slow");
$(".txt").slideDown("slow");
})
})
10.自定义动画
语法:
$(selector).animate([params],speed,callback)
* params:必须,定义形成动画的CSS属性
* speed:可选,规定效果时长,取值,毫秒
* callback:可选,滑动完成后执行的函数名称
示列:
var stop=true
//鼠标按下触发的事件
$(".btnClick").mousedown(function(){
if(stop){
//使用自定义函数animate()使棍子变长
$(".stick").animate({"width":"500px"},2500)
}
})
第八章：使用jQuery操作DOM
1.DOM分为三类:DOM Core(核心) HTML-DOM和CSS-DOM
2.样式操作
1.设置和获取样式值
语法:
//设置单个属性
$(selector).css(name,value)
或者
//设置多个属性
$(selector).css({name:value,name:value...})
2.追加样式
语法:
$(selector).addClass(新样式)
3.移除样式
语法：
$(selector).removeClass(要移除的样式(要移除多个可以在后面用逗号隔开追加))
4.判断是否含指定的样式
语法:
$(selector).hasClass(要判断的样式)
3.内容操作
1.HTML代码操作
语法:
html([该参数可以包含HTML标签 无参数时,表示获取被选元素的文本内容])
2.标签内容操作
语法:
text([参数,被选元素的新文本内容,注释:特殊字符会被编译 无参数时,表示获取被选元素的文本内容])
3.属性值操作
语法:
val([参数,规定被选元素的新内容,无参数时,返回第一个被选元素的value属性的值])
4.节点操作
1.插入节点
插入节点方法
方法 描述
append() $(A).append(B)表示将B追加到A中
appendTo() $(A).appendTo(B)表示将A追加到B中
prepend() $(A).prepend(B)表示将B插入到A中前
prependTo() $(A).prependTo(B)表示将A插入到B中前
after() $(A).after(B)表示将B插入A之后
insertafter() $(A).insertafter(B)表示将A插入B之后
before() $(A).before(B)表示将B插入A之后
insertbefore() $(A).insertbefore(B)表示将A插入B之后
2.删除节点
语法:
$(selector).remove([可选参数])
3.清空节点
语法:
$(selector).empty()
4.替换节点
语法:
$(selector).replaceWith(新节点)
或
$(新节点).replaceAll(selector)
5.复制节点
语法:
$(selector).clone([includeEvents] 此处为布尔值true或flase 为true时复制事件处理,为false时反之)
5.属性操作
1.获取与设置元素属性
语法:
//获取属性值
$(selector).attr([name])
或者
//设置多个属性值
$(selector).attr({name:value,name:value...})
2.删除元素属性
语法:
$(selector).removeAttr(要删除的属性名)
6.节点遍历
1.遍历子元素
语法:
$(selector).children([可选参数])
children()方法获取某元素的子元素,不考虑其他后代元素
2.遍历同辈元素
遍历同辈元素的方法说明
方法 描述
next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings() 获取匹配元素前面和后面的所有同辈元素
3.遍历前辈元素
用于遍历前辈元素的方法有parent()和parents(),
parent()方法用于获取当前匹配元素集合中每个匹配元素的父级元素,
parents()方法用于获取当前匹配元素集合中每个匹配元素的祖先元素
parent()和parents()方法的参数说明
示列
$("span").parent()获取到的是<span>的直接上层<li>元素
$("span").parents()从当前匹配元素的直接父节点开始查找,获取的节点以次是<li>,<ul>,<section>,<body>和<html>
4.其它遍历方法
1.each()方法
each()方法规定为每个匹配元素规定运行的函数
示列:
$("img").click(function(){
$("li").each(function(){
var str=$(this).text()
$("section").append(str)
})
})
2.end()方法
end()方法结束当前链条中最近的筛选操作,并将匹配元素集还原为之前的状态
示列:
$(".gameList li").first().css("background","#b8e7f9").end().last().css("background","#fffff")
7.CSS-DOM操作
CSS-DOM相关操作方法说明
方法 描述
css() 设置或返回匹配元素的样式属性
height(参数) 参数可选,设置或返回匹配元素的高度
width(参数) 参数可选,设置或返回匹配元素的宽度
offset(参数) 返回以像素为单位的top和left坐标
offsetParent() 返回最近的已定位祖先元素
position() 返回第一个匹配元素相对于父元素的位置
scrollLeft(参数) 参数可选,设置或返回匹配元素相对滚动条左侧的偏移
scrollTop(参数) 参数可选,设置或返回匹配元素相对滚动条顶部的偏移
第九章：表单校验
1.表单选择器
表单选择器
语法 描述
:input 匹配所有input,textarea,select和button元素
:text 匹配所有单行文本框
:password 匹配所有密码框
:radion 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素,或者type为hidden的元素
2.表单属性过滤器
表单属性过滤器
语法 描述
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有被选中元素(复选框,单项按钮和select中的option)
:selected 匹配所有选中的option元素
3.表单验证事件和方法
表单验证事件和方法
名称 描述
onblur 失去焦点
onfocus 获得焦点
blur() 从文本域中移开焦点
focus() 从文本域中获得焦点
select() 选取文本域中的内容,突显显示输入区域的内容
4.正则表达式
1.定义正则表达式
1.普通方法
语法:
var 变量名=/表达式/附加参数
附加参数:
* g: 代表可以进行全局匹配
* i: 代表不区分大小写匹配
* m: 代表可以进行多行匹配
2.构造函数
语法:
var 变量名=new RegExp("表达式","附加参数")
2.表达式的模式
1.简单模式
2.复合模式
RegExp对象
方法 描述
exec() 检索字符中是正则表达式的匹配,返回找到的值,并确定其位置
test() 检索字符串中指定的值,返回true或false
语法:
正则表达式对象实列.test(字符串)
String对象的方法
方法 描述
match() 找到一个或多个正则表达式的匹配
search() 检索与正则表达式相匹配的值
replace() 替换与正则表达式匹配的字符串
split() 把字符串分割为字符串数组
5.正则表达式的常用符号
正则表达式的常用符号
符号 描述
/…/ 代表开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字,等价于[0-9]
\D 除数字之外任何字符,等价于[^0-9]
\w 匹配一个数字,下划线或字母字符,等价于[A-Za-z0-9_]
\W 任何非单字字符,等价于[^A-Za-z0-9_]
. 除了换行符之外的任意字符
6.正则表达式的重复字符
正则表达式的重复字符
符号 描述
{n} 匹配前一项n次
{n,} 匹配前一项n次,或者多次
{n,m} 匹配前一项n次,但是不能超过m次
* 匹配前一项0次或多次
+ 匹配前一项1次或多次
? 匹配前一项0次或1次,前一项是可选的
7.使用HTML5的方式验证表单
1.HTML5新增验证属性
HTML5新增验证属性
属性 描述
placeholder 提供一种提示,输入域为空时显示,获得焦点内容后消失
required 规定输入域不能为空
pattern 规定验证input域的模式(正则表达式)
2.validity属性
语法:
var validityState=document.getElementById("Id名").validity
validityState对象包括八个属性
validityState对象
属性 描述
valueMissing 表单元素设置了required特性,则为必填项,如果必填项为空,就无法用过表单验证,返回true或false
typeMismatch 输入值与type类型不匹配,返回true或false
patternMismatch 输入值与pattern特性的正则表达式不匹配,就无法用过表单验证,返回true或false
tooLong 输入的内容超过了表单元素的maxLength特性限定的字符长度,就无法用过表单验证,返回true或false
rangeUnderflow 输入值小于min特性的值,返回true或false
rangeOverflow 输入值大于max特性的值,返回true或false
stepMismatch 输入的值不符合step特性所推算的规则,返回true或false
customError 使用自定义的验证错误提示信息,使用错误信息的提示:setCustomValidity(要输出的值)
式列:
var user=document.getElementById(“user”);
if(user.validity.valueMissingtrue){
user.setCustomValidity(“用户名不能为空!”);
}else if(user.validity.patternMismatchtrue){
user.setCustomValidity(“用户名以英文字母开头4+16个英文字母或数字”)
}else{
user.setCustomValidity("");
}
扫一扫
3070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
