Javascript學習筆錄8(學會image的應用和link的屬性)

1 圖片屬性應用,從頁面上找到元素,

document.images[0]

2 預加載圖像

οnlοad="document.images[1].src=pic.src,pic是Image的對象,所以賦值->pic.src

html 圖像src賦值 -> src="../image/2.jpg"

3 點擊事件 改變圖像

4 link 與 anchor錨點

link :顧名思義 :鏈接

anchor錨點:它方便訪問者在頁面的不同位置快速跳轉,直接找到自己感興趣的內容,如果說 RSS 是整個網站的摘要,那錨點就是一個頁面的摘要,通常一個頁面內容很多的時候,都會用錨點來定位。錨點的具體說明:http://blog.csdn.net/jessie_j_wang/article/details/73101851  

5 返回上一頁面,瀏覽器上一般都會有回退,這裏就用到window.history.go()

具體代碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Js6.aspx.cs" Inherits="Javascript_Js6" %>

<!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>Javascript學習筆錄8(學會用Object對象、屬性、方法-image的應用)</title>
</head>
<body οnlοad="document.images[1].src=pic.src">,<img src="../image/2.jpg" />
<%-- pic是Image的一個對象,是一個js對象。而不是html對象,所以document.images是有2個元素Image--%>
    <form id="form1" runat="server">
    <div>
     <br />
       <img src="../image/2.jpg" alt="tips..." border=10 />
       <img src ="../image/1.jpg" alt="bottle" border=10 />
       <br />
       <input type="button" name="btn1" value="點擊改變圖片" οnclick="document.images[0].src='../image/3.jpg'" /><%--src ="../image/1.jpg",在雙引號裏面,所以用單引號--%>
       <script>
       document.write("圖片提示是"+document.images[0].alt+"</br>");
       document.write("圖片邊框大小是"+document.images[0].border+"</br>");
       document.write("圖片提示是"+document.images[1].alt+"</br>");
       pic=new Image();
       pic.src="../image/3.jpg"      
       </script>
       <br />
       <a name="anchor1">錨點</a><br />
       <a href=http://www.google.com>google</a><br />
       <a href=http://www.baidu.com>BaiDu</a><br />
       <a href=http://www.microsoft.com>Microsoft</a><br />
       <input type="button" value="點擊改變鏈接" οnclick="document.links[0].href='http://www.newegg.com.cn'" /><br />
       <input type="button" value="點擊返回上一頁" οnclick="window.history.go(-1)" /><br />
       <script>
       document.write("本頁面共有"+document.links.length+"鏈接"+"</br>");
       document.write("本頁面共有"+document.anchors.length+"鏈接"+"</br>");
       document.write("第一個鏈接協議"+document.links[0].protocol+"</br>");      
       </script>
    </div>
    </form>
</body>
</html>






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章