浏览 4914 次
|
锁定老帖子 主题：YUI 3 学习笔记（2）- Node
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 作者 | 正文 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
发表时间：2010-03-01
最后修改：2010-04-05
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的对应关系如下：
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 返回顶楼 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
发表时间：2010-11-26
YUI有哪些优点啊，跟JQuery相比有哪些区别？
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 返回顶楼 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
发表时间：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部分根本就没有执行，请问是什么原因呢？ |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 返回顶楼 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
发表时间：2011-02-10
yui-min.js的路径对吗？
在firefox里看看yui代码加载进来了吗？ |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 返回顶楼 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
发表时间：2011-02-11
yiyu，谢谢。
在IE下没问题，在FF下如果将HTML文件和yui-min.js文件放在服务器下就没有问题，看来其相对路径FF不知道如何打开。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 返回顶楼 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
