{% 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. Linux下安装JDK7和TomCat7

    [BEGIN] 2016/9/9 14:20:49[root@rzhd jdk]# ll总用量 149916-rw-r--r-- 1 root root 153512879 9月 9 14:20 jd ...

  2. Python 2维数组90度旋转

    一.二维列表 a = [[col for col in range(4)] for row in range(4)] [[0, 1, 2, 3], [0, 1, 2, 3], [0, 1, 2, 3] ...

  3. Python作业-选课系统

    目录 Python作业-选课系统 days6作业-选课系统: 1. 程序说明 2. 思路和程序限制 3. 选课系统程序目录结构 4. 测试帐户说明 5. 程序测试过程 title: Python作业- ...

  4. Python3 - 基础知识、基本了解

    一.Python到底是什么? (抄自 金角大王) 1. Python是一门解释型语言? 我初学Python时,听到的关于Python的第一句话就是,Python是一门解释性语言,我就这样一直相信下去, ...

  5. 函数 y=x^x的分析

    关于函数 y=xx的分析: 由图像得,y在负无穷大到0图像处处不连续,故y的定义域为(0,正无穷大): 故该函数不就是y=e^(lnxx)吗? 1.定义域:我们变形一下,y=e^(xlnx),显然是0 ...

  6. TensorFlow 2.0 新特性

    安装 TensorFlow 2.0 Alpha 本文仅仅介绍 Windows 的安装方式: pip install tensorflow==2.0.0-alpha0 # cpu 版本 pip inst ...

  7. canvas三角函数模拟水波效果

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  8. IntelliJ IDEA 2018.3 重大升级(转)

    |0前言 2018.11.28 IntelliJ IDEA 2018.3 正式版发布.对于一个忠实爱好者,迫不及待的我下载了最新版本来体验下.而且 IDEA 今年的第三次重大更新提供了不容错过的显著功 ...

  9. HQL count(*)

    public int getTarPage() {        String hql = "'";        Query query = getSession().creat ...

  10. Oracle - Dbms Output window

    Ensure that you have your Dbms Output window open through the view option in the menubar. Click on t ...