{% 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. python全栈开发day16-正则表达式和re模块

    1.昨日内容回顾 2.正则表达式(re模块是python中和正则表达式相关的模块) 1.作用 1).输入字符串是否符合匹配条件 2).从大段文字中匹配出符合条件的内容 2.字符组 [0-9a-zA-Z ...

  2. PyQt5安装及ModuleNotFoundError: No module named 'PyQt5'问题解决

    PyQt5安装及ModuleNotFoundError: No module named 'PyQt5'问题解决     安装pyQt5费了很多的周折,不过现在还是安装好了,现在重新梳理一下整个安装过 ...

  3. POJ 2407 Relatives【欧拉函数】

    <题目链接> 题目大意: Given n, a positive integer, how many positive integers less than n are relativel ...

  4. 启动Azure模拟器出错解决方案

    错误弹窗: 输出控制台: Microsoft Azure Tools: Warning: Overriding public port 80 to 2888 in role 'WebRole1'. M ...

  5. python魔法方法-属性转换和类的表示

    类型转换魔法 类型转换魔法其实就是实现了str.int等工厂函数的结果,通常这些函数还有类型转换的功能,下面是一些相关的魔法方法: __int__(self) 转换成整型,对应int函数. __lon ...

  6. luogu P2657 [SCOI2009]windy数 数位dp 记忆化搜索

    题目链接 luogu P2657 [SCOI2009]windy数 题解 我有了一种所有数位dp都能用记忆话搜索水的错觉 代码 #include<cstdio> #include<a ...

  7. BZOJ.3531.旅行(树链剖分 动态开点)

    题目链接 无优化版本(170行): /* 首先树剖可以维护树上的链Sum.Max 可以对每个宗教建一棵线段树,那这题就很好做了 不过10^5需要动态开点 (不明白为什么nlogn不需要回收就可以 不是 ...

  8. Shiro笔记（四）编码/加密

    Shiro笔记(四)编码/加密 一.编码和解码 //base64编码.解码 @Test public void testBase64(){ String str="tang"; b ...

  9. node的模块包装为promise写法

    1. const Promise = require('bluebird') const fs = Promise.promisifyAll(Promise.promisify(require('fs ...

  10. C++ 模板应用举例_模板实现STL类(堆栈)

    //stack集合类是一个简单的堆栈的实现. //这里有两个模板参数,T和size,指定堆栈中的元素类型和堆栈中项数的最大值. //push 和 pop成员函数添加和删除堆栈中的项,并在堆栈底部增加. ...