一、初探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的魅力的更多相关文章

  1. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

  2. <一>初探js特效魅力之选项卡05

    初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  3. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  4. vue.js+boostrap

    vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...

  5. js 小数计算为啥和想象中不一样！

    今天遇到了一个比较有趣的事,如果要你计算0.1+0.2等于多少你会怎么回答? "0.3啊!"你可能都不会考虑.我也一样,当a=0.1,b=0.2时 if(a+b === 0.3){ ...

  6. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  7. js变量提升小记

    作为世界上最优美的语言javascript的使用者,呵呵,js的魅力是无穷的,今天来聊聊他的魅(dan)力(teng)之一,变量提升. 每种语言所定义的变量基本都会有一定得作用域,而js的作用域则存在 ...

  8. 新书《Ext JS 4.2 实战》终于出炉了

    在清华大学出版社网站看到了书籍信息了,具体地址是:http://www.tup.tsinghua.edu.cn/book/Showbook.asp?CPBH=056140-01&DJ=51 预 ...

  9. 使用Sublime Text 或 vs2017开发Node.js程序

    在学习一门开发语言时,为了从简单的方式入手,有时候直接用Notepad开始敲代码.曾经我也这样干过,这样做简洁而不简单啊! 随着时间的流逝,人也变得懒惰起来,做事前总是想借助一些工具来搞事情.< ...

随机推荐

  1. 【BZOJ1009】[HNOI2008]GT考试 next数组+矩阵乘法

    [BZOJ1009][HNOI2008]GT考试 Description 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的 ...

  2. JSP中的内置对象和Struts中的Web资源的详解

    JSP中的内置对象有如下几种: request :继承于HttpServletRequest, HttpServletRequest继承ServletRequest, 获得的Request对象的方法: ...

  3. maven (profiles)装载不同环境所需的配置文件

    引子: maven与java的联系在今天的项目已经是不可分割的 ,但是不同的项目有各具特色的项目结构,不同的项目结构使用了不同的maven插件,想要了解一个项目的项目结构,或者自己构建一个具有成熟结构 ...

  4. Socket连接何时需要断开

    socket连接没有正常断开,导致无法下次无法进行连接.

  5. centos7虚拟机克隆

    第一步:克隆 打开VMware,确认已经完成安装配置的centos7虚拟机在关闭状态. 右键点击虚拟机,选择“管理”-“克隆” 原始虚拟机名称为“master”,IP地址为“192.168.80.10 ...

  6. Spark官方3 ---------Spark Streaming编程指南（1.5.0）

    Design Patterns for using foreachRDD dstream.foreachRDD是一个强大的原语,允许将数据发送到外部系统.然而,了解如何正确有效地使用该原语很重要.避免 ...

  7. python包管理一防丢失

    pip3 freeze >list.txt      导出当前环境安装的所有包(list是当前项目录下的文件,可以自己命名)pip3 install -r list.txt     安装文件中所 ...

  8. Java设计模式-简单工厂模式（Static Factory Method）

    简单工厂模式(Static Factory Method) 简单工厂模式是类的创建模式,又叫静态工厂方法(Static Factory Method)模式.简单工厂模式是由一个工厂对象决定创建出哪一种 ...

  9. centos 配置yum源

    1.yum配置 yum的配置文件在  /etc/yum.conf [root@mini ~]# cat /etc/yum.conf [main] cachedir=/var/cache/yum/$ba ...

  10. 003-SpringBoot导入xml配置

    SpringBoot理念就是零配置编程,但是如果绝对需要使用XML的配置,我们建议您仍旧从一个@Configuration类开始,你可以使用@ImportResouce注解加载XML配置文件,我拿一个 ...