javascript学习
一、一些特性:
基于对象(Object):
它能运用自己已经创建的对象
基于事件驱动(Event Driven):
对用户的响应是采用以事件驱动的方式进行的,
直接对用户或客户输入做出响应而无需经过Web服务程序
事件驱动:在页面中执行某种操作所产生的动作,
具有安全性能:
它不允许访问本地的硬盘,
不能将数据存入到服务器上,
不允许对网络文档进行修改和删除,
只能通过浏览器实现信息浏览或动态交互
跨平台:
仅依赖于浏览器本身,与操作系统无关
脚本语言:
采用小程序段的方式实现编程
解释性语言:
不需要进行编译,而是在程序运行过程中逐行地被解释
组成:
-
定义了js的语法规范
-
DOM : Document Object Model 文档对象模型,
管理页面
-
BOM : Brower Object Model 浏览器对象模型,
二.语言基础
1.五种原始数据类型(Primary Type):
Number(整数和实数)
String(""或'')
Boolean(true和false)
Null
Undefined
保留字(boolean...)、作用域({})、运算符(+...)、控制字符(\n...)、异常
2.声明变量、函数
var 变量名=变量值
var 函数名=function(){ }
function 函数名(){ }
3.控制语句
if,else
switch,case,default
for,while
continue,break
4.函数
1)常用函数
typeof()//返回类型
alert()//弹框
2)系统函数(内部函数,不属于任何对象)
isNaN(x)
//非数值类型返回true,数值类型返回false
eval(字符串表达式)//返回字符串表达式中的运算结果
test=eval("x=8+9")//test返回17
escape(字符串)//返回字符串的一种简单编码,将非字母数字的符号转换为%加其unicode码的十六进制表示。
escape("hello world")//返回"hello%20world"
unescape(字符串)
//将已编码的字符串还原为纯字符串
encodeURI(URIString)
//可把字符串作为URI进行编码并返回
decodeURI(URIString)
//可对encodeURI()函数编码过的URI进行解码
parseFloat(字符串)
//返回浮点数
parseInt(字符串[,radix])
//返回整数,radix是进制(2~36),默认十进制
5.事件驱动和事件处理
1)事件(Event):鼠标或热键的动作
常见事件及其说明:
----
●onchange 用户改变域的内容
●onclick 鼠标点击某个对象
●ondblclick 鼠标双击某个对象
----
●onmousedown 某个鼠标按键被按下
●onmouseup 某个鼠标按键被松开
●onmousemove 鼠标被移动
●onmouseover 鼠标被移到某元素之上
●onmouseout 鼠标从某元素移开
----
●onkeydown 某个键盘的键被按下
●onkeypress 某个键盘的键被按下或按住
●onkeyup 某个键盘的键被松开
----
onselect 文本被选定
onresize 窗口或框架被调整尺寸
●onsubmit 提交按钮被点击
onreset 重置按钮被点击
onload 某个页面或图像被完成加载
onerror 当加载文档或图像时发生某个错误
onabort 图像加载被中断
onfocus 元素获得焦点
onblur 元素失去焦点
2)事件驱动和事件处理程序
将某个函数与事件联系起来,当事件发生时执行该函数,这就是事件驱动(事件与函数的关联)。
对事件进行处理的函数,称之为时间处理程序。
三.内置对象
访问对象的属性: 对象.属性
访问对象的方法: 对象.方法()
1.数组对象Array
(1)创建
var array=['a',1,true];
var array=Array('a',1,true);
var array=new Array('a',1,true);
var array=new Array(3); arry[0]='a';...
(2)属性
array.length//数组的元素个数
(3)方法
join(分割符)
array.join('/')//返回a/1/true
reverse()//反转
sort()//排序
concat()//连接多个数组
arr1.concat(arr2,arr3)
pop()//删除并返回数组最后一个元素
push()//在数组末尾添加多个元素,返回新的长度
shift()//删除并返回第一个元素
unshift()//在数组开头添加多个元素,并返回新的长度
slice(start,end)//提取截取的片段
splice(index,num[,element1...,])//从index开始,删除num个元素,加入element
(4)内部数组
在网页对象中,有很多本身就是数组对象。
例如,document对象的forms属性(document.forms)就是一个数组对象,
页面中的每个form是其中的一个元素(document.form[i])
2.字符串对象String
(1)创建
var str='asdf';
var str=String('asdf');
var str=new String('asdf');
(2)属性
str.length//返回字符串长度
(3)方法
1)格式设置方法
big(),small(),bold(),italics(),strike(),fontcolor(),fontsize(),link(),
sub(),sup(),blink(),fixed(),
2)通用字符串方法
anchor('name')
<p name="a">hello</p>
str.anchor('a')//锚
charAt(index)//返回指定index处的字符
charCodeAt(index)//返回指定index处的unicode编码
concat()//str.concat(str1)连接字符串
indexOf(str1)//返回检索到的第一个字符串的index
lastIndexOf(str1)//从后往前检索,返回index
match()//匹配正则表达式
replace()//替换与正则表达式匹配的字符串
search()//检索与正则表达式相匹配的值
slice(start,end)//提取截取的片段
split(分隔符)//切片,返回数组
substr(start,num)//提取截取的片段
substring(start,end)//提取截取的片段
tolowerCase(),toUpperCase()
3.数学类Math
(1)属性
Math.E 返回2.718
Math.PI 返回3.14159
(2)方法
abs(x) 返回数的绝对值。
acos(x) 返回数的反余弦值。
asin(x) 返回数的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数(底为e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
toSource() 返回该对象的源代码。
valueOf() 返回 Math 对象的原始值。
4.日期类Date
(1)创建
new Date() 不带参数,则以系统时间为新创建日期对象的内容。
new Date(毫秒数) 以距1970年1月1日零时到期望时间的毫秒数为参数,创建日期对象
new Date(2005,6,3,21,0,22) 设定2005年7月3日,注意月从0开始的
new Date("July 3, 2005 21:00:22") 以指定的时间为新创建日期对象的内容
(2)方法
getDate() 返回几号
getDay() 返回星期几 (0代表星期日,1到6代表星期一到星期六)
getHours() 返回几点
getMinutes() 返回分钟数
getSeconds() 返回秒数
getTime() 返回距1970年1月1日零时到期望时间的毫秒数
getYear() 返回年份
setDate() 设置几号
setDay() 设置星期几 (0代表星期日,1到6代表星期一到星期六)
setHours() 设置几点
setMinutes() 设置分钟数
setSeconds() 设置秒数
setTime() 以距1970年1月1日零时到期望时间的毫秒数为参数,设置时间
setYear() 设置年份
四、窗口对象window
在javascript中可以使用window和self标识符来引用当前的浏览器窗口
每个打开的窗口定义一个window对象,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象
1.window对象属性
opener 返回对创建此窗口的窗口的引用。
closed 返回窗口是否已被关闭。
name 设置或返回窗口的名称。
length 设置或返回窗口中的框架数量。
status 设置窗口状态栏的文本。
defaultStatus 设置或返回窗口状态栏中的默认文本。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
top //返回最顶层的先辈窗口。
parent //返回父窗口。
self //返回对当前窗口的引用。等价于 Window 属性。
window //window 属性等价于 self 属性,它包含了对窗口自身的引用。
· screenLeft
· screenTop
· screenX
· screenY//只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
document 对 Document 对象的只读引用。请参阅 Document 对象。
Screen 对 Screen 对象的只读引用。请参数 Screen 对象。
location 用于窗口或框架的 Location 对象。请参阅 Location 对象。
history 对 History 对象的只读引用。请参数 History 对象。
Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
2.window对象方法
open(url,窗口名称,可选参数) 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
alert(msg) 显示带有一段消息和一个确认按钮的警告框。
prompt('提示',默认值) 显示可提示用户输入的对话框。
confirm(msg)
//显示带有一段消息以及确认按钮和取消按钮的对话框。
//返回true或false
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
focus() 把键盘焦点给予一个窗口。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
//定时
setInterval("func()",milli) 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
blur() 把键盘焦点从顶层窗口移开。
createPopup() 创建一个 pop-up 窗口。
print() 打印当前窗口的内容。
五、文档对象document
1.DOM文档对象模型
window 整个浏览器窗口的统称,是最上层的唯一对象。这一级可以省略,是系统默认值。
document 是Window的一个子对象,包含当前文档(HTML文件)中所有的对象。
form 即表单,包含许多子对象。
window、document和history对象是系统定义好的,其它对象是由我们程序员自己定义的。
2.document对象概述
1)如果给页面中的元素起个名字,则可以把该元素当成document 对象的一个属性来处理。
<form name="form1"></form> //document.form1
2)集合
all[] 提供对文档中所有 HTML 元素的访问。
anchors[] 返回对文档中所有 Anchor 对象的引用。
applets 返回对文档中所有 Applet 对象的引用。
forms[] 返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。
3)属性
body 提供对 <body> 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 <frameset>。
cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的 URL。
title 返回当前文档的标题。
URL 返回当前文档的 URL。
4)方法
close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流,以收集来自任何 document.write() 或
document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。
5)事件
onkeydown 按下任意键
onkeypress 将按下任意键
onkeyup 释放键
onclick 单击鼠标
ondblclick 双击鼠标
onmousedown 按下鼠标
onmouseup 释放鼠标
load 文档装载完毕
unload 文档卸载完毕
可以使用attachEvent方法,为body添加事件。
document.attachEvent ('onclick',getA);
六、表单对象form
能够直接访问页面中的表单;可以实现与用户的交互;不需要服务器的介入,就可以实现动态改变Web页面的行为。
1.document.forms[i]//访问某一个表单
2.方法
document.form[i].submit()//实现表单的提交、
3.属性
Name 表单的名称
action 提交表单后执行的程序
target 指定数据显示在哪个窗口(_blank,_parent,_self,_top)或哪个框架(框架名称)中
encoding 默认为text/html
method “Get”或“Post”
elements 数组其中的元素对应于页面上表单内的各个控件
document.表单名.elements.length可知该表单共有多少个对象
表单的其他几个属性均对应于HTML语法中<form>标记的属性。
4.表单中的各个基本控件
1)text对象
对应于页面中的text输入框控件。
属性
accessKey 设置或返回访问文本域的快捷键。
使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点
alt 设置或返回当浏览器不支持文本域时供显示的替代文本。
defaultValue 设置或返回文本域的默认值。
disabled 设置或返回文本域是否应被禁用。
id 设置或返回文本域的 id。
maxLength 设置或返回文本域中的最大字符数。
name 设置或返回文本域的名称。
readOnly 设 置或返回文本域是否应是只读的。
size 设置或返回文本域的尺寸。
tabIndex 设置或返回文本域的 tab 键控制次序。
type 返回文本域的表单元素类型。
value 设置或返回文本域的 value 属性的值。
方法
blur( ) 将当前焦点移到后台
select( ) 加亮文字,选取文本域中的内容。
focus() 在文本域上设置焦点。
主要事件onfocus,onblur,onselect,onchange
2)textarea对象
对应于页面中的textarea输入控件。
<textarea name="控件名称">默认文本</textarea>
属性
name textarea输入框控件名称
value textarea输入框控件中当前的文本
defaultvalue textarea输入框控件的默认文本
方法
blur( ) 将当前焦点移到后台
select( ) 加亮文字
主要事件
onfocus,onblur,onselect,onchange
3)select对象
对应于网页中的下拉列表框。
<select name="下拉列表框的名称" size="下拉列表框显示的条数">
<option value="选择值">选项描述</option>
<option value="选择值" selected>选项描述</option>
…………
</select>
属性
disabled 设置或返回是否应禁用下拉列表
id 设置或返回下拉列表的 id。
length 返回下拉列表中的选项数目。
multiple 设置或返回是否选择多个项目。
name 设置或返回下拉列表的名称。
options 返回包含下拉列表中的所有选项(option对象)的一个数组。
option对象属性:
text 该选项显示的文字
value 该选项的value值
selected 指明该选项是否别选中
selectedIndex 当前选中项的下标
size 设置或返回下拉列表中的可见行数。
方法
options.add() 向下拉列表添加一个选项。
blur() 从下拉列表移开焦点。
focus() 在下拉列表上设置焦点。
remove() 从下拉列表中删除一个选项。
主要事件
onfocus,onblur,onchange
4)button对象
button对象对应于网页中的按钮控件。
<input type="button" value="按钮上显示的值" name="控件名称">
属性
accessKey 设置或返回访问按钮的快捷键。
alt 设置或返回当浏览器无法显示按钮时供显示的替代文本。
disabled 设置或返回是否禁用按钮。
id 设置或返回按钮的 id。
name 设置或返回按钮的名称。
tabIndex 设置或返回按钮的 tab 键控制次序。
value 设置或返回在按钮上显示的文本。
方法
blur() 把焦点从元素上移开。
click() 在该按钮上模拟一次鼠标单击。
focus() 为该按钮赋予焦点。
主要事件
onclick
5)checkbox对象
checkbox对象对应于网页中的复选框。
<input type="checkbox" value="值" name="控件名称" checked>选项说明
属性
accessKey 设置或返回访问 checkbox 的快捷键。
alt 设置或返回不支持 checkbox 时显示的替代文本。
checked 设置或返回 checkbox 是否应被选中。
defaultChecked 返回 checked 属性的默认值。
disabled 设置或返回 checkbox 是否应被禁用。
id 设置或返回 checkbox 的 id。
name 设置或返回 checkbox 的名称。
tabIndex 设置或返回 checkbox 的 tab 键控制次序。
value 设置或返回 checkbox 的 value 属性的值
方法
blur() 从 checkbox 上移开焦点
click() 模拟在 checkbox 中的一次鼠标点击。
focus() 为 checkbox 赋予焦点。
主要事件
onclick
6)radio对象
radio对象对应于网页中的单选控件。当网页中具有多个相同名称的单选控件后,就形成了一个radio对象数组,其中每个单选控件即为一个radio对象。
<input type="radio" value="选项值" name="单选项名称" checked>选项说明
<input type="radio" value="选项值" name="单选项名称" >选项说明
…………
属性
accessKey 设置或返回访问单选按钮的快捷键。
alt 设置或返回在不支持单选按钮时显示的替代文本。
checked 设置或返回单选按钮的状态。
defaultChecked 返回单选按钮的默认状态。
disabled 设置或返回是否禁用单选按钮。
id 设置或返回单选按钮的 id。
name 设置或返回单选按钮的名称。
tabIndex 设置或返回单选按钮的 tab 键控制次序。
value 设置或返回单选按钮的 value 属性的值。
方法
blur() 从单选按钮移开焦点。
click() 在单选按钮上模拟一次鼠标点击。
focus() 为单选按钮赋予焦点。
主要事件
onclick
7)hidden对象
hidden对象对应于网页中的隐藏域。
<input type="hidden" value="值" name="名称" >
属性
alt 设置或返回当不支持隐藏输入域时显示的替代文本。
id 设置或返回隐藏域的 id。
name 设置或返回隐藏域的名称。
value 设置或返回隐藏域的 value 属性的值。
8)submit对象
submit对象对应于网页中的submit按钮。
<input type="submit" value="显示文本" name="名称" >
属性
accessKey 设置或返回访问提交按钮的快捷键。
alt 设置或返回当浏览器不支持提交按钮时供显示的替代文本。
disabled 设置或返回提交按钮是否应被禁用。
id 设置或返回提交按钮的 id。
name 设置或返回提交按钮的名称。
tabIndex 设置或返回提交按钮的 tab 键控制次序。
value 设置或返回在提交按钮上显示的文本。
方法
blur() 从提交按钮上移开焦点。
click() 在提交按钮上模拟一次鼠标点击。
focus() 为提交按钮赋予焦点。
主要事件
onclick
9)password对象
password对象对应于网页中的密码输入框。
<input type="password" value="值" name="名称" >
属性
accessKey 设置或返回访问密码字段的快捷键。
alt 设置或返回当不支持密码字段时显示的替代文字。
defaultValue 设置或返回密码字段的默认值。
disabled 设置或返回是否应被禁用密码字段。
id 设置或返回密码字段的 id。
maxLength 设置或返回密码字段中字符的最大数目。
name 设置或返回密码字段的名称。
readOnly 设置或返回密码字段是否应当是只读的。
size 设置或返回密码字段的长度。
tabIndex 设置或返回密码字段的 tab 键控制次序。
value 设置或返回密码字段的 value 属性的值。
方法
blur() 从密码字段移开焦点。
click() 为密码字段赋予焦点。
focus() 选取密码字段中的文本。
七、History与Navigator对象
1.History对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
1)属性
length 返回浏览器历史列表中的 URL 数量。
History 对象方法
2)方法
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(number|URL) 加载 history 列表中的某个具体页面。
-1表示前一个页面
2.Navigator 对象
Navigator 对象包含有关浏览器的信息。可以使用这些属性进行平台专用的配置。
Navigator 对象的实例是唯一的,可以用 Window 对象的 navigator 属性来引用它。
Navigator 对象集合
1)集合
plugins[]返回对文档中所有嵌入式对象的引用。
该集合是一个 Plugin 对象的数组,其中的元素代表浏览器已经安装的插件。Plug-in
对象提供的是有关插件的信息,其中包括它所支持的 MIME 类型的列表。
虽然 plugins[] 数组是由 IE 4 定义的,但是在 IE 4 中它却总是空的,因为 IE4 不支持插件和 Plugin 对象。
2)属性
appCodeName 返回浏览器的代码名。
appMinorVersion 返回浏览器的次级版本。
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
browserLanguage 返回当前浏览器的语言。
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass 返回浏览器系统的 CPU 等级。
onLine 返回指明系统是否处于脱机模式的布尔值。
platform 返回运行浏览器的操作系统平台。
systemLanguage 返回 OS 使用的默认语言。
userAgent 返回由客户机发送服务器的 user-agent 头部的值。
userLanguage 返回 OS 的自然语言设置。
3)方法
javaEnabled() 规定浏览器是否启用 Java。
taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。
八、其他对象
九、自定义对象
十、框架编程
一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>或<frame>来标记,
用来显示一个独立的HTML页面。本节介绍框架的自我控制及框架之间的相互访问,
例如从一个框架中引用另一个框架中的JavaScript变量,调用其他框架内的函数,控制另一个框架中表单的行为等。
出处:https://blog.csdn.net/a125138/article/details/7819466