YUI学习笔记（二）简单的DOM事件

最新推荐文章于 2024-10-12 22:35:37 发布

UranusSuperITGirl

最新推荐文章于 2024-10-12 22:35:37 发布

阅读量160

点赞数

分类专栏： YUI 文章标签： java json

YUI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.目的

点击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>