选择器与DOM操作.docx
- 文档编号：11187914
- 上传时间：2023-05-29
- 格式：DOCX
- 页数：15
- 大小：20.19KB
选择器与DOM操作.docx
《选择器与DOM操作.docx》由会员分享，可在线阅读，更多相关《选择器与DOM操作.docx（15页珍藏版）》请在冰点文库上搜索。
选择器与DOM操作
ExtJs4选择器与DOM操作
讲师：
风舞烟
目录：
一、ExtJs4DomQuery中的选择器
二、ExtJs4DomQuery的属性选择器
三、ExtJs4DomQuery的CSS选择器
四、ExtJs4中的筛选
五、ExtJs4中的DOM处理
六、ExtJs4中的事件处理
概述：
现在主流的JS框架要数ExtJs和JQuery应用的比较广泛。
JQuery属于轻量级的，一般做网站应用比较常见，可见块头小的优势。
ExtJs比较庞大，它除了对基本的JS语法和HTMLDOM操作方式的封装之外，还提供了一套强大的UI库。
在企业级B/S解决方案应用上独占优势。
就单说它在原生JS的封装，DOM操作方式封装方面也足以藐视JQuery。
下面我就通过对比API，体现两种框架的异曲同工之处。
我们已JQueryAPI为主线，来看看ExtJs是否有替代的方案。
注意一点：
ExtJs4.0相对上一版本改动较大，接下来的示例暂时只对ExtJs4.0及以上版本提供支持。
一、选择器
1.上下文选择器对比
JS对HTML节点的操作比较频繁。
所以要经常定位和查询DOM元素。
我们分别看看两种框架的实现获取Id="div1"的DOM元素:
[JQuery]
$（"#div1"）;
[ExtJs]
Ext.get（"div1"）;
其实Ext.get（"div1"）与$（"#div1"）还是有区别的，前者只会获取匹配的第一个元素，后者是匹配的元素集合。
ExtJs的等价用法如下：
[ExtJs]
Ext.select（"#div1"）;
示例：
[html]
[js]
//查询Id=div1的元素，返回第一个匹配元素的Ext.Element类型
//该方法只能查Id，不支持选择器
vardiv1=Ext.get（"div1"）;
console.log（div1）;
//功能同上
vardiv2=Ext.fly（"div2"）;
console.log（div2）;
//查询Id=div1的元素的dom对象
vardiv1dom=Ext.get（"div1"）.dom;
console.log（div1dom）;
vardiv2dom=Ext.getDom（"div2"）;
console.log（div2dom）;
//获取body元素的Ext.Element类型
varbody=Ext.getBody（）;
console.log（body）;
//返回当前HTML文档的Ext.Element类型
vardoc=Ext.getDoc（）;
console.log（doc）;
//查询Id=div1的元素,返回满足条件的集合Ext.CompositeElement类型
//返回的是个数组
varselDiv1=Ext.select（"#div1"）;
console.log（selDiv1）;
varselDiv=selDiv1.elements[0];
console.log（selDiv）;
//查询属性title=mytest的div,返回满足条件的集合Ext.CompositeElement类型，这里是extjs对象
varselDiv2=Ext.select（"div[title='mytest']"）.elements[0];
cosole.log（selDiv2）;
//查询属性title=d1的div,返回满足条件的dom节点集合,注意这里返回的是dom数据
varequery=Ext.query（"div[title='mytest']"）[0];
console.log（equery）;
说明：
Ext.get和Ext.fly的区别：
通俗点讲，他们的作用都是一样的，都是获取元素。
但是前者每次调用都会生成一个Ext.Element对象，开辟新的内存空间，而后者共享了一个公用的内存空间，每次调用都会覆盖前一次的信息。
由于Ext.Element比较庞大，后者的好处是可以节省资源。
如果你获取的Ext.Element不需要长期保持重复调用，用后者较为合理。
2.选择器语法简介
JQuery选择器支持CSS3选择符，ExtJs同样也提供支持，除此之外还支持基本的XPath语法。
下面分别讲解：
1）CSS3选择符
下面列举的命令是单个形式，都可以无限组合使用。
元素选择符：
任意元素
E一个标签为E的元素
EF所有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-childE元素为其父元素的第一个子元素
E:
last-childE元素为其父元素的最后一个子元素
E:
nth-child（n）E元素为其父元素的第n个子元素（由1开始的个数）
E:
nth-child（odd）E元素为其父元素的奇数个数的子元素
E:
nth-child（even）E元素为其父元素的偶数个数的子元素
E:
only-childE元素为其父元素的唯一子元素
E:
checkedE元素为拥有一个名为“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”
示例：
1.ElementSelectors:
（元素选择器）
[html]
div1content
div2content
《工程造价案例》期末考试复习题及参考答案.docx
