...;title>数据属性和访问器属性</title> <script src="js/jquery.min.js"></script> <script> 模板 var obj ={ get 空格属性名（）{ return 属性值； }, set 空格属性名（value）{ //需要接收到的value作处理实例 //访问器属性 // 看起来像函数但是调用起来像是属性， // 并未真正存储数据，只是用来操作数据 var circle={ r:10, //数据属性（半径） get size(){//size属性的getter访问器（只有get访问器属性时是只读的，即只能调用获取值但是不能设置新值） return Math.PIthis.rthis.r;//知道半径求面积 }, set size(value){//size属性的setter访问器，可读也可以写 this.r=Math.sqrt(value/Math.PI) ;//知道面积求半径（平方根） } }; alert(circle.size);//调用属性的getter访问器 circle.size=31400;//调用属性的setter访问器 alert(circle.r); 注意：1、访问器属性的本质是两个函数，若想要读取访问器属性的值，会自动调用get访问器； 2、若想为访问器属性赋值，会自动调用set访问器，并把等号右边的值传递给set访问器的形参， 3、访问器属性不能存储数据，所以访问器属性往往依赖于其他的数据属性， 4、访问器属性一般用于两个场合：冗余属性(某些不能定义死的属性值（面积、周长等）)、有意控制属性的只读（get访问器）或者只写（set访问器） </script> </head> <body></body> </html> 转载于:https://www.cnblogs.com/LindaBlog/p/9294803.html 本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_30920597/article/details/99806994。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-06-09 18:12:44

116

转载

HBase

掌握HBase元数据管理：表、列族与数据块元数据的创建、修改与删除操作实践

分布式数据库系统 , 分布式数据库系统是一种将数据分散存储在多台独立计算机上的数据库管理系统，这些计算机通过网络相互连接并协同工作。在HBase中，数据分布在集群内的多个节点上，每个节点都可以独立处理和存储一部分数据，从而实现大规模数据的高效处理与扩展性。元数据 , 元数据是关于数据的数据，它提供了描述其他数据信息的数据属性。在HBase中，元数据包括表结构、列族配置以及数据块等基本信息，如表名、行键类型、列族数量、版本控制策略、压缩方式、数据块大小和校验和等，它们共同决定了数据在HBase中的组织形式和访问方式。行键（Row Key） , 在HBase中，行键是一个唯一的标识符，用于标识表中每一行数据。它是有序的，并且直接影响到数据在HBase内部的物理存储布局和查询性能。行键的设计对于数据查询效率和分区至关重要，根据业务需求选择合适的行键设计可以有效优化HBase的查询速度和存储利用率。

2023-11-14 11:58:02

434

风中飘零-t

Element-UI

el-form中prop属性对复杂数据结构（如嵌套对象与数组）的深度绑定与验证实践

...form如何设置深层属性prop：深度解析与实例详解在日常前端开发中，Element-UI作为一款优秀的Vue.js组件库，其el-form组件凭借丰富的表单功能和高度的可定制性深受开发者喜爱。不过呢，在应对那些套娃一样的嵌套对象或者数组类型的数据时，我们免不了得对el-form-item中的prop属性动点手脚，往深了设置一下。这样一来，才能顺利对接到复杂数据结构中特定的字段，完成绑定和验证的工作。本文将深入探讨这一问题，并通过多个实例代码详细说明如何操作。 1. 深层属性prop的基本理解在el-form-item中，prop属性主要用于指定表单域model对象中对应的字段名，当用户输入值发生变化时，会自动更新到相应字段上。但是，当我们碰上像"user.info.address.city"这种一层套一层的数据结构时，你可别指望只用prop="city"就能轻松搞定，这招是不管用滴。这时，我们需要借助Vue.js提供的点号语法或者动态prop名称来实现。 2. 点号语法设置深层prop 示例1 假设我们有一个包含用户信息的对象，其中包含了用户的详细地址信息： vue 在这个例子中，我们直接在prop属性中使用了info.address.city这个路径表达式，el-form-item就能够正确地绑定并验证user对象中深层次的city字段。 3. 动态prop名称实现深层绑定对于更复杂的数据结构，例如数组中的对象，我们可以利用计算属性动态生成prop名称：示例2 假设有如下一个用户列表数据结构： vue 在此例中，我们用v-for循环遍历用户列表，并为每个用户创建一个表单项，其prop属性通过计算属性的方式生成，从而实现了对数组内嵌套对象属性的绑定及验证。 4. 总结与思考设置el-form-item的深层prop属性并非难事，关键在于理解Vue.js中数据绑定的机制以及prop属性的工作原理。无论是在简单的“套娃”对象，还是复杂的、像迷宫一样的数组结构里头，只要我们巧妙地使出点号大法或者灵活运用动态属性名称这两大招式，就能轻而易举地搞定那些深层级的数据绑定问题，一点儿都不费劲儿！而这也正是Vue.js和Element-UI设计的巧妙之处，它们让我们在处理复杂业务场景时依然能保持简洁高效的编码风格。当然啦，在实际做开发的时候，咱们也得瞅准项目需求和特点这些实际情况，灵活使出各种招数，不断把咱们的代码逻辑打磨得更溜，让用户体验蹭蹭往上涨。

2023-08-03 22:37:41

468

笑傲江湖_

转载文章

[转载]ElementUI中switch回调函数change的参数问题

...图渲染。通过Vue的数据绑定和响应式系统，开发者能够轻松地同步Switch组件的状态变化到数据模型，并通过回调函数处理这些状态变化。 ElementUI , ElementUI 是一套基于Vue.js的开源 UI 组件库，它提供了一系列丰富、易用且美观的组件，帮助开发者快速搭建企业级应用界面。在文章中，ElementUI 的 Switch 组件被提及，它是 ElementUI 中的一个用于切换开关状态的UI元素，支持状态变化时触发change事件，并将新状态值传入回调函数。 Composition API（可复用逻辑封装） , Vue3 引入的一种新的API设计模式，相较于传统的Options API，提供了更灵活和强大的方式来组织和管理组件的状态与行为逻辑。在本文上下文中，虽然未直接提到Composition API，但可以理解为，在处理多个Switch组件状态变化等复杂场景时，Vue3的Composition API能更好地封装和复用状态管理逻辑，使代码结构更加清晰和模块化。 v-model , 在Vue.js中，v-model是双向数据绑定指令，用于在表单控件如Input、Select、Textarea以及本文中的ElementUI Switch组件上创建双向绑定。当使用v-model时，任何对组件值的改变都会自动反映到绑定的Vue实例数据属性上，反之亦然。在本文情境下，v-model被用来同步Switch组件的状态到相应的数据对象，使得组件状态的变化能实时反应到应用程序的数据层。

2023-03-04 16:22:19

348

转载

Saiku

Saiku中处理日期格式不匹配问题：Dimension Field的设置与内置转换功能应用实例

...过直观的界面进行多维数据分析和数据可视化。在本文中，Saiku被用于处理和转换数据维度字段中的日期格式，以解决日期格式不匹配的问题。维度字段（Dimension Field） , 在数据分析或数据仓库领域中，维度字段是指描述数据属性的数据列，通常包含分类或描述性信息，如日期、地区、产品类别等。在Saiku中，维度字段是用户可以操作并设置其格式的元素，以便更好地理解和分析数据。日期格式（Date Format） , 日期格式是一种规范化的字符串模式，用于表示日期数据的具体结构和顺序。例如，“yyyy-MM-dd”代表四位年份、两位月份和两位日期的顺序排列。在数据分析过程中，正确设置日期格式至关重要，因为它直接影响到数据的理解、比较以及计算的准确性，如果不匹配可能导致数据混乱或分析结果错误。在文中，作者详细介绍了如何在Saiku中调整维度字段的日期格式以满足实际需求。

2023-08-28 23:56:56

柳暗花明又一村-t

Bootstrap

Bootstrap 5下拉菜单无法收回？使用data-bs-toggle属性实现正确收回方法解析

...特定的HTML结构和数据属性（如data-bs-toggle=dropdown），可以方便地创建功能完备且具有良好跨设备兼容性的下拉菜单。

2023-12-02 15:43:55

558

彩虹之上_t

Apache Atlas

Apache Atlas 数据准确性保障：元数据管理、API 实时同步与Apache Ranger 安全控制及机器学习算法的应用

...las是一款开源的大数据元数据管理和治理平台，由Apache软件基金会开发和维护。它主要用于收集、存储、管理企业内部各种数据源的元数据信息，并通过提供一致性的元数据视图、安全控制、搜索过滤功能以及集成机器学习算法等方式，保障数据质量和准确性，提升数据资产的利用效率。元数据 , 元数据在本文语境中是指关于数据的数据，即描述数据属性、结构、来源、格式、关系及权限等信息的数据。例如，在Apache Atlas中，元数据可以包括数据表的字段定义、数据更新时间、数据血缘关系等，这些信息对于理解数据内容、确保数据一致性以及实施有效数据治理至关重要。数据血缘分析 , 数据血缘分析是一种追踪数据从源头到最终使用过程的技术手段，用于揭示数据在整个系统中的流转路径、加工过程及其依赖关系。在Apache Atlas中，通过数据血缘分析可以帮助用户了解数据如何产生、经过哪些处理步骤、影响哪些下游报告或应用，从而更好地进行问题定位、影响分析和合规性审计。

2023-04-17 16:08:35

1146

柳暗花明又一村-t

VUE

Vue.js中数据绑定、方法调用与事件绑定的语法错误解析及计算属性、侦听器报错处理

...析 2.1 数据绑定的误解 Vue中的数据绑定是通过{ { } }来实现的，但如果我们不慎忘记在绑定表达式两侧添加花括号，就会触发语法错误： vue { { message // 忘记闭合花括号 { { message } } 2.2 方法调用与事件绑定混淆 Vue中，直接在模板内调用方法需要加上括号，而在处理事件绑定时则不需要。下面是一个错误示例： vue 点击我点击我 2.3 访问未定义的属性或方法尝试访问一个不存在的数据属性或方法也会引发错误： vue { { notDefinedProperty } } 3. Vue计算属性与侦听器报错实例 3.1 计算属性函数未返回值计算属性必须返回一个值，否则在试图读取该属性时会抛出异常： vue { { computedValue } } 3.2 侦听器监听未定义的属性变更当我们在watch对象中监听一个未初始化或未定义的属性时，也会触发错误： vue 4. 总结与思考在Vue开发过程中，我们常常会遇到各种语法错误，这不仅要求我们深入理解Vue的语法特性，同时也需要扎实的JavaScript基础。每一次面对报错，都是一次学习和成长的机会。咱们得学会聪明地运用那些错误信息，就像探照灯一样找准问题所在。具体怎么搞呢？首先，别怕翻文档，那可是咱们的武功秘籍，多读多看才能融会贯通。其次，多和大伙儿讨论交流，毕竟“三个臭皮匠顶个诸葛亮”，一起头脑风暴往往能碰撞出新的火花。最后，实践是检验真理的唯一标准，得多动手实操，通过不断的试错和验证，这样才能真正深化对Vue，乃至整个前端技术栈的理解和掌握，让自己的技术水平蹭蹭往上涨。在编程的世界里，解决问题就跟闯迷宫、寻宝一样刺激有趣。每一个小挑战，就像是游戏中的关卡任务，不断地催促着我们勇往直前，激发我们的探索欲望和动力。只有真正摸透并熟练掌握这些可能会让你在Vue道路上踩坑的“陷阱”，你才能更好地玩转Vue，亲手打造出既结实又高效的Web应用。

2023-12-20 22:40:22

断桥残雪_

Oracle

Oracle 数据统计信息的收集与应用：影响SQL优化器执行计划及查询效率的关键因素

数据统计信息 , 在Oracle数据库中，数据统计信息是一种系统自动收集和维护的重要数据属性集合，包括但不限于表、索引、分区等对象的行数、数据分布特征（如列值频率、唯一值数量）、空值数量等。这些统计信息是SQL优化器生成执行计划的关键依据，通过分析统计信息，优化器能够更准确地判断出执行SQL语句的最佳路径，从而提高查询性能和资源利用率。 SQL优化器 , SQL优化器是Oracle数据库内部的一个组件，其主要功能是在执行SQL语句前制定出最优的执行计划。这个过程依赖于数据库中的数据统计信息以及其他系统参数。根据已有的统计信息，优化器会选择成本最低或执行速度最快的访问路径，如选择合适的索引、全表扫描还是索引扫描等操作方式，以确保SQL查询的高效执行。执行计划 , 在Oracle数据库环境下，执行计划是指SQL查询语句在被执行前，由SQL优化器基于当前的数据统计信息和系统参数制定的具体执行步骤和方法。一个高效的执行计划能够减少不必要的磁盘I/O操作、降低CPU使用率，进而显著提升查询性能。例如，如果某个字段存在大量重复值，优化器基于统计信息可能会决定采用全表扫描而非索引扫描来获取结果，这就是执行计划的一部分决策内容。

2023-04-01 10:26:02

132

寂静森林

转载文章

[转载]Proxy 、Relect、响应式

...希望监听这个对象中的属性被设置或获取的过程可以通过属性描述符中的存储属性描述符来做到这段代码就利用了 Object.defineProperty 的存储属性描述符来对属性的操作进行监听 const obj = {name: 'why',age: 18}Object.keys(obj).forEach((key) => {let value = obj[key]Object.defineProperty(obj, key, {get: function () {console.log(监听到obj对象的${key}属性被访问了)return value},set: function (newValue) {console.log(监听到obj对象的${key}属性被设置值)value = newValue} })})obj.name = 'kobe'obj.age = 30console.log(obj.name)console.log(obj.age)/ 监听到obj对象的name属性被设置值监听到obj对象的age属性被设置值监听到obj对象的name属性被访问了kobe监听到obj对象的age属性被访问了30/ 属性描述符监听对象的缺点：首先，Object.defineProperty 设计的初衷，不是为了去监听截止一个对象中所有的属性的我们在定义某些属性的时候，初衷其实是定义普通的属性，但是后面我们强行将它变成了数据属性描述符其次，如果我们想监听更加丰富的操作，比如新增属性、删除属性，那么 Object.defineProperty 是无能为力的所以我们要知道，存储数据描述符设计的初衷并不是为了去监听一个完整的对象 Ps: 原来的对象是数据属性描述符，通过 Object.defineProperty 变成了访问属性描述符 2. Proxy基本使用在ES6中，新增了一个Proxy类，这个类从名字就可以看出来，是用于帮助我们创建一个代理的：也就是说，如果我们希望监听一个对象的相关操作，那么我们可以先创建一个代理对象（Proxy对象）之后对该对象的所有操作，都通过代理对象来完成，代理对象可以监听我们想要对原对象进行哪些操作将上面的案例用 Proxy 来实现一次：首先，我们需要 new Proxy 对象，并且传入需要侦听的对象以及一个处理对象，可以称之为 handler； const p = new Proxy(target, handler) 其次，我们之后的操作都是直接对 Proxy 的操作，而不是原有的对象，因为我们需要在 handler 里面进行侦听 const obj = {name: 'why',age: 18}const objProxy = new Proxy(obj, {// 获取值时的捕获器get: function (target, key) {console.log(监听到obj对象的${key}属性被访问了)return target[key]},// 设置值时的捕获器set: function (target, key, newValue) {console.log(监听到obj对象的${key}属性被设置值)target[key] = newValue} })console.log(objProxy.name)console.log(objProxy.age)objProxy.name = 'kobe'objProxy.age = 30console.log(obj.name)console.log(obj.age)/ 监听到obj对象的name属性被访问了why监听到obj对象的age属性被访问了18监听到obj对象的name属性被设置值监听到obj对象的age属性被设置值kobe30/ 2.1 Proxy 的 set 和 get 捕获器如果我们想要侦听某些具体的操作，那么就可以在 handler 中添加对应的捕捉器（Trap） set 和 get 分别对应的是函数类型 set 函数有四个参数： target：目标对象（侦听的对象） property：将被设置的属性 key value：新属性值 receiver：调用的代理对象 get 函数有三个参数 target：目标对象（侦听的对象） property：被获取的属性 key receiver：调用的代理对象 2.2 Proxy 所有捕获器 (13个) handler.getPrototypeOf() Object.getPrototypeOf 方法的捕捉器 handler.setPrototypeOf() Object.setPrototypeOf 方法的捕捉器 handler.isExtensible() Object.isExtensible 方法的捕捉器 handler.preventExtensions() Object.preventExtensions 方法的捕捉器 handler.getOwnPropertyDescriptor() Object.getOwnPropertyDescriptor 方法的捕捉器 handler.defineProperty() Object.defineProperty 方法的捕捉器 handler.ownKeys() Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器 handler.has() in 操作符的捕捉器 handler.get() 属性读取操作的捕捉器 handler.set() 属性设置操作的捕捉器 handler.deleteProperty() delete 操作符的捕捉器 handler.apply() 函数调用操作的捕捉器 handler.construct() new 操作符的捕捉器 const obj = {name: 'why',age: 18}const objProxy = new Proxy(obj, {// 获取值时的捕获器get: function (target, key) {console.log(监听到obj对象的${key}属性被访问了)return target[key]},// 设置值时的捕获器set: function (target, key, newValue) {console.log(监听到obj对象的${key}属性被设置值)target[key] = newValue},// 监听 in 的捕获器has: function (target, key) {console.log(监听到obj对象的${key}属性的in操作)return key in target},// 监听 delete 的捕获器deleteProperty: function (target, key) {console.log(监听到obj对象的${key}属性的delete操作)delete target[key]} })// in 操作符console.log('name' in objProxy)// delete 操作delete objProxy.name/ 监听到obj对象的name属性的in操作true监听到obj对象的name属性的delete操作/ 2.3 Proxy 的 construct 和 apply 到捕捉器中还有 construct 和 apply，它们是应用于函数对象的 function foo() {console.log('调用了 foo')}const fooProxy = new Proxy(foo, {apply: function (target, thisArg, argArray) {console.log(对 foo 函数进行了 apply 调用)target.apply(thisArg, argArray)},construct: function (target, argArray, newTarget) {console.log(对 foo 函数进行了 new 调用)return new target(...argArray)} })fooProxy.apply({}, ['abc', 'cba'])new fooProxy('abc', 'cba')/ 对 foo 函数进行了 apply 调用调用了 foo对 foo 函数进行了 new 调用调用了 foo/ 3. Reflect 3.1 Reflect 的作用 Reflect 也是 ES6 新增的一个 API，它是一个对象，字面的意思是反射 Reflect 的作用：它主要提供了很多操作 JavaScript 对象的方法，有点像 Object 中操作对象的方法比如 Reflect.getPrototypeOf(target) 类似于 Object.getPrototypeOf() 比如 Reflect.defineProperty(target, propertyKey, attributes) 类似于 Object.defineProperty() 如果我们有 Object 可以做这些操作，那么为什么还需要有Reflect这样的新增对象呢？这是因为在早期的 ECMA 规范中没有考虑到这种对对象本身的操作如何设计会更加规范，所以将这些 API 放到了 Object上面但是 Object 作为一个构造函数，这些操作实际上放到它身上并不合适另外还包含一些类似于 in、delete 操作符，让 JS 看起来是会有一些奇怪的所以在 ES6 中新增了 Reflect，让我们这些操作都集中到了 Reflect 对象上那么 Object 和 Reflect 对象之间的 API 关系，可以参考 MDN 文档：比较 Reflect 和 Object 方法 3.2 Reflect 的常见方法 Reflect中有哪些常见的方法呢？它和Proxy是一一对应的，也是13个 Reflect.getPrototypeOf(target) 类似于 Object.getPrototypeOf() Reflect.setPrototypeOf(target, prototype) 设置对象原型的函数. 返回一个 Boolean，如果更新成功，则返回 true Reflect.isExtensible(target) 类似于 Object.isExtensible() Reflect.preventExtensions(target) 类似于 Object.preventExtensions() , 返回一个 Boolean Reflect.getOwnPropertyDescriptor(target, propertyKey) 类似于 Object.getOwnPropertyDescriptor() , 如果对象中存在该属性，则返回对应的属性描述符, 否则返回 undefined Reflect.defineProperty(target, propertyKey, attributes) 和 Object.defineProperty() 类似, 如果设置成功就会返回 true Reflect.ownKeys(target) 返回一个包含所有自身属性（不包含继承属性）的数组（类似于 Object.keys(), 但不会受 enumerable 影响） Reflect.has(target, propertyKey) 判断一个对象是否存在某个属性，和 in 运算符的功能完全相同 Reflect.get(target, propertyKey[, receiver]) 获取对象身上某个属性的值，类似于 target[name] Reflect.set(target, propertyKey, value[, receiver]) 将值分配给属性的函数，返回一个 Boolean，如果更新成功，则返回 true Reflect.deleteProperty(target, propertyKey) 作为函数的 delete 操作符，相当于执行 delete target[name] Reflect.apply(target, thisArgument, argumentsList) 对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似 Reflect.construct(target, argumentsList[, newTarget]) 对构造函数进行 new 操作，相当于执行 new target(...args) 3.3 Reflect 的使用那么我们可以将之前Proxy案例中对原对象的操作，都修改为Reflect来操作 const obj = {name: 'why',age: 18}const objProxy = new Proxy(obj, {get: function (target, key) {console.log(监听到obj对象的${key}属性被访问了)return Reflect.get(target, key)// return target[key] // 对原来对象进行了直接操作},set: function (target, key, newValue) {console.log(监听到obj对象的${key}属性被设置值)Reflect.set(target, key, newValue)// target[key] = newValue // 对原来对象进行了直接操作} })objProxy.name = 'kobe'console.log(objProxy.name)/ 监听到obj对象的name属性被设置值监听到obj对象的name属性被访问了kobe/ 3.4 Receiver的作用我们发现在使用getter、setter的时候有一个receiver的参数，它的作用是什么呢？如果我们的源对象（obj）有 setter 、getter 的访问器属性，那么可以通过 receiver 来改变里面的 this const obj = {_name: 'why',get name() {return this._name // 不使用receiver, _name属性的操作不会被objProxy代理，因为this指向obj},set name(newValue) {this._name = newValue} }const objProxy = new Proxy(obj, {get: function (target, key, receiver) {// receiver 是创建出来的代理对象console.log('get 方法被访问-------', key, receiver)console.log(objProxy === receiver) // truereturn Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)} })objProxy.name = 'kobe'console.log(objProxy.name) // kobe/ get 方法被访问------- name { _name: 'kobe', name: [Getter/Setter] }trueget 方法被访问------- _name { _name: 'kobe', name: [Getter/Setter] }truekobe/ 3.5 Reflect 的 construct function Student(name, age) {this.name = namethis.age = age}function Teacher() {}const stu = new Student('why', 18)console.log(stu)console.log(stu.__proto__ === Student.prototype)/ Student { name: 'why', age: 18 }true/// 执行 Student 函数中的内容，但是创建出来的对象是 Teacher 对象const teacher = Reflect.construct(Student, ['why', 18], Teacher)console.log(teacher)console.log(teacher.__proto__ === Teacher.prototype)/ Teacher { name: 'why', age: 18 }true/ 4. 响应式 4.1 什么是响应式？先来看一下响应式意味着什么？我们来看一段代码： m 有一个初始化的值，有一段代码使用了这个值；那么在 m 有一个新的值时，这段代码可以自动重新执行 let m = 0// 一段代码console.log(m)console.log(m 2)console.log(m 2)m = 200 上面的这样一种可以自动响应数据变量的代码机制，我们就称之为是响应式的对象的响应式 4.2 响应式函数设计首先，执行的代码中可能不止一行代码，所以我们可以将这些代码放到一个函数中：那么问题就变成了，当数据发生变化时，自动去执行某一个函数；但是有一个问题：在开发中是有很多的函数的，如何区分一个函数需要响应式，还是不需要响应式呢？很明显，下面的函数中 foo 需要在 obj 的 name 发生变化时，重新执行，做出相应； bar 函数是一个完全独立于 obj 的函数，它不需要执行任何响应式的操作； // 对象的响应式const obj = {name: 'why',age: 18}function foo() {const newName = obj.nameconsole.log('你好啊，李银河')console.log('Hello World')console.log(obj.name)}function bar() {console.log('普通的其他函数')console.log('这个函数不需要有任何的响应式')}obj.name = 'kobe' // name 发生改变时候 foo 函数执行响应式函数的实现 watchFn 如何区分响应式函数？这个时候我们封装一个新的函数 watchFn 凡是传入到 watchFn 的函数，就是需要响应式的其他默认定义的函数都是不需要响应式的 / 封装一个响应式的函数 /let reactiveFns = []function watchFn(fn) {reactiveFns.push(fn)}// 对象的响应式const obj = {name: 'why',age: 18}watchFn(function foo() {const newName = obj.nameconsole.log('你好啊，李银河')console.log('Hello World')console.log(obj.name)})watchFn(function demo() {console.log(obj.name, 'demo function ---------')})function bar() {console.log('普通的其他函数')console.log('这个函数不需要有任何的响应式')}obj.name = 'kobe' // name 发生改变时候 foo 函数执行reactiveFns.forEach((fn) => {fn()}) 4.3 响应式依赖的收集目前收集的依赖是放到一个数组中来保存的，但是这里会存在数据管理的问题：在实际开发中需要监听很多对象的响应式这些对象需要监听的不只是一个属性，它们很多属性的变化，都会有对应的响应式函数不可能在全局维护一大堆的数组来保存这些响应函数所以要设计一个类，这个类用于管理某一个对象的某一个属性的所有响应式函数：相当于替代了原来的简单 reactiveFns 的数组； class Depend {constructor() {this.reactiveFns = []}addDepend(reactiveFn) {this.reactiveFns.push(reactiveFn)}notify() {this.reactiveFns.forEach((fn) => {fn()})} }const depend = new Depend()function watchFn(fn) {depend.addDepend(fn)}// 对象的响应式const obj = {name: 'why', // depend 对象age: 18 // depend 对象}watchFn(function foo() {const newName = obj.nameconsole.log('你好啊，李银河')console.log('Hello World')console.log(obj.name)})watchFn(function demo() {console.log(obj.name, 'demo function ---------')})function bar() {console.log('普通的其他函数')console.log('这个函数不需要有任何的响应式')}obj.name = 'kobe'depend.notify() 4.4 监听对象的变化那么接下来就可以通过之前的方式来监听对象的变化：方式一：通过 Object.defineProperty 的方式（vue2采用的方式）；方式二：通过 new Proxy 的方式（vue3采用的方式）；我们这里先以Proxy的方式来监听 class Depend {constructor() {this.reactiveFns = []}addDepend(reactiveFn) {this.reactiveFns.push(reactiveFn)}notify() {this.reactiveFns.forEach((fn) => {fn()})} }const depend = new Depend()function watchFn(fn) {depend.addDepend(fn)}// 对象的响应式const obj = {name: 'why', // depend 对象age: 18 // depend 对象}// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)const objProxy = new Proxy(obj, {get: function (target, key, receiver) {return Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)depend.notify()} })watchFn(function foo() {const newName = objProxy.nameconsole.log('你好啊，李银河')console.log('Hello World')console.log(objProxy.name)})watchFn(function demo() {console.log(objProxy.name, 'demo function ---------')})objProxy.name = 'kobe'objProxy.name = 'james'/ 你好啊，李银河Hello Worldkobekobe demo function ---------你好啊，李银河Hello Worldjamesjames demo function ---------/ 4.5 对象的依赖管理目前是创建了一个 Depend 对象，用来管理对于 name 变化需要监听的响应函数：但是实际开发中我们会有不同的对象，另外会有不同的属性需要管理；如何可以使用一种数据结构来管理不同对象的不同依赖关系呢？在前面我们刚刚学习过 WeakMap，并且在学习 WeakMap 的时候我讲到了后面通过 WeakMap 如何管理这种响应式的数据依赖：实现可以写一个 getDepend 函数专门来管理这种依赖关系 / 封装一个获取depend的函数 /const taregtMap = new WeakMap()function getDepend(target, key) {// 根据target对象获取mapconst map = taregtMap.get(target)if (!map) {map = new Map()taregtMap.set(target, map)}// 根据key获取depend对象const depend = map.get(key)if (!depend) {depend = new Depend()map.set(key, depend)}return depend}// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)const objProxy = new Proxy(obj, {get: function (target, key, receiver) {return Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)const depend = getDepend(target, key)depend.notify()} }) 正确的依赖收集我们之前收集依赖的地方是在 watchFn 中：但是这种收集依赖的方式我们根本不知道是哪一个 key 的哪一个 depend 需要收集依赖；只能针对一个单独的 depend 对象来添加你的依赖对象；那么正确的应该是在哪里收集呢？应该在我们调用了 Proxy 的 get 捕获器时因为如果一个函数中使用了某个对象的 key，那么它应该被收集依赖 / 封装一个响应式函数 /let activeReactviceFn = nullfunction watchFn(fn) {activeReactviceFn = fnfn()activeReactviceFn = null}/ 封装一个获取depend的函数 /const taregtMap = new WeakMap()function getDepend(target, key) {// 根据target对象获取maplet map = taregtMap.get(target)if (!map) {map = new Map()taregtMap.set(target, map)}// 根据key获取depend对象let depend = map.get(key)if (!depend) {depend = new Depend()map.set(key, depend)}return depend}// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)const objProxy = new Proxy(obj, {get: function (target, key, receiver) {// 根据 target key 获取对应的 depnedconst depend = getDepend(target, key)// 给 depend 对象中添加响应式函数activeReactviceFn && depend.addDepend(activeReactviceFn)return Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)const depend = getDepend(target, key)depend.notify()} }) 4.6 对 Depend 重构两个问题：问题一：如果函数中有用到两次 key，比如 name，那么这个函数会被收集两次问题二：我们并不希望将添加 reactiveFn 放到 get 中，因为它是属于 Depend 的行为所以我们需要对 Depend 类进行重构：解决问题一的方法：不使用数组，而是使用 Set 解决问题二的方法：添加一个新的方法，用于收集依赖 // 保存当前需要收集的响应式函数let activeReactviceFn = nullclass Depend {constructor() {this.reactiveFns = new Set()}depend() {if (activeReactviceFn) {this.reactiveFns.add(activeReactviceFn)} }addDepend(reactiveFn) {this.reactiveFns.add(reactiveFn)}notify() {this.reactiveFns.forEach((fn) => {fn()})} }// 对象的响应式const obj = {name: 'why', // depend 对象age: 18 // depend 对象}/ 封装一个响应式函数 /function watchFn(fn) {activeReactviceFn = fnfn()activeReactviceFn = null}/ 封装一个获取depend的函数 /const taregtMap = new WeakMap()function getDepend(target, key) {// 根据target对象获取maplet map = taregtMap.get(target)if (!map) {map = new Map()taregtMap.set(target, map)}// 根据key获取depend对象let depend = map.get(key)if (!depend) {depend = new Depend()map.set(key, depend)}return depend}// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)const objProxy = new Proxy(obj, {get: function (target, key, receiver) {// 根据 target key 获取对应的 depnedconst depend = getDepend(target, key)// 给 depend 对象中添加响应式函数depend.depend()return Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)const depend = getDepend(target, key)depend.notify()} })watchFn(function () {console.log(objProxy.name, '--------------')console.log(objProxy.name, '++++++++++++++')})objProxy.name = 'kobe'/ why --------------why ++++++++++++++kobe --------------kobe ++++++++++++++/ 4.7 创建响应式对象目前的响应式是针对于obj一个对象的，我们可以创建出来一个函数，针对所有的对象都可以变成响应式对象 / 保存当前需要收集的响应式函数 /let activeReactviceFn = null/ 依赖收集类 /class Depend {constructor() {this.reactiveFns = new Set()}depend() {if (activeReactviceFn) {this.reactiveFns.add(activeReactviceFn)} }addDepend(reactiveFn) {this.reactiveFns.add(reactiveFn)}notify() {this.reactiveFns.forEach((fn) => {fn()})} }/ 封装一个响应式函数 /function watchFn(fn) {activeReactviceFn = fnfn()activeReactviceFn = null}/ 封装一个获取depend的函数 /const taregtMap = new WeakMap()function getDepend(target, key) {// 根据target对象获取maplet map = taregtMap.get(target)if (!map) {map = new Map()taregtMap.set(target, map)}// 根据key获取depend对象let depend = map.get(key)if (!depend) {depend = new Depend()map.set(key, depend)}return depend}/ 创建响应式对象函数 /function reactive(obj) {// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)return new Proxy(obj, {get: function (target, key, receiver) {// 根据 target key 获取对应的 depnedconst depend = getDepend(target, key)// 给 depend 对象中添加响应式函数depend.depend()return Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)const depend = getDepend(target, key)depend.notify()} })}const info = reactive({address: '广州市',height: 1.88})watchFn(() => {console.log(info.address, '---')})info.address = '北京市' 4.8 Vue2 响应式原理前面所实现的响应式的代码，其实就是 Vue3 中的响应式原理： Vue3 主要是通过 Proxy 来监听数据的变化以及收集相关的依赖的 Vue2 中通过 Object.defineProerty的方式来实现对象属性的监听可以将 reactive 函数进行如下的重构：在传入对象时，我们可以遍历所有的 key，并且通过属性存储描述符来监听属性的获取和修改在 setter 和 getter 方法中的逻辑和前面的 Proxy 是一致的 / 保存当前需要收集的响应式函数 /let activeReactviceFn = null/ 依赖收集类 /class Depend {constructor() {this.reactiveFns = new Set()}depend() {if (activeReactviceFn) {this.reactiveFns.add(activeReactviceFn)} }addDepend(reactiveFn) {this.reactiveFns.add(reactiveFn)}notify() {this.reactiveFns.forEach((fn) => {fn()})} }/ 封装一个响应式函数 /function watchFn(fn) {activeReactviceFn = fnfn()activeReactviceFn = null}/ 封装一个获取depend的函数 /const taregtMap = new WeakMap()function getDepend(target, key) {// 根据target对象获取maplet map = taregtMap.get(target)if (!map) {map = new Map()taregtMap.set(target, map)}// 根据key获取depend对象let depend = map.get(key)if (!depend) {depend = new Depend()map.set(key, depend)}return depend}/ 创建响应式对象函数 /function reactive(obj) {Object.keys(obj).forEach((key) => {let value = obj[key]Object.defineProperty(obj, key, {get: function () {const dep = getDepend(obj, key)dep.depend()return value},set: function (newValue) {value = newValueconst dep = getDepend(obj, key)dep.notify()} })})return obj}const info = reactive({address: '广州市',height: 1.88})watchFn(() => {console.log(info.address, '---')})info.address = '北京市' 本篇文章为转载内容。原文链接：https://blog.csdn.net/wanghuan1020/article/details/126774033。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-01-11 12:37:47

679

转载

转载文章

[转载]APl DOM文档对象模型

... 2. 操作常见元素属性 3.操作表单元素属性 4.操作元素样式属性 5.自定义属性的操作 6.H5自定义属性五.节点操作 1.为什么要学习节点操作 2.节点概述 3.节点层级一.DOM简介 1.什么是DOM 文档对象模型(简称DOM) 是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义来一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构样式。 2.DOM 树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示文档树(Dom树)：以html为根节点，形成的一颗倒立的树状结构，我们成为DOM树；这个树上所有的东西都叫节点，节点有很多类，比如文本节点，元素节点等等，这些节点如果我们通过DOM方法去获取或者其他的操作去使用就叫做DOM对象，所有节点都是DOM对象二.获取元素的方法 1.获取页面中的元素可以使用以下几种方式根据ID获取根据标签名获取通过HTML5新增的方法获取特殊元素获取 1.根据ID获取使用getElementByld()方法可以获取带有ID的元素对象 getElementByld()，是document下的一个方法代码演示 <body><div id="time">2020-11-26</div><script>// 1.因为我们文档页面从上往下加载，所以先得有标签所以我们的script写在标签下面// 2. document文档 get 获得 element 元素 by 通过驼峰命名法// 3.参数 id是大小写敏感的字符串// 4.返回的是一个对象var timer = document.getElementById('time');console.log(timer);// 5.console.dir 打印我们返回得的元素对象更好的查看里面的属性和方法console.dir(timer);</script></body> 2.根据标签名获取使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合语法如下 document.getElementsByTagName('标签名') 注意： 1.因为得到的是一个对象的集合，使用我们想要操作里面的元素就需要遍历得到元素对象是动态的代码演示 <body><ul><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li></ul><ul id="nav"><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li></ul><script>// 1.返回的是获取过来元素对象的集合以伪数组的形式存储的var lis = document.getElementsByTagName('li')console.log(lis);// 2.如果想要依次打印里面的元素对象我们可以采取遍历方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}// 3.这里可以是可以获取标签的.getElementsByTagName()可以得到这个元素里面的某些标签var nav1 = document.getElementById('nav') //这个获取nav元素var navli = nav.getElementsByTagName('li') //这里是获取nav 里面的li标签要先获取 nav元素在获取里面的liconsole.log(navli);</script></body> 3.通过 HTML5 新增的方法获取(注意兼容) 1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合 2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象 3. document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象集合注意：querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’nav’); 代码演示 <body><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2. querySelector 返回指定选择器的第一个元素对象切记里面的选择器需要加符号 .box navvar firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('nav');console.log(nav);var li = document.querySelector('li');console.log(li);// 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li');console.log(lis);</script> 4.获取特殊元素(body,html) 获取body元素 - doucumnet.body // 返回body元素对象获取html元素 . document.documentElement // 返回html元素对象代码演示 <body><script>// 获取bdoy元素var bodyEle = document.bodyconsole.log(bodyEle); //返回body元素// 获取html元素var htmlEle = document.documentElementconsole.log(htmlEle); //返回html元素</script></body> 三.事件基础 1.事件概述 JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发— 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。代码演示 <body><button id="btn">浩哥</button><script>// 点击一个按钮，弹出一个对话框// 1.事件是有三部分组成的 1.事件源 2.事件类型 3.事件处理程序也称为事件三要素// (1).事件源事件被触发的对象 var but = document.getElementById('btn')// (2).事件类型如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是？？？？// (3).事件处理程序通过一个函数赋值的方式完成因为函数就是实现某种功能的but.onclick = function() {alert('浩哥爱编程')}</script></body> 2.执行事件的步骤 1. 获取事件源DOM对象(意思是你要获取那个元素) 2. 注册事件(绑定事件意思是通过什么方式来处理比如是鼠标经过还是鼠标点击等等行为) 3. 添加事件处理程序(采取函数赋值形式意思是你想做啥) 代码演示 <body><div>123</div><script>// 事件执行步骤点击div 控制台输出我被选中了// 1.获取事件源var div = document.querySelector('div')// 2.绑定事件注册事件// div.onclick// 3.添加事件处理程序div.onclick = function() {console.log('我被点击了');}</script></body> 3.常见的鼠标事件 onmouseenter鼠标移入事件 onmouseleave鼠标移出事件四.操作元素 JS的DOM操作可以改变网页内容、结构和样式，利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性 1.操作元素内容(改变元素内容) elemeny.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 elemernt.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 elemernt.Content可以获取隐藏元素的文本，包含换行和空白代码演示 <title>Document</title><style>div,p {height: 30px;width: 300px;line-height: 30px;text-align: center;color: fff;background-color: pink;}</style></head><body><button>显示当前系统时间</button><div>某个时间</div><p>123</p><script>// 当我们点击了按钮，div里面的文字会发生变化// 1.获取元素注意这里的按钮和div都要获取到因为点击按钮div里面要发生变化所以都要获取var but = document.querySelector('button');var div = document.querySelector('div');// 2.绑定事件// but.onclick// 3.程序处理but.onclick = function() {// 改变元素内容 element(元素).innerTextdiv.innerText = '2020-11-27'}// 4.我们元素可以不用添加事件，就可以直接显示日期var p = document.querySelector('p');p.innerText = '2020-11-27';</script> elemeny.innerText和elemeny.innerHTML的区别代码演示 <body><div></div><p></p><ul><li> 文字</li><li>123</li></ul><script>// innertText 和 innertHTML 的区别// 1. innerText 不识别html标签非标准去除空格和换行var div = document.querySelector('div');div.innerText = '<strong>今天是:</strong> 2020';// 2.innertHTML 识别html标签 W3C标准保留空格和换行的推荐尽量使用这个因为这个是标准var p = document.querySelector('p')p.innerHTML = '<strong>今天是:</strong> 2020';// 3.这俩个属性是可读写的意思是除了改变内容还可以元素读取里面的内容的var ul = document.querySelector('ul')console.log(ul.innerText);console.log(ul.innerHTML);// .4innerHtml innerText 之间的区别：设置内容的时候，如果内容当中包含标签字符串 innerHtml会有标签的特性，也就是说标签会在页面上生效如果内容当中包含标签字符串 innerText会把标签原样展示在页面上，不会让标签生效读取内容的时候，如果标签内部还有其它标签，innerHtml会把标签内部带着其它的标签全部输出如果标签内部还有其它标签，innerText只会输出所有标签里面的内容或者文本，不会输出标签如果标签内部没有其它标签，他们两个一致；都是读取文本内容，innerHtml会带空白和换行</script></body> 2. 操作常见元素属性 innerText、innerHTML 改变元素内容 src、href id、alt、title 代码演示 <body><button id="ldh">刘德华</button><button id="zxy">张学友</button><br><img src="./images/ldh.jpg" alt="" width="200px" height="200px" title="刘德华" id="img"><script>// 修改属性 src// 我们可以操作元素得方法来修改元素得属性就是元素的是什么属性在重新给值就可以完成相应的赋值操作了// 1.获取元素var ldh = document.getElementById('ldh')var zxy = document.getElementById('zxy')var img = document.getElementById('img')// 2.注册事件程序处理zxy.onclick = function() {// 当我们点击了图片的时候图片路径就发生变化这里的.表示的得意思 img对象下的src属性img.src = './images/zxy.jpg';// 当我们变换图片得同时里面得title也要跟着变所以前面要加上img.img.title = '张学友';}ldh.onclick = function() {img.src = './images/ldh.jpg';img.title = '刘德华';}</script> 3.操作表单元素属性利用DOM可以操作如下表单元素的属性 type、value、checked、selected、disabled 代码演示： <body><button>按钮</button><input type="text" value="输入内容"><script>// 我想把value里面的输入内容改变为被点击了// 1.获取元素var but = document.querySelector('button')var input = document.querySelector('input')// 2.注册事件处理程序but.onclick = function() {// input.innerHTML = '被点击了'; 这个是普通盒子比如 div 标签里面的内容// 表单里面的值文字内容是通过value来修改的input.value = '被点击了'// 如果需要某个表单被禁用不能再点击了使用 disabled 我们想要这个按钮 button禁用// but.disabled = true// 还有一种写法// this指向的是事件函数的调用者谁调用就指向谁这里调用者是btnthis.disabled = true}</script></body> 4.操作元素样式属性我们可以通过 JS 修改元素的大小、颜色、位置等样式。 1.element.style 行内样式操作注意： JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor JS 修改 style 样式操作，产生的是行内样式，所以行内式比内嵌式高代码演示 <style>div {width: 200px;height: 200px;background-color: red;}</style></head><body><div></div><script>// 要求点击div变成粉色 height变为250px// 1.获取元素var div = document.querySelector('div');// 2.注册事件处理程序div.onclick = function() {// div.style里面的属性采取的是驼峰命名法// this等于div this调用者谁调用谁执行this.style.backgroundColor = 'pink'this.style.height = '250px'}</script> 2.element.className 类名样式操作注意：如果样式修改较多，可以采取操作类名方式更改元素样式。 class因为是个保留字，因此使用className来操作元素类名属性 className 会直接更改元素的类名，会覆盖原先的类名。代码演示 <style>div {width: 100px;height: 100px;background-color: pink;}.change {background-color: purple;color: fff;font-size: 25px;margin-top: 100px;}</style></head><body><div class="first">文本</div><script>// 1. 使用 element.style 获得修改元素样式如果样式比较少或者功能简单的情况下使用var test = document.querySelector('div');test.onclick = function() {// this.style.backgroundColor = 'purple';// this.style.color = 'fff';// this.style.fontSize = '25px';// this.style.marginTop = '100px';// 让我们当前元素的类名改为了 change// 2. 我们可以通过修改元素的className更改元素的样式适合于样式较多或者功能复杂的情况如果想继续添加样式即在change添加即可// 3. 如果想要保留原先的类名，我们可以这么做多类名选择器// this.className = 'change';this.className = 'first change';}</script> 5.自定义属性的操作 js给我们规定了可以自己添加属性在操作元素属性的时候，元素.语法只能操作元素天生具有的属性,如果是自定义的属性，通过.语法是无法操作的只能通过getAttribute和setAttribute去操作，他俩是通用的方法，无论元素天生的还是自定义的都可以可以操作 1.获取属性值 element.属性获取属性值。 element.getAttribute(‘属性’)；区别: element.属性获取内置属性值(元素本身自带的属性如果是自定义属性不能被获取) element.getAttribute(‘属性’)；主要获得自定义的属性 (标准) 我们自定义的属性 2.设置属性值 element.属性 = ‘值’ 设置内置属性值 element.setAttribute(‘属性’，‘值’) 区别： element.属性设置内置属性值 element.setAttribute(‘属性’)；主要设置自定义的属性(标准) 3.移除属性 element.removeAttribute(‘属性’)；代码演示 <body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// 1.获取元素的属性值// (1) element.属性console.log(div.id);// (2) element.getAttribute('属性') get获取得到 attribute属性的意思我们自己添加的属性称之为自定义属性console.log(div.getAttribute('id')); //democonsole.log(div.getAttribute('index')); // 1// 2.设置元素的属性值// (1) element.属性 = '值' div.id = 'test'div.className = 'navs'// (2) element.setAttribute('属性','值')div.setAttribute('index', 2);div.setAttribute('class', 'footer') //这里就是class 不是className 比较特殊// 3.移除属性 removeAttribute(属性)div.removeAttribute('index');</script></body> 只要是自定义属性最好都是用element.setAttribute(‘属性’，‘值’)来设置如果是自带属性用element.属性来设置 6.H5自定义属性自定义属性的目的：第一、是为了保存属性第二、并且使用数据。有一些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’) 获取的但是有些自定义属性很容易引起歧义，不容易判断是元素还是自定义属性 H5给我们新增了自定义属性： 1.设置H5自定义属性 H5规定自定义属性data-开头做为属性名并且赋值比如<div data-index:“1”> 或者使用JS设置element.setAttribute(‘deta-index’,2) 2.获取H5自定义属性兼容性获取 element.getAttribute(‘data-index’) 推荐开发中使用这个 H5新增element.dataset.index 或者element.datase[‘index’] ie 11以上才支持代码演示 <body><div getTime="10" data-index="20" data-name-list="40"></div><script>// 获取元素var div = document.querySelector('div');console.log(div.geTime); //undefined getTime是自定义属性不能直接通过元素的属性来获取而是用自定义属性来获取的getAttribute(‘属性’)console.log(div.getAttribute('getTime')); //10// H5添加自定义属性的写法以data-开头div.setAttribute('data-time', 30)// 1.兼容性获取H5自定义属性console.log(div.getAttribute('data-time')); // 30// 2.H5新增的获取自定义属性的方法它只能获取data-开头的// dataset 是一个集合的意思存放了所有以data开头的自定义属性如果你想取其中的某一个只需要在dataset.的后面加上自定义属性名即可console.log(div.dataset);console.log(div.dataset.time); // 30// 还有一种方法dataset['属性']console.log(div.dataset['time']); // 30// 如果自定义属性里面有多个-链接的单词我们获取的时候采取驼峰命名法不用要-了console.log(div.dataset.nameList); // 40console.log(div.dataset['nameList']); // 40</script></body> 五.节点操作 1.为什么要学习节点操作获取元素通常使用俩种方式（1）利用DOM提供的方法获取元素但是逻辑性不强繁琐（2）利用节点层级关系获取元素如利用父子，兄弟关系获取元素逻辑性强，但是兼容性不怎么好 2.节点概述网页中的所有内容都是节点(标签、属性、文本、注释等等) ，在DOM中，节点使用node表示。HTML DOM 树中的所有节点均可通过javascript进行访问，所有HTML元素(节点) 均可被修改，也可以创建或删除一般地，节点至少拥有nade Type(节点类型)、nodeName(节点名称)和nodeValue(节点值) 这三个基本属性元素节点 nodeType 为 1 属性节点 node Name为 2 文本节点 nodeValue为 3 (文本节点包含文字、空格、换行等等) 实际开发中，节点操作主要操作的是元素节点 3.节点层级利用DOM树可以把节点划分为不同得层级关系，常见得是父子兄层级关系 1.父级节点 1.node.parentNode parenNode属性可以返回某节点得父节点，注意是最近的父节点哟！！！如果指定的节点没有父节点就返回null 代码演示 <body><div class="box"><div class="box1"></div></div><script>var box1 = document.querySelector('.box1')// 得到的是离元素最近的父节点(亲爸爸) 得不到就返回得是nullconsole.log(box1.parentNode); // parentNode 翻译过来就是父亲的节点</script></body> 2.子级节点操作 1.parentNode.children（非标准） parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(重点记住这个就好，以后重点使用) 虽然children是一个非标准，但是得到了各个浏览器的支持，我们大胆使用即可！！！代码演示 <body><ul><li>1</li><li>1</li><li>1</li><li>1</li></ul><script>// DOM 提供的方法（APL）获取这样获取比较麻烦var ul = document.querySelector('ul')var lis = ul.querySelectorAll('li')// children子节点获取 ul里面所有的小li 放心使用没有限制兼容性实际开发中经常使用的console.log(ul.children);</script> 如何返回子节点的第一个和最后一个？ 2.parentNode.firstElementChild firstElementChild返回第一个子元素节点，找不到则返回unll 3.parentNode.lastElementChild lastElementChild返回最后一个子元素节点，找不到则返回null 注意：这俩个方法有兼容性问题，IE9以上才支持谨慎使用但是我们有解决方案如果想要第一个子元素节点，可以使用 parentNode.chilren[0] 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1] 代码演示 <body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var ul = document.querySelector('ul')// 1.firstElementChild 返回第一个子元素节点 ie9 以上才支持注意兼容console.log(ul.firstElementChild);// 2.lastElementChild返回最后一个子元素节点console.log(ul.lastElementChild);// 3.实际开发中用到的既没有兼容性问题又可以返回子节点的第一个和最后一个console.log(ul.children[0]);console.log(ul.children[ul.children.length - 1]); //ul.children.length - 1获取的永远是子节点最后一个</script></body> 3.兄弟节点 1.node.nextSibling nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。注意包含所有的节点 2.node.previousSibling previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。注意包含所以有的节点代码演示 <body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div')// 返回当前元素的下一个兄弟节点nextSibling，找不到返回null。注意包含元素节点或者文本节点等等console.log(div.nextSibling); //这里返回的是text 因为它的下一个兄弟节点是换行// 返回的是当前元素的上一个节点previousSibling，找不到返回null。注意包含元素节点或者文本节点等等console.log(div.previousSibling); //这里返回的是text 因为它的上一个兄弟节点是换行</script></body> 3.node.nexElementSibling nexElementSibling 返回当前元素下一个兄弟元素节点，找不到返回null 4.node.previousElementSibling previousElementSibling返回当前元素上一个兄弟节点，找不到返回null 注意：这俩个方法有兼容性问题，IE9以上才支持代码演示 <body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div')// nextElementSiblingd得到下一个兄弟元素节点console.log(div.nextElementSibling); // span // previousElementSibling 得到的是上一个兄弟元素节点console.log(div.previousElementSibling); // null 因为它上面没有兄弟元素了返回空的</script></body> 怎么解决兼容性问题呢？可以封装一个兼容性函数（简单了解即可在实际开发中用的不多） function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;} }return null;} 4.创建节点 1.document.createElement('tagName') document.createElement( ) 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在的是根据我们的需求动态生成的，所有我们也称为动态创建元素节点我们创建了节点要给添加到节点里面去称为添加节点 1.node.appendChild（child） node.appendChild（）方法将一个节点添加到指定父节点的子节点列表末尾 2.node.insertBefore(child，指定添加元素位置) node.insertBefore( ) 方法将一个节点添加到父节点的指定子节点前面代码演示 <body><ul><li>1</li></ul><script>// 1.创建节点 createElementvar li = document.createElement('li')// 2.添加节点创建了节点要添加到某一个元素身上去叫添加节点 node.appendChild(child) done 父级 child 子级如果前面有元素了则在后面追加元素类似数组中的push依次追加var ul = document.querySelector('ul')ul.appendChild(li)// 3.添加节点 node.insertBefore(child，指定元素) 在子节点前面添加子节点 child子级你要添加的元素var lili = document.createElement('li')ul.insertBefore(lili, ul.children[0]) //ul.children 这句话的意思是添加到ul父亲的子节点第一个// 总结如果想在页面中添加元素分为俩步骤1.创建元素 2.添加元素</script></body> 5.删除节点 node.removeChild(child) node.removeChlid（）方法从DOM 中删除一个子节点，返回删除的节点简单点就是从父元素中删除某一个孩子node就是父亲child就是孩子删除的节点.remove(没有参数) 注意：ie不支持代码演示 <body><button>按钮</button><ul><li>熊大</li><li>熊二</li><li>熊三</li></ul><script>// 1.获取元素var ul = document.querySelector('ul')var but = document.querySelector('button');// 2.删除元素// but.onclick = function() {// ul.removeChild(ul.children[0])// }// 3.点击按钮键依次删除，最后没有删除内容了就禁用按钮 disabled = true 禁用按钮语法but.onclick = function() {if (ul.children.length == 0) {this.disabled = true} else {ul.removeChild(ul.children[0])} }</script></body> 6.复制节点(克隆节点) node.cloneNode() node.dloneNode()方法返回调用该方法节点得一个副本，也称为克隆节点/拷贝节点注意 1.如果括号参数为空或者为false，则是浅拷贝，只复制里面得标签，不复制内容 2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的内容代码演示 <body><ul><li>1</li><li>2</li><li>3</li></ul><script>// 1.获取元素var ul = document.querySelector('ul');// 2.复制元素 node.cloneNode() 如果参数括号为空或者false则只会复制元素不会复制内容，如果待有参数true则内容和元素都会被复制var lis = ul.children[0].cloneNode(true);// 3.获取元素ul.appendChild(lis)</script></body> 7.替换(改)节点 node.replaceChild(新节点,替换到什么位置) 代码演示 <body><ul class="list"><li>1</li><li>2</li></ul><script>// 替换（改）节点父节点.replaceChild(新元素, 替换到什么位置)// (1)获取父元素var ulNode = document.querySelector('.list');// (2)创建新的元素var liRead = document.createElement('li')// (3)给新元素添加内容liRead.innerHTML = '5';// (4)替换元素ulNode.replaceChild(liRead, ulNode.children[1])</script></body> 8.三种动态创建元素区别 document.write() element.innerHTML document.createElement() 区别 document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，它则会导致页面全部重绘 element.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘 element.innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结果有点复杂 createElement()创建多个元素效率低一点点，但是结果更加清晰总结：不同浏览器下,innerHTML效率要比createElement()高代码演示 <body><button>点击</button><p>abc</p><div class="inner"></div><div class="create"></div><script>// window.onload = function() {// document.write('<div>123</div>');// }// 三种创建元素方式区别 // 1. document.write() 创建元素如果页面文档流加载完毕，再调用这句话会导致页面重绘// var btn = document.querySelector('button');// btn.onclick = function() {// document.write('<div>123</div>');// }// 2. innerHTML 创建元素var inner = document.querySelector('.inner');// for (var i = 0; i <= 100; i++) {// inner.innerHTML += '<a href="">百度</a>'// }var arr = [];for (var i = 0; i <= 100; i++) {arr.push('<a href="">百度</a>');}inner.innerHTML = arr.join('');// 3. document.createElement() 创建元素var create = document.querySelector('.create');for (var i = 0; i <= 100; i++) {var a = document.createElement('a');create.appendChild(a);}</script></body> 本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_46978034/article/details/110190352。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-08-04 13:36:05

247

转载

JQuery插件下载

谷歌Material Design风格纯JS进度条插件

...色、大小、动画速度等属性，使得在页面加载、数据提交或长时间任务处理过程中，用户能够获得清晰且美观的进度反馈信息。MProgress.js以其简洁易用的API以及对MaterialDesign理念的忠实呈现，在众多进度条插件中脱颖而出，成为增强网页交互体验的理想工具之一。点我下载文件大小：42.46 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-04-03 09:08:33

本站

JQuery插件下载

简洁实用的jQuery进度条插件

...平或垂直）等各种样式属性。此外，它支持灵活配置进度值，并能实时响应数据更新，确保用户能够清晰直观地了解操作进度或数据加载状态。无需复杂的编程技巧，开发者就能借助此插件在任何基于jQuery的Web项目中实现专业级别的进度条功能，从而提升用户体验和整体界面交互性。无论是文件上传、内容加载还是任务进度监控等场景，这款插件都能提供稳定且美观的解决方案。点我下载文件大小：46.33 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-09-20 22:29:07

126

本站

JQuery插件下载

可自定义刻度动画的jQuery进度条插件

...量、大小和颜色等关键属性，从而满足各种视觉需求。更重要的是，这款插件还支持通过CSS来进一步定制圆点的外观，使开发者能够更加灵活地控制进度条的样式，确保其与整体网站或应用的设计风格保持一致。无论是用于展示任务完成度、文件上传进度还是其他任何形式的数据进展，progressdots都能提供直观且美观的表现方式。它的灵活性和易用性使得即便是非专业设计师也能快速上手，创建出既实用又具有吸引力的进度条效果。此外，插件本身轻量级且兼容主流浏览器，确保了良好的性能表现和广泛的适用范围。总之，progressdots凭借其强大的功能和高度的自定义能力，成为了网页开发中不可或缺的工具之一，尤其适合那些追求细节完美和用户体验优化的项目。点我下载文件大小：45.34 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2025-02-07 20:40:28

本站

JQuery插件下载

可自定义logo的jQuery生成二维码插件

...文本、网址或任何其他数据转化为二维码。此外，它还允许你在二维码中嵌入自定义的Logo，以增加品牌识别度和视觉吸引力。你可以自由选择Logo的位置，无论是中心还是边缘，都能精准定位。除了Logo自定义功能外，插件还提供了丰富的文字样式选项。你可以调整文字的颜色、字体大小等属性，确保二维码在各种背景下的可读性。这使得二维码不仅美观，而且实用。最重要的是，这款插件操作简便，兼容多种浏览器，确保了跨平台的一致体验。无论你是网站开发者，还是需要频繁使用二维码的企业主，这款插件都能满足你的需求。通过它，你可以轻松创建出既美观又实用的二维码，提升用户体验，增强品牌形象。总之，“可自定义logo的jQuery生成二维码插件”是一款强大而灵活的工具，旨在简化二维码制作过程，让你的项目更加出色。点我下载文件大小：80.76 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2025-01-03 11:15:29

118

本站

JQuery插件下载

精美时尚的jQuery动态仪表盘插件

...ta-percent属性指定当前数值，进而快速实现动态的数据驱动型进度显示。无论是用于反映性能指标、健康数据、项目进度还是任何其他需要直观展现比例或量值的应用场景，GaugeMeter都能提供专业且吸引眼球的表现形式，提升了用户界面的美观性和信息传递效率。点我下载文件大小：54.03 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-06-09 12:12:57

本站

JQuery插件下载

eModal-基于Bootstrap的实用模态窗口对话框插件

...具备远程加载Ajax数据的能力，大大增强了动态性和用户体验。此外，eModal插件允许开发者便捷地嵌入iframe框架，方便在模态窗口中展示外部网页或Web应用，为用户提供更加无缝的内容集成体验。其简洁易用的API设计使得开发者能够快速配置和自定义模态窗口的各项属性，如大小、位置、外观样式以及行为响应等，从而确保与项目整体风格的一致性与协调性。总之，凭借其全面而强大的功能集，eModal成为了众多开发者青睐的工具，能够在保持Bootstrap一致性的同时，极大地简化了复杂模态对话框的开发流程，并提升了网站或应用程序的互动表现力。点我下载文件大小：49.88 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-07-26 12:01:50

135

本站

JQuery插件下载

jQuery实用Ajax loading spin旋转指示器插件

...户系统正在处理请求，数据正在加载中。这一过程对用户来说显得流畅自然，不会产生焦虑或困惑。spin.js的核心功能在于其简洁美观的设计和强大的自定义能力。它能够适应各种屏幕尺寸，无论是在手机、平板还是台式机上，都能保持良好的视觉效果。开发人员可以轻松调整旋转指示器的颜色、大小以及动画速度等属性，以匹配网站的整体风格。此外，插件还提供了多种预设样式供选择，使得集成过程更加便捷。使用spin.js，开发者无需编写复杂的代码即可实现专业的加载动画效果，从而提升网站的专业度与用户满意度。无论是电子商务平台、新闻资讯网站还是社交网络应用，spin.js都能发挥其独特的优势，确保用户在享受高效服务的同时，也能获得愉悦的浏览体验。点我下载文件大小：118.65 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2025-02-19 21:20:06

本站

JQuery插件下载

js和CSS3炫酷毛玻璃面板特效

...糊程度以及背景颜色等属性，以适应各种设计需求。FrostedPanel的核心优势在于其简洁易用的API和高度可定制性。只需几行代码，即可在任何HTML元素上应用毛玻璃效果，无需复杂的CSS或额外的图像资源。此外，该插件兼容多种现代浏览器，确保了广泛的跨平台支持。该插件特别适用于需要增加隐私保护、强调内容重要性或是实现现代UI设计风格的场景。例如，在表单输入框周围添加毛玻璃效果可以提高用户的输入体验，而在敏感信息显示区域使用此效果则能增强数据安全感。FrostedPanel的灵活特性使其成为开发者构建美观且功能丰富的Web应用程序时的有力工具。总之，FrostedPanel是一款功能强大、易于集成的JavaScript插件，旨在通过其独特的毛玻璃和模糊效果，为网站和应用带来更加吸引人和专业的外观。无论是追求视觉创新还是增强用户体验，FrostedPanel都是一个值得探索的解决方案。点我下载文件大小：694.21 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-08-26 10:50:50

本站

JQuery插件下载

基于Bootstrap的表格头固定的jQuery表格插件

...专为需要高效展示大量数据的网站设计的jQuery插件。这款插件巧妙地结合了Bootstrap框架的强大功能与jQuery的灵活性，使得网页开发者能够轻松实现Bootstrap表格中头部的固定效果。这意味着当用户向下滚动浏览表格内容时，表格的顶部标题栏将始终保持可见状态，极大地提升了用户体验。使用这款插件，开发者无需编写复杂的CSS或JavaScript代码，只需简单地引入插件文件并在相应的表格元素上添加特定的类或属性即可。这不仅简化了开发流程，还确保了页面加载速度和性能不受影响。此外，由于其基于Bootstrap的设计，它能够无缝集成到任何已经采用Bootstrap进行布局和样式的项目中，提供一致且专业的视觉效果。无论你是正在构建一个产品详情页、数据分析报告还是任何需要展示复杂数据集的网站，jquery-table-fixed-head都能为你提供强大而便捷的支持。通过提升信息可读性和易用性，它帮助用户更快速、准确地获取所需信息，从而提高整体的用户满意度和参与度。总之，对于追求高质量用户体验的前端开发者而言，这是一款不可多得的工具。点我下载文件大小：89.90 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-10-29 21:27:18

118

本站

JQuery插件下载

anime.js-强大的Javascript动画库插件

...库插件能够与CSS3属性、SVG元素、DOM（文档对象模型）节点以及纯JavaScript对象协同工作，支持制作出各种高性能、平滑过渡的动画效果。Anime.js的设计旨在优化性能，确保在不同设备和浏览器上的流畅表现。它提供了广泛的动画类型，包括但不限于缩放、旋转、移动、透明度变化等，同时还支持更复杂的动画序列和关键帧动画，允许开发者通过关键帧控制动画的精确运动轨迹和速度。此外，Anime.js的兼容性极佳，支持主流的现代浏览器，确保了广泛的应用场景。插件的灵活性使得它能够适应各种项目需求，无论是简单的网页元素动画还是复杂的数据可视化和交互式UI组件，都能游刃有余地实现。总之，Anime.js是一个轻量级、功能全面的JavaScript动画库，旨在简化动画创建过程，提高开发效率，同时保证最终产品的高质量视觉体验。它通过结合CSS3、SVG和DOM技术，为开发者提供了强大的动画创作工具，帮助他们构建出既美观又高效的应用程序。点我下载文件大小：27.55 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-08-20 20:39:19

本站

JQuery插件下载

带CSS3过渡效果的js模态窗口插件

...、位置、背景透明度等属性，确保与网站的整体设计风格保持一致。与jQuery的结合使得Custombox能够充分利用jQuery的强大功能，如事件绑定、DOM操作等，简化了开发流程，提高了开发效率。对于依赖于jQuery框架的项目来说，Custombox成为了一个理想的模态窗口解决方案，既能提供高性能的动态效果，又能保持与现有代码库的一致性。总之，Custombox是一款功能强大、易于集成、高度可定制的JavaScript模态窗口插件，无论是用于构建简单的提示框，还是复杂的数据输入表单，都能提供出色的用户体验和视觉效果。通过其丰富的CSS3过渡效果和与jQuery的良好兼容性，Custombox成为了现代Web应用中不可或缺的工具。点我下载文件大小：117.50 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-09-17 20:48:32

本站

知识学习

实践的时候请根据实际情况谨慎操作。

随机学习一条linux命令：

dig @dns_server domain_name MX - 查询指定DNS服务器上某域名的邮件交换记录（MX记录）。