选择器与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的等价用法如下:
Ext.select("#div1");
示例:
[html]
div1content
div2content
[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元素为其父元素的第一个子元素
last-childE元素为其父元素的最后一个子元素
nth-child(n)E元素为其父元素的第n个子元素(由1开始的个数)
nth-child(odd)E元素为其父元素的奇数个数的子元素
nth-child(even)E元素为其父元素的偶数个数的子元素
only-childE元素为其父元素的唯一子元素
checkedE元素为拥有一个名为“checked”且值为“true”的元素(例如:
单选框或复选框)
first结果集中第一个E元素
last结果集中最后一个E元素
nth(n)结果集中第n个E元素(由1开始的个数)
odd:
nth-child(odd)的简写
even:
nth-child(even)的简写
contains(foo)E元素的innerHTML属性中包含“foo”字串
nodeValue(foo)E元素包含一个textNode节点且nodeValue等于“foo”
not(S)一个与简单选择符S不匹配的E元素
has(S)一个包含与简单选择符S相匹配的分支元素的E元素
next(S)下一个侧边元素为与简单选择符S相匹配的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:
(元素选择器)
div1anothercontent
div3content
1
2
Ext.core.DomQuery.select('表达式')返回HTMLElement[]
*anyelement
Ext.core.DomQuery.select('*')//返回所有dom元素
EanelementwiththetagE
Ext.core.DomQuery.select('div')//返回所有div元素
EFAlldescendentelementsofEthathavethetagF
Ext.core.DomQuery.select('divspan')//返回所有div下的span元素(无限层级1,2都会匹配)
Ext.DomQuery.select("div>span")//匹配直接子元素只向下查询一级(返回1)
Ext.DomQuery.select("div+span")//返回平级的下面第一个匹配的元素(444)
Ext.DomQuery.select("div~span")//返回平级的下面所有匹配的元素(444,666,777,888)注意不匹配555,只返回平级的
2、ExtJs4操作属性
AttributeSelectors:
(属性选择器)
E[foo]hasanattribute"foo"
Ext.DomQuery.select('*[foo]')//返回包含foo属性的所有元素(*代表所有DOM元素)
Ext.DomQuery.select('div[foo]')//返回包含foo属性的所有DIV元素
E[foo=bar]hasanattribute"foo"thatequals"bar"
Ext.DomQuery.select('div[foo=bar]')//返回所有属性foo等于bar的DIV元素
E[foo^=bar]hasanattribute"foo"thatstartswith"bar"
Ext.DomQuery.select('div[foo^=bar]')//返回所有属性foo已bar开头的DIV元素
E[foo$=bar]hasanattribute"foo"thatendswith"bar"
Ext.DomQuery.select('div[foo$=bar]')//返回所有属性foo已bar结尾的DIV元素
E[foo*=bar]hasanattribute"foo"thatcontainsthesubstring"bar"
Ext.DomQuery.select('div[foo*=bar]')//返回所有属性foo包含bar的DIV元素
E[foo%=2]hasanattribute"foo"thatisevenlydivisibleby2
Ext.DomQuery.select('div[foo%=2]')//返回所有属性foo能被2整除的DIV元素
=bar]attribute"foo"doesnotequal"bar"
Ext.DomQuery.select('div[foo!
=bar]')//返回所有属性foo不等于bar的DIV元素
三、CSSValueSelectors:
(Css选择器)
与属性上面的属性选择器用法一样,只不过这里匹配的是CSS,STYLE
E{display=none}cssvalue"display"thatequals"none"
E{display^=none}cssvalue"display"thatstartswith"none"
E{display$=none}cssvalue"display"thatendswith"none"
E{display*=none}cssvalue"display"thatcontainsthesubstring"none"
E{display%=2}cssvalue"display"thatisevenlydivisibleby2
=none}cssvalue"display"thatdoesnotequal"none"
PseudoClasses:
(伪类选择器)
first-childEisthefirstchildofitsparent
none;">foofoo33Ext.DomQuery.select('div:first-child')//返回元素div,并且div是它父元素的下面的第一个子元素//返回div0,div1因为div0的父元素是body并且它是body在面的第一个元素,div1的父元素是div0.并且他是div0下面的第一个元素E:last-childEisthelastchildofitsparentExt.DomQuery.select('div:last-child')//跟上面的正好相反.是父元素中的最后一个元素//返回div2,div3E:nth-child(_n_)Eisthe_n_thchildofitsparent(1basedasperthespec)//Ext.DomQuery.select('div:nth-child(1)')返回在其父元素中第N个的E元素返回div0,div1,div4//Ext.DomQuery.select('div:nth-child(2)')返回div2,div3E:nth-child(odd)Eisanoddchildofitsparent//与上面类似返回奇数E:nth-child(even)Eisanevenchildofitsparent//与上面类似返回偶数E:only-childEistheonlychildofitsparent//Ext.DomQuery.select('div:only-child')返回父元素当中只有一个元素的E元素,返回div4E:checkedEisanelementthatishasacheckedattributethatistrue(e.g.aradioorcheckbox)//Ext.DomQuery.select('input:checked')返回选中的元素1,2E:firstthefirstEintheresultset//返回匹配元素结果集中的第一个元素E:lastthelastEintheresultset//返回匹配元素结果集中的最后一个元素E:nth(_n_)the_n_thEintheresultset(1based)//返回匹配元素结果集中的第N个元素E:oddshortcutfor:nth-child(odd)//与:nth-child(odd)相同E:evenshortcutfor:nth-child(even)//于:nth-child(even)相同E:contains(foo)E'sinnerHTMLcontainsthesubstring"foo"//Ext.DomQuery.select('div:contains(foo)')innerHTML属性中包含foo的E元素,[div#0,div#1,div#2]E:nodeValue(foo)EcontainsatextNodewithanodeValuethatequals"foo"//Ext.DomQuery.select('div:nodeValue(foo)')//返回值包含一个文本元素,并且值为foo的div元素[div#2]E:not(S)anEelementthatdoesnotmatchsimpleselectorS//Ext.DomQuery.select('div:not([id=3])')(注意红色地方放选择器表达式)返回id不等于3的div返回[div#0,div#1,div#2,div#4,div#5]E:has(S)anEelementthathasadescendentthatmatchessimpleselectorS//Ext.DomQuery.select('div:has(span[id=s1])')返回包含span[id=s1]表达式所匹配元素的div元素//返回[div#0,div#1]E:next(S)anEelementwhosenextsiblingmatchessimpleselectorS//Ext.DomQuery.select('div:next(div[id=3])')返回div元素,并且其平级元素的下一个是div[id=3]所匹配的元素//匹配div#1E:prev(S)anEelementwhoseprevioussiblingmatchessimpleselectorS//Ext.DomQuery.select('div:next(div[id=3])')返回div元素,并且其平级元素的上一个是div[id=3]所匹配的元素//匹配div#5E:any(S1|S2|S2)anEelementwhichmatchesanyofthesimpleselectorsS1,S2orS3//Ext.DomQuery.select('div:any([id=2]|[id=3]|[id=4])')或者的关系E:visible(true)anEelementwhichisdeeplyvisibleaccordingtoExt.dom.Element.isVisible//Ext.DomQuery.select('div:visible(true)')匹配所有可见的div返回[div#0,div#3,div#4,div#5]2)XPath语法下面通过几个例子来说明:/html/body/div/div:从根目录开始找,找到正文的第二层全部DIV。div/div:在全文匹配DIV元素,并获取包含子DIV的全部子DIV集合。如:varobjs=Ext.DomQuery.select("/html/body/div/div");objs=Ext.DomQuery.select("div/span");四、ExtJs4中的筛选vare=Ext.select(".c1");//过滤//获取匹配的第二个元素e.item(1);//再次筛选,属性title=t1的div,集合中不满足条件的元素自动移去e.filter("div[title=t1]");e=Ext.select(".c1");//父节点Id=div1时返回truee.first().parent().is("#div1");//查找//获取集合中第一个,最后一个:e.first();e.last();//单个元素的前一个,匹配选择器的后一个:e.item(1).next("div[title=t2]");e.item(1).prev();vare2=Ext.get("div1");//获取子节点的第一个,最后一个:e2.first();e2.last();五、文档处理vare=Ext.select("div.c1");//插入//分别在相对于文档e的四个位置插入html:e.first().insertHtml("afterBegin","新内容");e.first().insertHtml("beforeEnd","新内容");e.first().insertHtml("beforeBegin","新内容");e.first().insertHtml("afterEnd","新内容");//包裹e.wrap({tag:'p'});//用text1替换集合第五个元素e.replaceElement(4,"text1",true);//替换用当前元素去替换掉div2标签e.first().replace("div2",t 展开阅读全文 相关资源 光功能材料PPT.ppt 危险与可操作性分析(HAZOP)方法介绍PPT.pptx 部编版五年级语文下册第17课《跳水》精品课件(统编).pptx 行政事业单位内部控制培训课件.pptx 功能材料概论-纳米材料.ppt 稻盛和夫《经营与会计》(含经营问答).ppt 计算机视觉PPT课件:图像分类.pptx 胶体金培训.ppt 某公司平衡计分卡的开发运用与管理.pptx 5G终端关键技术.pptx 猜你喜欢 高三定语从句考点归纳Word下载.docx 高三物理二轮复习策略Word格式文档下载.docx 统计与概率中考数学一轮复习知识点训练Word格式.docx 全国区级联考上海市黄浦区届九年级上学期期末一模语文试题解析版Word文档格式.docx 工程的实习报告合集八篇精选Word文件下载.docx 全国中考数学试题分类解析汇编专题34命题与证明Word下载.docx 工伤调解协议书精选Word文档格式.docx 涂鸦大赛策划书Word文件下载.docx 全国思想道德修养与法律基础自考试题Word格式文档下载.docx 相关搜索 选择器 DOM 操作 当前位置:首页 > 工程科技 > 能源化工
none;">
foo
33
Ext.DomQuery.select('div:
first-child')//返回元素div,并且div是它父元素的下面的第一个子元素
//返回div0,div1因为div0的父元素是body并且它是body在面的第一个元素,div1的父元素是div0.并且他是div0下面的第一个元素
last-childEisthelastchildofitsparent
last-child')//跟上面的正好相反.是父元素中的最后一个元素
//返回div2,div3
nth-child(_n_)Eisthe_n_thchildofitsparent(1basedasperthespec)
//Ext.DomQuery.select('div:
nth-child
(1)')返回在其父元素中第N个的E元素返回div0,div1,div4
(2)')返回div2,div3
nth-child(odd)Eisanoddchildofitsparent
//与上面类似返回奇数
nth-child(even)Eisanevenchildofitsparent
//与上面类似返回偶数
only-childEistheonlychildofitsparent
only-child')返回父元素当中只有一个元素的E元素,返回div4
checkedEisanelementthatishasacheckedattributethatistrue(e.g.aradioorcheckbox)
//Ext.DomQuery.select('input:
checked')返回选中的元素1,2
firstthefirstEintheresultset
//返回匹配元素结果集中的第一个元素
lastthelastEintheresultset
//返回匹配元素结果集中的最后一个元素
nth(_n_)the_n_thEintheresultset(1based)
//返回匹配元素结果集中的第N个元素
oddshortcutfor:
nth-child(odd)
//与:
nth-child(odd)相同
evenshortcutfor:
nth-child(even)
//于:
nth-child(even)相同
contains(foo)E'sinnerHTMLcontainsthesubstring"foo"
contains(foo)')innerHTML属性中包含foo的E元素,[div#0,div#1,div#2]
nodeValue(foo)EcontainsatextNodewithanodeValuethatequals"foo"
nodeValue(foo)')//返回值包含一个文本元素,并且值为foo的div元素[div#2]
not(S)anEelementthatdoesnotmatchsimpleselectorS
not([id=3])')(注意红色地方放选择器表达式)返回id不等于3的div返回[div#0,div#1,div#2,div#4,div#5]
has(S)anEelementthathasadescendentthatmatchessimpleselectorS
has(span[id=s1])')返回包含span[id=s1]表达式所匹配元素的div元素
//返回[div#0,div#1]
next(S)anEelementwhosenextsiblingmatchessimpleselectorS
next(div[id=3])')返回div元素,并且其平级元素的下一个是div[id=3]所匹配的元素
//匹配div#1
prev(S)anEelementwhoseprevioussiblingmatchessimpleselectorS
next(div[id=3])')返回div元素,并且其平级元素的上一个是div[id=3]所匹配的元素
//匹配div#5
any(S1|S2|S2)anEelementwhichmatchesanyofthesimpleselectorsS1,S2orS3
any([id=2]|[id=3]|[id=4])')或者的关系
visible(true)anEelementwhichisdeeplyvisibleaccordingtoExt.dom.Element.isVisible
visible(true)')匹配所有可见的div返回[div#0,div#3,div#4,div#5]
2)XPath语法
下面通过几个例子来说明:
/html/body/div/div:
从根目录开始找,找到正文的第二层全部DIV。
div/div:
在全文匹配DIV元素,并获取包含子DIV的全部子DIV集合。
如:
varobjs=Ext.DomQuery.select("/html/body/div/div");
objs=Ext.DomQuery.select("div/span");
vare=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();
//单个元素的前一个,匹配选择器的后一个:
(1).next("div[title=t2]");
(1).prev();
vare2=Ext.get("div1");
//获取子节点的第一个,最后一个:
e2.first();
e2.last();
五、文档处理
vare=Ext.select("div.c1");
//插入
//分别在相对于文档e的四个位置插入html:
e.first().insertHtml("afterBegin","新内容");
e.first().insertHtml("beforeEnd","新内容");
e.first().insertHtml("beforeBegin","新内容");
e.first().insertHtml("afterEnd","新内容");
//包裹
e.wrap({
tag:
'p'
});
//用text1替换集合第五个元素
e.replaceElement(4,"text1",true);
//替换用当前元素去替换掉div2标签
e.first().replace("div2",t
copyright@ 2008-2023 冰点文库 网站版权所有
经营许可证编号:鄂ICP备19020893号-2