- 浏览: 160256 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
坏猪猪:
Document doc = Jsoup.connect(ur ...
android中jsoup解析html的几个例子 -
我很温柔但是不丑:
你好。看了您的例子,实践了一下,有问题啊?没有解析出来数据?怎 ...
android中jsoup解析html的几个例子
YUI的Node功能为获取、创建、操作DOM节点提供很易懂的方式。每个Node实例代表一个DOM节点,每个NodeList代表一系列DOM节点。我们可以管理Node的className(myNode.addClass(‘foo’)) 和样式(myNode.setStyle(‘opacity’, 0.5))、可以创建DOM元素(Y.Node.create(‘foo’))等。
引入YUI种子文件和配置YUI实例就不累述了,详见 YUI 3: YUI 全局对象。
获取Node实例
Node是YUI3中DOM操作的接口。Node API是基于标准的DOM API的,它提供一些便捷的属性和方法使常用的DOM操作变得更简单,实现代码也更简洁。那些熟悉标准的DOM API的开发者会发现Node实例非常熟悉。
获取Node实例最简单的办法就是使用YUI实例的“one”方法。Y.one方法接收页面上的DOM元素作为参数,也接收“选择字符串”作为参数。如果它使用“选择字符串”作为参数,会得到“选择字符串匹配的第一个元素”。
注意:默认不包含CSS3选择器支持,要得到CSS3选择器支持,你需要引入“selector-css3”模块。
下面的代码展示获取Node实例的两种方式:
YUI().use('node', function(Y) { var node1 = Y.one('#main'); var node2 = Y.one(document.body); });
使用Node功能
下面的内容详细说明如何使用YUI的Node共功能。包含如下几个部分:
- 访问Node实例的属性
- DOM事件
- DOM方法
- Node List(节点集)
- Node Queries(节点查询)
访问Node实例的属性
Node实例内的DOM节点的属性可以通过Y.Node实例的set和get方法访问。简单类型的属性(string、number、boolean)直接传入/传出Node实例的DOM节点,原来返回DOM节点的属性会返回Y.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); });
DOM事件
使用on方法为Node实例添加事件监听器。通过监听函数第一个参数传入的事件对象是一个event facade,这个event facade和Node API一样,将浏览器差异统一化,提供一个基于W3C标准的标准API,与DOM事件配合工作。原来返回DOM节点的事件对象属性将返回Y.Node实例。
YUI().use('node', function(Y) { Y.one('#demo').on('click', function(e) { e.preventDefault(); alert('event: ' + e.type + ' target: ' + e.target.get('tagName')); }); });
DOM方法
Y.Node API提供了所有的你能想到的DOM方法,还有提供了一些额外的执行常见操作的方法。和上述的属性及事件一样,原来返回DOM节点的方法将返回Y.Node实例。
使用 NodeList
Y.NodeList提供了和Node类似的操作多个节点的单一接口。NodeList API是Node API的简化版本,允许批量进行常见操作。
Y.all方法是获取NodeList最简单的方法。
YUI().use('node', function(Y) { Y.all('#demo li').addClass('bar'); });
Node Queries
选择器查询是很强大的操作、测试节点的方法。所有的Y.Node实例都支持“one”、“all”、“test”方法。
YUI().use('node', function(Y) { var node = Y.one('#demo'); var node2 = node.one('p'); if (node2) { // might be null node2.addClass('bar'); // adds "bar" to the first paragraph descendant of #demo } node.all('p').addClass('bar'); // adds "bar" to all paragraph descendants of #demo if (node.test('.foo.bar')) { // "if node has both foo and bar classNames" node.removeClass('bar'); } });关于选择器查询更多内容,请查看W3C规范:
注意:默认不包含CSS3选择器支持,要得到CSS3选择器支持,你需要引入“selector-css3”模块。
ARIA支持
Node接口有ARIA支持。当和Node内置的CSS选择器查询一起使用时,很容易应用、管理一个Node实例的 roles,states 和 properties 。
ARIA Roles,States 和 Properties提升了HTML的语义。让开发者能更精确地描述页面某板块的目的,或者提升DHTML widget对需要辅助工具(如screen reader)的用户的使用体验。
通过set方法应用ARIA Roles,States 和 Properties。比如,把id为toolbar的<div>的role设置为“toolbar”。
YUI().use('node', function(Y) { var node = Y.one('#toolbar').set('role', 'toolbar'); });
Node内置的CSS选择器查询支持、链式方法、在一个Node实例上设置多个属性的能力,让我们在创建有多很多树状子目录的DHTML widget时,很容易地应用ARIA Roles,States 和 Properties。比如,要创建一个menubar widget,我们需要将“menubar”角色指定给代表menubar的根DOM元素,再把“menu”角色指定给代表“menu”(菜单)的根DOM元素。然后,因为菜单项默认是隐藏的,每个菜单都需要指定aria-hidden状态。Node接口让我们用一行代码就完成上述操作。
YUI().use('node', function(Y) { Y.one('#rootmenu').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true }); });
功能迁移表
Node上有YAHOO.util.Dom大部分的功能。
注意:在下面的示例代码中,myNode是一个Node实例。以前返回DOM节点的方法在这里返回Node实例。
addClass | myNode.addClass |
batch | NodeList[methodName], NodeList.each, or Y.each |
generateId | Y.guid |
get | Y.one Note strings are now treated as selectors (e.g. “Y.one(‘#foo’)” vs. “YAHOO.util.Dom.get(‘foo’)”) |
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 |
发表评论
-
yui3:widget 例子_widget-extend
2011-06-26 16:07 2596<!DOCTYPE HTML PUBLIC &qu ... -
yui3:widget
2011-06-18 11:36 3273Widget 类包含什么? widget类的结构和 ... -
YUI3:node2
2011-06-18 11:23 1YUI的Node功能为获取、 ... -
YUI3:plugin
2011-06-18 10:22 1464插件让你可以无侵入地 ... -
YUI3:Base
2011-06-16 20:39 1574Base类被设计成基础类 ... -
YUI3:Attribute
2011-06-16 10:30 1546YUI的Attribute功能允 ... -
YUI 3:Event
2011-06-15 22:23 15541. 要使用Event,首先要引入YUI3的种子文件: &l ... -
yui3 :Get 例子
2011-06-15 15:43 1332Getting a Script Node with JSON ... -
YUI:globle object
2011-06-13 11:52 1671YUI模块是YUI3中的单一核 ... -
YUI3:GET
2011-06-12 22:25 1698Get 工具提供了一个,在 ... -
YUI3:DataSource
2011-06-12 21:53 1326DataSource 工具,通过广泛支持的协议,为从不同的资源 ... -
YUI3:DataSchema
2011-06-12 20:57 913DataSchema Utility 应用一个给定的模式 ,以 ... -
YUI3:Cooke
2011-06-12 16:43 1252YUI Cookie工具为与cookies ... -
yui3 :datatype
2011-06-12 12:02 2124DataType工具为数据, ... -
YUI3:cache
2011-06-12 10:14 1273Cache 工具为存储名值对到本地JavaScript内存提供 ... -
YUI 3 周边
2011-06-11 16:46 11331.跨域请求:cross-domain 初步体验“AJAX不 ... -
YUI 3 :IO
2011-06-10 11:46 2958YUI IO是一个通讯工具,用于数据获取和内容更新,它使用X ... -
YUI 3 : json
2011-06-09 15:37 2655JSON (JavaScript Object ...
相关推荐
《深入理解YUI3:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...
这篇博文“YUI3 中tree的两种实现”探讨了如何在YUI3中创建和管理树形结构。 1. **YUI3 TreeView组件** YUI3 TreeView组件是YUI3核心库的一部分,它允许开发者创建交互式的树结构。这个组件支持节点的添加、删除、...
3. **CSS样式工具**:YUI3包含了一套CSS工具,如样式类名管理器(YUI.addClass, YUI.removeClass等),这有助于在JavaScript中动态控制元素的样式。 4. **DOM操作**:YUI3提供了丰富的DOM操作接口,如查找元素(YUI...
1. **DOM操作**:YUI的Node和Selector模块提供了高效的DOM操作接口,包括选择、操作、遍历DOM元素。 2. **Ajax**:IO模块用于实现异步数据请求,支持JSONP、XHR等通信方式。 3. **表格与表单**:DataTable和Form模块...
YUI 3包含了一系列核心模块,如Event(事件处理)、Node(DOM操作)、IO(异步数据交互)等,同时还有许多可选的组件,如Grids(表格)、Charts(图表)、Form(表单元素)等,覆盖了前端开发的多个方面。...
要使用Node模块,首先需要引入YUI3的种子文件,并通过`YUI().use()`加载`node`模块。 ```html <script src="yuiload/yui-min.js"> YUI().use('node', function (Y) { // 使用Node API的代码 }); ``` ##### Node...
3. **Event(事件)**:YUI的事件系统支持事件监听、事件代理和事件分发,使得事件处理更加高效和灵活。 4. **Animation(动画)**:提供了平滑的CSS和属性动画,可以创建各种复杂的过渡效果。 5. **DataSource...
nodejs-yui 这是带有yui的node.js 首先在您的计算机上安装node.js。 将此文件解压缩到目录中。 从终端窗口进入目录并运行'npm install'可能是需要此权限的sudo用户权限。 运行“节点服务器”。 转到
YUI 3的设计目标是模块化和轻量化,它引入了模块系统,使得开发者可以根据需要只加载必要的组件,从而降低页面加载时间。在3.1.2版本中,这一特性得到了充分的体现。源码中的每个模块都是独立的,通过AMD...
这些方法与jQuery类似,但YUI3的设计更加面向对象,如`Node`和`Selector`模块,它们提供了更加高效和灵活的方式来处理DOM元素。 **事件处理** YUI3的事件系统支持DOM事件绑定、解绑和触发,以及自定义事件。它还...
- **Node**: Node模块提供了对DOM节点的操作,如选择、创建、修改和删除等,简化了DOM操作。 - **Anim**: 动画模块,用于实现各种复杂的动画效果,包括平滑的CSS属性过渡和JavaScript对象属性变化。 - **IO**: IO...
- `YAHOO.util.Dom.getElementsBy(method, tagName, rootNode)`:在指定根节点下搜索满足条件的元素,支持传入自定义过滤函数。 **2.2 样式控制和访问** 提供了诸如`addClass`, `removeClass`, `toggleClass`, `...
### YUI 3 Cookbook 关键知识点解析 #### 一、YUI 3 概述与书籍价值 **YUI 3** 是一个由雅虎开发的JavaScript库,它提供了丰富的功能来帮助开发者创建高质量的Web应用程序。这本书《YUI 3 Cookbook》由Evan Goer...
3. **CSS样式和布局**:YUI包含一套响应式设计的CSS框架,如Grids布局系统,帮助开发者快速创建响应式的网页布局。 4. **数据管理**:YUI提供了Model、ModelList和Store等组件,用于数据的存储、管理和同步,与...
4. **自定义导航**:可以使用YUI的Node API创建自定义导航元素,并绑定相应的事件处理函数。 5. **控制幻灯片**:YUI Slideshow提供了一系列方法供开发者控制幻灯片的播放,如`next()`、`prev()`、`jumpTo()`等。 ...
3. **学习价值**:对于前端开发者和Java开发者而言,阅读YUI Compressor的源码可以帮助他们更好地理解JavaScript和CSS的压缩过程,了解代码优化的技术,这对于提升自己的编程技能非常有益。 **二、YUI Compressor ...
3. **Node API**:Node模块提供了一组强大的方法来操作DOM元素,如创建、查找、修改和管理DOM节点。了解如何使用`Y.Node`和`Y NodeList`对象可以极大提高你的DOM操作效率。 4. **事件系统**:YUI的事件系统允许你...
1. **模块**:YUI由多个模块组成,如Core(核心)、Event(事件)、Node(DOM节点操作)、IO(异步数据请求)等。每个模块都提供了一组相关功能。 2. **类**:每个模块下有若干个类,这些类定义了对象的行为和属性...
### 经典的YUI 示例中文文档 #### YUI概述 YUI(Yahoo User Interface Library)是由雅虎公司开发的一款免费、开源的JavaScript库。它包含了一系列强大的UI控件和实用工具,旨在帮助开发者轻松地构建高性能的Web...
3. **DOM操作** Node模块提供了便捷的DOM操作接口,可以快速地选取、创建、修改DOM元素,增强了JavaScript对HTML文档的操作能力。 4. **CSS样式管理** YUI的StyleSheet模块允许开发者动态修改CSS样式,实现页面...