javascript杂记

向指定的位置写入某些内容：

var d = document.getElementById("某指定位置");

d.innerText="要写入的内容"（String）;（d.innerHTML有细微的差别）

var time = new Date();

time.toLocaleStirng();返回时间字符串

js获取select的选中值

var obj = document.getElementById(”select_id”); //selectid

var index = obj.selectedIndex; // 选中索引

var text = obj.options[index].text; // 选中文本

var value = obj.options[index].value; // 选中值

js消息框

alert（""）;警告框

confirm("");确认框，返回boolean类型

prompt("文本","默认值");提示框

HTML DOM

如何改变 HTML 元素的内容 (innerHTML)

如何改变 HTML 元素的样式 (CSS)

如何对 HTML DOM 事件对做出反应

如何添加或删除 HTML 元素

改变html中的内容（innerHTML）

document.getElementById(id).innerHTML=new HTML；

改变html的属性

document.getElementById(id).attribute(属性)= new value;

改变HTML样式

document.getElementById(id).style.property(属性)=new style;

使元素不可见（显示与消失）

可以使用样式中的visibility属性（hidden、visible），还可以使用display属性div.style.display=(div.style.display=='none'?'block':'none');

Style对象的属性

背景

边框和边距

布局

列表

杂项

定位

打印

滚动条

表格

文本

规范

Background 属性

background 在一行中设置所有的背景属性

backgroundAttachment 设置背景图像是否固定或随页面滚动

backgroundColor 设置元素的背景颜色

backgroundImage 设置元素的背景图像

backgroundPosition 设置背景图像的起始位置

backgroundPositionX 设置backgroundPosition属性的X坐标

backgroundPositionY 设置backgroundPosition属性的Y坐标

backgroundRepeat 设置是否及如何重复背景图像

Border 和 Margin 属性

属性

描述

border 在一行设置四个边框的所有属性

borderBottom 在一行设置底边框的所有属性

borderBottomColor 设置底边框的颜色

borderBottomStyle 设置底边框的样式

borderBottomWidth 设置底边框的宽度

borderColor 设置所有四个边框的颜色 (可设置四种颜色)

borderLeft 在一行设置左边框的所有属性

borderLeftColor 设置左边框的颜色

borderLeftStyle 设置左边框的样式

borderLeftWidth 设置左边框的宽度

borderRight 在一行设置右边框的所有属性

borderRightColor 设置右边框的颜色

borderRightStyle 设置右边框的样式

borderRightWidth 设置右边框的宽度

borderStyle 设置所有四个边框的样式 (可设置四种样式)

borderTop 在一行设置顶边框的所有属性

borderTopColor 设置顶边框的颜色

borderTopStyle 设置顶边框的样式

borderTopWidth 设置顶边框的宽度

borderWidth 设置所有四条边框的宽度 (可设置四种宽度)

margin 设置元素的边距 (可设置四个值)

marginBottom 设置元素的底边距

marginLeft 设置元素的左边距

marginRight 设置元素的右边据

marginTop 设置元素的顶边距

outline 在一行设置所有的outline属性

outlineColor 设置围绕元素的轮廓颜色

outlineStyle 设置围绕元素的轮廓样式

outlineWidth 设置围绕元素的轮廓宽度

padding 设置元素的填充 (可设置四个值)

paddingBottom 设置元素的下填充

paddingLeft 设置元素的左填充

paddingRight 设置元素的右填充

paddingTop 设置元素的顶填充

List 属性

listStyle 在一行设置列表的所有属性

listStyleImage 把图像设置为列表项标记

listStylePosition 改变列表项标记的位置

listStyleType 设置列表项标记的类型

Positioning 属性

bottom 设置元素的底边缘距离父元素底边缘的之上或之下的距离

left 置元素的左边缘距离父元素左边缘的左边或右边的距离

position 把元素放置在static, relative, absolute 或 fixed 的位置

right 置元素的右边缘距离父元素右边缘的左边或右边的距离

top 设置元素的顶边缘距离父元素顶边缘的之上或之下的距离

zIndex 设置元素的堆叠次序

设置滚动条的背景色

Table 属性

属性

描述

borderCollapse 设置表格边框是否合并为单边框，或者像在标准的HTML中那样分离。

borderSpacing 设置分隔单元格边框的距离

Text 属性

属性

描述

color 设置文本的颜色

font 在一行设置所有的字体属性

fontFamily 设置元素的字体系列。

fontSize 设置元素的字体大小。

fontSizeAdjust 设置/调整文本的尺寸

fontStretch 设置如何紧缩或伸展字体

fontStyle 设置元素的字体样式

fontVariant 用小型大写字母字体来显示文本

fontWeight 设置字体的粗细

letterSpacing 设置字符间距

lineHeight 设置行间距

quotes 设置在文本中使用哪种引号

textAlign 排列文本

textDecoration 设置文本的修饰

textIndent 缩紧首行的文本

textShadow 设置文本的阴影效果

textTransform 对文本设置大写效果

unicodeBidi

whiteSpace 设置如何设置文本中的折行和空白符

wordSpacing 设置文本中的词间距

HTML事件

大致有以下HTML事件

HTML 事件的例子：

当用户点击鼠标时（onclick事件）

当网页已加载时（onload/onunload）

当图像已加载时

当鼠标移动到元素上时(onmouseover(鼠标移到HTML元素上) 和 onmouseout（鼠标移出HTML元素时），onmousedown(鼠标点击),onmouseup（鼠标释放），之后就是onclick)

当输入字段被改变时(onchange 事件常结合对输入字段的验证来使用。)

当提交 HTML 表单时

当用户触发按键时

onfocus 输入字段获得焦点，onblur 失去焦点

onselect 事件会在文本框中的文本被选中时发生。

Event对象中的一些事件句柄

onabort 图像的加载被中断。

onblur 元素失去焦点。

onchange 域的内容被改变。

onclick 当用户点击某个对象时调用的事件句柄。

ondblclick 当用户双击某个对象时调用的事件句柄。

onerror 在加载文档或图像时发生错误。

onfocus 元素获得焦点。

onkeydown 某个键盘按键被按下。

onkeypress 某个键盘按键被按下并松开。

onkeyup 某个键盘按键被松开。

onload 一张页面或一幅图像完成加载。

onmousedown 鼠标按钮被按下。

onmousemove 鼠标被移动。

onmouseout 鼠标从某元素移开。

onmouseover 鼠标移到某元素之上。

onmouseup 鼠标按键被松开。

onreset 重置按钮被点击。

onresize 窗口或框架被重新调整大小。

onselect 文本被选中。

onsubmit 确认按钮被点击。

onunload 用户退出页面。

正则表达式(RegExp)；RegExp对象有3个方法：test()、exec()、compile();

test()方法检索字符串中的指定值。返回值是true或false；

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出将是：true

exec()

exec()检索字符串中的指定值，返回值是被找到的值；如果没发现返回null

var patt1=new RegExp("e")

由于该字符串中存在字母 "e"，以上代码的输出将是：e

还可以向RegExp对象添加第二个参数。

;例如，如果需要找到所有某个字符的所有存在，则可以使用 "g" 参数 ("global")。

document.write(patt1.exec("The best things in life are free"));

var patt1=new RegExp("e","g");

do

{

result=patt1.exec("The best things in life are free");

document.write(result);

}

while (result!=null)

由于这个字符串中 6 个 "e" 字母，代码的输出将是：

eeeeeenull

compile()

compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

例子：

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：

truefalse

格式匹配：

reg=/(^[a-zA-Z_]{1}([a-zA-Z_.0-9]*))$/;(由数字、字母下划线、点组成、而且只能以字母或下划线开头)；

方括号

方括号用于查找某个范围内的字符：

表达式

描述

[abc] 查找方括号之间的任何字符。

[^abc] 查找任何不在方括号之间的字符。

[0-9] 查找任何从 0 至 9 的数字。

[a-z] 查找任何从小写 a 到小写 z 的字符。

[A-Z] 查找任何从大写 A 到大写 Z 的字符。

[A-z] 查找任何从大写 A 到小写 z 的字符。

[adgk] 查找给定集合内的任何字符。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符

描述

. 查找单个字符，除了换行和行结束符。

\w 查找单词字符。

\W 查找非单词字符。

\d 查找数字。

\D 查找非数字字符。

\s 查找空白字符。

\S 查找非空白字符。

\b 匹配单词边界。

\B 匹配非单词边界。

\0 查找 NUL 字符。

\n 查找换行符。

\f 查找换页符。

\r 查找回车符。

\t 查找制表符。

\v 查找垂直制表符。

\xxx 查找以八进制数 xxx 规定的字符。

\xdd 查找以十六进制数 dd 规定的字符。

\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词

描述

n+ 匹配任何包含至少一个 n 的字符串。

n* 匹配任何包含零个或多个 n 的字符串。

n? 匹配任何包含零个或一个 n 的字符串。

n{X} 匹配包含 X 个 n 的序列的字符串。

n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。

n{X,} 匹配包含至少 X 个 n 的序列的字符串。

n$ 匹配任何结尾为 n 的字符串。

^n 匹配任何开头为 n 的字符串。

?=n 匹配任何其后紧接指定字符串 n 的字符串。

?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法

描述

FF

IE

compile 编译正则表达式。

exec 检索字符串中指定的值。返回找到的值，并确定其位置。

test 检索字符串中指定的值。返回 true 或 false。

支持正则表达式的 String 对象的方法

方法

描述

FF

IE

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

match 找到一个或多个正则表达式的匹配。

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

split 把字符串分割为字符串数组。

javascript 计时器（Timing）

setTimeout("动作"，time(毫秒));

var t=setTimeout("alert('5 秒！')",5000)，执行后会在5秒后弹出警示框；

利用自身循环可以制作计时器；

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setTimeout()

clearTimeout()

取消setTimeout()

clearTimeout(t);停止计时

<script type="text/javascript">

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()",1000)

}

function stopCount()

{

c=0;

setTimeout("document.getElementById('txt').value=0",0);

clearTimeout(t);

}

</script>