JavaScript学习5

1.image 对象

  • 对象引用
document.images[n]

document.images["imageName"]

document.imageName
  • 预缓存图像

    预缓存图像需要在内存中构造image对象，内存对象是由脚本创建的，页面上是看不到的,通过对document中图像的src修改来显示，注意new Image()中大写
var myImage=new Image(width,height);

myImage.src="someArt.gif";

document.imageName.src=myImage.src;

下面代码通过选择select的option实现图片的切换

<html>

<head>

    <title>js_11</title>

    <script type="text/javascript">

        var imageList=new Array();

        imageList["image1"]=new Image(120,90);

        imageList["image1"].src="nav1.png";

        imageList["image2"]=new Image(120,90);

        imageList["image2"].src="nav2.png";

        function loadImage(list){

            var imagename=list.options[list.selectedIndex].value;

            document.imageShow.src=imageList[imagename].src;

        }

    </script>

</head>

<body>

<h2> iamge list</h2>

<img  name="imageShow" src="nav1.png" alt="good">

<form>

    <select name="cashed" onchange="loadImage(this)">

        <option selected value="image1">image1</option>

        <option value="image2">image2</option>

    </select>

</form>

</body>

</html>
  • JavaScript:伪URL

    格式为<a href="javascript:goFirst()">

2.动态HTML技术

  • 样式更改

    通过修改HTML的style属性，可以实现对css样式的修改如：document.getElementById("aCodeAera").style.color="rgb(255,255,0)";但是有一些css的样式名称不符和JavaScript的命名格式如font-weight，用JavaScript的时候可以这么写document.getElemntById("aCodeAera").style.fontWeight="bold";不过现在可以通过写css类来解放这么长的引用，如
.normal{ backgroud-color:#ffffff}

.highLighted{background-color:#ff0000}

<p id="news" class="normal">...</p>

document.getElementById("new").className="highLighted";
  • W3C DOM节点动态改变

    下面是一个例子，先创建一个元素，创建一个文本域，元素中添加文本域。在<div>中添加该元素
<html>

<head>

    <title>js_12,4,2</title>

    <style type="text/css" >

        .centered{background-color: #ff0000}

    </style>

    <script type="text/javascript">

    function welcome(firstname){

        var newelement=document.createElement("p");

        newelement.className="centered";

        var newtext=document.createTextNode("welcome "+firstname+" come to javascript world!");

        newelement.appendChild(newtext);

        document.getElementById("placeholder").appendChild(newelement);

    }

    </script>

</head>

<body>

    <input type="text" name="entered" onchange="welcome(this.value)">

    <div id="placeholder"></div>

</body>

</html>
  • 通过innerHTML属性添加

    要比上面的方式简单一些，在W3C DOM规范之前，微软发明的一个元素对象属性,省去了建立元素和节点的过程

    直接通过innerHTML添加相应的html片段。
<html>

<head>

    <title>js_12.4.3</title>

     <style type="text/css" >

        .centered{background-color: #ff0000}

    </style>

    <script type="text/javascript">

    function welcome(htmlName){

        var newHtml="<p class='centered'>welcome ";

        newHtml+=htmlName;

        newHtml+=" come to javascript world</p>";

        document.getElementById("placeholder").innerHTML=newHtml;

    }

    </script>

</head>

<body>

    <input type="text" name="entered" onchange="welcome(this.value)">

    <div id="placeholder"></div>

</body>

</html>

JavaScript学习（5）-Image对象和动态HTML的更多相关文章

  1. JavaScript学习08 Cookie对象

    JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...

  2. javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表

    原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScri ...

  3. JavaScript学习总结 之对象

    JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...

  4. javascript学习总结之对象的深拷贝和浅拷贝

    前言 最近在写ES6的文章的时候发现重复遇到关于javascript深拷贝和浅拷贝的问题,然后查找了一些资料,根据资料和自己的理解做了以下笔记,毕竟javascript关于深拷贝和浅拷贝的问题在一些面 ...

  5. JavaScript:学习笔记(8)——对象扩展运算符

    JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...

  6. JavaScript学习笔记——BOM_window对象

    javascript浏览器对象模型-windwo对象 BOM Browser Object Model window对象 是BOM中所有对象的核心. 一.属性 1.(位置类型-获得浏览器的位置) IE ...

  7. Javascript学习之Function对象详解

    JavaScript中的Function对象,就是我们常说的函数对象.在JS中,所有的函数也是以对象的形式存在的. 语法 充当Function对象的构造函数使用,用于结合new关键字构造一个新的Fun ...

  8. Javascript学习之Date对象详解

    1.定义 创建 Date 实例用来处理日期和时间.Date 对象基于1970年1月1日世界协调时起的毫秒数 2.语法 构造函数 new Date() new Date(value) value代表自世 ...

  9. JavaScript学习笔记之对象

    目录 1.自定义对象 2.Array 3.Boolean 4.Date 5.Math 6.Number 7.String 8.RegExp 9.Function 10.Event 在 JavaScri ...

  10. javascript学习之Date对象

    前几天学习了一下date对象,于是写了一个简单的时间显示放到博客页面里(位于右上角),类似这样的效果,时:分:秒 xxxx年xx月xx日. 下面来说一下具体实现步骤. 首先,既然date是一个对象,那 ...

随机推荐

  1. Linux Kernel源码浏览

    https://www.kernel.org/http://lxr.linux.no/

  2. DB2中如何取得随机数

    转自:http://blog.csdn.net/jionghan3855/article/details/2246738 在DB2数据库自定义产生指定位数的随机数函数. DB2产生随机数的函数:RAN ...

  3. 优化神器 beamoff

    http://files.cnblogs.com/files/yipu/beamoff.zip csdn上有下载:http://download.csdn.net/download/bytige/83 ...

  4. CentOS6.2 下安装OpenGL开发库

    在Linux下做Qt开发,结果运行程序的时候提示找不到GL/gl.h文件,所以只能先把OpenGL库安装上去,不知道这样操作对不对,以后再考虑吧,下面开始安装 1.查看mesa相关的包 yum lis ...

  5. Django And Django-Rest-Framework 异常记录

    1.TypeError: init() takes 1 positional argument but 2 were given

  6. STM32 中断应用概览

    本章参考资料< STM32F4xx 中文参考手册>第十章-中断和事件.<ARM Cortex™-M4F 技术参考手册> -4.3 章节: NVIC 和 4.4 章节: SCB— ...

  7. mysql学习笔记1---mysql ERROR 1045 (28000): 错误解决办法

    mysql ERROR 1045 (28000): 错误解决办法 在启动mysql服务后,登陆mysql的窗口的时候,执行mysql命令,结果报错,没法登陆.   (在安装mysql和配置的时候,我是 ...

  8. 2017年网站安全狗绕过WebShell上传拦截的新姿势

    本文来源:https://www.webshell.ren/post-308.html 今天有一位朋友发一个上传点给我 我一看是南方cms 有双文件上传漏洞 本来可以秒的 但是看到了 安全狗 从图片可 ...

  9. Setup Factory 读取安装包的配置文件

    result = INIFile.GetValue(SessionVar.Expand("%SourceFolder%\\set.ini"), "set", & ...

  10. linux udhcpc 后无法自动设置网卡ip

    arm 主板用 udhcpc 获取租赁的空闲的ip后,并没有直接设置在网卡上. 查了一下相关原因,是因为虽然已经获取了ip, 但是并没有通过脚本去设置这个IP. 在 busybox 里面有相关的脚本要 ...