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. tcpdump常用参数说明

    (一).学习tcpdump的5个参数 初次使用tcpdump时,使用tcpdump -h命令可以看到它有数十个参数. 根据我们在运维工作中的经验,掌握tcpdump以下5个参数即可满足大部分的工作需要 ...

  2. solr 简单搭建 数据库数据同步（待续）

    原来在别的公司负责过文档检索模块的维护(意思就是不是俺开发的啦). 所以就略微接触和研究了下文档检索. 文档检索事实上是全文检索.是通过一种技术把N多文档进行一定规律的分割归类,然后创建易于搜索的索引 ...

  3. 进程控制函数(3)-getsid()和setsid()获取当前会话和建立新会话

    pid_t setsid(void) 1.调用进程不能是进程组组长,该进程变成新会话首进程(session header) 2.该进程成为一个新进程组的组长进程. 3.需有root权限(ubuntu不 ...

  4. jquery ajaxSubmit

    <script type="text/javascript" src="jquery/jquery.js"></script></ ...

  5. Makefile 8——使用依赖关系文件

    Makefile中存在一个include指令,它的作用如同C语言中的#include预处理指令.在Makefile中,可以通过include指令将自动生成的依赖关系文件包含进来,从而使得依赖关系文件中 ...

  6. Parallelism , Partitioner

    转:spark通过合理设置spark.default.parallelism参数提高执行效率 spark中有partition的概念(和slice是同一个概念,在spark1.2中官网已经做出了说明) ...

  7. PHP——连接数据库初

    <?php //1.生成连接 造连接对象 //$db=new mysqli($dbhost(服务器),$username,$userpass,$dbdatabase); $db = new my ...

  8. PHP——简单的表单提交

    <body> <form name="" method="post" action="CHULI.php"> < ...

  9. 很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的 需求,那 ...

  10. u盘作为git仓库，完成不同地方的代码同步

    参考网上一篇 "把Git Repository建到U盘上去" 1.我经常有这样的需求,工作.家里需要对同一份代码或文档编辑,并希望在不同地方能同步: 如果是私密性不那么强,可以直接 ...