JavaScript知识点.doc

1. 什么是java script？他是用来给页面添加动态效果或交互行为的一种脚本(按一定规则来写的文本)，由浏览器来解析执行。美工用dreamweaver来写2Js的作用：(1)可以用来给页面添加交互的行为，js和服务器没关系，是一种由客户端执行的语言。(2)js经常做客户端的数据验证(3)实现动态效果Web标准：内容由html来决定，格式由css决定，动态效果由java script来决定2. js的基本使用：1)JS是事件驱动的语言。2)js脚本引入的方式：(1)可以写在一个单独的文件中(2)将脚本直接写在当前html文件任意文件，习惯放在head中alert(hello);(3)嵌入html元素内部sayHellojs和java关系： Java ： 可独立运行 需编译后由JVM执行 需要明确定义 JavaScript： 嵌入HTML运行 无需编译，由浏览器执行 不需要明确定义2、一个简单的javascript程序：sayHello，我们知道就是程序是怎样运行的 基于事件的响应方式function sayHello()alert(你好);js的基本使用：3、掌握js常见的数据类型及操作JS有5种基本数据类型1、number（基本的数据类型） 2.string 3.boolean 4.undefined 5.nullvar i = 100; var str = abc; var flag = true;var j = null; 几个需要注意的问题：var a = null; alert(a = undefined); typeof 用于返回类型Infinity和NaN对于number类型Infinity表示无穷, NaN表示非数字isNaN(aaa) /判断aaa是否为数字数据类型的转换：将字符串转换为数值parseInt()。将数值转换为字符串toString()Function函数没有返回值，可以带参数alert();可以弹出一个小的窗口alert()方法的使用：alert(”在页面上显示警告对话框”); alert()是javascript产生一个带确认按钮的对话框，上面显示括号内的信息。a href=javascript:;表示这个链接也在调用一个js脚本，写他的目的是避免跳到脚本typeof(i)打印数据类型注意： function test1()var b2;var b3 = null;/alert(数据类型: + typeof(b3); /objectalert(b3=b2);在js中null和undefined比较结果是相同的。function test2()var i1 = 0;var i2 = 0;var i3 = i1/i2;alert(i3);/0/0结果是NaN，非数字0/0在js中表示非数字。（2）字符串的基本属性和方法length属性 返回字符串的长度charAt(index) 返回指定位置的字符substring(from, to) 返回子字符串indexOf(str) 指定字符串在原字符串中第一次出现的位置lastIndexOf(str) 指定字符串在原字符串中最后一次出现的的位置match(regexp) 返回匹配指定正则表达式的字符串，返回的结果是一个数组var str2 = asd212abc345;var reg2 = /0-9+/g;var arr = str2.match(reg2);search(regexp) 返回按照正则表达式检索到的字符串位置str2.search(reg2)toLowerCase/toUpperCase 返回小写/大写形式replace(regexp,abc); 替换符合reg正则表达式规定的字符串str2 = str2.replace(reg2,888);掌握数组的使用创建数组, 长度由后期赋值决定var a = 1,2,3,4,5;-长度可变var b = ;var c = new Array();length属性返回数组的长度toString()方法, 返回数组的字符串表示concat方法, 用于连接两个数组join方法，用于将数组中的各个元素连接成字符串。reverse方法，将数组反转slice用于截取数组的一部分并以数组的形式返回sort()排序，可通过如下形式来重新定义排序方式：var arr4 = arr3.sort(function(a1,a2)return -a1.length + a2.length;);数组的常用方法：join(分隔符) 方法，以指定的分隔符将元素一次拼接起来，形成一个字符串并返回.sort() 方法，对数组进行排序，按英文字母或汉字拼音式排序。4、js的事件处理机制1、Dom模型：DHTML DOM 和 W3C Dom window(1) | document(1) | | | image(1) link Form(1) | | | input select(1) Table | | option Tbody | table row cell浏览器是用于显示HTML文档内容的应用程序，是一个分层结构，也称为文档对象模型，window对象指的就是浏览器本身，window对象含有document文档、location地址对象、history历史对象，document文档包括link超链接、form表单、anchor锚。select操作：下拉列表框常用的事件、属性和方法：onChange事件，当选项发生改变时产生，value属性，下拉列表框中被选中的值，options所有的选项组成一个数组，selectdIndex属性，返回被选择的选项的索引号，length属性，返回下拉列表中的选项个数，add(new,old) 方法，将新的option对象new插入到option对象old前面，如果old为空，那么直接插入到末尾。新建一个选项：new Option(text,value);删除一个选项：optionsi=null; 全部删除：innerHTML=;修改就不要了查找：遍历移到级联菜单-实现省市级联的效果：function changCity()var province=document.myform.selProvince.value;var newOption1,newOption2;switch(province)case 四川省:newOption1=new Option(成都市,chengdu);newOption2=new Option(泸州市,chengdu);break;case 湖南省:newOption1=new Option(邵阳市,chengdu);newOption2=new Option(长沙市,chengdu);break;document.myform.selCity.options.length=0;document.myform.selCity.options.add(newOption1);document.myform.selCity.options.add(newOption2);四川省湖南省-选择城市-Table:对表格的处理 tHead -head tBody tFoot rows:返回表格的行 Tablerow -cellsinsertRowdeleteRowinsertcelldeletecellfunction addRow()var tb1Obj = document.getElementById(tb1);/TableRow /rows属性(Table,Tbody)/insertRow会返回一个新的行:相当于创建了一个trvar row1 = tb1Obj.insertRow(tb1Obj.rows.length);/insertCell会创建一个新的单元格：相当于td/cells属性(TableRow)var col1 = row1.insertCell(row1.cells.length);var col2 = row1.insertCell(row1.cells.length);/cell.innerHTMLvar txt1Val = document.getElementById(txt1).value;var txt2Val = document.getElementById(txt2).value;col1.innerHTML=txt1Val;col2.innerHTML=txt2Val;/style属性 代表该元素的样式，该值可以修改/css中的background-color在对应的对象当中，/会变成backgroundColor/style只得修改内联样式/ /row1.style.backgroundColor=red;tb1Obj.rows1.cells1.style.backgroundColor=blue;namesalarysum10000zs1000ls2000ww3000add employee info:name:salaryForm：主要是验证Elements formtext1.value：form中text1文本框中的值 0、1、2、3window:方法：open() 句柄close()function openWin()/var win = open(html05.html,w1,width=400,height=400);/window.setTimeout(js代码,毫秒):在多长时间之后执行某个代码setTimeout(function()win.close(),5000);function testWin()/var rs = confirm(确定吗?);/alert(rs);var rs = prompt(请输入你的手机号);alert(rs);删除setTimeoutsetIntervalclearInterval#d1width:100px;height:100px;background-color:#5566ff;top:40px;position:relative;function go1()var obj = document.getElementById(d1);/alert(obj.style.left);var leftV = parseInt(obj.style.left);obj.style.left = leftV + 50 + px;function go2()/taskId表示任务var taskId = setInterval(go1,1000);setTimeout(function()/取消任务clearInterval(taskId),5000);confirm()方法的使用： confirm(”在页面上显示确认对话框”); confirm()和alert()差不多，不同的就是多了个取消按钮。按确定返回true，按取消返回false。 varcon; con=confirm(”你们喜欢这样的教程吗？”); if(con=true)alert(”喜欢”); elsealert(”不喜欢”); prompt()方法的使用： varname,age; name=prompt(”请问您的名字？”); alert(name); age=prompt(”多大？”); alert(age); 它不但可以显示信息，而且可以输入信息。例：function openWin()/var win = open(html05.html,w1,width=400,height=400);/window.setTimeout(js代码,毫秒):在多长时间之后执行某个代码setTimeout(function()win.close(),5000);function testWin()/var rs = confirm(确定吗?);/alert(rs);var rs = prompt(请输入你的手机号);alert(rs);删除document对象：getElementById() 方法：根据HTML元素指定的ID，获取唯一的一个HTML元素，如访问DIV层对象、图片Img对象，getElementByName() 方法：根据HTML元素指定的name，获得相同名称的一组元素，如访问表单元素，getElementsByTagName()：根据HTML元素标记名，获得相同标记的一组对象。window常用方法：alert方法(提示信息) 显示一个带有提示信息和确定按钮的对话框，confirm(提示信息) 显示一个带有提示信息和确定和取消按钮的对话框，open(url,窗口名,窗口特征) 打开具有指定名称的心窗口，并加载给定URL所指定的文档，如果没有提供URL，打开一个空白文档，close() 关闭当前窗口，showModalDialog() 在一个模式窗口中打开一个HTML文档。-窗口特征属性：height窗口高度，toolbars浏览器工具条，scrollbars是否显示滚动条，menubar菜单栏，location是否显示地址栏，status是否显示状态栏的信息，resizable是否允许改变窗口的大小。重要的属性： opener:表示打开当前窗口的父窗口，如果当前窗口 由用户打开，则返回null parent：如果当前窗口是一个frame，表示其父窗口self、window：表示当前窗口三个frame（帧），之间的控制：使用js找到（look）getElementById，然后改一下 先写好了，使用display=none 由于不在同一个frame中，我们就使用parent（最外层的窗口）.left.document.getElementById，就找到了见代码6、掌握常见事件onclick 鼠标单击-对表单中的事件点击操作再加上一些链接onchange 内容改变onfocus 获得焦点onblur 失去焦点onload 元素加载显示，表示在窗口或框架完成文档加载时触发。onunload 页面关闭onmouseout 鼠标移出onmouseover鼠标移进onDblClick 鼠标双击事件处理机制：小结：1、Dom树，DHTml是重点 2、事件绑定方式：放在html元素中 Dom对象中 使用浏览器特定的方式（IE、FF） 3、事件对象：干什么的？作用 获得方式 4、事件冒泡，怎样取消 5、代码中产生相应的事件 6、对象事件（常见的）：鼠标、键盘、状态等Onload：文档加载完毕Onunload：Onfocus：获得焦点OnblurOnsubmit:表单提交1) 事件对象：相当于java中的eventObject。不同的浏览器事件对象是不一样的。IE有一个全局的事件对象，而FF是每一次操作才产生一个事件对象ie有全局的事件对象，可以通过window来获得。可以通过事件对象来获得世间安的相关信息，比如事件源，坐标。对于firefox没有全局事