JS入门教程

原创 2016年03月26日 10:31:09

1、用JS做一个效果的步骤:

a)先进行布局;

b)思考实现原理;

c)了解JS的语法(可以给需要做效果的整体元素加JS语句,这样可以保持元素的整体性,不至于效果只在元素内部的某一部分)。

2、JS中获取元素的基本方法:通过ID名称来获取元素,代码为:

a)document.getElementById('link');(意为document get element by id 'link')。

3、事件分为鼠标事件、键盘事件、系统事件、表单事件以及自定义事件。

a)添加事件的方式:元素.onmouseover。

b)基础的鼠标事件:onclick、onmouseover、onmouseout、onmousedown、onmouseup、onmousemove(就像是鼠标抚摸一样的事件)。

c)系统事件:“onload = 有名函数名/匿名函数主体”表示加载完以后再执行以下函数。例如:“window.onload”表示事件是在系统加载完后执行、“img.onload”表示事件是在图片加载完后执行、 “body.onload”表示主体加载完以后执行。

4、函数(进行某些指令操作,一定不会主动执行):

a)有名函数多用于多次调用,其写法为“function 名字(){……}”,执行函数的方式为:

i.直接用名字调用,比如:“abc()”;

ii.事件调用:元素.事件 = 函数名,比如:“odiv.onclick = abc;”;

iii.……

b)匿名函数一般仅用于一次调用,其写法为:“function (){}”,调用方式:“元素.事件 = function (){};”。 

5、测试:

a)alert(1); 带了一个确定按钮的警告框(数字不用加引号);

b)alert('ok'); ''引号表示该内容为字符串;

c)alert("ok"); ""双引号也可以表示字符串。

d)总结:用这句可以测试到底是哪一行出现了错误,逐行逐行进行检测,直到某一行没有出现“带了一个确定按钮的警告框”,那就说明该语句上一行出错了。最好保持一种随时写,随时测试的习惯!

6、变量,其实就是C语言中的宏定义,有如下几种定义:

a)var lis = document.getElementById('lis');表示“document.getElementById('lis')”用“lis”代替;

b)var num = 123;表示用“num”代替“123”;

c)var name = 'leo';表示用“name”代替“leo”。

7、把某个元素移出你的视线之外,可以利用以下几种方法:

a)display:none; 显示为无,闪现效果,不占文档流

b)visibility:hidden; 让元素隐藏,闪现效果,占文档流

c)width、height和border; 横向、纵向的慢慢打开或者是由一个点状的放射开效果

d)透明度 淡入淡出效果

e)通过定位改left、top 点击弹入弹出效果

f)加一个与背景一致的div 回字显示或者是抽卡片式显示

g)margin负值 等同于第5种

h)……

8、匈牙利命名法基本原则是:变量名=属性+类型+对象描述。要基于容易记忆容易理解的原则,其中每一对象的名称都要求有明确含义,可以取对象名字全称或名字的一部分,保证名字的连贯性是非常重要的。

版权声明:本文为博主原创文章,未经博主允许不得转载。

js从入门到放弃之入门(一)

此文乃无聊所写,别浪费时间看了,对其他人而言实在没有什么有意义的东西...
  • svhxh
  • svhxh
  • 2016年09月13日 09:12
  • 1667

ReportStudio入门教程(六十二) - JS-可变宽度的图表

这回我们再介绍一段JS,可以生成

ReportStudio入门教程(五十七) - JS拼接报表

这回,分享一个段JS代码,有的时候,我们可能需要将2个报表进行拼接,让用户...

Niep.js - Web移动端无刷新页面切换 -- 入门教程

引入Niep.js,初始化配置参数。Niep.init({ loading : function(isLoading){ if( !isLoading ){ ...
  • phoooob
  • phoooob
  • 2016年05月26日 13:57
  • 752

(pomelo系列入门教程)深入浅出node.js游戏服务器开发——Pomelo框架的设计动机与架构介绍

一、Pomelo的定义和组成 以下是Pomelo官网给出的最初定义:Pomelo是基于node.js的高性能,分布式游戏服务器框架。它包括基础的开发框架和相关的扩展组件(库和工具包),可以帮助你...
  • mywcyfl
  • mywcyfl
  • 2014年12月06日 15:04
  • 2429

mui初级入门教程(七)— 基于native.js的文件系统管理功能实现

文章来源:小青年原创 发布时间:2016-08-01 关键词:mui,nativejs,android 转载需标注本文原始地址: http://zhaomenghuan.github.io......

【React】React Js入门教程(一学就会)

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领...

Node.js入门教程

关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。 状态 你正在阅读的已经是本书的...

没编程基础学习JS的入门教程

 JavaScript教程网为没有编程基础的人员写一个适合他们的教程,JS入门基本教程(适合没编程基础新手)。 将JavaScript 插入网页的方法 使用标签在网页中插入Javascrip...

ReportStudio入门教程(五十九) - JS-设置下拉框默认值

大家应该还记得值提示这个
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS入门教程
举报原因:
原因补充:

(最多只允许输入30个字)