一.目的
点击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 有一定了解的初学者。 ...
总的来说，YUI提供了一套完整的工具集，涵盖了从基本的DOM操作到复杂的UI构建和事件处理，是JavaScript开发者实现高效、可维护的前端应用的强大武器。这份汉语版的YUI使用文档对于中国开发者来说，无疑是一个宝贵的...
YUI3的事件系统是其强大功能之一，它允许开发者监听和处理DOM元素及自定义事件。在“yui3-master.zip”的“event”模块中，包含了丰富的事件相关的API，如`Y.on`, `Y.fire`等，它们使得事件处理更加灵活且易于维护...
4. **事件系统**：YUI的事件系统支持DOM事件的监听和处理，使开发者可以方便地响应用户操作。 5. **CSS样式框架**：YUI提供了一套可自定义的CSS样式，帮助开发者快速创建一致的界面风格。 6. **DOM操作**：YUI提供了...
**二、YUI 2.7 中文 API** 在 Yahoo YUI 2.7 中文 API 中，包含了以下主要内容： - **API 文档**：详细介绍了每个模块的功能、方法、属性和事件，为开发者提供了清晰的使用指南。 - **示例代码**：通过实例展示了...
YUI的DOM模块提供了一系列方便的方法，如`get`, `set`, `insertBefore`等，使得操作DOM元素变得简单易行。例如，通过`YUI().use('dom', function(Y) { Y.one('#elementId').setContent('新内容'); })`，我们可以轻松...
2. **事件处理**：YUI提供了一套完整的事件系统，可以方便地监听和处理DOM事件，以及自定义事件，增强了代码的交互性和响应性。 3. **CSS样式和布局**：YUI包含一套响应式设计的CSS框架，如Grids布局系统，帮助...
2. **事件处理**：YUI3提供了强大的事件系统，支持DOM事件、自定义事件以及事件委托，使得监听和响应各种用户交互变得简单。 3. **CSS样式工具**：YUI3包含了一套CSS工具，如样式类名管理器（YUI.addClass, YUI....
2. **事件系统**：YUI的事件处理机制强大且灵活，支持DOM事件、自定义事件以及事件委托，使事件绑定和解绑变得简单易行。 3. **DOM操作**：提供了一系列DOM操作API，如选择元素、创建元素、修改属性等，简化了对...
3. **事件处理**：YUI的事件系统强大，支持事件绑定、解绑、事件冒泡等，使得用户交互编程简单易行。 4. **动画效果**：通过Transition和Anim模块，可以轻松实现平滑的CSS3动画和JavaScript动画效果。 5. **数据绑定...
3. **事件系统**：YUI 3.0.0提供了一个强大的事件处理系统，支持DOM事件和自定义事件，可以方便地进行事件监听和触发，简化了事件处理的复杂性。 4. **动画效果**：内置的Animation模块提供了丰富的动画效果，包括...
2. **DOM操作**：YUI提供了强大的DOM操作API，如选择器引擎（YAHOO.util.Selector）用于高效地定位DOM元素，以及一系列方法用于创建、修改和删除DOM节点。 3. **事件处理**：YUI的事件系统允许开发者方便地绑定和...
2. **DOM操作**：YUI提供了强大的DOM操作API，使得对HTML元素的选择、遍历、修改变得简单易行。这些工具大大简化了JavaScript与HTML之间的交互，提高了开发效率。 3. **事件处理**：YUI的事件系统支持事件委托、...
在“yui.rar”里，可能包含有如“yui-core”、“yui-dom”、“yui-event”等基础模块，这些模块分别对应核心功能、DOM操作和事件处理。开发者可以通过精确定义配置，选择需要的模块，确保代码高效运行。 YUI还提供...
#### 二、YUI提供的Dom操作 YUI的DOM操作模块简化了对DOM树的操作，使得常见的DOM操作变得简单易行。 **2.1 Element的查找** - `YAHOO.util.Dom.get(element)`：通过ID获取DOM元素。 - `YAHOO.util.Dom....
YUI由多个核心模块组成，包括事件处理、DOM操作、动画效果、拖放功能、Ajax通信、数据存储、国际化支持等。这些组件是可选的，开发者可以根据项目需求按需加载，降低了页面加载的时间。 - **事件处理**：YUI提供了...
YUI 2.6.0r2版本在当时的JavaScript社区中占有重要地位，它提供了大量的可重用模块，涵盖了DOM操作、事件处理、动画效果、Ajax交互、CSS样式管理、数据处理等多个领域。这个版本修复了之前的一些已知问题，增强了...
YUI资料 雅虎 用户接口库 中文说明及如何使用学习 Yui组件分成2类：工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。...