还剩15页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
1、JavaScript访问样式的常用方法1)style属性(对象)HTML元素,style.样式属性=〃值〃;注意事项在JS中的CSS样式一在HTML中使用不同,由多个单词组成的样式属性要去到中间的〃-〃号,第一个单词首字小写,其余首字母大写,如backgroundColoro var变量=HTML元素.styl㊀,样式属性;该方式只能获取内联样式的属性值,无法获取内部样式表或外部样式表中的属性值2)元素的常用事件名称描述onclick当用户单击某个对象时调用事件onmouseover鼠标移到某元素上onmouseout鼠标从某元素移开onmousedown鼠标按钮被按下3)this关键字通常指向正在执行的函数本身或指向函数所属的对象或事件所属的对象如鼠标移到对象上时改变对象的背景图片obj ect.onmouseover=functioin(){this.style.backgroundlmage=,,url(images/bg
2.jpg)〃;)4)className属性HTML元素.className=,z CSS类选择器样式名称〃
2、获取样式属性值1)style对象中的Positioning(偏移)属性top、left、rights bottom分别设置元素的顶、左、右、底边缘距离父元素顶、左、右、底边缘的距离,单位pxo zlndex设置元素的堆叠次序2)获取内部样式表或外部样式表中的属性值的方法IEob ject.curr㊀ntStyle.样式属性;(只读)火狐/谷歌document.defaultview.getComputedStyle(元素,null),属性;
3、获取滚动条滚动的距离scrollTop和scrollLeft属性名称描述scrollTop设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离,即对象在垂直方向上滚动的距离,单位px scrollLeft设置或获取位于对象左边界和窗口中H前可见内容的最左端之间的距离即对象在水平方向上滚动的距离,单位px clientwidth指对象的可见宽度,即在样式中设置的width值,不带px clientHeight指对象的可见高度,即在样式中设置的height值,不带px得到浏览器滚动条的垂直滚动距离的方法document.ducumentElament.scrollTop;//IE和火狐document.body.scrollTop://谷歌设置div内容超过其大小时产生滚动条overflow:scroll;页面事件名称描述onscroll用于捕捉页面垂直和水平的滚动,水平和垂直滚动距离动态变化onload一个页面或一幅图片完成加载(上传)第6章表单基本验证技术
1、基本数据类型String和对象String的区别对象类型String var strl=new String工m aprogrammer);var lenl=strl.length;1㊀n可以得到字符串的长度基本类型String varstr2=工m aprogrammer”;var len2=str
2.length;len也可以得到字符串的长度解释当我们声明了一个基本类型的字符串,要把它当作对象类型来使用时,如访问其属性或方法,JavaScript知道这些操作只适用于对象类型,会将字符串的字面值临时转换为对象类型,以适用当前的操作,此操作对于number和boolean类型同样适用
2、String对象的方法方法名作用Strl.char Atindex选取字符串中某一位置的单个字符Strl.charCodeAt index返回该位置字符对应的Unicode编码Unicode编码表a-z:97-122A-Z:65-900-9:48-57String.fromCharCode将编码转成字符可用于生成英文字母Strl.indexOf str2查找str2在strl中第一出现的位置Strl.lastlndexOf str2查找str2在strl中最后一次出现的位置Strl.substr starpos,[length]截取字符串Strl.substring starpos,[endpos]截取字符串,含开始不含结束Strl.toLowerCase转/J、写字母Strl.toUpperCase转大写字母
3、表单提交的方法onsubmit=z,return表单验证的函数〃onsubmit方法根据函数返回值来决定是否提交表单,当返回值是false时表单不提交,当返回值为true时提交表单
4、文本框控件文本框对象常用的方法和属性类别名称描述onblur失去焦点,当光标离开文本框时触发事件onfocus获得焦点,当光标进行入文本框时触发onkeypress某个键盘按键被按下并松开blur从文本域中移开焦点方法focus文本框获得焦点select选取文本框中的内容,并突出显示,常用于提示用户输入id设置或返回文本框的id属性value设置或返回文本框的value属性的值
5、制作文本输入提示特效鼠标离开文本框时,验证输入是否合法,〈input id=,,email z,type=,,text,z class=,,inputs,z onblur=,,checkEmal/div class=,,red/,id=,,DivEmail,,x/div通过obj ect.innerHTMl改变div中的提示内容和样式设置div的样式display=inline;将块级标签和等级标签置于同一行获得指定工D的对象的封装函数function$elementld{return document.getElementByldelementld;第7章正则表达式和表单辅助特效
1、正则表达式正则表达式是一个描述字符模式的对象,它由一些特殊的符号组成的,其组成的字符模式用来匹配各种表达式
2、定义正则表达式1普通方式var r^g=/表达式/附加参数表达式一个字符串代表了某种规则附加参数用来扩展表达式的含义,可以任意组合,代表复合含义♦g代表可以进行全局匹配global♦i:代表不区分大小写匹配ignoreCase♦m:代表可以进行多选匹配multiline2构造函数var reg=new RegExp表达式〃,〃附力口参数〃;经验普通方式中的表达式必须是一个常量字符串,而构造函数中的表达式可以是常量字符串,也可以是一个JavaScript变量
3、表达式的模式复合模式指含有通配符来表达的模式var reg=/人通酉己符$/正则表达式的常用通配符/.../代表一个模式的开始和结束A匹配字符串的开始$匹配字符串的结束\s\S任何空白字符//space任何非空白字符匹配一个数字字符,等价于[0-9]//digit\d\D除了数字之外的任何字符,等价于[八0-9]//whatever\w匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9」\w任何非单字字符,等价于FA-Za-zO-9_]*除了换行符之外的任意字符正则表达式的重复字符符号描述{n}匹配前一项n次S,}匹配前一项n次,或者多次{n,m}匹配前一项至少n次,最多m次匹*配前一项0次或多次,邂价于}+匹配前一项1次或多次,等价于{1,}匹配前一项0次或1次,也就是说前一项是可靠的,等价于1}经验使用反斜杠〃〃来进行字符转义,将上表中元字符作为普通字符来进行匹配如\$匹配美元符号,\*、\.、\+分别区别星号、点号、加号匹酉己Email符号:/A\w+[-+.]\w+*@\w+[-.]\w+*\.\w+[-.]\w+★$/解读令必须包含@符号和.符号,且.在©之前令@符号前的字符可以包含任意数量的\WT.但第一个最后一个不能是-+.令@符号与.符号之间的字符可以包含任意数量的\W-.但第一个最后一个不能是-.令.符号之后的字符可以包含任意数量的\W-.但第一个最后一个不能是-.令-+.符号不能相邻正则表达式中I或者关系运算符的用法I与I之间是独立部分,用〃和〃〃指向开始和结束
4、RegExp正则表达式对象的常用方法检测一个字符串是否匹配某个正则表达式正则表达式对象实例.test字符串;//返回true或false检索字符中正则表达式的匹配,返回找到的值,并确定其位置正则表达式对象实例.exec(字符串);String对象的方法符号描述match(字符串|reg对象)找到一个或多个正则表达式的匹配search检索与正则表达式相匹配的值replace(reg对象|字符串,〃新的字符串〃)替换与正则表达式匹配的字符串split(分割符,n)把字符串分割为字符串数组
5、使用下拉列表框实现级联效果select对象的常用事件、方法、属性类别名称描述事件onchange当改变选项时调用的事件方法addnew,old向下拉列表框中添加一个选项,old为空,加在最后属性options[]返回包含下拉列表框中的所有选项的一个数组selectedlndex设置或返回下拉列表框中的被选项目的索引号length返回下拉列表框中的选项的数目设置options.length=0可以清除select对象的所有选项Op七ion对象的常用属性属性描述text设置或返回某个选项的纯文本值,即〈option〉标签开始和结束之间的值value设置或返回被送往服务器的值为selectObj创建一个新的0Ption选项var newOption=new Option(text,value);selectObj.add(newOption,null);
6、Array数组对象1)创建数组var数组名称=new Array(数组长度);2)为数组元素赋值var fruit=new Array(apple,orange,p㊀ach〃,bananer);或var fruit=new Array4;fruit
[0]=xx applez,;fruit
[1]orange;fruit
[2]peach”;fruit
[3]banan㊀r”;3)访问数组元素数组名[下标]4)数组对象的常见方法和属性类别名称描述方法sort排序join(分隔符)用分隔符将数组各元素连接成一个字符串reverse反转数组中的元素属性length数组中元素的数目5循环读取数组中的每一个元素的方法for i in array{//i为数组的下标,下标可以是字符串array湖南〃]//循环代码;}6实现省市级联效果的代码script varcityArray=new Array;cityArray[”广东省]=「广州市11,珠海市1r*深圳市1];cityArray[”湖南省”]=「长沙市—益阳市一珠州市」;cityArray[”湖北省”]=「南昌市I,九江市」;var selPro=document.getElementByldpro;var selCity=document.getElementByld ncity n;//生成城市,被onchange事件所调用function createCity{selCity.options.length=l;//清除上一次产生的城市选项for vari incityArray//选择某一省份后,将对象的城市添加到选项中if i==selPro.valuefor varj incityArray[i]selCity.addnew OptioncityArray[i][j],cityArray[i][j],null;//生成省份function createProfor variincityArray selPro.addnew Optioni,i,null;window.onload=createPro;/script扩展
1、对象类型和基本类型var a=3;var b=a;b=10;alert a;结果为3,并不会变为10,因为对于基本数据类型,变量保存的是一个实际的数据当执行var b=a时,b保存的是a的一个副本var a=new Array3,5;var b=a;b
[0]=10;alert a
[0];结果为10,并不是3,因为对于对象类型,变量并不保存对象本身的数据,它仅保存一个指向对象的引用,因为变量a与变量b二者引用的是同一个数组对象
2、Math对象随机数Math.random0〜1不含1的随机数
3、number对象num.toFixed精度,保留几个小数最后一章扩展if条件条件的返回值也可以是字符串,当返回非空时,条件为trud返回为null时为false;制作鼠标跟随特效
1、为什么要学习JS
①客户端表单验证
②页面动态效果
③动态改变页面内容
2、什么是JavaScript JavaScript是一种描述语言,也是一种基于对象和事件驱动的、并具有安全性能的脚本语言JavaScript的组成JavaScript ECMAScriptBOM DOM核心语法浏览器对象模型文档对象模型
3、在网页中引用JavaScript的方式
①使用〈script〉标签script type=,z text/javascript〃〉内容〈/script〉
②使用外部JavaScript文件script type=,,text/j avascript,/src=,/j s文件路径〃〉〈/script〉
③直接在HTML标签中〈input name=〃btn〃type=,,button,z value=〃弹出消息框onclick=〃j avascript:al㊀rt(欢迎你,);〃/
4、JavaScript核心语法声明变量var变量名;注意JavaScript区分大小写,var可不要,但一般先声明,再赋值使用
5、数据类型JavaScript是一种弱类型语言,在声明变量时不需要声明变量的数据类型,面是由赋给变量的值决定,但有时也需要检测变量的具体数据类型(通过typ㊀of)数据类型typeof()的返回结果示例undefined(未定义类型)undefined varwidth;null(空类型)object typeofnullnumber(数值类型)number varheight=20;string(字符串类型)string varname=,,rose z,;boolean(布尔类型)boolean varisOk=true;alert(null==undef ined);返回true undefined、null两个值是相等的,但含义不同,undefined是声明了变量但未对该变量赋值,null表示对该变量赋了一个空值
6、常用的输入/输出警告alert(提示信息〃);提示输入框prompt(提示信息〃,〃输入框的默认信息〃);
7、语法约定令区分大小写,JavaScript的关键字一般都是小写,内置对象是以大写字母开头的(Date、Math),Dom对象的名称通常是小写字母开头,遵循骆驼命名法令变量、对象和函数的名称可以包括大写字母、小写字母、数字、下划线和$符号,但不能以数字开头令分号结尾:推荐使用;号作业一行代码的结尾
8、Firebug工具,火狐插件调试工具第2章函数和window对象
1、常用的系统函数parselnt(字符串〃)将一个有效的数字字符串转换成整型数字pars㊀Float(字符串〃):将一个有效的数字字符串转换成浮点型数字isNaN():is nota number检查参数是否是非数字参数parselnt parseFloatisNaN
78.57〃
7878.57false v
78.88color,,
7878.88true、this
98.6〃NaN NaNtrue、56・
45.56”
5656.45true87+’.5,
8787.5false
2、自定义函数function函数名([参数1,参数2,参数3,...]){JavaScript语句;[return返回值;])调用函数事件名=〃函数名()〃注意事项实参比形参少的情况,默认赋值und㊀fin㊀d;实参比形参多时,自动舍弃所有函数都有返回值,没写return的情况下返回undef inedo在HTML中只有事件才可以直接调用js中的函数,事件一般以on开头,其它属性要调用贝I」要力口前缀javascript:如hr^f=〃javascript:函数名();〃
3、匿名函数[var变量名|事件名]=function(){...}匿名函数只能定义在前,使用在后
4、转义符\n换行、\t\r换行、\,\〃\\转义符只能在alert()中使用,在document.writ㊀()不能使用
5、变量的作用域局部变量和全局变量和java中类似在函数内部如果没有用var来声明变量那么这个变量变是一个全局变量
6、window对象名称说明prompt显示可提示用户输入的圣诞框alert显示一个带有提示信息和一个“确定”按钮的警示框confirm显k个带有提示信息和个“确定”和“取消”按钮的警示框close关闭浏览器窗口open打开一个新的浏览器窗口,可以设置诸多属性setTimeout函数,间隔毫秒数在指定毫秒数后调用函数或计算表达式调用一次,clearTimeout名称可以清除定时器setinterval函数,间隔毫秒按照指定的周期来调用函数或表达式调用多次数clearinterval清除定时器常用事件名称说明onload一个页面或一幅图像完成加载onmouseover鼠标移动到某元素上onclick鼠标单击某个对象onkeydown某个键盘按键被按下onchange域的内容被改变
7、Date对■象用于操作日期和时间var日期实例=new Date[参数];方法getXxx获取时间和日期值,如g㊀tDat㊀获取一月中的每一天getHours,getminutes,getMonth,getFullYear,getDay获取星期中的某一天g㊀tMonth返回0〜11之间的值,实际月份=getMonth+1setXxx设置时间和日期值Date对象直接得到年■月•日时•分一秒格式的方法var d=new Date;vars=d.toLocaleString;第3章BOM编程
1、history对象提供用户最近浏览过的URL列表对象的方法back返回、forward前进、go n前进或后退n个页面
2、location对象方法reload重新加载当前文档、replace用新的文档替换当前文档
3、document又寸象名称getElementBy工d说明getElementByName返回对拥有指定icl的第一个对象的引用getElementByTagName返回带有指定名称的对象的集合数组write返回带有指定标签名的对象的集合数组向文档写文本,HTML表达式或JavaScript代码对象数组.length可以获取数组的长度对象名.getElementByTagName返回该对象的子节点中指定名称的对象的集合docum㊀nt对象经常应用于实现网页元素的显示和隐藏效果
4、元素的显示和隐藏obj ect.style.visibility=值〃visibl㊀为可见,hidden不可见object.style.display=值〃none不显示,block显示为块级元素两者区别使用visibility属性设置元素不可见,此元素会占据页面上的空间使用display属性设置元素不显示,此元素不会占据页面空间第4章DOM高级编程
1、DOM的组成Core DOM也称核心DOM编程,定义了一套标准的针对任何结构化文档的对象,包括HTML,XHTML,XMLo XMLDOM:定义了一套标准的针对XML文档的对象HTML DOM:定义了一套标准的针对HTML文档的对象
2、CoreDOM的标准节点操作1)访问和修改节点属性object.getAttribute(属性名):获取对象的属性值object.setAttribute(〃属性名〃,〃属性值〃)设置对象属性值经验使用getAttribute方法以读取属性值时,如果属性不存在,返回null2)根据层次关系查找节点(适合于在文档局部短距离查找元素)object.属性令childNodes[index]按下标访问指定子节点令childNodes子节点集合(数组)令firstChild第一个子节点令nextSbling下一个子节点令lastchild最后一个子节点令parentNode父节点注意事项对表格进行查找时,表格默认会有<tbody〉、<thead>和查找时要考虑它们的存在3)访问文档的根节点的方法令document.documentElement//IE和火狐令document.body//谷歌4)创建和增加节点名称描述document.createElement(tagName)按照给定的标签名称创建一个新的元素节点父节点.appendChild(nodeName)向已存在节点列表的末尾添加新的子节点父节点.insertBefore(newNode boldNode])向指定的节点之前插入一个新的子节点要克隆的对象.doneNode(true|false)复制某个指定的节点cloneNode的参数值为true表示复制指定的节点及它的所有子节点,为false只复制该节点和属性5删除和替换节点名称描述父节点.removeChildnode删除指定的节点父节点.replaceChildnewNode,oldNode用其他的节点替换指定的节点
3、HTML DOM的特有对象和操作访问HTML DOM对象的属性对象名.属性名表格对象属性和方法Table对象类别名称描述属性rows[]返回包含表格中所有行的一个数组insertRowindex在表格中的index所在行之前插入一个新行方法deleteRowindex从表格中删除一行TableRow对象类别名称描述cells[]返回包含行中所有单元格的一个数组rowindex获取对象在表格的rows集合中的位置属性sectionRowIndex获取对象位于tBody,tHead,tFoot或rows集合中的位置insertCell在一行中的指定位置插入一个空的<td>标签方法deleteCell删除行中指定的单元格TableCell对象类别名称描述celllndex返回单元格在某行单元格集合中的位置innerHTML设置或返回单元格的开始标签和结束标签之间的HTML属性innerText设置或返回单元格的开始标签和结束标签之间的文本内容align设置或返回单元水平排列方式className设置或返回元素的class属性注意数组下标和行、单元格的位置都是从0开始,。