欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

了解YUI【二】(转) 博客分类: YUI yuiJavaScript

程序员文章站 2024-02-06 20:16:58
...

YUI之Node

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

 

1.先引入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”模块。

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方法实现查找第一个匹配元素,查找所有匹配元素,测试是否存在匹配元素的功能

 

转自:http://blog.sina.com.cn/s/blog_632d19d50100rztu.html

相关标签: yui JavaScript