javascript代码实例教程-17History link image location anchor对象_js

上一篇: javascript代码实例教程-JavaScr... 下一篇:javascript代码实例教程-JavaScr...

javascript代码实例教程-17History link image location anchor对象

发布时间：2019-01-15 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-17History link image location anchor对象，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 1link对象
htML文档中创建一个超链接是使用A标记，格式是：
<A href="要链接的位置或一个合法的URL" NamE="名称">....</A>

访问link对象，除了使用link对象的名称访问link对象外，浏览器还将所创建的当前文档中所有link对象保存在一个名为links数组中，也可以通过document.links[下标]来访问。
link对象的属性
hash，表示每一个URL的链接目标的名称
host，表示每一个URL的主机部分(名字和端口)
href，表示一个完整的URL
pathname，表示每一个URL的完整路径。
port，表示URL中的端口。
PRotocol，表示每一个URL中使用的协议。
target，表示超链接结果的目标窗口。
id 设置或返回某个元素的 id
name 设置或返回元素的名称
disabled 设置或返回目标 URL 是否当被禁用

link对象的事件
onLoad 在浏览器加载link对象后执行一些代码
onClick，在超链接上单击鼠标时触发。
onDblClick，在超链接上双击鼠标触发。
onMouseDown，在超链接上按下鼠标左键时触发。
onMouseOut,在超链接上移开鼠标时触发。
onMouseUp，在超链接上松开鼠标键时触发。
onKeyDown，在超链接上按下某键时触发。
onKeyUp，在超链接上松开某键时触发。
onKeyPress，在超链接上按住某键时触发。

2anchor对象
在文档中表示link对象跳转的目的位置的对象被称为锚点对象(anchor对象)。锚点对象表示跳转后着陆的地点。在HTML文档中创建一个anchor对象也使用A标记，但不需要href属性。格式为：
<A name="锚点对象名称">...</A>

anchor对象只有一个name属性，表示锚点的名称，浏览器将文档中所有锚点对象保存在一个名为anchors的数组中，访问锚点对象可以使用document.anchor[下标]

你可以通过 Document 对象或使用 getElementById() 索引锚的数组(用name的数字)来访问一个锚对象。
Anchor 对象的属性
属性描述
accessKey 设置或返回访问一个链接的快捷键。
charset 设置或返回被链接资源的字符集。
coords 设置或返回用逗号分割的列表里面有热点图链接。
href 设置或返回被链接资源的 URL。
hreflang 设置或返回被链接资源的语言代码。
id 设置或返回一个链接的 id。
innerHTML 设置或返回链接的文字。
name 设置或返回一个链接的名称。
rel 设置或返回当前文档与目标 URL 之间的关系。
rev 设置或返回目标 URL 与当前文档之间的关系。
Shape 设置或返回在热点图中链接的形状。
tabIndex 设置或返回链接的tab顺序。
target 设置或返回打开链接的方式。
tyPE 设置或返回被链接资源的 MIME 类型。

当我们使用href链接到锚点时需在锚点名称前加一个#号。如：
<A href=#锚点名称>...</A>

Anchor 对象的方法
方法描述
blur() 取消对某连接的聚焦
focus() 让某连接获得聚焦

3location对象
当某个文档在浏览器中运行时，浏览器会为这个文档创建一个location对象和一个history对象，并且这两个对象都属于window对象。

Location 对象
Location 对象实际上是 JavaScript 对象，而不是 HTML DOM 对象。
Location 对象包含了当前URL的信息。
例子：把用户带到一个新的地址
<html>
<head>
<script type="text/javascript">
function currLocation()
{
alert(window.location)
}
function newLocation()
{
window.location="/index.html"
}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的 URL">
<input type="button" onclick="newLocation()" value="改变 URL">
</body>
</html>
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Location 对象的属性

属性描述
hash 设置或返回href属性中在#符号后面的内容。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
seArch 设置或返回href属性里连同?号之后的内容(包括?号),如果没有?和后面的内容则返回空串''。

Location 对象的方法
方法描述
assign() 加载新的文档。
reload(true/false)，重新装入URL，如果使用参数true表示从服务器重新装入。如果使用参数false表示直接从浏览器的缓冲区中装入。
replace(URL)，装入URL指定的新页面，并替代当前文档对应的URL在历史列表中的位置。

4history对象
history对象是window对象的一个属性，它本身有一个十分有用的属性是length,用于返回浏览历史列表的URL数量。
history对象的方法：
go(x)，history.go(x)；在历史的范围内去到指定的一个地址。如果 x < 0，则后退 x 个地址，如果 x > 0，则前进 x 个地址，如果 x == 0，则刷新现在打开的网页。window.history.go(0) 跟 location.reload() 是等效的。

forward()，装入历史记录中的下一个URL的页面。
back()，装入历史记录中的上一个URL的页面。

5image对象

images[]文档对象
访问image对象可以通过document.image对象名称或document.images[下标]来访问。
image是图片对象，而document.images[]是一个数组，包含了文档中所有图片( 17History link image location anchor对象

);
要引用单个图片，可以使用document.images[x]。如果某个图片 17History link image location anchor对象

包含name属性，可以使用document.images[name]这种方法来引用图片。

Image 对象
Image 对象代表一幅嵌入的图像。
17History link image location anchor对象

标签每出现一次，一个 Image 对象就会被创建。

Image 对象的属性
align 设置或返回怎样根据周围的文字来将图片进行对齐。
alt 设置或返回无法显示图像时的替代文本。
border 设置或返回图片的边框。
complete 返回浏览器是否已经把图片加载完毕。
height 设置或返回图像的高度。
width 设置或返回图像的宽度。
hspace 设置或返回图像左侧和右侧的空白距离。
vspace 设置或返回图像的顶部和底部的空白距离。
id 设置或返回图像的 id。
isMap 返回图片是否为服务端热点图片。
longDesc 设置或返回指向包含图像描述的文档的 URL。
lowsrc 设置或返回指向图像的低分辨率版本的 URL。
name 设置或返回图像的名称。
src 设置或返回图像的 URL。
uSEMap 设置或返回客户端热点图片中 usemap 属性的值。

Image 对象的事件
onabort 当用户放弃图像的装载时调用的事件句柄。
onerror 在装载图像的过程中发生错误时调用的事件。
onload 当图像装载完毕时调用的事件。如果改变image对象的src属性也会触发onload事件。

可以定义image:
VAR myimage=new Image();
如大量图片的预读
function imagePreload(){
var imgPreload=new Image();
for(i=0;i imgPreload.src=arguments[i];
}
}
imagePreload("001.gif','002.gif','003.gif','004.gif','005.gif');
area对象与客户端图像映射
当在页面文档中使用了AREA标记并制定href属性时就创建了area对象。area对象用来表示用来表示作为超链接的区域，一旦用户选中area表示的区域就会引起跳转，因此area对象也是一种超链接。所以访问area对象的格式是document.links[下标]
area对象的属性和事件：
hash，表示URL中锚点的名称。
host，表示URL的主机部分。
hostname，表示URL中的主机名称。
pathname，表示URL中的路径名称。
port，表示URL中的端口。
protocol，表示URL中的端口。
target，表示超链接结果的目标窗口。
onClick，在映射区域上单击鼠标时触发。
ondblClick，表示在映射区域上双击鼠标键时触发。
onMouseDown，表示在映射区域上按下鼠标键时触发。
onMouseOut，从映射区域上移开鼠标键是触发。
onMouseUp，在映射区域上松开鼠标键时触发。
onMouseOver，将鼠标移过映射区域时触发。
onKeyDown，在映射区域上按下某键时触发。
onKeyUp，在映射区域上松开某键时触发。
onKeyPress，在映射区域上按住某键时触发。

构成客户端图像映射的步骤是:
用MAP标记定义映射区域，每个区域对应一个Area标记，每个AREA标记都具有shap、coords、hred、target等常用属性。其中shape表示映射区的形状，取值为rect、circle、poly；coords表示映射区域的坐标，根据shape的不同其坐标表示也不同。href表示单击映射区域时要跳转到的URL，target表示超链接的目标窗口。

例：
<html>
<head>
<SCRIPT Language="JavaScript">
function f1(x){
if(x==0) alert("你选择了部门1");
if(x==1) alert("你选择了部门2");
if(x==2) alert("你选择了部门3");
}
</SCRIPT>
</head>
<body>
<center>
<h2>请选择要阅读那个部门的资料</h2>
<IMG src="./image.bmp" width=500 height=30 border=0 USEMAP="#mymap">
<MAP name="mymap">
<area shape="rect" coords="10,3,145,25" href="javascript：f1(0)">
<area shape="rect" coords="180,3,310,27" href="javascript：f1(1)">
<area shape="rect" coords="350,3,480,27" href="javascript：f1(2)">
</MAP>
</CENTER>
</BODY>
</HTML>
Area 对象
Area 对象代表图像映射的一个区域（图像映射指的是带有可点击区域的图像）。HTML有标签就有 Area 对象被建立。

Area 对象的属性
属性描述
accessKey 设置或返回访问某个区域的快捷键。
alt 设置或返回可用来显示的替换文字，专门对付那些不能显示area的浏览器。
coords 设置或返回热点图片可点区的坐标。
hash 设置或返回某个区域中锚点部分的URL。
host 设置或返回某个区域中 URL 的主机名和端口。
href 设置或返回热点图的连接 URL。
id 设置或返回某个区域的 id。
noHref 设置或返回某个区域是否应是活动的还是非活动的。
pathname 设置或返回某个区域中的 URL 的路径名。
protocol 设置或返回某个区域中的 URL 的协议。
search 设置或返回某个区域中 URL 的查询字符串部分。
shape 设置或返回在热点图中某个区域的形状。
tabIndex 设置或返回某个区域的 tab 键控制顺序。
target 设置或返回某个区域中连接URL的打开方式。

觉得可用，就经常来吧！脚本宝典欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-17History link image location anchor对象全部内容，希望文章能够帮你解决javascript代码实例教程-17History link image location anchor对象所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：DOM HTML let Map Map post-format-gallery 数组数组

上一篇: javascript代码实例教程-JavaScr... 下一篇:javascript代码实例教程-JavaScr...

猜你在找的js相关文章

全站导航更多