`
李小抽SuperITGirl
  • 浏览: 46511 次
  • 性别: Icon_minigender_2
  • 来自: 沈阳
社区版块
存档分类
最新评论

YUI学习笔记(二)简单的DOM事件

    博客分类:
  • YUI
 
阅读更多

一.目的

点击div,使div中的文字发生改变,并且使div的背景颜色也发生改变。

二.途径

需要运用YUI中的对DOM的操作。

三.了解知识

1.加载模块(Modules)

YUI3主要增加了对rollup模块(构件)的定义(即由一组子模块组成的模块)

2.加载构件与模块(Rollups&Modules

YUI().use()能够加载模块与构件。

模块是指一组可重用的代码。

构件(Rollup)是一种超级模块,是由多个模块组成的。例如:node是一个构件其中包括了node-basenode-style及一些其它操作DOM的模块。

3.组织结构 

YUI3在结构上分为四大类:

种子:该模块是YUI3的单一核心,页面都必须包含该模块,该模块提供加载功能,所以可以堪称是YUI的一个种子。在YUI3中扮演引导层的作用,通过在页面引入种子相关文件,调用YUI().use()方法可以安全快速的加载YUI3核心类和组件类。包含YUI BaseGetLoader模块。

核心: 核心模块为YUI3下游组件提供通用依赖。该模块包括OOP模块(提供对象继承机制,DOM等绝大多数模块直接或间接依赖OOP)、Dom模块(提供基础的DOM操作与选择类)、Node模块(基于Dom模块,提供文档节点的创建、选择和操作等方法,相比YUI2有了很大的精简)、Event模块(提供屏蔽浏览器差异的事件注册和响应机制,同时提供高级自定义事件的功能)

组件框架:组件框架基于YUI核心框架。从下到上依次基于AttributeBaseWidget模块组成;同时提供Plugin模块实现灵活扩展。组件框架是建立和扩展组件的基础。

组件: YUI3提供的高度模块化可复用的组件,根据程序按需引入相关模块即可。YUI3目前提供了AnimationDrag and DropIOCookiesJSON 等基础组件模块。

四.代码

<%@ 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>

 

 

 

0
3
分享到:
评论

相关推荐

    Yui_ext 学习笔记

    【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

    《YUI使用文档》汉语版的yui学习材料

    总的来说,YUI提供了一套完整的工具集,涵盖了从基本的DOM操作到复杂的UI构建和事件处理,是JavaScript开发者实现高效、可维护的前端应用的强大武器。这份汉语版的YUI使用文档对于中国开发者来说,无疑是一个宝贵的...

    yui3-master.zip

    YUI3的事件系统是其强大功能之一,它允许开发者监听和处理DOM元素及自定义事件。在“yui3-master.zip”的“event”模块中,包含了丰富的事件相关的API,如`Y.on`, `Y.fire`等,它们使得事件处理更加灵活且易于维护...

    YUI.rar_html_javascript YUI_yui_yui javascript

    4. **事件系统**:YUI的事件系统支持DOM事件的监听和处理,使开发者可以方便地响应用户操作。 5. **CSS样式框架**:YUI提供了一套可自定义的CSS样式,帮助开发者快速创建一致的界面风格。 6. **DOM操作**:YUI提供了...

    Yahoo YUI2.7中文API 完整版

    **二、YUI 2.7 中文 API** 在 Yahoo YUI 2.7 中文 API 中,包含了以下主要内容: - **API 文档**:详细介绍了每个模块的功能、方法、属性和事件,为开发者提供了清晰的使用指南。 - **示例代码**:通过实例展示了...

    关于yui的学习

    YUI的DOM模块提供了一系列方便的方法,如`get`, `set`, `insertBefore`等,使得操作DOM元素变得简单易行。例如,通过`YUI().use('dom', function(Y) { Y.one('#elementId').setContent('新内容'); })`,我们可以轻松...

    yui_3.8.1.zip

    2. **事件处理**:YUI提供了一套完整的事件系统,可以方便地监听和处理DOM事件,以及自定义事件,增强了代码的交互性和响应性。 3. **CSS样式和布局**:YUI包含一套响应式设计的CSS框架,如Grids布局系统,帮助...

    YUI3.7.3 最新版本 带API

    2. **事件处理**:YUI3提供了强大的事件系统,支持DOM事件、自定义事件以及事件委托,使得监听和响应各种用户交互变得简单。 3. **CSS样式工具**:YUI3包含了一套CSS工具,如样式类名管理器(YUI.addClass, YUI....

    YUI3.6文档及示例

    2. **事件系统**:YUI的事件处理机制强大且灵活,支持DOM事件、自定义事件以及事件委托,使事件绑定和解绑变得简单易行。 3. **DOM操作**:提供了一系列DOM操作API,如选择元素、创建元素、修改属性等,简化了对...

    yui 资源包

    3. **事件处理**:YUI的事件系统强大,支持事件绑定、解绑、事件冒泡等,使得用户交互编程简单易行。 4. **动画效果**:通过Transition和Anim模块,可以轻松实现平滑的CSS3动画和JavaScript动画效果。 5. **数据绑定...

    yui_3.0.0(雅虎官方)

    3. **事件系统**:YUI 3.0.0提供了一个强大的事件处理系统,支持DOM事件和自定义事件,可以方便地进行事件监听和触发,简化了事件处理的复杂性。 4. **动画效果**:内置的Animation模块提供了丰富的动画效果,包括...

    YUI2.8.1包括demo api是学习的好东西

    2. **DOM操作**:YUI提供了强大的DOM操作API,如选择器引擎(YAHOO.util.Selector)用于高效地定位DOM元素,以及一系列方法用于创建、修改和删除DOM节点。 3. **事件处理**:YUI的事件系统允许开发者方便地绑定和...

    一些关于YUI的资源

    2. **DOM操作**:YUI提供了强大的DOM操作API,使得对HTML元素的选择、遍历、修改变得简单易行。这些工具大大简化了JavaScript与HTML之间的交互,提高了开发效率。 3. **事件处理**:YUI的事件系统支持事件委托、...

    yui.rar 例子

    在“yui.rar”里,可能包含有如“yui-core”、“yui-dom”、“yui-event”等基础模块,这些模块分别对应核心功能、DOM操作和事件处理。开发者可以通过精确定义配置,选择需要的模块,确保代码高效运行。 YUI还提供...

    YAHOO yui2.7 文档+ 代码+例子

    YUI由多个核心模块组成,包括事件处理、DOM操作、动画效果、拖放功能、Ajax通信、数据存储、国际化支持等。这些组件是可选的,开发者可以根据项目需求按需加载,降低了页面加载的时间。 - **事件处理**:YUI提供了...

    yui_2.6.0r2

    YUI 2.6.0r2版本在当时的JavaScript社区中占有重要地位,它提供了大量的可重用模块,涵盖了DOM操作、事件处理、动画效果、Ajax交互、CSS样式管理、数据处理等多个领域。这个版本修复了之前的一些已知问题,增强了...

    雅虎 用户接口库YUI

    YUI资料 雅虎 用户接口库 中文说明及如何使用学习 Yui组件分成2类:工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发(in-browser devolvement),使用DHTML和AJAX的特性开发所有的Web程序。...

    YUi文档(中文的哦)

    Event模块允许开发者轻松地管理DOM事件,包括绑定、解绑以及自定义事件。 ##### 设置事件响应函数 - **使用`on`方法**: - 可以使用YUI的`on`方法或Node实例上的`on`方法来绑定事件处理程序。 - 参数包括事件类型...

Global site tag (gtag.js) - Google Analytics