{% load static %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #myimage{

            margin-left: 178px;

            margin-top: -138px;

        }

    </style>

</head>

<body>

<div class="changeconent" id="changeconent">啦啦</div>

<div class="table"><table border="1">

    <th>111</th>

    <th>222</th>

    <th>333</th>

    <th>444</th>

    <tr>

        <td>www</td>

        <td>sss</td>

        <td>ddd</td>

        <td>fff</td>

    </tr>

    <tr>

        <td>www</td>

        <td>sss</td>

        <td>ddd</td>

        <td>fff</td>

    </tr>

</table></div>

<div class="btn"><button type="button" id="button" onclick="myFunction()">点我修改</button></div>

<img src="{% static 'img/pic_bulboff.jpg' %}" alt="" id="myimage" onclick="ChangeImage()" width="100" height="180">

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<script>

{#    JavaScript：直接写入 HTML 输出流（注意：只能是在HTML输出中使用，如果在为当家在后使用该方法，会覆盖整个文档）#}

    document.write('<h1>这是一个标题</h1>');

    document.write('<p>这是一个段落。</p>');

{#    JavaScript：改变 HTML 内容#}

    function myFunction() {

        x = document.getElementById('changeconent');

        x.innerHTML="Hello JavaScript";    //改变内容

        x.style.color = '#ff0000'; //改变样式

    }

{#    JavaScript：改变 HTML 图像#}

    function ChangeImage() {

        ele = document.getElementById('myimage');

        if (ele.src.match("bulbon")){

{#            ele.setAttribute('src',"{% static 'img/pic_bulboff.jpg' %}")#}

            ele.src = "{% static 'img/pic_bulboff.jpg' %}"

        }

        else{

            ele.src = "{% static 'img/pic_bulbon.jpg' %}"

        }

    }

</script>

</body>

</html>

js 学习的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. js学习之变量、作用域和内存问题

    js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...

  3. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  4. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  5. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  6. js学习篇1--数组

    javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...

  7. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  8. NODE.JS学习的常见误区及四大名著

    NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...

  9. Node.js学习系列总索引

    Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...

  10. 【入门必备】最佳的 Node.js 学习教程和资料书籍

    Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...

随机推荐

  1. Codeforces Round #424 E. Cards Sorting

    题目大意:给你一堆n张牌(数字可以相同),你只能从上面取牌,如果是当前牌堆里面最小的值则拿走, 否则放到底部,问你一共要操作多少次. 思路:讲不清楚,具体看代码.. #include<bits/ ...

  2. BZOJ1067 [SCOI2007]降雨量 线段树

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1067 题意概括 给定n组整数对(Xi,Yi),当Xi<Xj且Yi>=Yj时,如果对于任 ...

  3. Pathon1 - 基础1

    一. Hello world程序 print("Hello World!") 执行命令: python hello.py ,输出 执行 python hello.py 时,明确的指 ...

  4. HTTP协议学习笔记（二）

    HTTP协议学习笔记(二) 1.HTTP报文 HTTP报文:用于HTTP协议交互的信息.请求报文:请求端(客户端)的HTTP报文叫做请求报文.响应报文:响应端(服务端)的HTTP报文叫做响应报文. H ...

  5. SpringMvc 文件下载 详解

    最近SSM 需要用到文件下载,以前没用过,在百度上找了好久发现没有一篇博客,对于此段代码进行详细讲解, 这里是本人的个人总结,跟大家分享一下!!!不谢 /** * 文件下载 * ResponseEnt ...

  6. MySql:Table 'database.TABLE_ONE' doesn't exist

    1. 问题描述 由于最近使用本地的MySQL奔溃了,在修改管理员密码时,不慎修改错误,导致无法重新写会,甚至按照MySQL官网手册都无法修改正确,遂放弃修改root密码,直接将一个未有数据的纯净版My ...

  7. XenServer日志清理方法

    服务器使用时间长了,XenServer产生了很多日志,甚至有些人因为日志占满了空间, 导致系统出现问题:xapi崩溃,或者系统卡死,重启也无效. 所以我们要时常看看日志是否占的空间的,清理下日志先查看 ...

  8. C#读取大数据量Excel

    var worksheet = workbook.Worksheets["工作表1"]; var maxN = worksheet.Range["A1"].En ...

  9. 网页图表Highcharts实践教程之认识Highcharts

    网页图表Highcharts实践教程之认识Highcharts 认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开 ...

  10. Putty的用法

    大致内容罗列如下: ·        最简单的使用,登录 SSH主机 ·        中文乱码的处理 ·        PuTTY常用配置的说明 ·        复制.粘贴 ·        保存 ...