javascript基础学习

来源：互联网发布：淘宝卖家在哪进货编辑：程序博客网时间：2024/06/14 10:54

JavaScript编程技术

1.Date对象中常用的方法：getDate、getDay、getHours、getMinutes、getMonth、getSeconds、getTime、getYear以及相应的set方法。

2.Math对象的使用：Math.数学函数（参数）

3.eval()函数:接受一个字符串形式的表达式，并执行该表达式

4.parseInt()函数/parseFloat()函数：从字符串中提出一个整数/小数如遇到非数字就停止转化如果第一个就不是数字就返回NaN

5.Window对象：

1. open(url,windwoName,parameterList):open()方法创建一个新的浏览器窗口，并在新窗口中载入指定url地址

2. close():close()方法关闭一个浏览器窗口

3. alert():弹出一个窗口

4. confirm():弹出确认框

5. promt():弹出提示框，显示可提示用户输入的对话框。

6. setTimeout(expression,time):定时设置，在一定时间后自动执行expression的代码，单位是毫秒

7. clearTimeout(timer):取消利用setTimeout的定时设置

8.setIntervel(expression,time):设定一个时间间隔，可以定时反复的自动执行expression描述的代码，使用time设置时间，单位是毫秒

9. clearInterval():取消由 setInterval() 设置的timeout。

10. blur():把键盘焦点从顶层窗口移开。

11. focus():把键盘焦点给予一个窗口。

6.文档Window对象：

document对象最强大的一个特性在于它的组织性。如果给页面中的元素起个名字，则可以把该元素当成 document 对象的一个属性来处理。例如，如果在 form 元素“form1”中有一个名叫“ txtbox”的文本框，则可以像下面这样去引用该文本框中的文本：document.form1.txtbox.value。

Document对象的集合：

1．all[] 提供对文档中所有 HTML 元素的访问。

2．anchors[] 返回对文档中所有 Anchor 对象的引用。

3．applets 返回对文档中所有 Applet 对象的引用。

4．forms[] 返回对文档中所有 Form 对象引用。

5．images[] 返回对文档中所有 Image 对象引用。

6．links[] 返回对文档中所有 Area 和 Link 对象引用。

Document对象属性：

1．Body 提供对<body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。

2．cookie 设置或返回与当前文档有关的所有 cookie。

3．domain 返回当前文档的域名。

4．astModified 返回文档被最后修改的日期和时间。

5．Referrer 返回载入当前文档的文档的 URL。

6．Title 返回当前文档的标题。

7．URL 返回当前文档的 URL。

Document对象的方法：

1．getElementById() 返回对拥有指定 id 的第一个对象的引用。

2．getElementsByName() 返回带有指定名称的对象集合。

3．getElementsByTagName() 返回带有指定标签名的对象集合。

4．close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。

5．open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。

6．write() 向文档写 HTML 表达式或 JavaScript 代码。

7．writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

7. 函数：

1.typeof运算符可以得到参数的类型,对于没有传递参数的结果为“undefined”

2.可以向函数传递比在函数定义时参数要多的参数，读取这样的参数可以使用arguments数组，可以使用“函数名.arguments[i]”获取元素

3.escape(字符串)：返回字符串的一种简单编码，将非字母数字的符号转换成%加其unicode码的十六进制表示

4.unescape(字符串)：将已编码的字符串还原纯字符串

8.事件驱动及事件处理：

1.常用事件：

1. onblur 元素失去焦点

2. onchange 用户改变域的内容

3. onclick 鼠标点击某个对象

4. ondblclick 鼠标双击某个对象

5. onfocus 元素获得焦点

6. onkeydown 某个键盘的键被按下

7. onkeypress 某个键盘的键被按下或按住

8. onkeyup 某个键盘的键被松开

9. onload 某个页面或图片被完成加载

10. onmousedown 某个鼠标按键被按下

11. onmousemove 鼠标被移动

12. onmouseout 鼠标从某个元素移开

13. onmouseover 鼠标被移到某个元素上

14. onmouseup 某个鼠标按键被松开

15. onselect 文本被选定

16. onsubmit 提交按钮被点击

17. onunload 用户退出页面

9.数组对象类型Array

1.三种方法建立数组：(1)使用方括号，创建数组时同时赋值：var myA=[“12”,”123”]

(2)使用new操作符，创建数组的同时赋值：var m=new Array(“12”,”123”);注意圆括号与方括号的区别。

(3)先创建再赋值：10的数组varan=new Array(9)

2.数组的方法：

Join(分割符)：把数组中所有数据用指定的分割符连接取来：mya.join(“/”);

Reverse()：把数组中的元素整个反转顺序

Sort()：把数组元素排序

Concat()：用于连接两个或多个数组：document.write(数组.concat(4,5))

pop()：删除并返回数组的最后一个元素

push()：向数组的末尾添加一个或多个元素，并返回新的长度

shift()：把数组第一个元素从其中删除，并返回第一个元素的值

unshift()：向数组的开头添加一个或更多元素，并返回新的长度

slice(start,end)：从已有的数组中返回选定的元素。

splice()：用于插入、删除或替换数组的元素。Array.splice(index,howmang

,element1,element2,…)：index：（必须）删除从index处开始的零个或多个元素：howmang：（必须）规定应该删除多个元素，必须是数字，但可以是“0”如果没有规定参数，则删除全部。Element1：（可选）规定要添加到数组的新元素

3.内部数组：网页对象中很多本身就是数组对象：

如document对象的forms属性就是，如定义多个form表单利用varfs=document.forms得到表单集合，使用fs[i].name获得表单的名字

再如：表单中的选择列表的options数学也是一个数组，利用o.options[i].value以及.text可以获取相应的值

10.字符串对象类型String

1.字符串的方法：(1)格式设置方法：big()、bold()、fontcolor(颜色字符串)、fontsize(字体号)、sub()、sup()

2.通用的字符串操作：

(1)anchor() 创建HTML 锚

(2) big() 用大号字体显示字符串

(3) blink() 显示闪动字符串

(4) bold() 使用粗体显示字符串。

(5) charAt() 返回在指定位置的字符。

(6) charCodeAt() 返回在指定的位置的字符的 Unicode 编码。

(7) concat() 连接字符串。

(8) fixed() 以打字机文本显示字符串。

(9) fontcolor() 使用指定的颜色来显示字符串。

(10) fontsize() 使用指定的尺寸来显示字符串。

(11) indexOf() 检索字符串。

(12)italics() 使用斜体显示字符串。

(13)lastIndexOf() 从后向前搜索字符串。

(14)link() 将字符串显示为链接。

(15)match() 找到一个或多个正则表达式的匹配

(16)replace() 替换与正则表达式匹配的子串。

(17)search() 检索与正则表达式相匹配的值。

(18)slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。

(19)small() 使用小字号来显示字符串。

(20)split() 把字符串分割为字符串数组。

(21)strike() 使用删除线来显示字符串。

(22)sub() 把字符串显示为下标。

(23)substr() 从起始索引号提取字符串中指定数目的字符。

(24)substring() 提取字符串中两个指定的索引号之间的字符。

(25)sup() 把字符串显示为上标。

(26)toLowerCase() 把字符串转换为小写。（不改变旧的字符串）

(27)toUpperCase() 把字符串转换为大写。（不改变旧的字符串）

11.history对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

1． length 返回浏览器历史列表中的 URL 数量。

2． back() 加载 history 列表中的前一个 URL

3． forward() 加载 history 列表中的下一个 URL

4． go(number|URL) 加载 history 列表中的某个具体页面。-1表示前一个页面

2.4表单form对象

1.表单对象的属性：

1．Name 表单的名称

2．action 提交表单后执行的程序

3．Target 指定数据显示在哪个窗口(_blank,_parent,_self,_top)或哪个框架(框架名称)中

4．encoding 默认为text/html

5．method “Get”或“Post”

5．elements数组只读，表单中所有对象的索引,0,1,…由document.表单名.elements.length可知该表单共有多少个对象

这里elements属性是一个数组，其中的元素对应于页面上表单内的各个控件。除了 elements外，表单的其他几个属性均对应于HTML语法中<form>标记的属性。

注意：单击“提交”按钮会触发表单的onsubmit事件。如果onsubmit的事件处理过程返回

false，则不进行表单数据的提交。但如果直接使用表单对象的submit（）方法，则直接将数据提交

出去。

1. 表单中的基本元素：

表单中的基本控件由按钮、单选按钮、复选按钮、提交按钮、重置按钮和文本框等组成。在JavaScript中要访问这些控件，可以使用以下两种方法实现：

 表单.元素名称例如：document.form1.check

 表单.elements[下标] 例如：document.form1.elements[2]

1． Text对象

1． accessKey：设置或返回访问文本域的快捷键。使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点

2． defaultValue：设置或返回文本域的默认值。

3． disabled：设置或返回文本域是否应被禁用。

4． Id：设置或返回文本域的 id。

5． name：设置或返回文本域的名称。

6． select( )：加亮文字，选取文本域中的内容。

7． focus()：在文本域上设置焦点。

主要事件 onfocus，onblur，onselect，onchange

2． Textarea对象

1．name：textarea输入框控件名称

2．value：textarea输入框控件中当前的文本

3．select( )：加亮文字

主要事件onfocus，onblur，onselect，onchange

3． Select对象

1．disabled：设置或返回是否应禁用下拉列表

2．id：设置或返回下拉列表的 id。

3．length：返回下拉列表中的选项数目。

4．multiple：设置或返回是否选择多个项目。

5．name：设置或返回下拉列表的名称。

6．options数组：返回包含下拉列表中的所有选项(option对象)的一个数组。

其中option对象包括如下属性：

text 该选项显示的文字

value 该选项的value值

selected 指明该选项是否别选中

7．selectedIndex：当前选中项的下标

8．size：设置或返回下拉列表中的可见行数。

9．options.add()：向下拉列表添加一个选项。

10．blur()：从下拉列表移开焦点。

11．focus()：在下拉列表上设置焦点。

12．remove()：从下拉列表中删除一个选项。

主要事件 onfocus，onblur，onchange

4． Button对象

1．accessKey设置或返回访问按钮的快捷键。

2．alt设置或返回当浏览器无法显示按钮时供显示的替代文本。

3．disabled设置或返回是否禁用按钮。

4．id设置或返回按钮的 id。

5．name设置或返回按钮的名称。

6．click()在该按钮上模拟一次鼠标单击。

7．focus()为该按钮赋予焦点。

8．value设置或返回在按钮上显示的文本。

主要事件onclick

5． Checkbox对象

1． accessKey 设置或返回访问 checkbox 的快捷键。

2． checked 设置或返回 checkbox 是否应被选中。

3． disabled 设置或返回 checkbox 是否应被禁用。

4． id 设置或返回checkbox 的 id。

5． name 设置或返回 checkbox 的名称。

6． value 设置或返回 checkbox 的value 属性的值

7． blur() 从 checkbox 上移开焦点

8． click() 模拟在 checkbox 中的一次鼠标点击

9． focus() 为 checkbox 赋予焦点。

主要事件onclick

6． Radio对象

1． accessKey 设置或返回访问单选按钮的快捷键。

2． checked 设置或返回单选按钮的状态。

3． disabled 设置或返回是否禁用单选按钮。

4． id 设置或返回单选按钮的 id。

5． name 设置或返回单选按钮的名称。

6． value 设置或返回单选按钮的 value 属性的值。

7． blur() 从单选按钮移开焦点。

8． click() 在单选按钮上模拟一次鼠标点击。

9． focus() 为单选按钮赋予焦点。

主要事件onclick

7． Hidden对象

1．id设置或返回隐藏域的 id。

2．name设置或返回隐藏域的名称。

3．value设置或返回隐藏域的 value 属性的值。

8． Submit对象

1．accessKey设置或返回访问提交按钮的快捷键。

2．disabled设置或返回提交按钮是否应被禁用。

3．id设置或返回提交按钮的 id。

4．name设置或返回提交按钮的名称。

5．value设置或返回在提交按钮上显示的文本。

6．blur()从提交按钮上移开焦点。

7．click()在提交按钮上模拟一次鼠标点击。

8．focus()为提交按钮赋予焦点。

主要事件 onclick

9． Password对象

1．accessKey设置或返回访问密码字段的快捷键。

2．disabled设置或返回是否应被禁用密码字段。

3．id设置或返回密码字段的 id。

4．maxLength设置或返回密码字段中字符的最大数目。

5．name设置或返回密码字段的名称。

6．readOnly设置或返回密码字段是否应当是只读的。

7．size设置或返回密码字段的长度。

8．value设置或返回密码字段的 value 属性的值。

9．blur()从密码字段移开焦点。

10．click()为密码字段赋予焦点。

11．focus()选取密码字段中的文本。

主要事件onfocus，onblur，onselect，onchange

2.5JavaScript框架编程

一个HTML页面可以有一个或多个子框架，这些子框架以<iframe>或<frame>来标记，用来显示一个独立的HTML页面。本节介绍框架的自我控制及框架之间的相互访问，例如从一个框架中引用另一个框架中的JavaScript变量，调用其他框架内的函数，控制另一个框架中表单的行为等

1．框架的引用

1．要引用一个子框架，可以使用如下语法：

(1) window.frames["frameName"]

(2) window.frames.frameName

(3) window.frames[index]

window字样也可以用self代替或省略。假设frameName为页面中第一个框架，则以下写法是等价的：

(1) window.frames["frameName"]

(2) self.frames["frameName"]

(3) self.frames[0]

(4) frames[0]

(5) frameName

每个框架都对应一个HTML页面，对框架的引用也就是对window对象的引用

2．父框架到子框架的引用：

(1) window.frames["frameName"]

事实上，引用的框架就是window对象，实现方法如下：

window.frames["frameName"].frames["frameName2"]这样就很容易引用到了二级子框架，依次类推，可以实现多层框架的引用。

3．子框架到父框架的引用

每个window对象都有一个 parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。如给父框架赋值：var parentWin=

window.parent; parentWin.formA.username.value="javakc";

4．兄弟框架间的引用

如果两个框架为同一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用：self.parent.frames["另一个框架的名字"]

5．不同层次框架间的相互引用：

只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，就可以很容易地实现互相访问。

self.parent.frames["childName"].frames["targetFrameName"]

6．对顶层框架的引用

window对象还有一个top属性，它表示对顶层框架的引用，可以用来一个框架自身是否为顶层框架：if(self==top)

对于框架的引用就是对“window”对象的引用，利用window对象的location属性，可以改变框架的导航，例如：window.frames[0].location="index.html";这就是将页面中的第一个框架的页面重定向到index.html，利用这个性质，甚至可以使用一条

链接来更多的框架，例如：<a href="frame1.location='index.html';frame2.loaction='top.

html'">link</a>

重点应用：

表格的操作综合：

表格的自我控制：

利用checkbox增长与减少：

一.先获取事件源checkbox：curObj=event.srcElement;

二.获取checkbox的父节点td：curCell=curObj.parentNode;

以下是添加表格：

三.根据表格是否被选择执行操作：curObj.checked;

四.在表格table_b新建行：varnewRow=table_b.insertRow();

五.在新建行中插入单元格：var newCell=newRow.insertCell();

六.在新建的单元格中写文本，这里是把选中的表格复制下来：newCell.innerHTML=curRow.cells[1].innerText;其中curRow.cells[1]是选取表格第二列元素;

七.给新单元格赋予一个id号：newCell.id=curObj.value;

删除表格：

八.获取表格总的行：var theRows=table_b.rows;

九.筛选表格行执行删除选中的行：for(var i in theRows.length)判断是否与选中的匹配if(theRows[i].cells[0].id==curObj.value)删除table_b.deleteRow(i);

插入表格：

1.在表格tb1中插入行并赋给R：R=tb1.insert_Row();

2.在行R中插入一个单元格并赋给C：C=R.insertCell();

3.在单元格中写文本如写上传文件：C.innerHTML="<input type='file' name='file'>"

4.在行R中再插入一个单元格如上;

5.删除选择的行：tb1.deleteRow(this.parentNode.parentNode.rowIndex)

6.显示插入表格的代码：tb1.outerHTML

7.给表格单元格添加onclick属性可以这样写C.onclick=函数名

初始化表格my_table_id：

1.可以给表格添加属性如：my_table_id.border="1px",table.width="";

2.使用for循环创建表格行并赋id：varrow=document.createElement("tr");row.id=i;

3.利用行使用for循环给每行创建列数每个单元格赋id：varcell=document.creament

.createElement("td");cell.id=i;

4.给单元格输入文本并连接上一个单元格构成行：cell.appendChild(document.

createTextNode("第"+cell.id+"列"));

5.把所创建的行连接上一行：document.getElemenById("newbody").appendChild

(row);

利用子窗口给父窗口赋值也即回填值：

首先得利用父窗口打开子窗口在利用子窗口里的函数window.parent.dialogArguments.selectQuery.value=as.selectQuery.value;其中selectQuery为输入字符串的的控件的名字,as是表单的名字;打开的普通窗口。用以下的：window.opener.frmAction。selectQuery.value

利用table给父窗口赋值也即回填值：

同上：取值：window.parent,dialogArguments.select1.value=cells.item(0).innerText;记着最后关闭窗口：window.close();

表格总结：

取下拉框的值：this.options[this.selectedIndex].text

给表格框添加属性：利用表格属性id，如id=mytable,mytable.style.borderColor="red"。

获取表格行的长度：table.rows.length;

获取行的索引并删除：deleteRow(document.getElementById(table.rows.length).rowIndex);

获取表格的列数：table.rows.item(0).cells.length/table.rows.length;

给表格插入一列：table.rows[i].insertCell(countCell)//countcell是列数;

删除列：table.rows[i].delectCell(0);0-i-table.rows.length;

获取单元格中的文本：cells.item(i).innerText;

使框中的选项能够下拉多选可以在select中添加multiple属性;

接上：得到选框可以通过this_list=document.form.mylist;并且可以通过this_list.options.length得到个数;对是否被选可以通过this_list.options[i].selected==true;要得到选项的值可以通过：this_list.options[i].text;

表单某控件获取焦点:适用于提交控件时某控件出错，指定该控件

document.myform.mytext1.select();

document.myform.mytext1.focus();

form表单中类型为Text的取值：

1.document.form.mytext.value 其中form为所属表单名字，mytext为指点Text的名字

2.document.all("mytext").value

3.document.form.elements[i].value 其中form为所属表单，i为第几个控件i从零开始

4.document.getElementById("mytext").value

5.document.forms['myform'].elements[0].value

打开窗口的常用方法：

1.dWin=window.showModelessDialog(urlstr,me,'dialogWidth='+width+'px;dialogHeight='+height+'px;help:no;status:no;scroll:no;dialogLeft='+x+';dialogTop='+y);其中urlstr为窗口的路径，me为窗口的名字，后面的为窗口可选的参数

2.打开最大化窗口：Window.open(url,"","top=10,left=10,resizable=yes,width="+

(screen.width)+",height="+(screen.availheight))见commUtil.js

刷新本页面：window.location.reload();

复选框数据提取的方法：

1.获取复选框的个数：document.all(checkedName).length 其中checkedName为复选框的名字

2.判断复选框的个数是否构成数组： typeof(document.all(checkenName).length)

=="undefined"

3.判断复选框是否被选中：document.all(checkedName)[i].checked==true 其中checkedName为复选框的名字，这里采用for循环一个个判断

4.获取复选框：f=document.forms["resultlist"];

1.得个数：f.elements.length;

2.得某个复选框的名字：f.elements[i].name;

3.控制某个复选框的状态：f.elements[i].checked=true; document.forms

["resultlist"].elements["clickall2"].checked= v;

单选按钮数据提取的方法同复选框一样:

按钮只提交一次：首先获取表单中submit与reset控件，tempobj.type.toLowerCase()

=="submit"||tempobj.type.toLowerCase()=="reset"再至这些控件为tempobj.disabled=true

控制某个区域显示或隐藏：

1.显示：document.getElementById(tablelist).style.visiblility="visible";其中tablelist为区域id号

2.隐藏：document.getElementById(tablelist).style.visibility="hidden";

JavaScript的对话框：

1。确认框：进行判断：confirm("你确认删除文件么")再提交：document.testa.submit();

2。eval（）函数的使用：eval能把字符串转成script语句进行处理，如：eval("document.form."+obj+".value");

3。parsefloat函数使用：

转化parseFloat(i);保留两位数：Math.round(i*100)/100,以此类推；

4。parseInt函数使用：parseInt(i,10)把i转成十进制处理；parseInt("123abc",10)转成十进制处理不能转化的不转此时为123

5。Math对象的使用：绝对值：Math.abs()、平方根：Math.sqrt()、几次方：Math.pow(2,8)2的8次方

6.Date日期的使用：

创建Date对象：vartoday=new Date();

today中的方法有：today.getDate()、today.getYear()、today.getMonth()+1、new Date().getDate()、today.getHours()、today.getMinutes、today.getSeconds();

7。this对象的使用：图片路径：this.src

8。tostring方法使用：x.toString(a)把x转成a进制

9。with对象的使用：with(obj)｛｝里面就可以直接使用obj的方法而没必要写成obj.xx

10。forin的使用：for(ee in a)ee为临时变量，a为数组可以使用document.write()输出

11。substring对象的使用：greeting.substring(9,3)/substring(3,9)取greeting字符串第三个开始到第九个前;greeting.substr(3,9)从第三个开始取出九个字符

12。函数isNaN()的使用：isNaN(X)不是数字类型就返回True否则false

1。返回：history.back();

2。数组：数组的创建：var arr= new Array(4)；数组的长度是从0开始,当你给arr[9]赋个值此时arr的长度为10;

3。跳转页面Window.location的使用：window.location="url";

4。使用open打开另一个窗口：window.open("url","name","属性")/window.open("url");

5。window状态栏的显示：使用onMouseOver="window,status='显示的内容';"onmouseOut="window.statu='显示的内容';"

6。父窗口控制子窗口的关闭：子窗口使用父窗口通过window.open打开的，如：abc=window.open()可以使用onclick="JavaScript:abs.close();"

7。定时器的使用：通过window.setInterval("显示内容",1000);其中1000为时间间隔单位为毫秒1000=1秒

window.setTimeOut("调用的对象",1000);

1。按钮特殊效果：onMouseOver="this.className='over';"其中over为css的id;同理有onMouseOut,onMouseDown,onMouseDown,onMouseUp

2。重置表单中的所有选项：clear(this.form)