JavaScript教程-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 是一种脚本语言，常用于 Web 开发中的客户端编程。它是一门强大的语言，可以为网站增加交互性和动态效果。在本教程中，我们将深入了解 JavaScript 的基础知识，并通过示例代码来帮助你更好地理解。

基础语法

变量和数据类型

在 JavaScript 中定义变量时需要使用 var 关键字，如下所示：

var name = "John";
var age = 30;

JavaScript 支持多种数据类型，包括字符串、数字、布尔值、数组、对象等。其中，字符串和数字是最常用的两种数据类型。下面是一些示例代码：

var message = "Hello, world!";
var pi = 3.1415926;
var isDone = true;
var fruits = ["apple", "banana", "orange"];
var person = { name: "John", age: 30 };

运算符

JavaScript 支持各种常见的运算符，包括算术运算符、比较运算符、逻辑运算符等。下面是一些示例代码：

var x = 10;
var y = 5;
var z = x + y; // 加法运算
var a = x > y; // 大于运算
var b = x && y; // 逻辑与运算

条件语句和循环语句

JavaScript 支持各种条件语句和循环语句，如 if、switch、for、while 等。下面是一些示例代码：

-- -------------------- ---- -------
-- -- - -- -
  -------------- -- ----
- ---- -
  -------------- -- ----
-

------ --- -
  ---- --
    -------------- - ----
    ------
  ---- --
    -------------- - ----
    ------
  --------
    -------------- -- - --- ----
-

--- ---- - - -- - - --- ---- -
  ---------------
-

--- - - --
----- -- - --- -
  ---------------
  ----
-

DOM 操作

DOM（文档对象模型）是指 HTML 文档的编程接口。JavaScript 可以通过 DOM 操作 HTML 元素，实现动态效果和交互性。下面是一些示例代码：

获取元素

可以使用 document.getElementById() 方法获取页面上的元素，如下所示：

var element = document.getElementById("myElement");

修改元素属性

可以使用 element.setAttribute() 方法修改元素的属性，如下所示：

element.setAttribute("src", "image.png");

修改元素内容

可以使用 element.innerHTML 属性修改元素的内容，如下所示：

element.innerHTML = "Hello, world!";

添加事件监听器

可以使用 element.addEventListener() 方法为元素添加事件监听器，如下所示：

element.addEventListener("click", function() {
  console.log("元素被单击了。");
});

jQuery 库

jQuery 是一款流行的 JavaScript 库，它简化了 DOM 操作和事件处理，并提供了各种实用的工具函数。下面是一些示例代码：

获取元素

可以使用 $() 函数获取页面上的元素，如下所示：

var element = $("#myElement");

修改元素属性

可以使用 element.attr() 方法修改元素的属性，如下所示：

element.attr("src", "image.png");

修改元素内容

可以使用 element.html() 方法修改元素的内容，如下所示：

element.html("Hello, world!");

添加事件监听器

可以使用 element.on() 方法为元素添加事件监听器，如下所示：

element.on("click", function() {
  console.log

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/5195) ，转载请注明来源
[https://www.javascriptcn.com/post/5195](https://www.javascriptcn.com/post/5195)