[转载]ExtJs4 笔记(1) ExtJs大比拼JQuery:Dom文档操作
出处:[Lipan] (http://www.cnblogs.com/lipan/)
现在主流的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" ); }); |
[转载]ExtJs4 笔记(1) ExtJs大比拼JQuery:Dom文档操作的更多相关文章
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
- jQuery 的文档操作
在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...
- 前端jQuery之文档操作
1.文档操作内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到 ...
- ExtJs4 笔记(1) ExtJs大比拼JQuery:Dom文档操作
现在主流的JS框架要数ExtJs和JQuery应用的比较广泛.JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势.ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的 ...
- (转载) ExtJs大比拼JQuery:Dom文档操作
此次不生产水,做一次搬运工. http://www.cnblogs.com/lipan/archive/2011/12/07/2269815.html
- jQuery的文档操作
1.插入操作 一.父元素.append(子元素) 追加某元素 父元素中添加新的元素 var oli = document.createElement('li'); oli.innerHTML = '哈 ...
- jQuery系列(六):jQuery的文档操作
1.插入操作 (1) 语法: 父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng | element(js对象) | jquery元素 let ol ...
- jquery之文档操作
append(content|fn) 向每个匹配的元素内部添加内容(元素内部) appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部) prepend(content ...
随机推荐
- 使用 h5 新特性,轻松监听任何 App 自带返回键
var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : ...
- cf1027F. Session in BSU(并查集 匈牙利)
题意 题目链接 $n$个人,每个人可以在第$a_i$天或第$b_i$,一天最多考一场试,问在最优的情况下,最晚什么时候结束 Sol 自己只能想到暴力匈牙利二分图匹配,然而还是被构造数据卡了.. 标算很 ...
- css:focus伪类的使用
css中:focus伪类的使用,即给已获取焦点的元素设置样式 示例一 <!DOCTYPE html> <html lang="en"> <head&g ...
- 如何使用markdown编辑器编写文章
1 设置markdown编辑器为默认编辑器 进入我的博客,点击管理 点击选项,勾选markdown编辑器即可 2 markdown 语法 注意,文章中的# - 1. > 只有在段落开头且符号后需 ...
- java项目定时任务实现
首先配置spring-context.xml文件 在xmlns 下加如下代码 xmlns:task="http://www.springframework.org/schema/task&q ...
- Linux安装loadrunner负载机
1.loadrunner下载地址:http://download.csdn.net/download/intel80586/9542271或者其他资源 2.首先用rpm -qa|grep -i c++ ...
- 自定义标签jsp2格式
在写自定义标签时候是不是感觉很烦啊,其实人家也是这样认为的,于是我们的jsp新的标准对标签进行了更改,使我们用起来更简单.到底哪里简单呢?看看代码再说咯: 还是老规矩,先上一个标签的逻辑类: 1. p ...
- UVA 1442 Cave 洞穴 (贪心+扫描)
题意:有一个洞穴,每个位置有一个底的高度p[i],和对应顶的高度s[i],要往里面尽量放燃料,要求燃料不能碰到顶,可以无限接近. 题解:制约燃料储放的就是顶的高度了,分别求出设当前储放位置的向两边的延 ...
- coredata栈
上下文包含所有信息 NSManagedObjectModel The NSManagedObjectModel instance describes the data that is going to ...
- netbackup如何手动获取主机ID证书。
如何手动获取主机ID证书. 文章:100039650 最后发布:2017-09-21 评分: 20 11 产品:NetBackup 问题 从NetBackup V8.1开始,管理员需要在证书颁发 ...