1.Include Dependencies:
<script type="text/javascript" charset="utf-8"
src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js">
</script>
2.The YUI Instance:
YUI().use('node', function(Y) {
// Node available, and ready for use.
});
3.Getting a Node:
YUI().use('node', function(Y) {
var node1 = Y.one('#main');
var node2 = Y.one(document.body);
});
4.Using Node:
4.1Accessing Node Properties:
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.2DOM Events
YUI().use('node', function(Y) {
Y.one('#demo').on('click', function(e) {
e.preventDefault();
alert('event: ' + e.type + ' target: ' + e.target.get('tagName'));
});
});
4.3DOM Methods
YUI().use('node', function(Y) {
var node = Y.one('#demo');
var node2 = node.appendChild(Y.one('#foo p'));
node2.addClass('bar');
});
4.4Using NodeList
YUI().use('node', function(Y) {
Y.all('#demo li').addClass('bar');
});
YUI().use('node', function(Y) {
Y.one('#demo').get('children').addClass('bar');
});
4.5Node Queries
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');
}
});
4.6ARIA Support
YUI().use('node', function(Y) {
var node = Y.one('#toolbar').set('role', 'toolbar');
});
YUI().use('node', function(Y) {
Y.one('#rootmenu').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });
});
5.method
myNode.addClass
NodeList[methodName], NodeList.each, or Y.each
Y.guid
Y.one Note strings are now treated as selectors (e.g. "Y.one('#foo')" vs. "YAHOO.util.Dom.get('foo')")
myNode.ancestor
myNode.ancestor
myNode.ancestor
myNode.get('children')
myNode.all
myNode.get('viewportRegion')
myNode.get('docHeight')
myNode.get('docScrollX')
myNode.get('docscrollY')
myNode.get('docWidth')
myNode.all
myNode.all
myNode.one
myNode.one
myNode.one
myNode.one
myNode.next
myNode.next
myNode.previous
myNode.previous
myNode.get('region')
myNode.getStyle
myNode.get('winHeight')
myNode.get('winWidth')
myNode.getXY
myNode.getXY
myNode.getXY
myNode.hasClass
myNode.inDoc
myNode.insert
myNode.insert
myNode.contains (Note myNode.contains(myNode) === true)
myNode.removeClass
分享到:
相关推荐
JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言,被ECMA国际定义为国际化标准——ECMAScript。JavaScript具有使用局限性。... 本书适用于YUI工程师,也可以作为教材供高校师生学习使用。
这是由于先前的压缩器(jekyll-press)不兼容CSS3而创建的,这让我皱了皱眉。 注意:这是我正在学习的第一个宝石,因此非常感谢您提供反馈。 **现在,仅在环境中设置了JEKYLL_ENV =“ production”时,此minifier...
YUI团队不仅代码写的漂亮,书也做的很棒! 这本书无论对于YUI初学者或者资深工程师,都非常值得一读,给出... 当然,YUI的官方网站(http://yuilibrary.com)也是学习YUI的最佳途径之一,那里能找到更多可执行的示例。
基于雅虎YUI3实现,界面简洁清晰,功能非常强大,不仅可以显示单日历,双日历,三日历,甚至四日历,还可以显示节日信息以及指定日期显示范围,非常值得学习和使用的,推荐下载。
此处的代码用于学习和提高透明度。 只要您遵守许可,我们都不会在乎您是否托管自己的Yui版本。 但是,我们不会花时间来帮助设置它。 作者 Sensei-全部编码 是的,我没有其他所有人单独编码所有内容:( 执照 此项目...
之前在Part 1简单介绍了Veiw和JSONView。...3.JSONView的使用方式;4.获取XML/JSON的fields值与分页 演示地址 【View之定义】 A View is generally used to build a quick template-based display o
异步取节点的思路是这样的: 1、先定义一个初始化节点(也可以不定义,看个人需求) 2、yui-ext根据该节点id请求服务器,获得子节点各属性 3、循环 特点:可以在上一级目录中,在服务器端预先将该节点是否有子节点...
基于雅虎YUI3实现,界面简洁清晰,功能非常强大,不仅可以显示单日历,双日历,三日历,甚至四日历,还可以显示节日信息以及指定日期显示范围,非常值得学习和使用的,推荐下载。
phpDesigner 8 支持所有您喜爱的 php 开发框架,但也喜欢流行的 JavaScript 框架jQuery,Ext JS、 YUI、 道场、 MooTools 和原型! 快速、 功能强大、 直观的学习和使用 ! 全面爆发的 PHP5,HTML5,CSS3 和 ...
一、简介 1.1、概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们...
《编写可维护的JavaScript》适合前端开发工程师、JavaScript程序员和学习JavaScript编程的读者阅读,也适合开发团队负责人、项目负责人阅读。运用本书中讲述的技巧和技术,可以使JavaScript团队编程从侠义的个人...
splumb是Jquery的一个插件,它能够让你用动态的或静态的链接来连接html界面上行的...目前该插件支持三个javascript库,有Jquery、MooToos、Yui3,jsplumb代码是开源的,并且是麻省理工学院许可,由google进行代码托管。
《编写可维护的JavaScript》适合前端开发工程师、JavaScript程序员和学习JavaScript编程的读者阅读,也适合开发团队负责人、项目负责人阅读。运用本书中讲述的技巧和技术,可以使JavaScript团队编程从侠义的个人...
1. 960gs 960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程,使工作简单高效。 2. YUI 2: Grids CSS 芒果曾经介绍过由雅虎开发小组...
2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户...
7.4. yui自远方来,不亦乐乎 7.4.1. Basic,基础 7.4.2. Handles,把手 7.4.3. On Top,总在上边 7.4.4. Proxy,代理 7.4.5. Groups,组 7.4.6. Grid,网格 7.4.7. Circle,圆形 7.4.8. Region,范围 8. 哭泣吧!...
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/...
1.前台结合Lucene的搜索引擎功能,使得数据搜索更快; 2.新增加采集功能,采集时图片下载,flash下载功能,默认配置的是南海网分类信息的采集规则; 3.该代码简洁,完全开源,可以与网博多款新闻系统无缝整合; 4....
其实从ext3开始就支持各种方式的统计,且有控件支持excel导出。 功能特点 高性能, customizable UI widgets Well designed, documented and extensible Component model Commercial and Open Source licenses ...
2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户...