ScriptタグとHTMLページへのアクセス_JavaScriptスキルの詳細説明-jsチュートリアル-php.cn

コードをコピーコードは次のとおりです:

IE 出力:

Firefox:

コードをコピーコードは次のとおりです:

関数 Rotate () {
This.src = '1_yylklshmyt20090217.jpg'; ("IMG1");
img1.onmouseover=onmouseover;
関数 onmouseover(event){
this.src='1_yylklshmyt20090217.jpg';
}

//実際には document.getElementById("img1"); は次と同等のオブジェクトを取得します:
/* var img1={src:"1_ender1000.jpg",
id:"img1" ,
>
コードをコピー

コードは次のとおりです:

無題ページ関数repeat(){ var img1=document.getElementById('img1');<a style="CURSOR: pointer" data="4938" class="copybut" id="copybut4938" onclick="doCopy('code4938')"> for(var i in img1){alert(i ":" img1[i]); } <div> ;</div> <div class="codebody" id="code4938"> 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="ScriptタグとHTMLページへのアクセス_JavaScriptスキルの詳細説明" onclick="alert('你把我点疼了!')">上面的代码将在HTML页面上显示一个图像,当你用鼠标点击一下时,会出现一个弹窗,显示'你把我点疼了!',onclick属性的值其实是一段JavaScript代码;这就是事件,下面是其它一些简单的事件 onclick ,当鼠标点击一下时执行一次 onmouseover ,当鼠标放上去时执行一次 onmouseout ,当鼠标移出去时执行一次 onmousedown ,当鼠标按下时执行一次 onmouseup ,当鼠标在上面松开(弹起)时执行一次 onmousedblclick ,当鼠标双击时执行一次 onload ,当对象加载完成时执行一次 以前网上十分流行的称之为RollverImages(翻转图像)的效果其实就是组合onmouseover,onmouseout这样的事件和简单的JavaScript代码实现的 <img src="../images/stack_heap.jpg" alt="ScriptタグとHTMLページへのアクセス_JavaScriptスキルの詳細説明"> 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="ScriptタグとHTMLページへのアクセス_JavaScriptスキルの詳細説明" onclick="alert('Hello!')"> //注意,实际上this是不能手动赋值,也不能手动声明的,这里仅仅是演示 this = { src:"../images/stack_heap.jpg", alt:"ScriptタグとHTMLページへのアクセス_JavaScriptスキルの詳細説明", onclick:"alert('Hello!')", tagName:"IMG" }; //其实不止这些属性上面,img标签会被解析成一个对象,具有src,alt等属性,src,alt属性是我们写在HTML里面的,而tagName则是系统自动生成的,它表示标签的标签名!我们可以用下面的代码进行测试: <img src="../images/stack_heap.jpg" alt="ScriptタグとHTMLページへのアクセス_JavaScriptスキルの詳細説明" onclick="alert(this.src);alert(this.tagName);">自然,我们也可以修改它的值,于是翻转图象的效果就这样成功了 对于这样的行内事件绑定,有一些注意点. <script> function myFn() { alert("图象加载完成了!"); } </script> //.............若干若干代码之后 <img src="../images/stack_heap.jpg" alt="ScriptタグとHTMLページへのアクセス_JavaScriptスキルの詳細説明" onload="myFn()">//当图象加载成功时执行一个函数 上面的代码执行是没问题的,然而将顺序翻转一下(script可以放在任何合法的地方) <img src="../images/stack_heap.jpg" alt="ScriptタグとHTMLページへのアクセス_JavaScriptスキルの詳細説明" onload="myFn()">//当图象加载成功时执行一个函数 //.............若干若干代码之后 <script> function myFn() { alert("图象加载完成了!"); } </script>HTML页面按照从上往下的顺序加载执行,当图象加载成功后,就去执行onload里的内容(一个自定义函数),但由于script标签在下面若干代码之后,所以还没被加载,因此会出错"myFn is undefined";这就是为什么要将script标签放在head部分的原因,因为head在body前面,当body里的元素加载完成时,head中的script肯定加载完成了 但后来有了XHTML,有了"三层分离",W3C推出了DOM2,我们需要使用另一种方式绑定事件,获取HTML页面元素.再以上面的图像为例: <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> //....... <img src="../images/stack_heap.jpg" id="myImg" alt="ScriptタグとHTMLページへのアクセス_JavaScriptスキルの詳細説明"> //我们不再加onclick属性了,而是给它起了个ID 但上面的代码执行了仍会出错,因为HTML从上往下加载,当加载到script时,body部分在下面,还没有被加载,而JavaScript在浏览加载到时就会自动执行.这时,页面上的ID为myImg的img还没被加载到,所以会出错;document.getElementById方法需要一个字符串形式的ID,而如果页面上没有ID为这个的元素,它则会返回null(空对象);而在下面一行,img.onclick这一句使用了一个空对象,所以会在这里出错!至于解决方法,其实只是将传统的行内事件绑定的script位置反过来放.将script放在所以HTML元素后面! <img src="../images/stack_heap.jpg" id="myImg" alt="ScriptタグとHTMLページへのアクセス_JavaScriptスキルの詳細説明"> //..................若干代码之后 <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标签来演示它又会被转换成下面这个对象 //总该记得对象字面量语法吧 { 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代码 一大行文字,它们都是普通的文字! //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('%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B%E3%81%A8%E7%8F%BE%E5%9C%A8%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%89%E3%82%8C%E3%81%BE%E3%81%99!','');">A</a>解決策は簡単です <a href="javascript:window.prompt('%E5%85%A5%E5%8A%9B%E5%86%85%E5%AE%B9%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B%E3%81%A8%E7%8F%BE%E5%9C%A8%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%89%E3%82%8C%E3%81%BE%E3%81%99!','');unknown;">A</a> //unknown を末尾に追加しますただし、JavaScript 疑似プロトコルはある程度の柔軟性を提供しますが、ページ内では使用しないようにしてください。JavaScript のデバッグには、JavaScript 疑似プロトコルが非常に便利です。 </div></a>