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. 为什么很多大公司继续使用 Objective-C，不用 Swift

    为什么很多大公司继续使用 Objective-C,不用 Swift   我觉得这个问题最核心的原因就一点:历史包袱. 猿题库算是比较新兴的应用了,代码量级也是 10 万的级别.很多稍微有些年头的应用, ...

  2. ngBind {{}} ngBindTemplate

    1.首先我们最常使用的一个绑定表达式的指令是ngBind,比如在一个div标签中我们可以这样使用: <div ng-bind="vm.info"></div> ...

  3. Django接受ajax传过来的数组

    $.ajax({ cache: false, type: "POST", url: "/userdelete/", traditional:true, //加上 ...

  4. Ununtu 15.04 安装MySql（Django连接Mysql）

    本文介绍Ubuntu 15.04下安装MySQL ubuntu 15.04安装mysql django项目连接mysql 一.安装数据库 1.sudo apt-get install mysql-se ...

  5. java服务端json结果集传值给前端的数据输出格式

    在服务端输出json数据时按照一定的格式输出时间字段,fastjson支持两种方式:1.使用JSON.toJSONStringWithDateFormat方法2.JSON.toJSONString方法 ...

  6. udacity android 实践笔记: lesson 4 part b

    udacity android 实践笔记: lesson 4 part b 作者:干货店打杂的 /titer1 /Archimedes 出处:https://code.csdn.net/titer1 ...

  7. Android——问题解决之adb not responding；adb不是内部或外部命令；path变量的默认值为多少

    adb not responding 恩,这是出现的问题.我们开始来解决它吧! 出现这种问题大多是因为adb端口被占用导致这个问题,所以只要找到占用端口号程序,结束即可!就是这么简单(adb运行端口号 ...

  8. 删除Cookies

    网上一堆删除Cookies的JS代码 但是都删不了,找了好久终于在MSDN的论坛找到一个方法 function ClearCookie(name) { ****; var expDate = new ...

  9. Streams：深入剖析Redis5.0全新数据结构

    Streams:深入剖析Redis5.0全新数据结构   原创: 阿飞的博客   Redis 5.0 全新的数据类型:streams,官方把它定义为:以更抽象的方式建模日志的数据结构.Redis的st ...

  10. ThinkPHP 的URL重写时遇到No input file specified的解决方法

    因为在Fastcgi模式下,php不支持rewrite的目标网址的PATH_INFO的解析 ThinkPHP运行在URL_MODEL=2时,会出现 No input file specified.的情 ...