JS的魅力
一、初探JavaScript魅力
基本知识:
JavaScript是什么
网页特效原理
-JavaScript就是修改样式
编写JS流程
- 布局:HTML + CSS
- 属性:确定修改哪些属性
- 事件:确定用户做哪些操作(产品设计)
- 编写js:在事件中,用js来修改页面元素样式
(小注:html + css 是静态页面,html + css + js 是动态页面;实际上,js就是给网页添加了一些交互或是一些功能。)
案例:我的第一个js特效——鼠标提示框
分析效果实现原理:
- 样式:Div的display
- 事件:onmouseover/onmouseout
特效基础:
- 事件驱动:onmouseover
- 元素操作属性:obj.style.[.....]
- 特效实现原理概括:响应用户操作、对页面元素(标签)进行某种修改
(小注:事件指的是用户操作,如onclick、onmouseover、onmouseout)
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>我的第一个js特效——鼠标提示框</title>
<style>
div{width:200px; height:200px; background:#edf1f2; display:none;}
</style>
</head>
<body>
<input type = "checkbox" onmouseover = "document.getElementById('div1').style.display = 'block';" onmouseout = "document.getElementById('div1').style.display = 'none';"/>
<div id = "div1">
这是我的第一js特效哦~
</div>
</body>
</html>
初识函数
制作更复杂的效果(Div的颜色、大小都变化)
直接在事件内写代码会很乱
- 引入function()、函数的基本形式
- 把js从标签里放到函数里,类似css中的class
- 变量的使用——标识符(别名)
定义和调用:
-函数的定义:只是告诉系统有这个函数,并不会实际执行
- 函数调用:真正执行函数里的代码
(小注:注意代码的重用)
案例:Div的颜色、大小、透明度都变化
js
function toGreen(){
var oDiv = document.getElementById("div1");
oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.background = "green";
oDiv.style.opacity = .3;
}
function toYellow(){
var oDiv = document.getElementById("div1");
oDiv.style.width = "200px";
oDiv.style.height = "200px";
oDiv.style.background = "yellow";
oDiv.style.opacity = 1;
}
css
div{width:200px; height:200px; background:yellow; opacity:1}
html
<div id = "div1" onmouseover = "toGreen()" onmouseout = "toYellow()"></div>
JS的魅力的更多相关文章
- <一>初探js特效魅力之全选不选反选04
初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...
- <一>初探js特效魅力之选项卡05
初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- vue.js+boostrap最佳实践
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
- vue.js+boostrap
vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...
- js 小数计算为啥和想象中不一样!
今天遇到了一个比较有趣的事,如果要你计算0.1+0.2等于多少你会怎么回答? "0.3啊!"你可能都不会考虑.我也一样,当a=0.1,b=0.2时 if(a+b === 0.3){ ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- js变量提升小记
作为世界上最优美的语言javascript的使用者,呵呵,js的魅力是无穷的,今天来聊聊他的魅(dan)力(teng)之一,变量提升. 每种语言所定义的变量基本都会有一定得作用域,而js的作用域则存在 ...
- 新书《Ext JS 4.2 实战》终于出炉了
在清华大学出版社网站看到了书籍信息了,具体地址是:http://www.tup.tsinghua.edu.cn/book/Showbook.asp?CPBH=056140-01&DJ=51 预 ...
- 使用Sublime Text 或 vs2017开发Node.js程序
在学习一门开发语言时,为了从简单的方式入手,有时候直接用Notepad开始敲代码.曾经我也这样干过,这样做简洁而不简单啊! 随着时间的流逝,人也变得懒惰起来,做事前总是想借助一些工具来搞事情.< ...
随机推荐
- linux 常用命令总结(tsg)
1.解压tar.gz 第一步:gunzip filename.tar.gz --->会解压成.tar文件 第二步:tar xvf FileName.tar ---->会解压到当前文件夹2. ...
- Java Tomcat 注册为Windows系统服务
注册方法: 1. 在DOS命令行模式下,cd到tomcat的bin目录下 cd tomcatpath 根目录加:后回车 进入到tomcat安装目录,cd bin,进入tomcat启动目录 2.在tom ...
- 你所不知道的CSS
1.用FONT-SIZE:0来清除间距 inline-block的元素之间会受空白区域的影响,也就是元素之间差不多会有一个字符的间隙.如果在同一行内有4个25%相同宽度的元素,会导致最后一个元素掉下来 ...
- Python Pypi 修改 国内源(以豆瓣源为例)
参考:http://pip.readthedocs.io/en/latest/user_guide/#config-file Pypi在国内豆瓣源的地址如下: http://pypi.douban.c ...
- c++11 lambda(了解)
this->send_change_equip = ([this](ChangeEquipPT channge) { send_cmd(s2c_change_equip, &channg ...
- c#基础 第一讲
using System;using System.Collections.Generic; using System.Text; namespace MYTest{ class Program { ...
- Android 全局异常处理(二)
CrashHandler package org.wp.activity; import java.io.File; import java.io.FileOutputStream; import ...
- java方法的理解、调用栈与异常处理
一.流程分支 If/else :基于boolean值的双分支 Switch:基于数字(整数.char.byte.枚举).字符串 类型的多分支 Int month =5; Switch 二.方法meth ...
- Python目录整合
一.python基础篇 二.网络编程篇&&并发编程篇 三.数据库篇 -mysql -redis -mongodb 四.前端篇 -html -css -js jquery&&am ...
- sersync+rsync原理及部署
标签:sersync+rsync部署文档 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liubao0312.blog.51ct ...