Javascript学习笔录8（学会image的应用和link的属性）

最新推荐文章于 2024-04-29 10:13:25 发布

壁橱里的老王

最新推荐文章于 2024-04-29 10:13:25 发布

阅读量1.1k

点赞数

分类专栏： DOM Web XHTML javascript CSS 文章标签： image javascript button input border xhtml

本文链接：https://blog.csdn.net/Jessie_J_Wang/article/details/7310040

版权

Web 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

25 篇文章 0 订阅

订阅专栏

DOM

16 篇文章 0 订阅

订阅专栏

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>

壁橱里的老王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript学习笔录8（学会image的应用和link的属性）

1 图片属性应用，从页面上找到元素，document.images[0]2 预加载图像onload="document.images[1].src=pic.src，pic是Image的对象，所以赋值->pic.srchtml 图像src赋值 -> src="../image/2.jpg"3 点击事件改变图像4 link 与 anchor锚点link ：顾名
复制链接

扫一扫