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

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

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

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

  1.     需求：点击按钮，背景变为黄色;
  2.     分析:
  3.     步骤:
  4.     1、拿到按钮
  5.        document.getElementByid("btn")
  6.     2、给按钮添加点击事件
  7.       按钮.onclick= function(){
  8.       }
  9.       修改属性
  10.       元素.style.样式=值;

实现代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #box{
  8.             width: 100px;
  9.             height: 100px;
  10.             background: #f00;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <input type="button" name="btn" id="btn" value="按钮" />
  16. <div id="box"></div>
  17. <script>
  18.     document.getElementById('btn').onclick = function(){
  19.       document.getElementById('btn').style.background='red';
  20.     };
  21. </script>
  22. </body>
  23. </html>

　　

2.JS简单示例2

需求:

  1.     需求：
  2.     1、点击按钮，让div的高度和宽度变化;
  3.     分析:
  4.         步骤:
  5.     1、拿到按钮
  6.        document.getElementByid("btn")
  7.     2、给按钮添加点击事件
  8.         a、拿到要改的元素
  9.           document.getElementById('box')
  10.         b、修改它的宽度和高度
  11.           div.style.width=值
  12.           div.style.height=值
  13.           按钮.onclick= function(){
  14.           }
  15.           修改属性:元素.style.样式=值;

实现代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #box{
  8.             width: 100px;
  9.             height: 100px;
  10.             background: #f00;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <input type="button" name="btn" id="btn" value="按钮" />
  16. <div id="box"></div>
  17. <script>
  18.     document.getElementById('btn').onclick = function(){
  19.       document.getElementById('box').style.width = '200px';
  20.       document.getElementById('box').style.height = '200px';
  21.  
  22.     };
  23. </script>
  24. </body>
  25. </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. OpenJudge Cartesian Tree

    [代码] #include <cstdio> #include <cstdlib> #include <cstring> #include <algorith ...

  2. 用tmux工具给linux命令行分栏

    介绍 有时候我们需要在命令行里同时开多个程序,但是每个程序都会占用命令行,这时候可以用tmux,给命令行界面分栏. 基本概念 tmux是分多层的 会话>窗口(我下文称作:页)>面板(或者叫 ...

  3. 使用RestTemplate在代码内调用POST请求的参数乱码问题

    背景:在项目A代码内部,调用项目B的restful接口C,我们采用了RestTemplate进行调用,但是调用过程中,一直不能正常返回数据,日志显示参数存在乱码(有个参数的值是中文) 乱码原因:请求方 ...

  4. redis 的简单用法

    使用  :下载完后 打开任务管理器 把redis_server 进程关掉, 切换到   E:\redis 中 redis-server.exe redis.windows.conf 打开一个 cmd ...

  5. SQL各种语(持续更新)

    --通过分组查询,并查询各个组下面的数据数量 SELECT cord,COUNT(*) AS s FROM View_QualityPolicy GROUP BY cord ORDER BY s DE ...

  6. SPOJ3276 D-query

    题意:n个数 a1...an,q组询问,每组询问给定 l,r,输出 [ l, r ] 有多少不同的数 ( n ≤30000, q ≤200000, ai ≤ 106 ) 离线 + 树状数组维护 #in ...

  7. (转)处理SQL中的异常并记录错误日志

    原文地址 创建错误日志表: ),ErrState ),ErrLine )) --创建错误日志记录存储过程: CREATE PROCEDURE ErrorLog AS SELECT ERROR_NUMB ...

  8. <Linux> Ubuntu error： ssh: connect to host master port 22: No route to host lost connection

    iptables当找到匹配的规则时,就会执行相应的动作,而不会向下继续匹配.因为ssh端口开放的规则在all规则之后,所以永远都不会匹配到,也就是ssh永远被禁止. root下执行:iptables  ...

  9. Dubbo(1)--初识Dubbo

    1. 为什么需要 Dubbo 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当 ...

  10. Linux 下 Bash配置文件读取

    Linux安装时可能要修改的配置文件:/etc/profile./etc/bashrc(ubuntu没有这个文件,对应地,其有/etc/bash.bashrc文件.我用的是ubuntu系统,所以下面将 ...