ExtJs4 笔记（1） ExtJs大比拼JQuery：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]

1	$("#div1");

[ExtJs]

1	Ext.get("div1");

其实Ext.get("div1")与$("#div1")还是有区别的，前者只会获取匹配的第一个元素，后者是匹配的元素集合。ExtJs的等价用法如下：

[ExtJs]

1	Ext.select("#div1");

下面是一个完整的比较代码：

[ExtJs]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//Ext.Element类 :是ExtJs对dom对象的封装 //Ext.CompositeElement类：是ExtJs对dom对象集合的封装   //查询Id=div1的元素，返回第一个匹配元素的Ext.Element类型 //该方法只能查Id，不支持选择器 Ext.get("div1");   //功能同上 Ext.fly("div1");   //查询Id=div1的元素的dom对象 Ext.get("div1").dom; //或者 Ext.getDom("div1");   //获取body元素的Ext.Element类型 Ext.getBody(); //返回当前HTML文档的Ext.Element类型 Ext.getDoc();   //查询Id=div1的元素,返回满足条件的集合Ext.CompositeElement类型 Ext.select("#div1"); //查询属性title=d1的div,返回满足条件的集合Ext.CompositeElement类型 Ext.select("div[title='d1']");   //查询属性title=d1的div,返回满足条件的dom节点集合 Ext.query("div[title='d1']");

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 不需要长期保持重复调用，用后者较为合理。下面通过一个例子来体现他们的区别：

1 2 3 4 5 6 7 8 9 10 11

//这样更新的是div1 var div1 = Ext.get("div1"); Ext.get("div2"); div1.update("我想更新div1");   //将get替换成fly后....   //更新的却是div2 var div1 = Ext.fly("div1"); Ext.fly("div2"); div1.update("我想更新div1");

我们发现，再次调用Ext.fly后，更新的是DIV2，而再次调用Ext.get不会影响更新的元素。

二、属性

注意：CSS类操作的几个方法相对于早期版本有变化之前是：e.addClass("c2")

[JQuery]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

var e = $("div[title=t1]");   //返回第一个匹配元素的title属性 alert(e.attr("title")); //设置第一个匹配元素的title属性 e.attr("title", "newTitle"); //移除第一个匹配元素的title属性 e.removeAttr("title");   //CSS类 //给第一个匹配元素添加c2样式 e.addClass("c2"); //移除 e.removeClass("c1"); //轮回 e.toggleClass("c2"); //检查c2样式是否存在 e.hasClass("c2");   //Html //获取Html e.html(); //更新Html e.html("<b>更新后的Html</b>");   //值 e.val(); e.val(150);

[ExtJs]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

var e = Ext.select("div[title=t1]");   //属性 //返回第一个匹配元素的title属性 alert(e.first().getAttribute("title")); //设置第一个匹配元素的title属性 e.first().set({ "title": "newTitle" });   //CSS类 //给第一个匹配元素添加c2样式 e.addCls("c2"); //移除 e.removeCls("c1"); //轮回 e.toggleCls("c2"); //检查c2样式是否存在 e.hasCls("c2");   //Html //获取Html e.first().dom.innerHTML; //更新Html e.first().update("<b>更新后的Html</b>");   //值 e = Ext.get("text1"); e.getValue(); e.set({ value: 150 });

四、筛选

[JQuery]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var e = $(".c1"); //过滤 //获取匹配的第二个元素 e.eq(1); //再次筛选，属性title=t1的div e.filter("div[title=t1]"); //父节点Id=div1时返回true e.parent().is("#div1");   //查找 //获取集合中第一个，最后一个： e.first(); e.last(); //前一个，后一个： e.prev(); e.next(); //子节点第一个，最后一个： var e2 = $("#div1"); e2.children().first(); e2.children().last();

[ExtJs]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var e = Ext.select(".c1");   //过滤 //获取匹配的第二个元素 e.item(1); //再次筛选，属性title=t1的div,集合中不满足条件的元素自动移去 e.filter("div[title=t1]"); e = Ext.select(".c1"); //父节点Id=div1时返回true e.first().parent().is("#div1");   //查找 //获取集合中第一个，最后一个： e.first(); e.last(); //单个元素的前一个，匹配选择器的后一个: e.item(1).next("div[title=t2]"); e.item(1).prev(); var e2 = Ext.get("div1"); //获取子节点的第一个，最后一个： e2.first(); e2.last();

五、文档处理

[JQuery]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//插入 var e = $("div .c1"); //e元素结束之前插入 e.first().append("<b>新内容</b>"); //e元素开始之后插入 e.first().prepend("<b>新内容</b>"); //e元素开始之前插入 e.first().before("<b>新内容</b>"); //e元素结束之后插入 e.first().after("<b>新内容</b>");   //包裹 e.eq(2).wrap("<p></p>"); e.eq(2).unwrap();   //替换 e.eq(2).replaceWith("<b>被替换的</b>");   //删除 e.eq(3).remove(); //清空标签内的html e.eq(0).empty();

[ExtJs]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var e = Ext.select("div .c1"); //插入 //分别在相对于文档e的四个位置插入html： e.first().insertHtml("afterBegin", "<b>新内容</b>"); e.first().insertHtml("beforeEnd", "<b>新内容</b>"); e.first().insertHtml("beforeBegin", "<b>新内容</b>"); e.first().insertHtml("afterEnd", "<b>新内容</b>");   //包裹 e.wrap({     tag: 'p' });   //用text1替换集合第五个元素 e.replaceElement(4, "text1", true);   //替换用当前元素去替换掉div2标签 e.first().replace("div2", true);   //删除 e.first().remove();   //移除集合中第三个元素 e.removeElement(2, true);

六、CSS

[JQuery]

1 2 3 4 5 6 7 8 9

var e = $("div1"); //设置样式 e.css("width", "550px"); e.css("position", "absolute");   //设置高度 e.height(100); //获取宽度 e.width();

[ExtJs]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

var e = Ext.get("div1"); //设置样式 e.setStyle("width", "550px"); e.applyStyles({     height: "500px",     color: "red",     position: "absolute" }); //设置高度，带动画效果 e.setHeight(100, true); //设置定位 e.setLeft("50px"); e.setTop("10px"); e.setLeftTop("100px", "50px"); //设置尺寸 e.setSize("100px", "200px");   //设置xy坐标 e.setXY([10, 10]);   //获取宽度 e.getWidth();   //获取坐标 e.getXY();

七、事件

[JQuery]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var e = $("#div1"); //事件绑定 //给元素绑定click事件： var clickhandler = function () {     alert("click事件被触发！"); }; e.bind("click", clickhandler);   //模拟click事件： e.trigger("click");   //解除绑定click事件 e.unbind("click", clickhandler);   //事件切换 e.hover(function () {     e.css("background-color", "Red"); }, function () {     e.css("background-color", "Aqua"); });

[ExtJs]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var e = Ext.get("div1"); //事件绑定 //给元素绑定click事件： var clickhandler = function () {     Ext.Msg.alert("消息", "click事件被触发！"); }; e.on("click", clickhandler); //解除绑定click事件 e.un("click", clickhandler);   //事件切换 e.hover(function () {     e.setStyle("background-color", "Red"); }, function () {     e.setStyle("background-color", "Aqua"); });