YUI3学习笔记 ( 3 )

摘要:
YUI终于有了批量处理styles_T的方法。编写一行setStyle()或在css中定义类并更改className的日子一去不复返了。appendChild()方法。例如,myNode的返回值。append是myNode,而myNode的返回值。appendChild是newNode<5>尽管。create()方法很容易让人联想到原生文档。createElement()方法,两者之间存在差异。create()方法返回Node和文档。createElement()返回DOM。官方api文档中说。inRegion()方法将返回一个包含位置信息的对象。事实上,这是错误的。inRegion()方法返回布尔类型<8>。insert()方法和。insertBefore()方法。注意:dom类仍然是通过get获得的,而不是get。
[Node类]

<1>.scrollIntoView()方法。这个方法的效果就是让指定的node实例出现在窗口内,和锚点定位的效果相近。在不同浏览器下表现不同。在FF下,指定的node节点出现在窗口的底部,也就是“刚刚可见”;在ie6,ie7下无效果,在ie8下出现在窗口顶部,和锚点定位效果一模一样。因为兼容不好,所以这个方法不推荐使用。

<2>.setStyles()方法。YUI终于有了批量处理样式的方法了 T_T,之前写一排setStyle(),或者需要在css中定义个类,然后改变className的日子一去不复返了。虽然后者仍然很有用,但有时仅仅是过渡用的,只需要设内置的样式即可,有了setStyles(),我们就多了一种选择。

<3>.append()方法和.appendChild()方法。.append()和.appendChild()方法都可以为Node实例添加一个子元素,他们都接受Node实例,DOM对象作为参数,但前者还接受字符串,后者不接受,比如myNode.append("<p>hello world</p>")是对的,myNode.appendChild("<p>hello world</p>")就会报错了。另外,官方api文件说.append()方法是void类型,没有返回值,而.appendChild()方法有Node类型的返回值,其实是错误的。.append()方法也会有返回值,只是和.appendChild()的返回值不同。例如,myNode.append(newNode)的返回值是myNode,而myNode.appendChild(newNode)的返回值是newNode。

<4>.compare()方法和.contains()方法都只接受Node和DOM类型的参数,不接受字符串选择符。

<5>.create()方法虽然很容易让人联想到原生的document.createElement()方法,但其实两者是有区别的。.create()方法接受的参数是完整的html,而不是标签名,也就是说,如果要创建一个包含123456为内容的p标签,用原生js需要写var nod = document.creaElement("p"); nod.innerHTML = 123456;而如果用.create()方法,不能用Y.Node.create("p"),而要用Y.node.create("<p>123456</p>");。.create()方法返回的是Node,document.createElement()返回的是DOM。

<6>.delegate()方法接受三个参数,其中第三个参数是对于children的选择符,这里只能是children,不能写node自身,而且不能省略。支持*全选。

<7>.inDoc()方法,.inRegion()方法和.intersect()方法。.inDoc()方法的参数只能是document类型的,不能是普通DOM型或者Node型。如果要测试是否在某个DOM内,可以用inRegion方法,不过,这个方法也支持样式上的重叠,而事实上并没有包含关系的判断。官方api文档中说,.inRegion()方法会返回一个包含位置信息的对象,事实上,这是错的。.inRegion()方法返回的是布尔型。而.intersect()方法才会返回包含位置信息的对象。

<8>.insert()方法和.insertBefore()方法。这两个方法和.append(),.appendChild()方法有些类似,同样的,.insert()方法支持字符串型参数,而.insertBefore()不支持。前者返回值是myNode,后者返回值是newNode。值得一提的是,.insert()方法和第二个参数,用于表明插入位置的参数不好用,并不能按照我想要插入到指定节点前,.insertBefore()的第二个参数就很好用。

<9>.get()方法。Node是DOM封装后的类型,其get方法不仅能获得id,tagName之类DOM.xxx的属性,还能获得region等扩展属性。注,dom的class仍然通过get("className")获得,而不是get("class")。

<10>.getAttribute()方法。一般情况下,其实.get()方法就完全够用了,为什么还要有个.getAttribute()方法呢?对于自定义属性,.get()方法是取不到值的,要使用.getAttribute()方法。例如<div myattr = "adang"></div>,如果用Y.get("div").get("myattr")取的值是undefined,需要用Y.get("div").getAttribute("myattr")取值。

免责声明:文章转载自《YUI3学习笔记 ( 3 )》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇YUI3学习笔记 ( 6 )MaterialRefreshLayout+ListView 下拉刷新 上拉加载下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

node中的url和path模块

//path模块 1.Node.js path 模块提供了一些用于处理文件路径的小工具,我们可以通过以下方式引入该模块: var path = require("path") 2.常用方法 ================path.join([...paths]) path.join() 方法使用平台特定的分隔符把全部给定的 path 片段连接到一起,并...

angular-cli 项目如何引入jQuery 或者bootstrap?

1. 首先确保你的node_module中安装了jquery 或者 bootstrap,如果没有 执行以下命令 npm install jquery --save-dev 2. 打开angular-cli.json文件夹,在scripts:[]属性中添加如下代码 //jQuery 文件或者 bootstrap 文件路径 "../node_modules...

关于nvm node版本管理工具

nvm是node版本管理工具 为了解决node各种版本存在不兼容现象 nvm是让你在同一台机器上安装和切换不同版本的node的工具 安装前windows系统最好先卸载node以免发生不必要的问题 可在点此在github上下载最新版本,本次下载安装的是windows版本。 nvm-noinstall.zip:绿色免安装版,但使用时需进行配置。 nvm-se...

unity行为树简介

目前在Unity3D游戏中一般复杂的AI都可以看到行为树的身影,简单的AI使用状态机来实现就可以了,所以这里我也是简单的学习下,为以后用到做准备。 行为树的概念出现已经很多年了,总的来说,就是使用各种经典的控制节点+行为节点进行组合,从而实现复杂的AI。 Behavior Designer插件里,主要有四种概念节点,都称之为Task。包括: (1)Comp...

从零开始的野路子React/Node(7)将Swagger(OpenAPI)运用于后端API

之前公司做项目是用过swagger来配置python模型的API,感觉非常好用。swagger可以提供request, response甚至error的验证机制,十分便利。node当然也可以用啦。 我们需要使用的库主要是swagger-ui-express,它将提供swagger的相关功能以及一个UI,方便查看和调试。 1、初始设定 老规矩,我们还是通过e...

自己动手写符合自己业务需求的eslint规则

​简介:eslint是构建在AST Parser基础上的规则扫描器,缺省情况下使用espree作为AST解析器。rules写好对于AST事件的回调,linter处理源代码之后会根据相应的事件来回调rules中的处理函数。另外,在进入细节之前,请思考一下:eslint的边界在哪里?哪些功能是通过eslint写规则可以做到的,哪些是用eslint无法做到的?...