Loading... 已经第四周了,第三周的笔记才开始写,这段时间实在是太忙了ヽ(*。>Д<)o゜ 这周主要还是学习JavaScript的内容。 # JavaScript ## DOM 一个以树形结构表达 HTML 和 XML 文档的编程接口。它将文档转化为一个由对象组成的结构,每个对象代表了文档中的一部分,每个对象都可以通过使用JavaScript 来操作。 ### DOM 树 DOM 将文档表示为一个树形结构,其中的每个分支都是一个节点。 ### DOM 操作 DOM API 提供了许多方法和属性,可以用来遍历和修改 DOM 树。 一些常见的方法: * `getElementById(id)`: 通过元素的id属性获取元素。 * `getElementsByClassName(className)`: 通过元素的类名获取一组元素。 * `querySelector(selector)`: 通过CSS选择器来选择元素。 * `getElementsByTagName(tagName)`: 通过元素的标签名获取一组元素。 Example: ```JavaScript // 获取具有id为"example"的元素 var element = document.getElementById("example"); // 修改元素的文本内容 element.innerText = "这是一个DOM示例"; document.getElementById('example').style.backgroundColor = 'red'; ``` ### DOM事件 DOM事件是网页与用户交互的主要方式。常见的DOM事件包括点击事件click,加载事件load,键盘事件keypress等。可以使用addEventListener()方法来监听这些事件并指定事件触发时的回调函数。 ## BOM 提供了各种对象,可以用来控制浏览器的行为,而不仅仅是操作网页内容。它允许JavaScript进行如弹出新的浏览器窗口、移动、调整窗口大小等操作。 ### 窗口对象 Window对象是BOM的核心,代表了浏览器的窗口。所有的全局JavaScript对象、函数和变量自动成为window对象的成员。Window对象的方法和属性是在全局范围内有效的。 ### 导航对象 Navigator对象包含有关浏览器的信息。它可以用来获取访客的浏览器类型、版本、编码方式等信息。由于历史原因,**这个对象的大多数属性都可以被用户或浏览器轻易地伪造,因此并不总是可信的。** ### 屏幕对象 Screen对象包含有关用户屏幕的信息。它可以用来获取用户的屏幕宽度、高度、可用宽度、可用高度、颜色深度、像素深度等信息。 ### 历史对象 History对象包含用户(在浏览器窗口中)访问过的URL。**JavaScript无法访问浏览器历史的完整列表,但是可以使用back()、forward()和go()方法来模拟浏览器的“后退”和“前进”按钮。** ### 定位对象 Location对象包含有关当前URL的信息,并提供了一些方法,可以用来重定向浏览器窗口到新的URL。 ## 事件 允许创建富有交互性的网页。事件是文档或浏览器窗口中发生的特定的交互瞬间,比如点击、加载或鼠标移动。 ### 事件类型 * 鼠标事件(Mouse Events):click, dblclick, mouseover, mouseout, mousedown, mouseup等。* * 键盘事件(Keyboard Events):keydown, keyup, keypress等。 * 表单事件(Form Events):submit, change, focus, blur等。 * 窗口事件(Window Events):load, resize, scroll等。 ### 事件处理程序 为了对事件进行响应,需要将事件处理程序或事件监听器绑定到某个元素和特定的事件上。 * HTML事件处理程序:直接在HTML标签内部通过事件属性(如onclick, onmouseover等)来设置。 * DOM0级事件处理程序:在JavaScript代码中,直接将函数赋值给元素的事件处理程序属性(如element.onclick)。 * DOM2级事件处理程序:使用addEventListener()和removeEventListener()方法来添加和移除事件监听器。 ### 事件流 事件流描述的是从页面中接收事件的顺序。有两种主要的事件流:事件冒泡和事件捕获。 * **事件冒泡:事件开始时由最具体的元素接收,然后逐级向上冒泡到较为不具体的节点。** * **事件捕获:事件开始时由最不具体的节点接收,然后逐级向下传播到最具体的节点。** ### 事件对象 当事件发生时,浏览器会创建一个事件对象,这个对象包含了所有与事件相关的信息,如触发事件的元素、事件类型和发生事件的时间等。 ## jQuery 一个快速、小巧且功能丰富的JavaScript库。可以让HTML文档遍历、事件处理、动画和Ajax等操作更加简便。 ### 选择器 JQ选择器是jQuery的核心特性之一。它们使得选取HTML元素变得极其简单和方便。可以使用CSS选择器语法来选取元素,如元素类型、ID、类名、属性、属性值等。 ```JavaScript // 选取所有的段落并隐藏 $("p").hide(); // 选取id为intro的元素 $("#intro").hide(); // 选取class为myClass的所有元素 $(".myClass").hide(); // 选取所有href属性以".jpg"结尾的元素 $("a[href$='.jpg']").hide(); ``` ### 事件 JQ提供了一套完整的事件处理系统,包括绑定事件处理函数、触发事件、创建自定义事件等功能。 ```JavaScript // 当段落被点击时隐藏 $("p").click(function(){ $(this).hide(); }); // 当元素鼠标悬停时改变颜色 $("#example").hover(function(){ $(this).css("background-color", "white"); }, function(){ $(this).css("background-color", "black"); }); ``` ### 动画 可以使用内建的函数如slideDown、slideUp、fadeIn、fadeOut等,也可以使用animate函数来创建自定义的动画。 ```JavaScript // 消失动画 $("#hide").click(function(){ $("p").hide(300); //数字代表动画执行的时间(毫秒) }); // 自定义动画 $("#animate").click(function(){ $("#box").animate({ left: '250px', height: '+=150px', width: '+=150px' }); }); ``` ### JQ的Ajax 一套完整的Ajax函数,可以轻松地加载和处理服务器返回的数据。 ```JavaScript // 加载test.txt文件并将内容放入div元素 $("#button").click(function(){ $("#div1").load("test.txt"); }); // 发送HTTP GET请求到指定页面并获取返回的结果 $.get("test.php", function(data, status){ alert("Data: " + data + "\nStatus: " + status); }); ``` ## 原生Ajax Asynchronous JavaScript and XML,一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。可以在网页上执行复杂的任务,例如发送表单数据,加载或发送图像,而无需重新加载整个网页。 ### 核心技术 Ajax不是一种单一的技术,而是几种技术的组合。这些技术包括: * 使用HTML 和CSS进行标准化的展示。 * 使用DOM模型进行动态显示和交互。 * 使用XML和XSLT进行数据交换和相关操作。 * 使用XMLHttpRequest进行异步数据读取。 * 使用JavaScript来绑定和执行所有操作。 ### 工作原理 Ajax通过XMLHttpRequest对象与服务器通信。提供了在网页和服务器之间传输数据的能力。 一个基本的Ajax过程包括以下步骤: 1. 创建XMLHttpRequest对象。 2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL以及验证信息。 3. 设置响应HTTP请求状态变化的函数。 4. 发送HTTP请求。 5. HTTP响应返回后,处理数据。 Example: ```JavaScript // 创建XMLHttpRequest对象 var xhttp = new XMLHttpRequest(); // 设置响应请求状态变化的函数 xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // 服务器返回的文本数据 var responseText = this.responseText; // 在网页上显示返回的文本数据 document.getElementById("demo").innerHTML = responseText; } }; // 创建一个新的HTTP请求 xhttp.open("GET", "ajax_info.txt", true); // 发送HTTP请求 xhttp.send(); ``` ## Promise Promise 是 JavaScript 中处理异步操作的一种强大工具,它代表了一个最终可能会完成(resolve)或者失败(reject)的操作,并返回其值。 ### 的基本概念 Promise 对象具有三种状态: 1. **Pending(等待)**:初始状态,既不是成功,也不是失败状态。 2. **Fulfilled(完成)**:操作成功完成。 3. **Rejected(失败)**:操作失败。 Promise 的状态只能从 Pending 变为 Fulfilled 或者 Rejected,且状态一旦改变就不能再次改变。 ### 创建和使用 使用 `new Promise()` 构造函数创建一个新的 Promise 对象: ```JavaScript const promise = new Promise(function(resolve, reject) { // 异步操作 if (/* 异步操作成功 */) { resolve(value); } else { reject(error); } }); ``` Promise 构造函数接收一个函数作为参数,这个函数有两个参数,分别是 `resolve` 和 `reject`,它们是两个函数: - 当异步操作成功时,调用 `resolve()` 函数,并传入操作的结果。 - 当异步操作失败时,调用 `reject()` 函数,并传入错误信息。 ### 处理结果 使用 Promise 的 `then()` 方法处理 Promise 的结果: ```js promise.then(function(value) { // 成功时的处理逻辑 }, function(error) { // 失败时的处理逻辑 }); ``` `then()` 方法接收两个回调函数作为参数: - 第一个回调函数处理 Promise 完成的情况。 - 第二个回调函数处理 Promise 失败的情况。 ### Promise 链 可以将 Promise 的 `then()` 方法链接起来,形成一个 Promise 链: ```js promise.then(function(result) { // 第一步 }).then(function(result) { // 第二步 }).catch(function(error) { // 处理任何在上面的 then 中发生的错误 }); ``` **在 Promise 链中,每个 `then()` 方法都会返回一个新的 Promise,这样可以将异步操作串联起来。如果在 Promise 链中某个步骤出错,`catch()` 方法会捕获到这个错误。** ## 模块化 一种将系统分解为若干个可以独立开发、测试、修改、替换、复用的模块的设计方法。模块化编程可以提高代码的可维护性和可重用性,使得代码更加清晰,组织更加合理。 这一部分应该还有**立即执行函数(IIFE)到AMD、CMD、CommonJS,再到现在的ES6模块化** ### ES6模块化 ES6标准引入了模块化的概念,并且提供了两个新的关键字`import`和`export`: ```JavaScript // 导入模块 import moduleA from './moduleA'; // 导出模块 export default moduleA; ``` ### 优点 1. **避免命名冲突(污染全局作用域)**:通过模块化,可以将方法和变量等限制在私有作用域内,避免与其他模块产生命名冲突。 2. **更好的分离,按需加载**:模块化可以将复杂的程序细化为可管理的模块,只有在真正需要的时候才去加载相应模块,提高了代码的加载效率。 3. **高复用性和高可维护性**:模块化使得代码更加清晰,组织更加合理,提高了代码的复用性和可维护性。 Last modification:November 20, 2023 © Reprint prohibited Support Appreciate the author AliPayWeChat Like If you think my article is useful to you, please feel free to appreciate