小弟最近学习javascript,继而学习了一个js类库---YUI。
先总体说一下YUI的类库。YUI是一个基于事件和DOM的库。所以要学习它必须首先学习EVENT和DOM两个主要的组件。
1.event 库
yui捕捉事件是依赖于event组件。而几乎所有的web操作都是基于事件的。所以要想使用yui最好先看event库。
首先从一个简单的例子开始。我们的需求是:点击一个div区域。返回一个对话框显示HelloWorld。根据需求我们发现这个需求很简单,就是处理一个click事件。处理分为一下3步:
1导入依赖包
js 代码
- <script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
- <script type="text/javascript" src="../../build/event/event.js"></script>
2编写响应事件的function
js 代码
-
- var helloWorld = function(e) {
- alert("Hello World!");
- }
3处理事件(div 区域的id是container)
js 代码
- <!---->
- YAHOO.util.Event.addListener("container", "click", helloWorld);
使用这个代码就可以实现了事件响应,但是假如我希望在触发这个事件之前先判断这个区域是否包含名为test的class呢,比如
这个div为:
js 代码
- <div "container" class="yui test"> </div>
这时我们就要向web中导入dom组件了
js 代码
- <script type="text/javascript" src="../../build/dom/dom.js"></script>
之后再修改click的响应function
- var helloWorld = function(e) {
- if(YAHOO.util.Dom.hasClass('container', 'test'))
- alert("Hello World!");
- }
这样就基本实现了我们的功能。也基本了解了yui的处理机制。它的处理机制就是根据你的不同需求调用不同的组件,在每个组件中都有一个全局的对象:YAHOO.util.XXX 其中XXX就是你调用的组件,而组件中的方法我们可以从帮助文件中方便的获得。
分享到:
相关推荐
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
Yahoo! User Interface Library(简称yui) 是一个使用Javascrīpt编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序。yui也包含几个核心的CSS文件。yui中的所有组件已经以开源的形式...
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
**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
### YahooUI Library (YUI) 知识点详解 #### 一、概述 **Yahoo! User Interface Library**(简称 **YUI**)是一款强大的前端工具和控件库,旨在简化 Web 开发流程,并帮助开发者构建出具备丰富交互特性的应用程序...
【标题】"yahoo3.0 YUI Examples" 提供了关于Yahoo! UI Library (YUI) 3.0版本的一个实例集合,旨在帮助开发者理解和应用这一强大的JavaScript和CSS框架。YUI是一个开源的前端开发工具集,用于构建高性能、可扩展...
《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。YUI,全称Yahoo! User Interface Library,是Yahoo开发的一个开放源代码的JavaScript库,旨在帮助开发者创建交互式...
**雅虎YUI组件详解** 雅虎用户界面库(Yahoo! User Interface Library,简称YUI)是雅虎公司推出的一款开源JavaScript和CSS框架,旨在帮助开发者构建高性能、可扩展的前端应用。YUI包含了丰富的组件,包括布局管理...
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。
Yahoo UI Library,简称YUI,是由雅虎公司开发并维护的一个开源JavaScript库,旨在帮助开发者构建功能丰富的、高性能的Web应用程序。这个库包含了多种模块,包括DOM操作、事件处理、动画效果、Ajax交互、数据存储...
Yahoo! User Interface Library(简称yui) 是一个使用Javascrīpt编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序...YahooUI,搞WEB开发的朋友值得看一看,充分发挥出了javascript的功能
YAHOO UI 工具库,简称YUI,是雅虎推出的一款强大的前端开发框架,旨在简化Web应用程序的开发过程,提供了一系列高效、易用的工具和功能。本文将深入探讨YUI的核心组件及其在网页开发中的应用,特别是其独特的命名...
YAHOO.util.Dom是YUI库的核心组件之一,它提供了一系列高效、易用的函数,帮助开发者更便捷地处理DOM元素,从而实现丰富的用户界面。本文将深入探讨YAHOO.util.Dom的特性和使用方法。 一、YAHOO.util.Dom的基本概念...
**Yahoo UI库(YUI)**是Yahoo公司开发的一个开源JavaScript和CSS库,旨在帮助开发者构建功能丰富的、高性能的Web应用程序。它提供了大量的模块和组件,涵盖了从布局管理、事件处理到数据绑定等多个方面,使得前端...
**YUI 3.0.0:雅虎官方JavaScript库详解** YUI,全称Yahoo! User Interface Library,是雅虎公司开发的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展且易于使用的Web应用程序。YUI 3.0.0是这个库的一个...
YUI3的事件系统是其强大功能之一,它允许开发者监听和处理DOM元素及自定义事件。在“yui3-master.zip”的“event”模块中,包含了丰富的事件相关的API,如`Y.on`, `Y.fire`等,它们使得事件处理更加灵活且易于维护...
《Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools》是关于JavaScript框架的高级编程资源,包含了各种知名框架的源代码,这些框架包括Prototype、YUI(Yahoo! User Interface Library...
YAHOO工具库是YUI的核心组成部分之一,提供了多种实用功能来简化开发流程。 **1.1 YAHOO工具库提供的方法** - **namespace**:此方法用于创建全局命名空间,以便在项目中组织代码和避免命名冲突。例如,`YAHOO....