网页的血液——javascript(1)

最新推荐文章于 2024-11-12 17:31:26 发布

2401_83641491

最新推荐文章于 2024-11-12 17:31:26 发布

阅读量482

点赞数 3

分类专栏：程序员文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_83641491/article/details/138100176

版权

程序员专栏收录该内容

492 篇文章 3 订阅

订阅专栏

比较运算符：用于比较两个值，如 ==、!=、>、<、>=、<=。
逻辑运算符：用于逻辑操作，如 &&（与）、||（或）、!（非）。
赋值运算符：用于赋值，如 =、+=、-=、*=、/=。

let x = 10;
let y = 20;

// 算术运算符
let sum = x + y; // 30
let diff = x - y; // -10

// 比较运算符
let isEqual = x == y; // false
let isGreater = x > y; // false

// 逻辑运算符
let isTrue = true && false; // false

// 赋值运算符
x += 5; // x 现在是 15

5. JavaScript 中的流程控制

JavaScript 提供了多种流程控制语句，包括 if、else、switch、for、while 和 do...while。

if…else：用于条件判断。
switch：用于多条件判断。
for：用于重复执行代码块。
while：用于当条件为真时重复执行代码块。
do…while：用于当条件为真时重复执行代码块，且至少执行一次。

// if...else
if (x > y) {
 console.log("x is greater than y");
} else {
 console.log("x is not greater than y");
}

// switch
switch (x) {
 case 10:
    console.log("x is 10");
    break;
 case 20:
    console.log("x is 20");
    break;
 default:
    console.log("x is not 10 or 20");
}

// for
for (let i = 0; i < 5; i++) {
 console.log(i);
}

// while
let i = 0;
while (i < 5) {
 console.log(i);
 i++;
}

// do...while
let j = 0;
do {
 console.log(j);
 j++;
} while (j < 5);

6. JavaScript 中的函数

函数是一段可以重复使用的代码，它可以接受输入参数，并返回一个值。JavaScript 中的函数可以通过 function 关键字声明。

function greet(name) {
 return "Hello, " + name;
}

console.log(greet("John")); // 输出 "Hello, John"

7. JavaScript 中的匿名函数

匿名函数是没有名称的函数，它们通常用作函数表达式或作为函数的参数。

// 函数表达式
let greet = function(name) {
 return "Hello, " + name;
};

console.log(greet("John")); // 输出 "Hello, John"

// 作为函数参数
setTimeout(function() {
 console.log("This message is displayed after 2 seconds");
}, 2000);

14. DOM 元素操作 HTML

DOM（Document Object Model）是一个编程接口，用于 HTML 和 XML 文档。它提供了一个结构化的文档表示，并定义了一种方式使程序能够访问和改变文档的内容、结构和样式。

获取元素

可以通过多种方式获取 DOM 元素：

通过 ID：使用 document.getElementById() 方法。
通过标签名：使用 document.getElementsByTagName() 方法。
通过类名：使用 document.getElementsByClassName() 方法。
通过选择器：使用 document.querySelector() 或 document.querySelectorAll() 方法。

// 通过 ID 获取元素
var elementById = document.getElementById("myId");

// 通过标签名获取元素
var elementsByTagName = document.getElementsByTagName("p");

// 通过类名获取元素
var elementsByClassName = document.getElementsByClassName("myClass");

// 通过选择器获取元素
var elementBySelector = document.querySelector(".myClass");
var elementsBySelector = document.querySelectorAll(".myClass");

修改元素

可以通过 DOM 元素的属性和方法来修改元素的内容、属性和样式。

// 修改元素的文本内容
elementById.textContent = "New text content";

// 修改元素的 HTML 内容
elementById.innerHTML = "<b>New HTML content</b>";

// 修改元素的属性
elementById.setAttribute("class", "newClass");

// 修改元素的样式
elementById.style.color = "blue";

15. DOM 相关元素

DOM 提供了一系列的元素和对象，用于表示文档的结构和内容。

节点（Node）：文档中的所有内容都是节点，如元素、属性、文本等。
元素（Element）：文档中的 HTML 标签。
属性（Attribute）：元素的属性。
文本（Text）：元素或属性中的文本内容。

// 获取元素节点
var elementNode = document.getElementById("myId");

// 获取文本节点
var textNode = elementNode.firstChild;

// 获取属性节点
var attributeNode = elementNode.getAttributeNode("class");