ExtJs4学习(二):Dom文档操作
现在主流的JS框架要数ExtJs和JQuery应用的比较广泛。JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势。ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的封装之外,还提供了一套强大的UI库。在企业级B/S解决方案应用上独占优势。就单说它在原生JS的封装,DOM操作方式封装方面也足以藐视JQuery。下面我就通过对比API,体现两种框架的异曲同工之处。我们已JQuery API为主线,来看看ExtJs是否有替代的方案。
注意一点:ExtJs4.0相对上一版本改动较大,本系列文章暂时只对ExtJs4.0及以上版本提供支持。
一、选择器
1.上下文选择器对比
JS对HTML节点的操作比较频繁。所以要经常定位和查询DOM元素。我们分别看看两种框架的实现
获取Id="div1"的DOM元素:
[JQuery]其实Ext.get("div1")与$("#div1")还是有区别的,前者只会获取匹配的第一个元素,后者是匹配的元素集合。ExtJs的等价用法如下:
[ExtJs]下面是一个完整的比较代码:
[ExtJs]2.选择器语法简介
JQuery选择器支持CSS3选择符,ExtJs同样也提供支持,除此之外还支持基本的XPath语法。下面分别讲解:
1)CSS3选择符
下面列举的命令是单个形式,都可以无限组合使用。
元素选择符:
-
任意元素
- E 一个标签为 E 的元素
- E F 所有 E 元素的分支元素中含有标签为 F 的元素
- E > F 或 E/F 所有 E 元素的直系子元素中含有标签为 F 的元素
- E + F 所有标签为 F 并紧随着标签为 E 的元素之后的元素
- E ~ F 所有标签为 F 并与标签为 E 的元素是侧边的元素
属性选择符:
@ 与引号的使用是可选的。例如:div[@foo=‘bar‘] 也是一个有效的属性选择符。
- E[foo] 拥有一个名为 “foo” 的属性
- E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性
- E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性
- E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性 =bar] 拥有一个名为 “foo” 且值包含字串 “bar” 的属性
- E[foo%=2] 拥有一个名为 “foo” 且值能够被2整除的属性
- E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性
伪类:
- E:first-child E 元素为其父元素的第一个子元素
- E:last-child E 元素为其父元素的最后一个子元素
- E:nth-child(n) E 元素为其父元素的第 n 个子元素(由1开始的个数)
- E:nth-child(odd) E 元素为其父元素的奇数个数的子元素
- E:nth-child(even) E 元素为其父元素的偶数个数的子元素
- E:only-child E 元素为其父元素的唯一子元素
- E:checked E 元素为拥有一个名为“checked”且值为“true”的元素(例如:单选框或复选框)
- E:first 结果集中第一个 E 元素
- E:last 结果集中最后一个 E 元素
- E:nth(n) 结果集中第 n 个 E 元素(由1开始的个数)
- E:odd :nth-child(odd) 的简写
- E:even :nth-child(even) 的简写
- E:contains(foo) E 元素的 innerHTML 属性中包含“foo”字串
- E:nodeValue(foo) E 元素包含一个 textNode 节点且 nodeValue 等于“foo”
- E:not(S) 一个与简单选择符 S 不匹配的 E 元素
- E:has(S) 一个包含与简单选择符 S 相匹配的分支元素的 E 元素
- E:next(S) 下一个侧边元素为与简单选择符 S 相匹配的 E 元素
- E:prev(S) 上一个侧边元素为与简单选择符 S 相匹配的 E 元素
CSS 值选择符:
- E{display=none} css 的“display”属性等于“none”
- E{display^=none} css 的“display”属性以“none”开始
- E{display$=none} css 的“display”属性以“none”结尾 =none} css 的“display”属性包含字串“none”
- E{display%=2} css 的“display”属性能够被2整除
- E{display!=none} css 的“display”属性不等于“none”
2)XPath语法
下面通过几个例子来说明:
/html/body/div/div :从根目录开始找,找到正文的第二层全部DIV。
div/div :在全文匹配DIV元素,并获取包含子DIV的全部子DIV集合。
3.Ext.get和Ext.fly的区别:
通俗点讲,他们的作用都是一样的,都是获取元素。但是前者每次调用都会生成一个Ext.Element对象,开辟新的内存空间,而后者共享了一个公用的内存空间,每次调用都会覆盖前一次的信息。由于Ext.Element 比较庞大,后者的好处是可以节省资源。如果你获取的Ext.Element 不需要长期保持重复调用,用后者较为合理。下面通过一个例子来体现他们的区别:
我们发现,再次调用Ext.fly后,更新的是DIV2,而再次调用Ext.get不会影响更新的元素。
二、属性
注意:CSS类操作的几个方法相对于早期版本有变化之前是:e.addClass("c2")
[JQuery][ExtJs]
四、筛选
[JQuery]五、文档处理
[JQuery][ExtJs]
六、CSS
[JQuery]var e = $("div1");
//设置样式
e.css("width", "550px");
e.css("position", "absolute");
//设置高度
e.height(100);
//获取宽度
e.width();
[ExtJs]
七、事件
[JQuery][ExtJs]
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。