您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
Script标签与访问HTML页面详解
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本篇文章主要是对Script标签与访问HTML页面进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
复制代码 代码如下: <img src="1_ender1000.jpg" id="img2" alt="" onclick="alert('onclick');" onmouseover="this.src='1_yylklshmyt20090217.jpg'" title="反转图片" /> <script type="text/javascript"> var img2=document.getElementById("img2"); alert(img2.onmouseover); //输出以下图片 </script> IE输出:
Firefox:
代码如下:
<img src="1_ender1000.jpg" id="img1" alt="" title="反转图片" />
<script type="text/javascript">
var img1=document.getElementById("img1");
img1.onmouseover=rotate;
function rotate(){
this.src='1_yylklshmyt20090217.jpg';
}
var img1=document.getElementById("img1");
img1.onmouseover=onmouseover;
function onmouseover(event){
this.src='1_yylklshmyt20090217.jpg';
}
//实际上document.getElementById("img1");得到的就是一个对象相当于下面:
/* var img1={src:"1_ender1000.jpg",
id:"img1",
alt:"",
title:"反转图片"
}*/
</script>
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
//循环img图片的所有属性,可以看到许多没有定义的属性
window.onload=repeat;
function repeat(){
var img1=document.getElementById('img1');
for(var i in img1){
alert(i+":"+img1[i]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="1_ender1000.jpg" id="img1" alt="" />
</div>
</form>
</body>
</html>
Script标签与访问HTML页面
Script标签
script标签用于在HTML页面中嵌入一些可执的脚本
<script>
//some script goes here
</script>script标签有三个特殊的属性(当然,像id,class这样的属性它也是有的,HTML页面中几乎每个元素都可以有class,id属性)
<script language="JavaScript">//language属性指明标签里包含的脚本所使用的语言
//它有三个常见的取值JavaScript,JScript,VBScript
//some script goes here
</script>
//对于JScript只有IE能够识别,其它浏览器会忽略这个标签其里面的内容
//而对于VBScript,只有Windows上的IE能够识别,运行
//然而language属性后来在XHTML中被type属性替代了
<script type="text/javascript">//取值也变了,text/javascript,text/jscript,text/vbscript
//some script goes here
</script>在Web浏览器中,我们只会使用JavaScript,type属性设置为text/javascript.事实上,由于JavaScript十分流行,它几乎成了脚本的代名词,而在Web浏览器中,即使script标签不加任何属性,浏览器也会把它当成JavaScript
<script>
alert("Hello!");
</script>
//上面的那段代码将会按JavaScript的方式运行
//即使有IE中,不加声明的script块也会当成JavaScript执行,而不是VBScript
<script>
msgbox "Hello!"
</script>
//上面的代码在IE中也会报错,IE也会将其当成JavaScript执行以前在HTML页面中,一些标签常会加一些诸如onclick,onmouseover这样的属性,这是一种事件绑定(关于事件,我们之后会详细讲解的,不要急).用于指定当HTML页面某个元素上发生了什么事的时候去执行的JavaScript代码(当然也可以是其它客户端脚本)
<img src="../images/stack_heap.jpg" alt="内存堆栈" onclick="alert('你把我点疼了!')" />上面的代码将在HTML页面上显示一个图像,当你用鼠标点击一下时,会出现一个弹窗,显示'你把我点疼了!',onclick属性的值其实是一段JavaScript代码;这就是事件,下面是其它一些简单的事件
onclick ,当鼠标点击一下时执行一次
onmouseover ,当鼠标放上去时执行一次
onmouseout ,当鼠标移出去时执行一次
onmousedown ,当鼠标按下时执行一次
onmouseup ,当鼠标在上面松开(弹起)时执行一次
onmousedblclick ,当鼠标双击时执行一次
onload ,当对象加载完成时执行一次
以前网上十分流行的称之为RollverImages(翻转图像)的效果其实就是组合onmouseover,onmouseout这样的事件和简单的JavaScript代码实现的
<img src="../images/stack_heap.jpg" alt="内存堆栈"
onmouseover="this.src='../images/over.jpg'"
onmouseout="this.src='../images/out.jpg'" />你可能知道,onmouseover这类的属性中的字符串将会在事件发生时当成脚本来执行,但上面的那些代码看上去十分模糊
//为了便于查看,我们将它们提取出来放在下面
this.src='../images/over.jpg'
this.src='../images/out.jpg'分析上面的代码,我们发现,这其实是在给一个对象this的属性src赋值,但问题是我们并没有声明过一个叫this的对象!其实this对象是一个一直存在的一个对象,它不能被声明(this是关键字).这里,this就是指"这个",指这个标签!对于HTML中的元素,JavaScript会自动将其解析成一个对象.对于下面的img标签,会解析成下面一个对象:
<img src="../images/stack_heap.jpg" alt="内存堆栈" onclick="alert('Hello!')" />
//注意,实际上this是不能手动赋值,也不能手动声明的,这里仅仅是演示
this = {
src:"../images/stack_heap.jpg",
alt:"内存堆栈",
onclick:"alert('Hello!')",
tagName:"IMG"
};
//其实不止这些属性上面,img标签会被解析成一个对象,具有src,alt等属性,src,alt属性是我们写在HTML里面的,而tagName则是系统自动生成的,它表示标签的标签名!我们可以用下面的代码进行测试:
<img src="../images/stack_heap.jpg" alt="内存堆栈" onclick="alert(this.src);alert(this.tagName);" />自然,我们也可以修改它的值,于是翻转图象的效果就这样成功了
对于这样的行内事件绑定,有一些注意点.
<head>
<script>
function myFn() {
alert("图象加载完成了!");
}
</script>
</head>
//.............若干若干代码之后
<img src="../images/stack_heap.jpg" alt="内存堆栈" onload="myFn()" />//当图象加载成功时执行一个函数
上面的代码执行是没问题的,然而将顺序翻转一下(script可以放在任何合法的地方)
<img src="../images/stack_heap.jpg" alt="内存堆栈" onload="myFn()" />//当图象加载成功时执行
- 上一个程序编程： 深入理解JSON数据源格式
- 下一个程序编程： javascript使用百度地图api和html5特性获取浏览器位置
