{% 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. 043 HIVE中的HQL操作

    1.字段查询 select empno,ename from emp; 2.过滤where,limit,distinct select * from emp where sal >2500; s ...

  2. 数据摘要 MD5

    数据一样,摘要一样  (摘要即MD5) 摘要一样,数据一样 摘要是用于检验数据的完整性的技术(比如验证下载的东西是否完整,迅雷就是这样), 查看文件的MD5: Linux         :  md5 ...

  3. Unity 精灵物体的创建 Sprite.create

    参考链接:http://www.cnblogs.com/BuladMian/p/6226744.html 创建预制体精灵 优点:创建大量相同精灵,只用调用一个预制体精灵,避免了 计算机大量重复创建会导 ...

  4. my作业

    学号:2017xxxxxx 我是吴登峰,我的爱好是音乐,看电影,玩游戏! 我的码云个人主页是:https://gitee.com/fengaa 我的第一个项目地址是:https://gitee.com ...

  5. python的常用模块之collections模块

    python的常用模块之collections模块 python全栈开发,模块,collections 认识模块 什么是模块?    常见的场景:一个模块就是一个包含了python定义和声明的文件,文 ...

  6. 12，EasyNetQ-自动订阅

    EasyNetQ自v0.7.1.30附带一个简单的AutoSubscriber. 您可以使用它轻松扫描实现接口IConsume <T>或IConsumeAsync <T>的类的 ...

  7. C# EF 与 MySql 的那些坑

    之前一直想用 mysql 和 ef .然后多次尝试也只能感叹 还是 sqlsever 是亲儿子. 今天在单位又尝试了一次,然后就成功了,记录一下遇到的问题. 首先是安装包和驱动?. 请保证 MySql ...

  8. bzoj4503: 两个串 bitset

    目录 题目链接 题解 代码 题目链接 bzoj4503: 两个串 题解 暴一发bitset f[i][j] 表示 S[1..i] 是否有个后缀能匹配 T[1..j] 那么假设 S[i+1] 能匹配 T ...

  9. SpringMVC拷贝属性

    A a = new A(); B b = new B(); //将A的属性拷贝到B上 BeanUtils.copyProperties(a,b)

  10. 在Windows系统配置Jekyll

    Jekyll 是一个简单的网站静态页面生成工具.由于是用Ruby语音编写的,所以在Windows系统上配置起来还是稍微有点繁琐的.具体过程如下: 安装Ruby:在Windows系统上当然使用rubyi ...