本文共 2153 字，大约阅读时间需要 7 分钟。

JavaScript基础知识

一、JavaScript简介

1.概念

JavaScript是一种基于对象和事件驱动的脚本语言，具有安全性能的特点。它不仅能用于网页开发，还广泛应用于服务器、PC、平板电脑和智能手机等设备。

2.特点

• 脚本语言：可以直接嵌入 HTML 文件中。
• 解析型语言：代码在运行时解释和执行。
• 交互性：可以为 HTML 页面添加交互行为。

3.组成

JavaScript的主要组成部分包括：

• ECMAScript（核心）
• BOM（浏览器对象模型）
• DOM（文档对象模型）

二、JavaScript基本结构

（一）脚本标签

JavaScript代码必须位于 <script> 标签之间。可以放置在 HTML 文件的任意位置，常见于头部或尾部。

（二）脚本类型

• 标准类型：type="text/javascript"
• HTML5 支持：省略 type 属性，默认为 text/javascript

（三）示例

三、JavaScript输出

（一）显示数据

• 弹窗：alert("Hello, World!");
• 输出到网页：document.write("Hello, World!");
• 控制台输出：console.log("Hello, World!");
• 写入 HTML 元素：document.getElementById("xxx").innerHTML = "Hello, World!";

（二）语法

• 字面量：字符串可以用单引号或双引号表示。
• 赋值：var i = 1; 或直接使用字符串。

（三）数据类型

• undefined：未初始化的变量。
• null：表示空值。
• number：整数或浮点数。
• boolean：true 或 false。
• string：用引号括起来的文本。

（四）类型检测

typeof 运算符返回值：

• undefined：未赋值的变量。
• string：字符串。
• boolean：布尔值。
• number：数值。
• object：对象、数组或 null。

（五）String 方法

• charAt(index)：获取指定位置的字符。
• indexOf(str, index)：查找字符串。
• substring(index1, index2)：提取子串。
• split(str)：将字符串分割为数组。

（六）数组

• 创建数组：var fruit = new Array("apple", "orange", "peach", "banana");
• 数组操作：arr.push()、arr.sort()、arr.join() 等。

（七）运算符

• ===：严格相等。
• !==：不相等。

（八）循环

• for...in：用于遍历对象属性。

（九）函数

• 定义函数：function study() {}
• 调用函数：通过事件绑定（如 onclick 属性）。

四、JavaScript应用

（一）弹窗提示

• alert()：显示警示框。
• prompt()：显示输入框，支持获取用户输入。

（二）事件

• 常用事件包括 onload、onclick、onmouseover 等。

五、BOM 操作

（一）Window 对象

• 常用方法：
  • open()：打开新窗口或重新定位。
  • close()：关闭窗口。
  • prompt()、alert()：与 window 对话。
  • setTimeout()、setInterval()：设置定时任务。

（二）Location 对象

• 常用属性：
  • href：当前页面的链接。
  • reload()：重新加载页面。
  • replace()：替换当前页面。

（三）Document 对象

• 常用方法：
  • getElementById()：获取元素。
  • write()：向页面中写入内容。
  • innerHTML：修改元素的 HTML 内容。
  • querySelector()：选择满足条件的元素。

（四）Date 对象

• 常用方法：
  • 获取各项时间信息（小时、分钟、秒）。
  • 定时任务（setTimeout 和 setInterval）。

（五）Math 对象

• 常用方法：
  • ceil()：上舍入。
  • floor()：下舍入。
  • random()：随机数生成。

六、DOM 操作

（一）节点操作

• 节点类型：
  • 元素 (element)、属性 (attr)、文本 (text)、注释 (comment)、文档 (document）。

（二）节点属性

• getAttribute()：获取属性值。
• setAttribute()：设置属性值。

（三）节点操作

• 创建节点：createElement()。
• 插入节点：appendChild()、insertBefore()。
• 删除节点：removeChild()、replaceChild()。

（四）样式操作

• style 属性：直接修改元素样式。
• className 属性：通过类名改变样式。

七、HTML 属性

• 常用属性：
  • offset*：获取元素的位置信息。
  • scrollTop、scrollLeft：滚动条的位置。
  • clientWidth、clientHeight：可见区域的尺寸。

通过以上内容，可以全面掌握 JavaScript 的基础知识和实际应用。

转载地址：http://okwm.baihongyu.com/