前端中的Javascript

javascript定义方式

内联JavaScript

直接在HTML元素的事件属性中编写JavaScript代码

<body>
    <h1>Hello, World!</h1>

    <button onclick="alert('Button clicked!')">Click Me</button>
</body>

内部JavaScript
- 可以直接在HTML文件中使用<script>标签来编写JavaScript代码
- 放置在<head>内的<script>标签会在页面加载过程中被下载和解析，但在页面内容渲染之前执行
- 放置在<body>结尾处的<script>标签会在页面内容加载完毕后执行
- 直接放在HTML文件的顶部会在页面加载时立即执行脚本
- 放在HTML标签之外被视为无效内容
- ```
<body>
    <h1>Hello, World!</h1>

    <script>
        // 这里是JavaScript代码
        alert('Hello from inline JavaScript!');
    </script>
</body>
```
外部JavaScript文件
- 可以将JavaScript代码放在一个外部文件中，然后在HTML文件中通过<script>标签的src属性引用该文件。
- ```
<body>
    <h1>Hello, World!</h1>

    
    <script src="script.js"></script>
</body>
```
<script>标签的defer和async属性
- 当引用外部JavaScript文件时，可以使用defer或async属性来控制脚本的加载和执行时机。
  - defer: 脚本会在文档解析完成后执行，但会在DOMContentLoaded事件之前执行。
  - async: 脚本会在下载完成后立即执行，可能会中断文档的解析。
  - ```
  
  <script src="script1.js" defer></script>
  
  <script src="script2.js" async></script>
```

DOM（文档对象模型）

基本概念

文档：DOM的核心是文档，通常是HTML或XML文档。
节点：文档中的每个部分都是一个节点，包括元素节点、文本节点、属性节点等。
树状结构：DOM将文档表示为一个树状结构，每个节点都是树中的一个分支或叶子。

节点类型

文档节点（Document）：整个文档的根节点。
元素节点（Element）：HTML或XML中的标签，如<div>、<p>等。
文本节点（Text）：元素中的文本内容。
属性节点（Attr）：元素的属性，如<img src="image.jpg">中的src。
注释节点（Comment）：HTML或XML中的注释。

内置对象

window 对象

window 是浏览器环境的全局对象，代表浏览器窗口。它提供了许多与浏览器窗口相关的方法和属性。

常用属性方法

window.location：获取或设置当前页面的URL。
window.history：操作浏览器的历史记录。
window.localStorage 和 window.sessionStorage：用于在浏览器中存储数据。
window.alert()、window.confirm()、window.prompt()：显示弹窗。
window.setTimeout() 和 window.setInterval()：定时器。

window.location.href = "https://www.example.com"; // 跳转到新页面

window.history.back(); // 返回上一页
window.history.forward(); // 前进到下一页

localStorage.setItem("key", "value"); // 存储数据
const value = localStorage.getItem("key"); // 获取数据

window.alert("这是一个提示框");
const result = window.confirm("你确定吗？");
const name = window.prompt("请输入你的名字");

setTimeout(() => {
  console.log("2秒后执行");
}, 2000);

setInterval(() => {
  console.log("每隔1秒执行一次");
}, 1000);

JavaScript操作网页

JavaScript 是一种强大的脚本语言，广泛用于操作 HTML 网页的内容、结构和样式。通过 JavaScript，可以实现动态更新网页内容、响应用户交互、修改 DOM（文档对象模型）等操作。

获取HTML元素

通过 id 获取元素

使用 document.getElementById() 方法获取具有特定 id 的元素。

<p id="myParagraph">Hello, World!</p>
<script>
    let element = document.getElementById("myParagraph");
    console.log(element.innerHTML); // 输出: Hello, World!
</script>

通过 class 获取元素

使用 document.getElementsByClassName() 方法获取具有特定 class 的元素集合。

<p class="myClass">Paragraph 1</p>
<p class="myClass">Paragraph 2</p>
<script>
    let elements = document.getElementsByClassName("myClass");
    console.log(elements[0].innerHTML); // 输出: Paragraph 1
</script>

通过标签名获取元素

使用 document.getElementsByTagName() 方法获取具有特定标签名的元素集合。

<div>Div 1</div>
<div>Div 2</div>
<script>
    let divs = document.getElementsByTagName("div");
    console.log(divs[1].innerHTML); // 输出: Div 2
</script>

通过 CSS 选择器获取元素

使用 document.querySelector() 和 document.querySelectorAll() 方法通过 CSS 选择器获取元素。
- querySelector()：返回第一个匹配的元素。
- querySelectorAll()：返回所有匹配的元素集合。

<p class="myClass">Paragraph 1</p>
<p class="myClass">Paragraph 2</p>
<script>
    let firstParagraph = document.querySelector(".myClass");
    console.log(firstParagraph.innerHTML); // 输出: Paragraph 1

    let allParagraphs = document.querySelectorAll(".myClass");
    allParagraphs.forEach(p => console.log(p.innerHTML)); // 输出: Paragraph 1 和 Paragraph 2
</script>

修改HTML内容

使用 innerHTML 或 textContent 属性修改元素的内容。

innerHTML：可以解析 HTML 标签。
textContent：只处理纯文本。

<p id="myParagraph">Hello, World!</p>
<script>
    let element = document.getElementById("myParagraph");
    element.innerHTML = "Hello, JavaScript!"; // 修改内容
    console.log(element.textContent); // 输出: Hello, JavaScript!
</script>

修改元素属性

使用 setAttribute() 或直接访问属性来修改元素的属性。

<img id="myImage" src="old.jpg" alt="Old Image">
<script>
    let image = document.getElementById("myImage");
    image.src = "new.jpg"; // 直接修改属性
    image.setAttribute("alt", "New Image"); // 使用 setAttribute
</script>

修改元素样式

通过 style 属性修改元素的 CSS 样式。

<p id="myParagraph">Hello, World!</p>
<script>
    let element = document.getElementById("myParagraph");
    element.style.color = "red"; // 修改颜色
    element.style.fontSize = "20px"; // 修改字体大小
</script>

动态创建和删除元素

创建元素

使用 document.createElement() 创建新元素，然后使用 appendChild() 或 insertBefore() 将其添加到 DOM 中。

<div id="container"></div>
<script>
    let newParagraph = document.createElement("p");
    newParagraph.textContent = "This is a new paragraph.";
    document.getElementById("container").appendChild(newParagraph);
</script>

删除元素

使用 removeChild() 方法删除元素。

<div id="container">
    <p id="oldParagraph">This is an old paragraph.</p>
</div>
<script>
    let container = document.getElementById("container");
    let oldParagraph = document.getElementById("oldParagraph");
    container.removeChild(oldParagraph); // 删除元素
</script>

绑定事件处理程序

直接将事件处理函数赋值给元素的 on 事件属性（如 onclick、onmouseover 等）。
- ```
const button = document.getElementById("myButton");
button.onclick = function () {
  alert("按钮被点击了！");
};
```
- 这种方式只能为同一个事件绑定一个处理函数。如果多次赋值，后面的会覆盖前面的。
使用 addEventListener() 方法为元素添加事件监听器
- ```
<button id="myButton">Click Me</button>
<script>
    let button = document.getElementById("myButton");
    button.addEventListener("click", function() {
        alert("Button clicked!");
    });
</script>
```
  - click：点击事件。
  - mouseover：鼠标悬停事件。
  - keydown：键盘按下事件。
  - load：页面加载完成事件。
- 这是推荐的方式，因为它可以绑定多个处理函数，且不会覆盖已有的事件处理程序。

使用已有函数进行绑定

注意绑定已有函数不能加括号，应该直接写函数名称

在HTML标签属性中如果引用函数则需要加上括号

<input type="button" onclick="add()" value="按钮">

//浏览器会将其解析为以下形式
button.onclick = function(event) {
  add(); // 执行 add 函数
};
//后声明的会覆盖先声明的

两种方式绑定已有函数

function add() {
  console.log("按钮被点击了");
}

const a = document.getElementById("myButton");
a.onclick = add(); // 错误：add() 会立即执行，返回值赋值给 onclick

const a = document.getElementById("myButton");
a.onclick = add; // 正确：将函数引用赋值给 onclick

const a = document.getElementById("myButton");
a.addEventListener("click", add);

如果函数需要传递参数，可以使用匿名函数或 bind 方法。

使用匿名函数

function add(message) {
  console.log(message);
}

const a = document.getElementById("myButton");
a.onclick = function () {
  add("按钮被点击了");
};

使用 bind

function add(message) {
  console.log(message);
}

const a = document.getElementById("myButton");
a.onclick = add.bind(null, "按钮被点击了");

表单操作

使用 value 属性获取表单元素的值。

<input type="text" id="myInput" value="Hello">
<button id="myButton">Get Value</button>
<script>
    let button = document.getElementById("myButton");
    button.addEventListener("click", function() {
        let input = document.getElementById("myInput");
        console.log(input.value); // 输出输入框的值
    });
</script>

提交表单

使用 submit() 方法提交表单。

<form id="myForm">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>
<script>
    let form = document.getElementById("myForm");
    form.addEventListener("submit", function(event) {
        event.preventDefault(); // 阻止默认提交行为
        alert("Form submitted!");
    });
</script>

posted @ 2025-03-18 14:53 QAQ001 阅读(20) 评论(0) 收藏举报

刷新页面返回顶部

Learn-Review-blog

前端中的Javascript

前端中的Javascript

javascript定义方式

DOM（文档对象模型）

内置对象

JavaScript操作网页

获取HTML元素

修改HTML内容

动态创建和删除元素

绑定事件处理程序

表单操作

公告