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

YUI 3 学习笔记(2)- Node

阅读更多
Node是用来操作DOM node的工具,实际上每一个Node实例都代表着一个DOM node,每一
个NodeList都代表着一组DOM node.

从YUI2.x到YUI3.0相关的api发生了一些变化,具体可以参见本文的最后部分。

1. 要使用Node,首先要引入YUI3的种子文件:
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

   然后加载相应模块:
YUI().use('node', function(Y) {
});


2. 获得Node
  可以使用YUI.one()获取Node,该方法的参数可以是一个Node,也可以是一个选择器(selector),
在使用选择器时,返回第一个匹配的元素。默认情况下css3选择器不被支持,如果要使用,需要
加载“selector-css3”模块。关于css3 selector可以参见这里:
http://www.w3.org/TR/css3-selectors
以下是使用YUI.one()的例子:
YUI().use('node', function(Y) {
    var node1 = Y.one('#main');
    var node2 = Y.one(document.body);
});


3. 访问Node属性
   可以使用Node的set,get方法访问Node的属性,需要注意的是如果返回节点的话返回的是
YUI Node而不是DOM node,这一点在其他地方也要注意。
以下是相关的例子:
YUI().use('node', function(Y) {
    var node = Y.one('#foo');
    var parent = node.get('parentNode'); // Node instance
    var html = 'I am "' + node.get('id') + '".';
    html += 'My parent is "' + parent.get('id') + '"';
    node.set('innerHTML', html);
});


4. 事件监听
  可以用on方法添加事件监听器:
YUI().use('node', function(Y) {
    Y.one('#demo').on('click', function(e) {
        e.preventDefault();
        alert('event: ' + e.type + ' target: ' + e.target.get('tagName')); 
    });
});


5. DOM方法
  Y.Node提供了所有DOM node的原有方法
 
6. NodeList的使用
  NodeList提供了与Node相似的API,但是它的处理时对所有NodeList中的所有Node作用的。
  例如如下代码对demo的所有子元素添加'bar'类:
  YUI().use('node', function(Y) {
    Y.one('#demo').get('children').addClass('bar');
});


7. 查找
  Node提供one,all,test方法分别实现查找第一个匹配元素,查找所有匹配元素,测试
是否存在匹配元素的功能

8. YUI 2.x和YUI 3.x的对应表
   YUI2.x的Node功能是由YAHOO.util.Dom提供的,其与YUI3.0的对应关系如下:
2.x (via YAHOO.util.Dom)3.0
addClass myNode.addClass
batch NodeList[methodName], NodeList.each, or Y.each
generateId Y.guid
get Y.one
getAncestorBy myNode.ancestor
getAncestorByClassName myNode.ancestor
getAncestorByTagName myNode.ancestor
getChildren myNode.get('children')
getChildrenBy myNode.all
getClientRegion myNode.get('viewportRegion')
getDocumentHeight myNode.get('docHeight')
getDocumentScrollLeft myNode.get('docScrollX')
getDocumentScrollTop myNode.get('docscrollY')
getDocumentWidth myNode.get('docWidth')
getElementsBy myNode.all
getElementsByClassName myNode.all
getFirstChild myNode.one
getFirstChildBy myNode.one
getLastChild myNode.one
getLastChildBy myNode.one
getNextSibling myNode.next
getNextSiblingBy myNode.next
getPreviousSibling myNode.previous
getPreviousSiblingBy myNode.previous
getRegion myNode.get('region')
getStyle myNode.getStyle
getViewportHeight myNode.get('winHeight')
getViewportWidth myNode.get('winWidth')
getX myNode.getXY
getY myNode.getXY
getXY myNode.getXY
hasClass myNode.hasClass
inDocument myNode.inDoc
insertAfter myNode.insert
insertBefore myNode.insert
isAncestor myNode.contains (Note myNode.contains(myNode) === true)
removeClass myNode.removeClass
replaceClass myNode.replaceClass
setStyle myNode.setStyle
setX myNode.setXY
setY myNode.setXY
setXY myNode.setXY
分享到:
评论
5 楼 lclcr 2011-02-11  
yiyu,谢谢。
在IE下没问题,在FF下如果将HTML文件和yui-min.js文件放在服务器下就没有问题,看来其相对路径FF不知道如何打开。
4 楼 yiyu 2011-02-10  
yui-min.js的路径对吗?
在firefox里看看yui代码加载进来了吗?
3 楼 lclcr 2011-02-10  
<html>
<head>
<title>测试YUI</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
alert("begin");
YUI().use('node', function(Y) { 
var node1 = Y.one('#id_but');
alert(node1);
}); 
alert("end");
</script>
    </head> 
    <body>
<input type="button" nam="n_but" id="id_but" value="click"/>
<input type="button" nam="s_but" id="id_sbut" value="stop"/>
<br/>
</body>
</html>
我的YUI部分根本就没有执行,请问是什么原因呢?
2 楼 tyc1920 2010-11-26  
YUI有哪些优点啊,跟JQuery相比有哪些区别?
1 楼 200830740306 2010-03-06  
   学习了

相关推荐

    yui-yuidoc-yuidoc-50-529-gc631758

    【标题】"yui-yuidoc-yuidoc-50-529-gc631758" 指向的是一个关于 Yahoo User Interface Library (YUI) 和 YUIDoc 的特定版本或修订版。YUI 是一个开源的 JavaScript 库,提供了一系列模块化的工具,用于构建富有交互...

    yuicompressor-maven-plugin

    **yuicompressor-maven-plugin详解** `yuicompressor-maven-plugin`是一款强大的Maven插件,主要用于优化前端资源,特别是JavaScript和CSS文件。这个插件是基于YUI Compressor,一个由Yahoo开发的开源工具,它能...

    yui-compressor 2.4.6 2011-04-15发布YUI

    yui compressor 2.4.6 发布日期:2011-04-15 用例: java -jar yuicompressor-2.4.6.jar myfile.js -o myfile-min.js

    eclipse yuicompressor-maven-plugin

    ### 2. YUI Compressor YUI Compressor是由雅虎开发的一款开源工具,用于压缩JavaScript和CSS代码,通过删除空格、注释和不必要的字符,从而减小文件大小,提升网页加载速度。它支持两种压缩模式:混淆(minify)和...

    yui3-master.zip

    通过“yui3-master.zip”这个压缩包,开发者不仅可以了解到YUI3的基本架构,还可以通过阅读源码来学习和掌握JavaScript的最佳实践,提升自身的前端开发能力。无论是初学者还是经验丰富的开发者,都能从中受益匪浅。...

    yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件.zip

    yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...

    YUI-EXT使用详解

    通过提供的压缩包文件"ext 2.rar"、"ext教程.rar"和"yui_2.3.1.zip",你可以获得YUI-EXT的源码、文档和示例,进一步学习和研究其使用方法。这些资源将帮助你深入理解如何集成YUI-EXT到项目中,如何创建和配置组件,...

    yuicompressor-yui compressor

    C:\java -jar yuicompressor-2.4.2.jar editor.js -o editor2.js 参数说明: yuicompressor-2.4.2.jar 为工具包jar editor.js为要压缩的js -o editor2.js为压缩完成后的文件名 压缩率: 对resources下js...

    Yui_ext 学习笔记

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

    yui_2.9.0前端UI

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

    支持中文的 YUI Compressor Ant 任务驱动 - Shane版

    如果用 Ant 执行 YUI Compressor 任务时出现了中文乱码,请下载此资源,用这里边 dist 目录里边的 YUIAnt-zh_CN.jar 替换掉官方提供的 YUIAnt.jar ,然后在对应的 Ant 任务中,用 encoding="xxx" 指定源文件的字符...

    YUI文件定位器Locator-Yui.zip

    Locator-Yui 是 YUI 文件定位器插件。它可以与 Locator 组件(from Yahoo! to shift YUI' modules)集成使用,生成 YUI Loader 元数据。已编译的模块则可以通过 express-yui在服务器和客户端中使用。 标签:...

    webstorm_phpstorm_yuicompressor-2.4.8.jar

    2. **配置File Watcher**:在IDE中,选择`File` &gt; `Settings`(Windows/Linux)或`WebStorm` &gt; `Preferences`(Mac),然后导航到`Tools` &gt; `File Watchers`。 3. **添加新的File Watcher**:点击右上角的"+"按钮,...

    前端开源库-node-minify-custom-fork

    前端开源库-node-minify-custom-fork节点小型定制fork,基于babili/yui压缩器/google闭包编译器/uglifyjs2/sqwish/clean css/csso的javascript/css小型化器

    yuicompressor-2.4.8.jar

    将editor.js进行压缩 命令为: C:\java -jar yuicompressor-2.4.2.jar editor.js -o editor2.js 参数说明: yuicompressor-2.4.2.jar 为工具包jar editor.js为要压缩的js -o editor2.js为压缩完成后的文件名 压缩率...

    前端开源库-yui-compressor

    npm install yui-compressor ``` 安装完成后,可以使用以下命令对JavaScript或CSS文件进行压缩: ```bash java -jar path/to/yuicompressor.jar --type js input.js -o output.min.js java -jar path/to/yui...

    yui3-3.17.2最新版

    YUI 3包含了一系列核心模块,如Event(事件处理)、Node(DOM操作)、IO(异步数据交互)等,同时还有许多可选的组件,如Grids(表格)、Charts(图表)、Form(表单元素)等,覆盖了前端开发的多个方面。...

    Yahoo YUI2.7中文API 完整版

    2. **跨浏览器兼容性**:YUI 对多种浏览器进行了优化,包括 Internet Explorer、Firefox、Chrome、Safari 和 Opera,确保在不同环境下表现一致。 3. **强大的 DOM 操作**:提供了一系列 DOM 操作接口,如选择元素、...

    YUI 3 Cookbook

    - **示例**: `&lt;script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"&gt;&lt;/script&gt;` - **用途**: 快速集成到现有项目中。 **1.3 Identifying and Loading Individual Modules** - **关键**: 识别并加载...

Global site tag (gtag.js) - Google Analytics