- 浏览: 157892 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
坏猪猪:
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 2569<!DOCTYPE HTML PUBLIC &qu ... -
yui3:widget
2011-06-18 11:36 3234Widget 类包含什么? widget类的结构和 ... -
YUI3:node2
2011-06-18 11:23 1YUI的Node功能为获取、 ... -
YUI3:plugin
2011-06-18 10:22 1436插件让你可以无侵入地 ... -
YUI3:Base
2011-06-16 20:39 1539Base类被设计成基础类 ... -
YUI3:Attribute
2011-06-16 10:30 1493YUI的Attribute功能允 ... -
YUI 3:Event
2011-06-15 22:23 15301. 要使用Event,首先要引入YUI3的种子文件: &l ... -
yui3 :Get 例子
2011-06-15 15:43 1293Getting a Script Node with JSON ... -
YUI:globle object
2011-06-13 11:52 1639YUI模块是YUI3中的单一核 ... -
YUI3:GET
2011-06-12 22:25 1635Get 工具提供了一个,在 ... -
YUI3:DataSource
2011-06-12 21:53 1245DataSource 工具,通过广泛支持的协议,为从不同的资源 ... -
YUI3:DataSchema
2011-06-12 20:57 889DataSchema Utility 应用一个给定的模式 ,以 ... -
YUI3:Cooke
2011-06-12 16:43 1199YUI Cookie工具为与cookies ... -
yui3 :datatype
2011-06-12 12:02 2058DataType工具为数据, ... -
YUI3:cache
2011-06-12 10:14 1236Cache 工具为存储名值对到本地JavaScript内存提供 ... -
YUI 3 周边
2011-06-11 16:46 10771.跨域请求:cross-domain 初步体验“AJAX不 ... -
YUI 3 :IO
2011-06-10 11:46 2888YUI IO是一个通讯工具,用于数据获取和内容更新,它使用X ... -
YUI 3 : json
2011-06-09 15:37 2626JSON (JavaScript Object ...
相关推荐
nodejs-yui 这是带有yui的node.js 首先在您的计算机上安装node.js。 将此文件解压缩到目录中。 从终端窗口进入目录并运行'npm install'可能是需要此权限的sudo用户权限。 运行“节点服务器”。 转到
newland 如果说前端是维斯特洛大陆,那么后端是更为古老... 还用node.js搭建了express.js这著名框架。 jquery Prototype mootools EXT dojo YUI underscore 风暴地 北境 西境 河湾地 多恩(南境) 谷地 河间 风息堡
use ( 'node' , 'yui-chosen' , function ( Y ) { Y . all ( '.yui-chosen' ) . each ( function ( ele ) { ele . plug ( Y . Chosen , { no_results_text : "Nothing found dummy." , disable_search_...
AlloyUI ... 浏览器支持 作为用户界面框架,我们确实关心浏览器支持。... IE 8+ :check_mark: 最新的 :check_mark: 最新的 :check_mark: 最新的 :check_mark: 最新的 :check_mark: ...使用Shifter构建AlloyUI和YUI3:
Yui,这是一个由node.js和discord.js构成的Discord机器人。 自托管机器人 我不支持或鼓励对该机器人进行自我托管。 此处的代码用于学习和提高透明度。 只要您遵守许可,我们都不会在乎您是否托管自己的Yui版本。 ...
YUI 3.5是一个大的改进版本,该版本的主要亮点包括:在Node.js中YUI可作为NPM模块正式引入了第2套皮肤“night”引入了App、Button、CSSButton、Handlebars、Pjax和TestConsole等组件重构了CSS网格,现在更加轻量级、...
#酒店价格日历 ####基于YUI3开发的价格日历组件 @name:Y.PriceCalendar @requires:['node', 'base-base', 'event-mouseenter']
一个非常轻巧的Miner Node.js模块。产品特点它允许您压缩JavaScript,CSS和HTML文件。 JavaScript:CSS:HTML: 命令行界面:安装npm install @node-minify/core # OR yarn add @node-minify/core 并安装所需的压缩...
JS项目管理JavaScript 项目管理(例如 gulp、bower、yui、node、npm 等)
除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。...直到最近两三年,随着 Dojo、YUI3、Node.js 等社区的推广和流行,前端的模块化开发理念才逐步深入人心。
除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。...直到最近两三年,随着 Dojo、YUI3、Node.js 等社区的推广和流行,前端的模块化开发理念才逐步深入人心。
用于移位器的 Node.js API 满足 ClicRDV 需求的自定义移位器构建 html 模板预处理(yui 模板微型或把手) sass + 指南针转译 例子: var shifter = require ( 'clicrdv-shifter' ) ; var path = 'any_file_in_...
前端开源库-node-minify-custom-fork节点小型定制fork,基于babili/yui压缩器/google闭包编译器/uglifyjs2/sqwish/clean css/csso的javascript/css小型化器
安装使用npm: $ npm install --save unreset-css 或者,手动下载:进口萨斯: .unreset { @import ' node_modules/unreset-css/unreset ' ;} Node-sass: 如果您使用的是 ,请跳至步骤2。否则,需要将unrese
Yeti 是一个浏览器上的 JavaScript 测试运行器,基于 Node.js。你可以使用 Yeti 来测试 YUI 每个部件。 安装和使用: $ npm install -g yeti $ yeti test/*.html Connected to http://localhost:9000 Agent ...
function onshengchange(e) { var sheng = Y.Node.get(‘#’+config.sheng).get(“value”); var speccode = Y.Node.get(‘#’+config.speciality); var years = Y.Node.get(‘#’+config.years); var timesli
PhotosNear.me 是一个可以让你查看附件人员拍摄的照片,是采用 JavaScript 开发的 Web 服务,基于 Yahoo YUI 框架、YQL 和 Flickr 构建的。 运行需要 Node.js 的支持: npm install node server.js 在线演示:...
3 js && es6 http/ajax/rest git/svn/issues/pr markdown 前端框架 模块化加载seajs\requirejs\commonjs mvc/mvvm Bootstrap jQuery/Extjs/Dojo/Mootools/Yui Backbone Angular 移动端 h5/localstorage/websocket/...
Java 运行时(用于 YUI 压缩器,资产管道配置为使用) 勇气和荣誉 安装宝石: bundle install 安装和进行前端测试: npm install -g karma npm install -g protractor 安装并运行 : npm install -g bower ...
Ypromise 是 Yahoo 公司开发的 Promise 支持库,为低版本 JavaScript... 从 npm 中获取该库对应的 Node.js 模块 作为 AMD 模块使用 作为 YUI 库的一部分使用 标签:Ypromise