YUI学习笔记（一）了解YUI

一.认识YUI

1.概述

Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。YUI 包含完整的说明文件。它包含了两种元件: 工具与控件，和一些 CSS 资源。

2.功能

YUI 包含完整的说明文件。它包含了两种元件：工具与控制项和一些 CSS 资源。

（1）工具

动画：协助达成位置移动、大小改变、透明度和其他的网页效果。

浏览器历史纪录管理工具：协助网页程式使用浏览器之上一页与书签工具。

连线工具：协助管理跨浏览器的 XMLHttpRequest 功能。他也整合了表单传送、错误处理、callback和档案上传。

资料源：提供通用可配置介面给其他组件与种种资料，如从简单的JavaScript阵列到线上伺服器，间透过XHR来互动。

元素：为DOM里的HTMLElements提供包装样式，从而简化一般工作如加入监听者(listener)、对DOM操作、以及存取属性。

DOM：为一般的DOM脚本作业提供帮助，它包括元素定位与CSS样式管理。

即拖即放：为即拖即放的开发(建立与管理可在网页上拖放的物件)提供帮助。

事件：提供开发者对浏览器事件，如滑鼠点击与键盘按键，的简易、安全之存取。它也提供自订事件物件以应付用户出版与订阅自订事件的需求。

（2）控制项

自动完成：为用户文字输入的互动提供自动完成功能 (建议列表与随打击找的功能)。它支援广泛的资料源格式。它也透过XMLHttpReqeust支援伺服器端资料源。

按钮：让用户制作功能像传统HTML表单按钮般多样、图形化的按钮。

月历：图形式、动态的控制，用于日期选择。

容器：支援大量的DHTML视窗规范包括提示框(Tooltip)、面板、对话框、简易对话框、模组与覆盖层(Overlay)。

资料表：简单且强大的应用程式介面用来显示网页上萤幕阅读器可存取的表资料。值得关注的功能包括可排序的栏、分页、卷轴、行选取、可放大缩小的栏、以及线上编辑。

纪录器：提供一种快速简单的方式来写入日志讯息到Mozilla Firefox的Firebug扩充插件画面终端、或者Safari JavaScript终端。

表单：提供简易产生滑鼠移过弹出选单的方式。

滑块：提供一般性滑块组件让用户可在有限范围内以单轴或者双轴选择值。

分页检视：提供以分页方式来检视内容。

树状检视：产生目录树，其下节点可以缩放。

（3）CSS资源

CSS页面网格:七种基本线框外带附加组件，支援超过1000种不同网页布局。

标准CSS字型集: 标准化跨浏览器字型家族与尺寸设定。

标准CSS重设: CSS宣告，用于移除页边空白并标准化跨浏览器对显示一般元素的问题。　

二.YUI运行环境

1.YUI库的下载

YUI是一个轻量级的框架，所以他的运行环境搭建起来很简单。

你可以在YUI的官网上面下载YUI库：http://yuilibrary.com/download/yui3/

2.YUI库的引入

与jQuery相似，要在页面中使用YUI，我们必须使用HTML的脚本标记<script>，并且通过这个标记中设定库文件的位置以及文件名来实现YUI的引入。例如：

<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>

或者

<script src="下载的YUI的存放路径"></script>

三.YUI的工作原理

与jQuery相似，YUI在实际应用中基本上是依靠他的选择器筛选匹配的页面元素对象，并调用它提供的功能函数来完成我们所需的工作。

1.YUI的元素选择

(1)Y.one()

Y.one()选择器用于选择那些在页面中独一无二的元素，例如：

Y.one('#container');//选择了id="container"的元素

Y.one(body);//选择了body标签

(2)Y.all()

Y.all()选择器用于选择一类元素，例如：

Y.all(".demo");//选择了class="demo"的元素

……

 

在了解了怎么选择元素之后，我们就可以对特定的元素进行操作啦~~

 

这一系列的学习笔记是由案例驱动的，我也是刚刚接触YUI，目前可供学习的中文资料很少，我是根据YUI官网上的实例来一边学习，一边记录下学习的心得，也许有很多不准确的地方，希望看见这一系列的读者见谅，我们相互沟通，一起学好YUI吧~~