首先感谢海棠学院提供的优质视频资源

学习总是一个由简单到难的过程,由浅入深，一步一个脚印,将学过的点玩的深入一点,才能有所进步,单学习总是枯燥而乏味的,切忌焦躁;

示例代码另存放在github:https://github.com/CharlesQQ/Python_Data_Analyse/tree/master/js%E5%AD%A6%E4%B9%A0

1.看一个简单的例子,有如下需求

    需求：点击按钮，背景变为黄色;

    分析:

    步骤:

    1、拿到按钮

       document.getElementByid("btn")

    2、给按钮添加点击事件

      按钮.onclick= function(){

      }

      修改属性

      元素.style.样式=值;

实现代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        #box{

            width: 100px;

            height: 100px;

            background: #f00;

        }

    </style>

</head>

<body>

<input type="button" name="btn" id="btn" value="按钮" />

<div id="box"></div>

<script>

    document.getElementById('btn').onclick = function(){

      document.getElementById('btn').style.background='red';

    };

</script>

</body>

</html>

　　

2.JS简单示例2

需求:

    需求：

    1、点击按钮，让div的高度和宽度变化;

    分析:

        步骤:

    1、拿到按钮

       document.getElementByid("btn")

    2、给按钮添加点击事件

        a、拿到要改的元素

          document.getElementById('box')

        b、修改它的宽度和高度

          div.style.width=值

          div.style.height=值

          按钮.onclick= function(){

          }

          修改属性:元素.style.样式=值;

实现代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        #box{

            width: 100px;

            height: 100px;

            background: #f00;

        }

    </style>

</head>

<body>

<input type="button" name="btn" id="btn" value="按钮" />

<div id="box"></div>

<script>

    document.getElementById('btn').onclick = function(){

      document.getElementById('box').style.width = '200px';

      document.getElementById('box').style.height = '200px';

    };

</script>

</body>

</html>

　　

JS简单示例的更多相关文章

  1. ECharts.js 简单示例

    ECharts.js学习(一) 简单入门 EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Vi ...

  2. windows版的node.js简单示例

    1.下载node.exe放到任意目录,假设E:\nodejs\ 2.在E:\nodejs\下新建helloworld.js,输入以下内容,保存关闭 var http = require('http') ...

  3. Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  4. [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  5. Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

  6. Dropzone.js拖拽上传（简单示例）

    今天碰到一个需求,页面上有“点击上传”的按钮,点击可以执行上传事件,从桌面拖拽图片拖拽到任何地方,都可以执行上传,且不影响点击按钮事件.下面是简单示例: 简单示例如下: <!DOCTYPE ht ...

  7. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

  8. 根据juery CSS点击一个标签弹出一个遮罩层的简单示例

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. spring-servlet.xml简单示例

    spring-servlet.xml简单示例 某个项目中的spring-servlet.xml 记下来以后研究用 <!-- springMVC简单配置 --> <?xml versi ...

随机推荐

  1. 使用Excel随机函数产生大众评委的6位登录密码

    第一步:填写公式 如下图所示:选中B2单元格输入公式   =TEXT(ROUNDUP(RAND()*1000000,0),"000000") ,然后回车. 可复制的纯文本格式: = ...

  2. java synchronized 同步详解

    记下来,很重要. Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchron ...

  3. MySQL数据库的高可用方案总结

    高可用架构对于互联网服务基本是标配,无论是应用服务还是数据库服务都需要做到高可用.虽然互联网服务号称7*24小时不间断服务,但多多少少有一些时候服务不可用,比如某些时候网页打不开,百度不能搜索或者无法 ...

  4. BZOJ3812主旋律

    /* 这道题其实没有看懂 所以整理一下吧 首先思想转化成所有方案减去不强联通的方案 不强联通的方案相当于很多强联通分量缩点后的dag 转化成子问题, 问很多点的dag方案数 然后枚举作为出度为0的点集 ...

  5. TreeSet多字段排序

    package st; public class PersonBean implements Comparable<Object>{ private String name; privat ...

  6. 下雨天，适合学「Spring Boot」

      北方的闷热,让不少小伙伴盼着下雨,前几天北京下了场大雨,杭州也紧跟这下了场雨,就在昨天原本还很闷热的天,突然就飘泼大雨了.今天也断断续续的下着小雨,一觉醒来已经是10点了.有句话说:懒惰是人的天性 ...

  7. fabric默认样例的分析

    参考资料 http://www.bubuko.com/infodetail-2092748.html http://www.ithao123.cn/content-11117437.html http ...

  8. gentoo rt-thread scons --menuconfig libs/lxdialog/util.o: undefined reference to symbol 'nodelay'

    今天在另外一台电脑上面使用 rt-thread 的 env 工具,scons --menuconfig 出现错误,提示如下: scons: Reading SConscript files ... s ...

  9. 实战ELK（1） 安装ElasticSearch

    第一步:环境 linux 系统 Java 1.8.0  elasticsearch-6.5.1 第二步:下载 2.1 JDK:https://mirrors.aliyun.com/centos/7.5 ...

  10. Spring MVC 学习笔记9 —— 实现简单的用户管理（4）用户登录显示局部异常信息

    Spring MVC 学习笔记9 -- 实现简单的用户管理(4.2)用户登录--显示局部异常信息 第二部分:显示局部异常信息,而不是500错误页 1. 写一个方法,把UserException传进来. ...