JavaScript基础内容
文章平均质量分 87
XiaoYu2002-AI
大家好,我是小余,一名前端程序员。向大家分享最实用的技术笔记
展开
-
JS-DOM-13(window定时器方法)
这部分应该要属于BOM部分的,但是接下来的轮播图案例会用到,所以放到了这里。原创 2024-04-09 10:29:13 · 335 阅读 · 0 评论 -
JS-DOM-12(常见的鼠标、键盘、表单事件)
通常,我们使用这个事件来验证表单数据并阻止默认的提交行为,这样我们就可以使用JavaScript来处理表单数据,例如发送Ajax请求。这些表单事件使得我们可以轻松地响应用户在表单中的交互,例如实时验证用户输入、显示自定义错误消息或处理表单数据。在这个过程中,所有的父元素都会收到这个事件。事件支持事件冒泡,这意味着当鼠标指针移动到一个元素上时,事件在元素值改变时立即触发,而不是在失去焦点时。可能是更好的选择,因为它不会触发额外的事件冒泡。事件,而它的父元素不会收到此事件。:当表单元素的值发生改变时,触发。原创 2024-04-09 10:28:56 · 989 阅读 · 0 评论 -
JS-DOM-11(事件委托)
事件委托(Event Delegation)是一种在JavaScript中常用的事件处理技术,它允许我们将事件监听器绑定到一个父元素上,以处理其子元素触发的事件。这种技术的核心思想是利用事件的冒泡机制,将事件处理的责任委托给父元素,从而减少了在子元素上添加事件监听器的数量,提高了性能和代码的简洁性。✓ 因为这种方案并不需要遍历后给每一个li上添加事件监听,所以它更加高效;某些事件委托可能需要对具体的子组件进行区分,这个时候我们可以使用data-原创 2024-04-08 21:00:52 · 312 阅读 · 0 评论 -
JS-DOM-10(EventTarget类)
EventTarget类的实例可以是任何可以接收和处理事件的对象,例如DOM元素、XMLHttpRequest对象、Worker对象等。通过使用EventTarget类的方法,我们可以向对象添加事件监听器,移除事件监听器,以及手动触发事件。这使得我们能够在JavaScript中处理用户交互、网络请求和其他事件驱动的操作。在JavaScript中,EventTarget是一个表示可以接收和处理事件的对象类。它是一个抽象类,通常被其他类继承,例如DOM中的Element、Document和Window对象。原创 2024-04-08 20:59:30 · 263 阅读 · 0 评论 -
JS-DOM-9(事件对象)
当你在 JavaScript 中使用事件时,你会发现事件处理函数中通常会有一个参数,我们通常命名为event或e,这就是事件对象。事件对象是一个包含了与发生的事件相关的信息和方法的对象。原创 2024-04-08 20:58:41 · 1145 阅读 · 0 评论 -
JS-DOM-8(事件监听)
事件冒泡和事件捕获是浏览器中的两种事件传播机制。当一个事件(例如点击、鼠标移入等)触发时,浏览器会将这个事件按照一定的顺序传递给页面中的元素,以便对事件进行处理。下面我们详细介绍事件冒泡和事件捕获的过程。事件捕获和冒泡是浏览器事件处理的两个阶段。当你在一个元素上触发某个事件(如点击)时,浏览器会首先在捕获阶段从根节点向目标元素传播事件,然后在冒泡阶段从目标元素回到根节点。)不冒泡,但是它们仍然经历了捕获和目标阶段。来阻止事件的进一步冒泡或捕获,以防止事件处理程序被过度触发。注意,有些事件(例如。原创 2024-04-08 20:57:10 · 953 阅读 · 0 评论 -
JS中的DOM-7(Window)
/ 立即更新倒计时,确保页面加载时即可看到正确的倒计时。// 将剩余时间转换为小时、分钟和秒。// 获取显示倒计时的元素。// 设置倒计时的结束时间。// 更新倒计时显示的函数。// 每秒更新一次倒计时。// 更新倒计时显示。原创 2024-04-08 20:55:16 · 666 阅读 · 0 评论 -
JS中的DOM-6(增删改查元素)
✓ 在parentElem的nextSibling前面插入一个子元素。✓ 在parentElem中,新元素替换之前的oldChild元素。✓ 在parentElem的父元素最后位置添加一个子元素。✓ 在parentElem中,移除某一个元素。原创 2024-04-08 20:53:53 · 322 阅读 · 0 评论 -
JS中的DOM-5(JavaScript动态修改样式)
方法返回的对象是一个只读对象,其中包含了指定元素的所有计算后的样式属性及其对应的值。接受两个参数,第一个参数是要获取样式的元素,第二个参数是伪元素(可选)。伪元素参数可以用来获取指定元素的伪元素计算后的样式,例如获取元素的。它返回一个对象,其中包含了指定元素的所有计算后的样式属性及其对应的值。// 输出:DOMTokenList ["btn-primary"]// 输出:DOMTokenList ["active"]// 检查按钮是否包含指定的类名。// 移除按钮的类名。// 切换按钮的类名。原创 2024-04-08 20:51:35 · 1027 阅读 · 0 评论 -
JS中的DOM-4(元素的属性和特性)
href属性a元素。原创 2024-04-08 20:48:19 · 581 阅读 · 1 评论 -
JS中的DOM-3(获取元素的方法)
都是 DOM 节点的属性,它们用于表示节点的名称。但是,这两个属性在不同类型的节点上有不同的表现。✓ 对于其他节点类型(text,comment 等),它拥有一个对应节点类型的字符串。✓ 所有元素(HTMLElement)的 “id” 特性(attribute)的值。✓ 对于元素,它的意义与 tagName 相同,所以使用哪一个都是可以的。是一个只读属性,用于表示节点的名称。的值是元素的标签名(大写形式)。我们就能够根据返回的值来判断这是一个什么类型的节点。属性在所有类型的节点上都有值,而。原创 2024-04-08 20:46:00 · 802 阅读 · 0 评论 -
JS中的DOM-2
对象实现了 DOM(Document Object Model,文档对象模型)的接口,定义了一系列方法和属性,用于与文档进行交互。对象是Web浏览器中 JavaScript 的一个核心对象,代表整个HTML文档。对象,开发者可以访问和操作网页中的元素、属性、文本等内容。原创 2024-04-08 20:43:19 · 952 阅读 · 0 评论 -
JS中的DOM-1
API(Application Programming Interface,应用程序编程接口)是一组预先定义的规则和约定,用于在软件组件、库、框架、操作系统或其他应用程序之间实现通信和互操作。在Web浏览器中,JavaScript可以通过DOM API访问和操作DOM Tree,实现对网页内容的动态修改、事件处理等功能。总结:DOM Tree是表示HTML或XML文档结构的树形数据结构,通过JavaScript和DOM API,开发者可以在浏览器中访问和操作网页内容,实现各种动态功能。原创 2024-04-08 20:40:27 · 614 阅读 · 0 评论 -
JS中的BOM
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的对象字面量语法,但独立于任何编程语言。以一个用户登录验证的场景为例,当用户登录成功后,我们可能需要跳转到一个新的页面,例如用户的个人中心。这两个方法是在处理JSON数据时的核心方法,分别用于将JSON字符串解析成JavaScript对象和将JavaScript对象序列化成JSON字符串。前端路由的核心概念是在不触发页面刷新的情况下,修改URL并根据URL的变化来更新页面的内容。原创 2024-04-08 20:36:59 · 919 阅读 · 0 评论