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入门基本教程(适合没编程基础新手)

将JavaScript 插入网页的方法 使用标签在网页中插入Javascript代码。 插入JavaScript 与在网页中插入CSS的方式相似。使用下面的代码可以在网页中插入Java...
  • hewei0241
  • hewei0241
  • 2012年11月12日 19:40
  • 28107

p5.js入门教程(3) 平滑过渡(Easing)

一、跟随鼠标移动的小球 使用mouseX,mouseY可以创建一个跟随鼠标移动的小球。 function setup() { createCanvas(400, 400); } fun...
  • qq_27534999
  • qq_27534999
  • 2017年07月23日 06:32
  • 1198

javascript教程

  • 2009年05月11日 22:46
  • 603KB
  • 下载

JavaScript最佳入门教程(中文版)

  • 2013年07月12日 18:10
  • 2.05MB
  • 下载

js实战教程

  • 2013年02月25日 13:54
  • 49.57MB
  • 下载

JS入门教程

1、用JS做一个效果的步骤: a)先进行布局; b)思考实现原理; c)了解JS的语法(可以给需要做效果的整体元素加JS语句,这样可以保持元素的整体性,不至于效果只在元素内部的某一部分)。 2...
  • JimmyLuo17
  • JimmyLuo17
  • 2016年03月26日 10:31
  • 637

zepto.js入门到精通(一)

由于公司需要今天看了一下zepto.js,发现zepto.js还是有自己的优势的!
  • sinat_29325027
  • sinat_29325027
  • 2016年04月25日 11:03
  • 628

Cocos2d-JS快速入门一

,配套视频教程:http://i.youku.com/lingjianfeng  视频、讲义、源码:http://pan.baidu.com/share/home?uk=1260900318#ca ...
  • dj0379
  • dj0379
  • 2014年11月08日 02:34
  • 3363

js入门教程

  • 2017年09月12日 16:27
  • 580KB
  • 下载

JavaScript视频教程

  • 2017年09月09日 10:53
  • 109B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS入门教程
举报原因:
原因补充:

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