`
wangxin0072000
  • 浏览: 87689 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Yahoo! UI(YUI) 学习笔记 之 EVENT and DOM

阅读更多

    小弟最近学习javascript,继而学习了一个js类库---YUI。

先总体说一下YUI的类库。YUI是一个基于事件和DOM的库。所以要学习它必须首先学习EVENT和DOM两个主要的组件。

1.event 库

yui捕捉事件是依赖于event组件。而几乎所有的web操作都是基于事件的。所以要想使用yui最好先看event库。

首先从一个简单的例子开始。我们的需求是:点击一个div区域。返回一个对话框显示HelloWorld。根据需求我们发现这个需求很简单,就是处理一个click事件。处理分为一下3步:

1导入依赖包

js 代码
  1. <script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>   
  2. <script type="text/javascript" src="../../build/event/event.js"></script>   

2编写响应事件的function

js 代码
  1. //A function that pops up a "Hello World" alert:   
  2. var helloWorld = function(e) {   
  3.     alert("Hello World!");   
  4. }  

3处理事件(div 区域的id是container)

js 代码
  1. <!---->  
  2. YAHOO.util.Event.addListener("container""click", helloWorld);   

 

使用这个代码就可以实现了事件响应,但是假如我希望在触发这个事件之前先判断这个区域是否包含名为test的class呢,比如

这个div为:

js 代码
  1. <div "container" class="yui test">  </div>  

 这时我们就要向web中导入dom组件了

js 代码
  1. <script type="text/javascript" src="../../build/dom/dom.js"></script>   

之后再修改click的响应function

  1. var helloWorld = function(e) {       
  2. if(YAHOO.util.Dom.hasClass('container', 'test'))         
  3. alert("Hello World!");       
  4. }   

 这样就基本实现了我们的功能。也基本了解了yui的处理机制。它的处理机制就是根据你的不同需求调用不同的组件,在每个组件中都有一个全局的对象:YAHOO.util.XXX 其中XXX就是你调用的组件,而组件中的方法我们可以从帮助文件中方便的获得。

分享到:
评论
3 楼 wuxing429 2011-01-20  
id="container  改成 class=container
2 楼 wuliupo 2009-02-18  
maoweiwer 写道

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;script type="text/javascript" src="../../../javascript/yui/build/event/event.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../../../javascript/yui/build/yahoo/yahoo.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //A function that pops up a "Hello World" alert:&nbsp;&nbsp;&nbsp; var helloWorld = function(e) {&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; alert("Hello World!");&nbsp;&nbsp;&nbsp; } YAHOO.util.Event.addListener("container", "click", helloWorld); &lt;/script&gt; &lt;title&gt;yahoo UI&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container" style="background:#999999; line-height:50px; width:300px; text-align:center;"&gt;123&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; ----------------------------------------------- 帮我看一下我的代码,为什么我的不行呀..


是不是这样的:
../../../javascript/yui/build/event/event.js
../../../javascript/yui/build/yahoo/yahoo.js
确认上面两个js文件存在,并且yahoo.js在event.js之前引用,你的代码中引用先后顺序错了。

HTML代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../javascript/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../../javascript/yui/build/event/event.js"></script>
<script type="text/javascript">
//A function that pops up a "Hello World" alert:
var helloWorld = function(e) {
    alert("Hello World!");
}

YAHOO.util.Event.addListener("container", "click", helloWorld);
</script>
<title>yahoo UI</title>
</head>

<body>
<div id="container" style="background:#999999; line-height:50px; width:300px; text-align:center;">123</div>
</body>
</html>
1 楼 maoweiwer 2007-11-02  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../javascript/yui/build/event/event.js"></script>
<script type="text/javascript" src="../../../javascript/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript">
//A function that pops up a "Hello World" alert:   
var helloWorld = function(e) {   
    alert("Hello World!");   
}

YAHOO.util.Event.addListener("container", "click", helloWorld);
</script>
<title>yahoo UI</title>
</head>

<body>
<div id="container" style="background:#999999; line-height:50px; width:300px; text-align:center;">123</div>
</body>
</html>

-----------------------------------------------
帮我看一下我的代码,为什么我的不行呀..

相关推荐

    Yui_ext 学习笔记

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

    Yahoo UI Library

    Yahoo! User Interface Library(简称yui) 是一个使用Javascrīpt编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序。yui也包含几个核心的CSS文件。yui中的所有组件已经以开源的形式...

    yui_2.9.0前端UI

    YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    Yahoo YUI2.7中文API 完整版

    **Yahoo YUI 2.7 中文 API 完整版** Yahoo User Interface Library(简称 YUI)是由 Yahoo 开发的一款开源 JavaScript 和 CSS 库,旨在帮助开发者构建高性能、可维护的 Web 应用程序。YUI 2.7 版本是这个库的一个...

    yahoo yui UI libaray 2.3.1

    yahoo yui UI libaray 2.3.1 yahoo yui UI libaray 2.3.1 yahoo yui UI libaray 2.3.1 yahoo yui UI libaray 2.3.1

    YahooUI Library

    ### YahooUI Library (YUI) 知识点详解 #### 一、概述 **Yahoo! User Interface Library**(简称 **YUI**)是一款强大的前端工具和控件库,旨在简化 Web 开发流程,并帮助开发者构建出具备丰富交互特性的应用程序...

    yahoo3.0 YUI Examples

    【标题】"yahoo3.0 YUI Examples" 提供了关于Yahoo! UI Library (YUI) 3.0版本的一个实例集合,旨在帮助开发者理解和应用这一强大的JavaScript和CSS框架。YUI是一个开源的前端开发工具集,用于构建高性能、可扩展...

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

    《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。YUI,全称Yahoo! User Interface Library,是Yahoo开发的一个开放源代码的JavaScript库,旨在帮助开发者创建交互式...

    雅虎YUI组建

    **雅虎YUI组件详解** 雅虎用户界面库(Yahoo! User Interface Library,简称YUI)是雅虎公司推出的一款开源JavaScript和CSS框架,旨在帮助开发者构建高性能、可扩展的前端应用。YUI包含了丰富的组件,包括布局管理...

    YUI3 完整包

    Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。

    yahoo ui library

    Yahoo UI Library,简称YUI,是由雅虎公司开发并维护的一个开源JavaScript库,旨在帮助开发者构建功能丰富的、高性能的Web应用程序。这个库包含了多种模块,包括DOM操作、事件处理、动画效果、Ajax交互、数据存储...

    yahoo ui library(简称yui)搞WEB开发的朋友值得看一看,充分发挥出了javascript的功能

    Yahoo! User Interface Library(简称yui) 是一个使用Javascrīpt编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序...YahooUI,搞WEB开发的朋友值得看一看,充分发挥出了javascript的功能

    YAHOO UI 工具库

    YAHOO UI 工具库,简称YUI,是雅虎推出的一款强大的前端开发框架,旨在简化Web应用程序的开发过程,提供了一系列高效、易用的工具和功能。本文将深入探讨YUI的核心组件及其在网页开发中的应用,特别是其独特的命名...

    YAHOO.util.Dom.rar_YAHOO.util_YAHOO.util.Dom.chm_yahoo.util同步

    YAHOO.util.Dom是YUI库的核心组件之一,它提供了一系列高效、易用的函数,帮助开发者更便捷地处理DOM元素,从而实现丰富的用户界面。本文将深入探讨YAHOO.util.Dom的特性和使用方法。 一、YAHOO.util.Dom的基本概念...

    YAHOO UI工具库及使用说明

    **Yahoo UI库(YUI)**是Yahoo公司开发的一个开源JavaScript和CSS库,旨在帮助开发者构建功能丰富的、高性能的Web应用程序。它提供了大量的模块和组件,涵盖了从布局管理、事件处理到数据绑定等多个方面,使得前端...

    yui_3.0.0(雅虎官方)

    **YUI 3.0.0:雅虎官方JavaScript库详解** YUI,全称Yahoo! User Interface Library,是雅虎公司开发的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展且易于使用的Web应用程序。YUI 3.0.0是这个库的一个...

    yui3-master.zip

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

    Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools

    《Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools》是关于JavaScript框架的高级编程资源,包含了各种知名框架的源代码,这些框架包括Prototype、YUI(Yahoo! User Interface Library...

    YUI 详细说明文档

    YAHOO工具库是YUI的核心组成部分之一,提供了多种实用功能来简化开发流程。 **1.1 YAHOO工具库提供的方法** - **namespace**:此方法用于创建全局命名空间,以便在项目中组织代码和避免命名冲突。例如,`YAHOO....

Global site tag (gtag.js) - Google Analytics