前端中的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><!-- 引用外部JavaScript文件 --><script src="script.js"></script> </body>
-
-
<script>标签的defer和async属性-
当引用外部JavaScript文件时，可以使用
defer或async属性来控制脚本的加载和执行时机。-
defer: 脚本会在文档解析完成后执行，但会在DOMContentLoaded事件之前执行。 -
async: 脚本会在下载完成后立即执行，可能会中断文档的解析。 -
<!-- 使用defer --> <script src="script1.js" defer></script> <!-- 使用async --> <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 1let 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() 会立即执行，返回值赋值给 onclickconst a = document.getElementById("myButton"); a.onclick = add; // 正确：将函数引用赋值给 onclickconst 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>
-
