1、JavaScript 能够以不同方式“显示”数据:
-
使用 window.alert() 写入警告框
-
使用 document.write() 写入 HTML 输出
-
使用 innerHTML 写入 HTML 元素
-
使用 console.log() 写入浏览器控制台
2、JavaScript 使用 var 关键词来声明变量。= 号用于为变量赋值
3、JavaScript的注释:双斜杠 // 或 /* 与 */ 之间的代码被视为注释。
4、不带有值的变量,它的值将是 undefined
5、JavaScript 数据类型
JavaScript 变量能够保存多种数据类型:数值、字符串值、数组、对象等等:
var length = 7; // 数字 var lastName = "Gates"; // 字符串 var cars = ["Porsche", "Volvo", "BMW"]; // 数组 var x = {firstName:"Bill", lastName:"Gates"}; // 对象
6、常见的 HTML 事件
下面是一些常见的 HTML 事件:
事件 | 描述 |
---|---|
onchange | HTML 元素已被改变 |
onclick | 用户点击了 HTML 元素 |
onmouseover | 用户把鼠标移动到 HTML 元素上 |
onmouseout | 用户把鼠标移开 HTML 元素 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已经完成页面加载 |
7、创建 Date 对象
Date 对象由新的 Date() 构造函数创建。
有 4 种方法创建新的日期对象:
-
new Date()
-
new Date(year, month, day, hours, minutes, seconds, milliseconds)
-
new Date(milliseconds)
-
new Date(date string)
Date
日期的对象,在JS中通过Date对象来表示一个时间 创建对象 创建一个当前的时间对象
var d = new Date();
创建一个指定的时间对象
var d = new Date("月/日/年 时:分:秒");
方法:
name getDate() 当前日期对象是几日(1-31) getDay() 返回当前日期对象时周几(0-6) 0 周日 1 周一 。。。 getMonth() 返回当前日期对象的月份(0-11) 0 一月 1 二月 。。。 getFullYear() 从 Date 对象以四位数字返回年份。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 getTime() 返回当前日期对象的时间戳 时间戳,指的是从1970年月1日 0时0分0秒,到现在时间的毫秒数 计算机底层保存时间都是以时间戳的形式保存的。 Date.now() 可以获取当前代码执行时的时间戳
8、鼠标事件
事件 | 描述 |
---|---|
mousedown | 鼠标按钮被按下(左键或者右键)时触发。不能通过键盘触发。 |
mouseup | 鼠标按钮被释放弹起时触发。不能通过键盘触发。 |
click | 单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。 |
dblclick | 双击鼠标左键时触发。 |
mouseover | 鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。 |
mouseout | 鼠标移出目标元素上方。 |
mouseenter | 鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发 。 |
mouseleave | 鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到其后代元素时不会触发 。 |
mousemove | 鼠标在元素内部移到时不断触发。不能通过键盘触发。 |
9、DOM
Document Object Model,文档对象模型,通过DOM可以来任意来修改网页中各个内容。是针对HTML和XML的一个API(应用程序接口)。DOM给我们描述了一个具有层次化特点的节点树,允许开发人员增删改查页面的某些部分。
文档 文档指的是网页,一个网页就是一个文档 对象 对象指将网页中的每一个节点都转换为对象,转换完对象以后,就可以以一种纯面向对象的形式来操作网页了 模型 模型用来表示节点和节点之间的关系,方便操作页面
DOM查询 在网页中浏览器已经为我们提供了document对象, 它代表的是整个网页,它是window对象的属性,可以在页面中直接使用。 document查询方法: 根据元素的id属性查询一个元素节点对象: document.getElementById(“id属性值”); 根据元素的name属性值查询一组元素节点对象: document.getElementsByName(“name属性值”); 根据标签名来查询一组元素节点对象: document.getElementsByTagName(“标签名”);
10、常用DOM方法总结 getElementById() 返回带有指定ID 的元素。 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节 点列表(集合/节点数组)。 getElementsByClassName() 返回包含带有指定类名的所有元素的节 点列表。 getElementsByName('a') 通过name属性获取一组元素节点对象 document.querySelector('#a') 通过CSS选择器来获取一个元素节点对象 document.querySelectorAll('span') 通过CSS选择器来获取一组元素节点对象 appendChild() 把新的子节点添加到指定节点。 removeChild() 删除子节点。 replaceChild() 替换子节点。 insertBefore() 在指定的子节点前面插入新的子节点。 createAttribute() 创建属性节点。