一.目的
点击div，使div中的文字发生改变，并且使div的背景颜色也发生改变。
二.途径
需要运用YUI中的对DOM的操作。
三.了解知识
1.加载模块(Modules)
YUI3主要增加了对rollup模块（构件）的定义（即由一组子模块组成的模块）
2.加载构件与模块（Rollups&Modules）
YUI().use()能够加载模块与构件。
模块是指一组可重用的代码。
构件（Rollup）是一种超级模块，是由多个模块组成的。例如：node是一个构件其中包括了node-base、node-style及一些其它操作DOM的模块。
3.组织结构
YUI3在结构上分为四大类：
种子：该模块是YUI3的单一核心，页面都必须包含该模块，该模块提供加载功能，所以可以堪称是YUI的一个种子。在YUI3中扮演引导层的作用，通过在页面引入种子相关文件，调用YUI().use()方法可以安全快速的加载YUI3核心类和组件类。包含YUI Base、Get和Loader模块。
核心： 核心模块为YUI3下游组件提供通用依赖。该模块包括OOP模块（提供对象继承机制，DOM等绝大多数模块直接或间接依赖OOP）、Dom模块（提供基础的DOM操作与选择类）、Node模块（基于Dom模块，提供文档节点的创建、选择和操作等方法，相比YUI2有了很大的精简）、Event模块（提供屏蔽浏览器差异的事件注册和响应机制，同时提供高级自定义事件的功能）
组件框架：组件框架基于YUI核心框架。从下到上依次基于Attribute、Base、Widget模块组成；同时提供Plugin模块实现灵活扩展。组件框架是建立和扩展组件的基础。
组件： YUI3提供的高度模块化可复用的组件，根据程序按需引入相关模块即可。YUI3目前提供了Animation、Drag and Drop、IO、Cookies、JSON 等基础组件模块。
四.代码
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <!--下面的语句是对YUI种子文件的引用--> <script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script> <script> YUI().use('node', function (Y) { var helloWorld = function(e) { e.target.setHTML("<p>Hello World!</p>"); e.target.setStyle('background-color', 'orange'); };//函数helloword的声明 var myDiv = Y.one("#container");//Y.one()元素选择器，匹配元素为id="container"的元素 myDiv.on("click", helloWorld);//用Node类的on方法对myDiv监听事件click，触发函数helloword }); </script> </head> <body> <div id="container" style="width: 1000px; height: 100px; background-color: pink;"> <p style="margin-top: 40px; padding-top: 40px; padding-left: 40px;">Click for Hello World test.</p> </div> </body> </html>
相关推荐
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展，主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识，适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
【ExtJS 学习笔记概览】 ExtJS 是一个强大的JavaScript 框架，主要用于构建富客户端的Web应用程序。它的核心特性包括丰富的组件库、强大的数据包管理、灵活的布局系统以及面向对象的编程模型。以下是对ExtJS 入门...
EXTJS in Action 是一本专为学习EXTJS编写的书籍，但这里我们主要关注学习笔记中的关键知识点。 首先，EXTJS的目录结构非常重要，因为它包含了所有必要的资源和源码： 1. `adapter`：这部分包含了适配器，用于将...
jQuery简化了DOM操作、事件处理和动画效果，使得开发者可以更轻松地编写高效、可维护的代码。在压缩包中，这个库被包含在"js/jquery.js"文件中，是整个裁剪功能的核心支持。 其次，jQuery插件（如JQuery Cropper）...
常用1.SchLib
# 【tokenizers-***.jar***文档.zip】 中包含： ***文档：【tokenizers-***-javadoc-API文档-中文(简体)版.zip】 jar包下载地址：【tokenizers-***.jar下载地址(官方地址+国内镜像地址).txt】 Maven依赖：【tokenizers-***.jar Maven依赖信息(可用于项目pom.xml).txt】 Gradle依赖：【tokenizers-***.jar Gradle依赖信息(可用于项目build.gradle).txt】 源代码下载地址：【tokenizers-***-sources.jar下载地址(官方地址+国内镜像地址).txt】 # 本文件关键字： tokenizers-***.jar***文档.zip,java,tokenizers-***.jar,ai.djl.huggingface,tokenizers,***,ai.djl.engine.rust,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,djl,huggingface,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压 【tokenizers-***.jar***文档.zip】，再解压其中的 【tokenizers-***-javadoc-API文档-中文(简体)版.zip】，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件； # Maven依赖： ``` <dependency> <groupId>ai.djl.huggingface</groupId> <artifactId>tokenizers</artifactId> <version>***</version> </dependency> ``` # Gradle依赖： ``` Gradle: implementation group: 'ai.djl.huggingface', name: 'tokenizers', version: '***' Gradle (Short): implementation 'ai.djl.huggingface:tokenizers:***' Gradle (Kotlin): implementation("ai.djl.huggingface:tokenizers:***") ``` # 含有的 Java package（包）： ``` ai.djl.engine.rust ai.djl.engine.rust.zoo ai.djl.huggingface.tokenizers ai.djl.huggingface.tokenizers.jni ai.djl.huggingface.translator ai.djl.huggingface.zoo ``` # 含有的 Java class（类）： ``` ai.djl.engine.rust.RsEngine ai.djl.engine.rust.RsEngineProvider ai.djl.engine.rust.RsModel ai.djl.engine.rust.RsNDArray ai.djl.engine.rust.RsNDArrayEx ai.djl.engine.rust.RsNDArrayIndexer ai.djl.engine.rust.RsNDManager ai.djl.engine.rust.RsSymbolBlock ai.djl.engine.rust.RustLibrary ai.djl.engine.rust.zoo.RsModelZoo ai.djl.engine.rust.zoo.RsZooProvider ai.djl.huggingface.tokenizers.Encoding ai.djl.huggingface.tokenizers.HuggingFaceTokenizer ai.djl.huggingface.tokenizers.HuggingFaceTokenizer.Builder ai.djl.hu
内容概要：本文详细探讨了电力系统中PMU（相量测量单元）的优化配置问题，旨在确保系统完全可观测的同时尽量减少PMU的数量。作者介绍了六种不同的算法，包括模拟退火、图论方法、递归安全N算法等，并通过MATLAB实现了这些算法。通过对IEEE标准测试系统的实验，展示了各种算法在不同规模系统中的表现。文中不仅提供了具体的MATLAB代码实现，还分享了许多实用的经验技巧，如邻域解生成、退火速率设置、拓扑排序等。 适合人群：从事电力系统研究的技术人员、研究生以及对组合优化感兴趣的科研工作者。 使用场景及目标：适用于电力系统状态估计、故障诊断等领域，帮助研究人员和工程师找到最优的PMU配置方案，提高系统的可靠性和经济性。 其他说明：文章强调了在实际应用中需要注意的问题，如变压器支路的影响、节点编号不连续等问题，并推荐了几篇相关领域的经典文献供进一步学习。此外，还提到了一些有趣的发现，如某些中间节点装PMU反而能减少总数。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文详细介绍了三菱FX1s PLC与台达MS300变频器通过Modbus RTU协议实现通讯的方法。首先，文中列举了所需的硬件设备及其连接方法，确保PLC与变频器能够正常通信。接下来，针对频率设定、频率读取及正反转启停控制三大主要功能进行了详细的编程讲解，提供了具体的梯形图代码示例并解释了每一步的作用。此外，还涉及到了触摸屏（MCGS和威纶通）的配置步骤，使用户可以通过触摸屏方便地操作变频器的各项功能。最后，作者分享了一些实用的小技巧和常见错误避免方法，帮助使用者快速解决问题，提高工作效率。 适合人群：从事自动化控制系统集成的技术人员，尤其是那些需要将三菱PLC与台达变频器进行互联的工程师。 使用场景及目标：适用于工业自动化领域的项目实施过程中，旨在帮助技术人员掌握三菱FX1s与台达MS300变频器之间的高效通信技术，从而更好地完成系统集成任务。 其他说明：文中不仅包含了详细的理论知识和技术要点，还有丰富的实践经验分享，有助于读者全面理解和应用相关技术。同时，提供的完整工程文件可以直接应用于实际项目中，极大地节省了开发时间和成本。
winrar免费版压缩工具
内容概要：本文详细介绍了灰狼算法（GWO）、鲸鱼算法（WOA）和人工蜂群算法（ABC）在CEC21标准测试函数集上的性能对比。通过设定相同的实验条件（种群数量50，迭代次数500次，30维问题空间），分别探讨了各算法的关键参数调整及其对不同类型函数（单峰、多峰、复合）的影响。文中提供了每个算法的核心代码片段，并针对具体函数给出了优化建议。最终结果显示，GWO在单峰函数上有优势，WOA擅长处理旋转和平移问题，而ABC在高维复杂环境中表现出色。 适合人群：从事优化算法研究的科研人员、研究生以及对智能优化算法感兴趣的开发者。 使用场景及目标：适用于需要评估和比较不同优化算法性能的研究项目，特别是那些涉及高维、多峰、旋转平移等问题的实际应用场景。目标是帮助研究人员选择最适合特定任务的优化算法，并提供参数调优的经验。 其他说明：文章不仅提供了理论分析，还分享了许多实践经验，如参数调整技巧、初始化方法等。此外，所有实验均基于Matlab平台完成，附带完整的代码实现，方便读者复现实验结果。
电控开关.SchLib
# 【spring-ai-autoconfigure-model-openai-1.0.0-M7.jar中文-英文对照文档.zip】 中包含： 中文-英文对照文档：【spring-ai-autoconfigure-model-openai-1.0.0-M7-javadoc-API文档-中文(简体)-英语-对照版.zip】 jar包下载地址：【spring-ai-autoconfigure-model-openai-1.0.0-M7.jar下载地址(官方地址+国内镜像地址).txt】 Maven依赖：【spring-ai-autoconfigure-model-openai-1.0.0-M7.jar Maven依赖信息(可用于项目pom.xml).txt】 Gradle依赖：【spring-ai-autoconfigure-model-openai-1.0.0-M7.jar Gradle依赖信息(可用于项目build.gradle).txt】 源代码下载地址：【spring-ai-autoconfigure-model-openai-1.0.0-M7-sources.jar下载地址(官方地址+国内镜像地址).txt】 # 本文件关键字： spring-ai-autoconfigure-model-openai-1.0.0-M7.jar中文-英文对照文档.zip,java,spring-ai-autoconfigure-model-openai-1.0.0-M7.jar,org.springframework.ai,spring-ai-autoconfigure-model-openai,1.0.0-M7,org.springframework.ai.model.openai.autoconfigure,jar包,Maven,第三方jar包,组件,开源组件,第三方
c++复习题.doc
本科毕业设计（论文）中期检查报告
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
weixin248食堂订餐小程序ssm(文档+源码)_kaic
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
e1e90185ca2f1eda312e7f604d38195c_b4125f83523abcb38acd9dc0deebd500
# 【spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar中文-英文对照文档.zip】 中包含： 中文-英文对照文档：【spring-ai-autoconfigure-mcp-client-1.0.0-M7-javadoc-API文档-中文(简体)-英语-对照版.zip】 jar包下载地址：【spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar下载地址(官方地址+国内镜像地址).txt】 Maven依赖：【spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar Maven依赖信息(可用于项目pom.xml).txt】 Gradle依赖：【spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar Gradle依赖信息(可用于项目build.gradle).txt】 源代码下载地址：【spring-ai-autoconfigure-mcp-client-1.0.0-M7-sources.jar下载地址(官方地址+国内镜像地址).txt】 # 本文件关键字： spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar中文-英文对照文档.zip,java,spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar,org.springframework.ai,spring-ai-autoconfigure-mcp-client,1.0.0-M7,org.springframework.ai.mcp.client.autoconfigure,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,springfram