JS&DOM

JS&DOM

2007年05月30日 星期三 09:17

String 对象允许操作和格式化文本字符串以及确定和定位字符串中的子字符串。
length 属性 返回字符串的长度。
anchor 方法 返回对象中指定文本周围带有HTML定位点（具有 NAME 属性）的字符串。
var strVariable = "This is an anchor";
strVariable = strVariable.anchor("Anchor1");
最后一个语句后面的 strVariable 的值为：
<A NAME="Anchor1">This is an anchor</A>
big 方法
blink 方法
bold 方法
fontcolor 方法
fontsize 方法
italics 方法
link 方法
small 方法
strike 方法
sub 方法
sup 方法
toUpperCase 方法 返回一个字符串，该字符串中的所有字母都被转换为大写字母。
toLowerCase 方法 返回一个字符串，该字符串中的所有字母都被转换为小写字母。
substring(start, end)方法 返回位于 String 对象中的指定位置的子字符串。
start 从 0 开始的索引整数，指示子字符串的起始位置。
end 从 0 开始的索引整数，指示子字符串的结束位置。
substr(start,[length])方法 返回一个从指定位置开始，并具有指定长度的子字符串。
start 所需的子字符串的起始位置。字符串中第一个字符的索引为 0。
length 返回的子字符串中包含的字符数。
split([ separator[, limit]]) 返回一个字符串拆分为若干子字符串时所产生的字符串数组。
separator 标识用于分隔字符串的一个或多个字符。
limit 一个用于限制数组中返回的元素数的值。
indexOf(subString[, startIndex])方法 返回 String 对象内第一次出现子字符串的字符位置。
subString 在 String 对象中搜索的子字符串。
startIndex 该整数值指定在 String 对象内开始搜索的索引。
lastIndexOf(substring[, startindex]) 返回 String 对象中某个子字符串的最后一个匹配项的索引.
参数同上
charAt(index)方法 返回 String 对象的指定索引处的字符

Date 对象启用日期和时间的基本存储和检索。
Date()
Date( year, month , date[, hours [, minutes [, seconds [, ms ]]]] )
getDate 方法 使用当地时间返回 Date 对象中一个月第几天的值。
getDay 方法 使用当地时间返回 Date 对象中该天的星期值。
getFullYear 方法 使用当地时间返回 Date 对象中的年份值。
getHours 方法 使用当地时间返回 Date 对象中的小时值。
getMilliseconds 方法 使用当地时间返回 Date 对象中的毫秒值。
getMinutes 方法 使用当地时间返回 Date 对象中的分钟值。
getMonth 方法 使用当地时间返回 Date 对象中的月份值。
getSeconds 方法 使用当地时间返回 Date 对象中的秒值。
getTime 方法 返回 Date 对象中的时间值。
getYear 方法 将 Date 对象中的年份值返回。
setDate 方法 在当地时区中设置 Date 对象的日期。
setFullYear 方法 使用当地时间设置 Date 对象中的年份值。
setHours 方法 使用当地时间设置 Date 对象中的小时值。
setMilliseconds 方法 使用当地时间设置 Date 对象中的毫秒值。
setMinutes 方法 使用当地时间设置 Date 对象中的分钟值。
setMonth 方法 使用当地时间设置 Date 对象中的月份值。
setSeconds 方法 使用当地时间设置 Date 对象中的秒钟值。
setTime(milliseconds) 方法 设置 Date 对象中的日期和时间值。
milliseconds 一个数值，表示自 UTC 1970 年 1 月 1 日午夜之后经过的毫秒数。
setYear 方法 设置 Date 对象中的年份值。
toDateString 方法 以字符串值的形式返回一个日期。
toLocaleDateString 方法 将一个日期以字符串值的形式返回，该字符串应适合于宿主环境的当前区域设置。
toLocaleString 方法 以字符串值的形式返回一个值，该值适合于宿主环境的当前区域设置。
toTimeString 方法 以字符串值形式返回时间。

Math 对象属性和方法
ceil(Number) 方法 返回大于或等于其数字参数的最小整数。
floor(Number) 方法 返回小于或等于其数值参数的最大整数。
max([number1[, ... [, numberN ]]]) 返回零个或更多个所提供的数值表达式中较大的那个。
min([number1[, ... [, numberN ]]]) 返回零个或更多个所提供的数值表达式中较小的那个。
pow(base, exponent)方法 返回基数表达式的指定次幂的值。
random 方法 返回介于 0 和 1 之间的随机数。
round(number) 返回所提供的舍入到最近整数的数值表达式。
sqrt(number) 返回一个数的平方根。

Array 对象属性和方法
length 属性 返回数组中元素的个数。
concat([arrayitem1[, ... [, arrayitemN]]]]) 方法 数组合并
join(separator) 用指定连接符把数组元素连接起来形成字符串
shift 方法 从数组中移除第一个元素并返回该元素。
pop 方法 从数组中移除最后一个元素并将该元素返回。
push 方法 将新元素追加到一个数组中，并返回新的数组长度。
unshift 方法 将指定的元素插到数组的开头。
reverse 方法 将元素顺序被反转的 Array 对象返回。
slice 方法 返回一个数组中的一部分。
sort 方法 返回一个元素已经进行了排序的 Array 对象

JScript 中的强制
JScript 可以对不同类型的值执行运算，而不会导致编译器引发异常。

将数字与字符串相加 将数字强制为字符串。
将布尔值与字符串相加 将布尔值强制为字符串。
将数字与布尔值相加 将布尔值强制为数字。

若要将字符串显式转换为整数，可以使用 parseInt 方法。
若要将字符串显式转换为数字，可以使用 parseFloat 方法。
网页编程
各对象的层次关系
window
localtion
frames
history
navigator
event
screen
document
links
anchors
images
forms
embeds
frames
scripts
all
selection
styleSheets
body
Window对象
Window对象的方法：
alert()显示一个只有OK按钮的提示框
confirm()显示一个有OK和Cancel按钮的对话框
prompt(msg,value)显示一个用户可以输入信息的对话框。msg提示信息，value默认值
close()关闭当前浏览器窗口
navigate(url)在当前窗口中导航到指定的网址
setInterval(语句,秒数)设置浏览器每隔多长时间就执行指定的语句一次
setTimeout(语句,毫秒数)设置浏览器过多长时间后执行指定的语句
clearInterval()取消setInterval设置
clearTimeout()取消setTimeout设置
moveTo(x,y)将浏览器窗口移动到屏幕指定的位置上
resizeTo(w,h)改变浏览器的窗口大小
open("detail.htm","_blank","top=0,left=0,width=200,height=200,toolbar=no")打开窗口
showModalDialog("url")产生一个模态对话框
showModellessDialog("url")产生一个非模态对话框
案例：打开一个窗口的同时打开一个小窗口，这个小窗口在5秒后自动关闭
在母页中的代码：
<script language=javascript>
window.open("a.htm","_blank","top=0,left=0,width=200,height=200,toolbar=no");
</script>
在子页中的代码：
<script language=javascript>
window.setTimeout("window.close()",5000);
</script>
Window对象的属性：
closed属性：布尔型，表示Window对象对应的窗口是否已关闭
opener属性：返回打开当前窗口的那个窗口对象
defaultstatus属性：设置和返回默认状态栏中的内容
status属性：设置和返回状态栏中正显示的文本内容
screenTop属性：返回窗口左上角顶点在屏幕上的竖直位置。
screenLeft属性：返回窗口左上角顶点在屏幕上的水平位置。
案例1： 打开一个窗口的同时打开一个小窗口，当关闭父窗口时也关闭子窗口
<script language=javascript>
<!--
var child = window.open("htmlpage2.htm","_blank","top=0,left=0,width=200,height=200,toolbar=no");
function closeChild()
{
if(!child.closed)
{
child.close();
}
}
//-->
</script>
案例2：让状态栏中的文字移动
<script language=javascript>
var str = "欢迎您";
var space = 0;
var dir = 1;
function scroll()
{
var strspace = "";
space += 1*dir;
if(space > 40||space<0)
{
dir = -dir;
}
for(var i=0;i<space;i++)
{
strspace += " ";
}
window.status = strspace + str;
}
function start()
{
window.setInterval("scroll()",100)
}
</script>
window对象的事件
onload事件：浏览器装载完网页后触发。
onunload事件：浏览器卸载网页文档后触发。
除了上面的事件外，window对象还有一些大多数HTML元素都有的通用事件。
onclick事件：单击某个HTML元素时触发。
onmousemove事件：鼠标在某个元素上面移动时触发。
onmouseover事件：当鼠标从外面移进一个HTML元素的边界时触发。
onmouseout事件：当鼠标从一个HTML元素中移出时触发。
onmousedown事件：当鼠标任何键按下时触发。
onmouseup事件：当鼠标任何键弹起时触发。
onkeydown事件：当键盘的键按下时产生的事件。
onkeyup事件：当键盘按键弹起时产生的事件。
onkeypress事件：当用户按了一个（数字、字母）键所产生的事件。
window对象中的其它对象
location对象：用于设置和返回当前网页的URL信息
href属性：是location对象中的常用属性。可以让浏览器载入一个新的网页。
window.location.href="http://www.gohy.net/index.htm";
这条语句等效于window.navigate("http://www.gohy.net/index.htm")
reload()方法：用于重新载入（刷新）窗口中的页面。
event对象：可以获得和设置当前事件的有关信息。
altKey属性：用于检测事件发生时Alt键是否被按下，true按下，false未按下
ctrlKey属性：用于检测事件发生时Control键是否被按下，true按下，false未按下
shiftKey属性：用于检测事件发生时Shift键是否被按下，true按下，false未按下
clientX,clientY：设置和返回鼠标相对窗口客户区顶点的x,y坐标。使用面积
screenX,screenY：设置和返回鼠标相对屏幕顶点的x,y坐标。
offsetX,offsetY：设置和返回鼠标相对事件源的顶点的x,y的坐标。
x,y：设置和返回鼠标相对事件源的父元素顶点的x,y坐标。
cancelBubble： 设置和返回事件是否继续向下传递。例如，单击文档中的一个图片，在默认情况，首先是这个图片对象上发生onclick事件，接着是在窗口对象上也发生了 onclick事件，如果在图片对象的onclick事件处理程序中设置event对象的cancelBubble属性为true，这样，就可以阴止事件 往下传递，在窗口对象上就不会再发生onclick事件。
srcElement：设置和返回事件源对象。
keyCode:设置和返回键盘按下，键盘弹起时的那个按键的unicode码。
button：用于检索鼠标移动，鼠标按下，鼠标弹起时使用的是哪个鼠标按键。1-左，2-右
案例：当按下esc键时浏览器窗口自动退出。
<body onkeypress="ex()">

<script language=javascript>
<!--
function ex()
{
if(window.event.keyCode == 27)
{
window.close();
}
}
//-->
</script>
案例：验证cancelBubble和shiftKey
<body onclick=showSrc()>
<img src=c:c.jpg onclick = checkcancel()>
</body>
</html>
<script language=javascript>
<!--
function checkcancel()
{
if(window.event.shiftKey)
{
window.event.cancelBubble = true;
}
}
function showSrc()
{
if(window.event.srcElement.tagName=="IMG")
{
alert(window.event.srcElement.src);
}
}
//-->
</script>
frame：代表某个窗口中所有的框架窗口的集合，它可以返回各个框架窗口对应的window对象。
如：单击框架0上的刷新按钮来刷新框架1里的内容时，代码如下。
onclick = 'window.parent.frames[1].location.reload()'
onclick = 'window.parent.frames["bottom"].location.reload()'
onclick = 'window.parent.frames.item(1).location.reload()'
onclick = 'window.parent.frames.item("bottom").location.reload()'
onclick = 'window.parent["bottom"].location.reload()'
screen:提供了显示器的分辩率和色彩度。
width:屏幕宽度
height:屏幕高度
availWidth:客户区宽度
availHeight:客户区高度
colorDepth:屏幕色彩度
history:提供对浏览器访问历史的访问
forward:向前
back:向后:
go:到指定的地方去。
document:此对象代表整个网页文档，它的功能较多，下面单独介绍

document对象：代表装入的整个HTML文档，文档中的每一个HTML元素都可以用一个JavaScript对象与之对应。
document对象的方法：
writer方法：用于向HTML文档中动态写入内容
writerln方法：与writer方法相似，但在每一次写完加一个换行符"n"
getElementById方法：返回id属性等于指定参数的HTML元素对象。
可以为每一个元素指定一个id，在同一HTML文档中不能有两个相同的id
getElementsByName方法：返回name属性等于指定参数的所有的HTML元素对象的对象数组。
createElement方法：产生一个代表某个HTML元素的对象，
document属性：
alinkColor:活动起链接的色彩
linkColor:正常超链接的色彩
vlinkColor:访问过的超链接的色彩
bgColor:文档的背景色
fgColor:文档的前景色

forms数组，anchors数组，links数组，images数组，scripts数组，all数组，styleSheets数组
body对象：
body属性：
background属性：设置 背景图片的URL
bgProperties:设置背景图片是否随网页滚动。空字符串－一起滚动;fixed固定背景
text:设置文本色彩
topMargin,bottomMargin,leftMargin,rightMargin设置边距

body与其它HTML元素所共有的属性有：
id:设置或返回元素的ID值。
name:设置或返回元素的name
className:设置或返回元素的class值。
innerText：设置或返回标签对之间的内容。能显示HTML标记原型
设置时将替换HTML元素中的内容。
读取时不返回任何HTML元素，只返回有效值。
innerHTML：设置或返回标签对之间的内容。把HTML标记解析
设置时将替换HTML元素中的内容。
读取时返回HTML标签中的所有内容。
outerText:设置或返回标签符号本身和其中的内容。
设置时将替换HTML标签本身及其内容。
读取时只返回HTML标签中的内容，不返回HTML元素本身。
outerHTML:设置或返回标签符号本身和其中的内容。
设置时将替换HTML标签本身及其内容。
读取时只返回HTML标签中的内容，返回HTML元素本身。
offsetTop,offsetLeft：返回对象元素边界的左上角顶点相对上层HTML元素边界的左上角的竖直和水平位置。
offsetWidth,offsetHeight:返回对象元素自身的宽度和高度。
clientTop,clientLeft:返回对象的左上角在网页区的竖直，水平位置。
clientWidth,clientHeight:返回对象的可见区域的宽度和高度。
scroll:是否包含滚动条yes,no,auto
scrollTop:设置或返回滚动条向下滑的数值。
scrollLeft:设置或返回滚动条向右滑的数值。
scrollWidth,scrollHeight:返回元素中完整内容的宽度和高度，包括未显示出来的部分。

body对象的事件：
onselectstart事件：当用户选取文档内容的时候发生。
onscroll事件：在用户拖动滚动条的时候发生。
案例一:禁止用户选定网页的内容。
<body onselectstart="return false">
案例二：实现在固定位置浮动图片。
<script language=javascript>
function deal()
{
i.style.top = document.body.scrollTop + 50;
i.style.left = document.body.scrollLeft;
}
</script>
<body onselectstart="return false" onscroll = deal()>
<TEXTAREA rows="200" cols="20" ID="Textarea1" NAME="Textarea1"></TEXTAREA>
<IMG name=i id=i style="LEFT: 0px; POSITION: absolute; TOP: 50px" alt="" src="">
</body>
body对象的属性：
all数组：代表某个对象所对应的HTML标签中所有的HTML子对象的集合。
document.body.all.(元素名或ID值)：访问body标签中的所有元素。
style对象：用于设置某个对象所对应的HTML标签 的样式风格。
案例1：动态显示与隐去图片。
<script language=javascript>
function c()
{
var s = i.style.display;
if(s != "none")
i.style.display="none";
else
i.style.display="block";
}
</script>
<input type=button id=b name=b value="change" onclick=c()>
<IMG name=i id=i style="LEFT: 0px; POSITION: absolute; TOP: 50px" alt="" src="">
案例2：实现动态菜单的效果
<script language=javascript>
<!--
function show()
{
list1.style.display="block"
d.innerText = "-城市列表";
}
function hide()
{
list1.style.display = "none";
d.innerText = "+城市列表";
}
//-->
</script>
<span id=d style="CURSOR: hand" onmouseover=show()>-城市列表</span>
<div id=list1 onmouseout=hide()>
北京<br>
上海<br>
天津<br>
南京<br>
</div>