Script标签与访问HTML页面详解

网络编程 2024/11/16 佚名

3 1 2

复制代码代码如下:
<img src="/UploadFiles/2021-04-02/1_ender1000.jpg">    <script type="text/javascript">
    var img2=document.getElementById("img2");
    alert(img2.onmouseover);
    //输出以下图片
    </script>

IE输出:

Firefox:

复制代码代码如下:
    <img src="/UploadFiles/2021-04-02/1_ender1000.jpg">     <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="/UploadFiles/2021-04-02/1_ender1000.jpg">    </div>
    </form>
</body>
</html>

Script标签与访问HTML页面
Script标签
script标签用于在HTML页面中嵌入一些可执的脚本

onclick ,当鼠标点击一下时执行一次
onmouseover ,当鼠标放上去时执行一次
onmouseout ,当鼠标移出去时执行一次
onmousedown ,当鼠标按下时执行一次
onmouseup ,当鼠标在上面松开(弹起)时执行一次
onmousedblclick ,当鼠标双击时执行一次
onload ,当对象加载完成时执行一次
以前网上十分流行的称之为RollverImages(翻转图像)的效果其实就是组合onmouseover,onmouseout这样的事件和简单的JavaScript代码实现的

<img src="/UploadFiles/2021-04-02/stack_heap.jpg"> 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="/UploadFiles/2021-04-02/stack_heap.jpg"> //注意,实际上this是不能手动赋值,也不能手动声明的,这里仅仅是演示
this = {
   src:"../images/stack_heap.jpg",
   alt:"内存堆栈",
   onclick:"alert('Hello!')",
   tagName:"IMG"
};
//其实不止这些属性上面,img标签会被解析成一个对象,具有src,alt等属性,src,alt属性是我们写在HTML里面的,而tagName则是系统自动生成的,它表示标签的标签名!我们可以用下面的代码进行测试:

对于这样的行内事件绑定,有一些注意点.

<head>
   <script>
   function myFn() {
    alert("图象加载完成了!");
   }
</script>
</head>
//.............若干若干代码之后
<img src="/UploadFiles/2021-04-02/stack_heap.jpg"> 上面的代码执行是没问题的,然而将顺序翻转一下(script可以放在任何合法的地方)

<img src="/UploadFiles/2021-04-02/stack_heap.jpg"> //.............若干若干代码之后
<script>
function myFn() {
alert("图象加载完成了!");
}
</script>HTML页面按照从上往下的顺序加载执行,当图象加载成功后,就去执行onload里的内容(一个自定义函数),但由于script标签在下面若干代码之后,所以还没被加载,因此会出错"myFn is undefined";这就是为什么要将script标签放在head部分的原因,因为head在body前面,当body里的元素加载完成时,head中的script肯定加载完成了

但后来有了XHTML,有了"三层分离",W3C推出了DOM2,我们需要使用另一种方式绑定事件,获取HTML页面元素.再以上面的图像为例:

<head>
   <script>
    var img = document.getElementById("myImg");//我们通过ID来获取它
    //document.getElementById方法有个参数,一个字符串ID
    //然后,img就表示了那个图像标签对象
    img.onclick = myFn;
    /*我们不是把JavaScript代码以字符串符值给它的onclick属性
    而是直接赋值给它一个函数名
    你也会说,为什么不是img.onclick=myFn();
    因为现在是在JavaScript代码区域中
    加"()"表示执行这个函数,然后将这个函数的返回值赋给了img.onclick*/
   function myFn() {
    alert("图象加载完成了!");
   }
</script>
</head>
//.......
<img src="/UploadFiles/2021-04-02/stack_heap.jpg"> //我们不再加onclick属性了,而是给它起了个ID
但上面的代码执行了仍会出错,因为HTML从上往下加载,当加载到script时,body部分在下面,还没有被加载,而JavaScript在浏览加载到时就会自动执行.这时,页面上的ID为myImg的img还没被加载到,所以会出错;document.getElementById方法需要一个字符串形式的ID,而如果页面上没有ID为这个的元素,它则会返回null(空对象);而在下面一行,img.onclick这一句使用了一个空对象,所以会在这里出错!至于解决方法,其实只是将传统的行内事件绑定的script位置反过来放.将script放在所以HTML元素后面!

<img src="/UploadFiles/2021-04-02/stack_heap.jpg"> //..................若干代码之后
<script>
   var img = document.getElementById("myImg");
   //这个时候,由于script标签放置的位置处在img标签之后,加载到script时img标签肯定加载完成了
   img.onclick = myFn;
function myFn() {
   alert("图象加载完成了!");
}
</script>但标准仍然推荐将script放在head部分!那么,这就要用到另一个事件onload

window.onload = initAll;//将所有代码写在一个函数之中,然后注册到window对象的onload事件属性上
//window表示窗口对象,只要窗口打开,它就始终存在,当页面加载完成后,会触发window对象上的onload事件
function initAll() {
var img = document.getElementById("myImg");
img.onclick = myFn;
function myFn() {
alert("图象加载完成了!");
}
}这样,代码就不出错了,不管将脚本放在什么位置,initAll只有当页面加载完成后才会被执行

访问HTML页面:HTML DOM
HTML DOM将整个页面当成一个document对象,HTML里的标签都要通过document对象来访问.而文档中的每个标签,又会转换成一个对象

<p class="demo" title="第一个段落:DOM树" id="p1">我们用一个p标签来演示</p>它又会被转换成下面这个对象

//总该记得对象字面量语法吧
{
tagName:"p",
className:"demo",
title:"第一个段落:DOM树",
id:"p1",
innerHTML:"我们用一个p标签来演示"
}
//你也许会奇怪,为什么标签的class属性会变成对象的className属性而不是class.
//class是JavaScript保留字!!!
//tagName表示它的标签名,而innerHTML表示它里面的HTML代码浏览将HTML标签转换成这样的对象后,在JavaScript中访问该标签的属性或里面的内容就简单多了,但问题是如何访问到这个对象!!

//首先要给该标签加个ID,然后使用document.getElementById方法就能够访问到它了
window.onload = initAll;//注意,要将所要访问HTML页面的代码都放在window的onload事件处理上!
function initAll() {
var p = document.getElementById("p1");
alert(p.className);
alert(p.tagName);
alert(p.title);
alert(p.id);
alert(p.innerHTML);
}访问HTML页面就这么简单!获取一个元素之后,不但可以读取它的属性值,还可以设置它的属性值!

window.onload = initAll;
function initAll() {
var p = document.getElementById("p1");
p.title="JavaScript";
p.className="load";//我们可以更改它的样式
}利用这些,我们已经能做出一些激动人心的事了!

//一些CSS
.over {
color:red;
background:blue;
font-size:larger;
}
.out {
color:black;
background:white;
font-size:smaller;
}
.click {
color:yellow;
background:yellow;
font-size:12px;
}
//HTML代码
<p id="p1" class="out">一大行文字,它们都是普通的文字!</p>
//JavaScript代码
window.onload = initAll;
function initAll() {
var p = document.getElementById("p1");
p.onclick=clickFn;//这里的事件注册方式除了比行内注册方式少了括号,其它的是一样的
p.onmouseover = overFn;
p.onmouseout = outFn;
}
function clickFn() {
this.className="click";//这里,this也是可用的
//注意是className,而不是class
}
function overFn() {
this.className="over";
}
function outFn() {
this.className="out";
}当然,获取页面元素不止这一种方法.document.getElementsByTagName方法也能获取页面元素,顾名思意,它是通过HTML的标签来获取元素的,而不是ID. 因为一张HTML页面,一个ID名称是唯一的,而标签名则大多数是相同的,所以,getElementsByTagName方法只有一个参数,即一个字符串形式的标签名(tagName),而返回值则是一个类似数组的HTML元素列表

window.onload = initAll;//仍然要写在window.onload事件处理函数中
function initAll() {
var pList = document.getElementsByTagName("P");
//为什么要用大写的P?其实用小写p也可以,不区分大小写,但由于对象的tagName总报告的是大写的,就....
alert(pList.length);//与数组相似,length报告有多少个元素,页面上有多少个p标签,就报告多少
alert(pList[0].innerHTML);//这样来访问第一个p元素
}另外,对于document.getElementsByTagName方法,还可以传一个"*"号作为参数,以获取页面的所有元素,类似于CSS里面的通配符

window.onload = initAll;
function initAll() {
var allThings = document.body.getElementsByTagName("*");
//可在任何DOM元素上调用getElementsByTagName方法,在body上调用此方法时,body外的标签不会获取到
alert(allThings.length);//页面上有多少个标签,就报告多少(包含DOCTYPE)
alert(allThings[3].innerHTML);//这样来访问第四个元素
}其它-javascript:伪协议
伪协议不同于因特网上所真实存在的如http://,https://,ftp://,而是为关联应用程序而使用的.如:tencent://(关联QQ),data:(用base64编码来在浏览器端输出二进制文件),还有就是javascript:

我们可以在浏览地址栏里输入"javascript:alert('JS!');",点转到后会发现,实际上是把javascript:后面的代码当JavaScript来执行,并将结果值返回给当前页面

类似,我们可以在a标签的href属性中使用javascript伪协议

<a href="javascript:alert('JS!');"></a>
//点击这面的链接,浏览器并不会跳转到任何页面,而是显示一个弹窗但javascript:伪协议有个问题,它会将执行结果返回给当然的页面

<a href="javascript:window.prompt('输入内容将替换当前页面!','');">A</a>解决方法很简单

<a href="javascript:window.prompt('输入内容将替换当前页面!','');undefined;">A</a>
//将undefined加到最后尽管javascript伪协议提供了一定的灵活性,但在页面中尽量不要使用!而对于调试JavaScript,javascript伪协议则显得十分有用!

Script标签,HTML

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Script标签与访问HTML页面详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

Script标签与访问HTML页面详解

文本框(input)获取焦点(onfocus)时样式改变的示例代码

浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法

评论“Script标签与访问HTML页面详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

Script标签与访问HTML页面详解

文本框(input)获取焦点(onfocus)时样式改变的示例代码

浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法

评论“Script标签与访问HTML页面详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存