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. Windows Phone 推送通知的第四类推送

    在 MSDN 文档有关 Windows Phone 推送通知 有关推送的内容包含 Tile.Toast.Raw 这三种通知.这三种通知 的方式类似,运用的场合不同,这里不再赘述,它们的运行原理类似: ...

  2. Hystrix使用Commond的三种方式

    目录(?)[-] 1 依赖引入 2 使用 21 Hystrix command 211 同步执行 212 异步执行 213 反应执行 214 三种模式使用区别 22 Fallback 23 Error ...

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

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

  4. SharpDevelop浅析_4_TextEditor_自动完成、代码折叠……

    SharpDevelop浅析_4_TextEditor_自动完成.代码折叠…… SharpDevelop浅析_4_TextEditor_自动完成.代码折叠…… Parser及其应用: Code Com ...

  5. Entity Framework中的实体类添加复合主键

    使用Code First模式实现给实体类添加复合主键,代码如下: using System; using System.Collections.Generic; using System.Compon ...

  6. js实现div的置底

    //-------------置底的div---------------------- <div class="mui-content lv-mrcd"  id=" ...

  7. Thinkphp3.2 PHPMailer 发送 QQ邮箱 163邮箱

    在进入正题这前先看下网易(163)邮箱的服务器地址和端口号 类型 服务器名称 服务器地址 SSL协议端口号 非SSL协议端口号 收件服务器 POP pop.163.com 995 110 收件服务器 ...

  8. 《精通CSS》读书笔记（一）

    最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...

  9. MFC 单选按钮Radio使用注意

    使用MFC Radio时遇到问题:数据交换时出现断言崩溃框 定位于: 解决方法: 1.按CTRL+D,保证同一组内的radio的tab序号是连续的: 2.同一组内,设置 radio1的属性:  gro ...

  10. boost实用工具：typeof库 BOOST_TYPE BOOST_AUTO

    boost::typeof库中使用宏BOOST_TYPE和BOOST_AUTO来模拟C++11关键字typeof和auto  C++ Code  123456789101112131415161718 ...