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. cocos2d-x中的宏定义CC_PROPERTY

    cocos2d-x定义了很多宏定义,帮我们提高开发效率,下面看下CC_PROPERTY, CC_PROPERTY定义 CC_PROPERTY的声明在CCPlatformMacros.h中,结构如下 # ...

  2. C++ 简单的日志类

    用法如下: #include "EasyLog.h" int main(){ EasyLog::Inst()->Log("Run..."); } 不只是m ...

  3. deb包的2种安装安装方法

    一.cydia重启自动安装:用ifunbox进入//var/root/Media/Cydia/AutoInstallCydia/AutoInstall 需要分别单独建立,注意大小写.然后把你要安装的d ...

  4. android bitmap compress

    android的照相功能随着手机硬件的发展,变得越来越强大,能够找出很高分辨率的图片. 有些场景中,需要照相并且上传到服务,但是由于图片的大小太大,那么就上传就会很慢(在有些网络情况下),而且很耗流量 ...

  5. 读取大csv文件数据插入到MySql或者Oracle数据库通用处理

    import java.io.BufferedInputStream; import java.io.BufferedReader;import java.io.BufferedWriter;impo ...

  6. 第二百六十二节，Tornado框架-cookie

    Tornado框架-cookie Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购物数据信息等一系列微小信息. self.set_cookie()方法,创 ...

  7. 第二百五十一节，Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  8. 若在逻辑上 A 是 B 的“一部分”（a part of）

    若在逻辑上 A 是 B 的“一部分”(a part of) ,则不允许 B 从 A 派生, 而是要用 A 和其它东西组合出 B. #include <iostream> /* run th ...

  9. java----EL表达式

     Java Web中的EL(表达式语言)详解 表达式语言(Expression Language)简称EL,它是JSP2.0中引入的一个新内容.通过EL可以简化在JSP开发中对对象的引用,从而规范页面 ...

  10. 用 HTML5+ payment方法支付宝支付遇到的坑

    用 HTML5+ payment方法碰到的第一个坑就是如果是支付宝的话签约那种支付方式. 因为 Dcloud的文档没有更新的原因你可以看到他们说的都是‘移动支付’,但是你去支付宝平台的时候看到的根本就 ...