JavaScript基础学习心得02

写一个js效果的步骤:

  1. 先实现布局;
  2. 了解动画实现的原理;
  3. 了解js语法;

js如何获取元素?

  1. document.getElementById(‘link’)

事件

  • 鼠标事件:
  1. onclick
  2. onmouseover
  3. onmouseout
  4. onmousemove //鼠标的抚摸事件
  5. onmousedown
  6. onmouseup
  • 键盘事件;
  • 系统事件:

    onload //加载完了html代码后再执行script脚本

  • 表单事件;
  • 自定义事件:原生没有,我们得自己做。

如何添加事件?

就像酱紫:元素.onmouseover

函数

即命令,做一些事儿。

function abc(){
……//不会主动执行
}
  1. 直接调用:abc();
  2. 事件调用:元素.onmouseover=abc;//千万不要加括号
  3. 匿名调用:元素.onmouseover=function(){};

测试

初学者要保持随时写,随时测的习惯。

alert(1);//带一个确定按钮的警告框
alert(‘okhahaha’);

document.getElementById(‘link’)太长?用变量!

var hahaha=document.getElementById(‘link’);

希望把某个元素移出你的视线?

  1. display:none;//消失了,不占地儿
  2. visibility:hidden;//只是隐藏了,还是占地儿
  3. 改变宽高:配合js可以实现生长动画效果;
  4. 改变透明度:配合js可以实现淡入淡出动画效果;
  5. 改变绝对定位;
  6. 拿一个白色的div遮住它:甚至可以实现水滴回缩效果;
  7. margin负值;

原文地址:https://www.cnblogs.com/endymion/p/9172417.html

时间: 2024-10-06 15:09:15

JavaScript基础学习心得02的相关文章

javascript基础学习心得01

绝对值小于等于2的53次方的整数,即-253到253,都可以精确表示,也就是说15位的十进制数都可以精确处理: JavaScript 能够表示的数值范围为21024到2-1023(开区间),超出这个范围的数无法表示: NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number: NaN不等于任何值,包括它本身: 单纯的数学运算几乎没有可能抛出错误: Infinity与NaN比较,总是返回false : 0乘以Infinity,返回NaN: 0除以Infinity ,返回0 :

javascript小白学习指南0---2

好啦 好啦 ,美女看够了,我们开始继续上一次讲的内容把(上一节的内容) 控制语句: 首先我先给大家总结一下在javascript中一共有 9 种控制语句它们分别是 if 语句 do-while 语句 while 语句 for 语句 for-in 语句 label 语句 break 和 continue 语句 with 语句 switch 语句 下面来分别为这几个控制语句举个例子 var i=10; if(i>15) { alert("i>15") } else if(i&l

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q

javascript基础学习(八)

javascript之日期对象 学习要点: 日期对象 将日期对象转换为字符串 将日期对象中的日期和时间转换为字符串 日期对象中的日期 日期对象中的时间 设置日期对象中的日期 设置日期对象中的时间 与毫秒相关的方法 一.日期对象 在javascript中并没有日期型的数据类型,但是提供了一个日期对象可以操作日期和时间. 日期对象的创建: new Date(); 二.将日期对象转换为字符串 将日期对象转换为字符串可以使用以下4种方法: date.toString();//将日期对象转换为字符串时,采

javascript基础学习(二)

javascript的数据类型 学习要点: typeof操作符 五种简单数据类型:Undefined.String.Number.Null.Boolean 引用数据类型:数组和对象 一.typeof操作符 typeof操作符用来检测变量的数据类型,操作符可以操作变量也可以操作字面量. 对变量或值运用typeof操作符得到如下值: undefined----如果变量是Undefined类型: boolean-------如果变量是Boolean类型: number-------如果变量是Numbe

[转载] 几张非常有意义的JavaScript基础学习思维图

原文:http://www.w3cfuns.com/forum.php?mod=viewthread&tid=5598364&extra=page%3D1%26filter%3Ddigest%26digest%3D1%26digest%3D1 1.JavaScript 数组 2.JavaScript 函数基础 3.Javascript 运算符 4.JavaScript 流程控制 5.JavaScript 正则表达式 6.JavaScript 字符串函数 7.JavaScript 数据类型

javascript基础学习(十二)

javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显示器的信息. 目前显示器分辨率为800X600或1024X768两种. screen.height:屏幕的高度 screen.width:屏幕的宽度 screen.availHeigh:屏幕的有效高度 screen.availWidth:屏幕的有效宽度 二.History对象 History对象可以

javascript基础学习(五)

javascript之函数 学习要点: 函数的介绍 函数的参数 函数的属性和方法 系统函数 一.函数的介绍 1.函数就是一段javascript代码.可以分为用户自定义函数和系统函数.   如果一个函数是javascript内置的函数,就称为系统函数.如果函数是自己编写的函数,就是自定义函数. 2.在javascript用function来定义一个函数.function 函数名(参数1,参数2,...){<语句块>  return 返回值} (PS:return语句可以省略) 3.函数的嵌套定

javascript基础学习(三)

javascript之运算符 学习要点: 表达式 运算符:一元运算符,算术运算符,关系运算符,逻辑运算符,*位运算符,赋值运算符 一.表达式 表达式有常量表达式,变量表达式,复合表达式. 二.算术运算符 一元:+(正号).-(负号).++.—— 二元:*./.%.+.- 三.关系运算符 ==.=== ps:等同运算符比相等运算符要求更为严格,等同运算符只有在两个操作数类型相同,并且值也相同的情况下才会返回true. <.<=.>.>= instanceof运算符.       in