{% 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. SQLite中的FROM子句

    SQLite中的FROM子句 FROM子句从数据库中可以获取到一个或多个源表.源表通常是数据库命名的表,但也可以是视图或子查询.子查询相关的更多详细信息,我们会在后面进行介绍.当获取到多个源表时,JO ...

  2. Web大前端面试题-Day8

    1. 说说你对作用域链的理解? 作用域链的作用是保证执行环境里 有权访问的变量和函数是有序的, 作用域链的变量只能向上访问, 变量访问到window对象即被终止, 作用域链向下访问变量是不被允许的; ...

  3. C语言---斐波那契问题

      最近学习了一个叫递归的概念,里面最著名的一个例子就是斐波那契问题,觉得很有意思,就来实现一下: 什么是斐波那契数列   斐波那契数列,又称黄金分割数列,值得这样一个数列:0.1.1.3.5.8.1 ...

  4. 异构无线网络之QOS简介

    QoS(Quality of Service,服务质量)指一个网络能够利用各种基础技术,为指定的网络通信提供更好的服务能力, 是网络的一种安全机制, 是用来解决网络延迟和阻塞等问题的一种技术. 在正常 ...

  5. 最全的JS判断是否为中文的方法

    第一种代码:EXFCODE:1     function isChinese(temp)2     {3       var re=/[^/u4e00-/u9fa5]/;4       if (re. ...

  6. extend与append的区别

    ''' list 的两个方法extend 和 append 看起来类似,但实际上完全不同. extend接受一个参数,这个参数,总是一个list,并把list中的每个元素添加到原list中 appen ...

  7. C语言中常用的字符串操作函数

    程序开头要声明 #include <string.h> 函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char ...

  8. 2018 OO第一次总结（作业1-3）

    第一次作业1.程序分析 (1)OO度量 (2)类图: (3)分析与评价: 这次作业由于作业整体设计难度不大,因此按照去年暑假上的OO先导课老师讲的设计方法很容易实现一个还不错的面向对象式程序,类与类之 ...

  9. Oracle 删除重复数据只留一条（转）

    转自:http://www.cnblogs.com/252e/archive/2012/09/13/2682817.html 查询及删除重复记录的SQL语句   1.查找表中多余的重复记录,重复记录是 ...

  10. ftp不能登录报错

    虚拟机装好RedHat后,准备使用filezilla连接,输入IP地址,root用户,密码,快速连接,报错: 530 Permission denied. 故障排除: 1.首先检查系统是否开启了vsf ...