首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Ext操作dom跟Jquery操作dom详细介绍

2012-09-07 
Ext操作dom和Jquery操作dom详细介绍一:Ext操作Dom?? ? ? 可以通过Id获取Ext.Element对象? ? ??var aaa E

Ext操作dom和Jquery操作dom详细介绍

一:Ext操作Dom

?

? ? ? 可以通过Id获取Ext.Element对象? ? ??var aaa = Ext.get("input"); //input为id? ? ??var bbb =Ext.fly("input"); //只操作一次建议用这个? ? ? 可以通过下面方式把Ext.Element对象转换成dom对象? ? ??

?

? ? ?var pp = Ext.get('div1');//有一个div其id为div1? ? ?var ppdd = Ext.getDom('div1');? ? ?var ppdd1=Ext.getDom(pp);? ? ?var ppdd2 = Ext.getDom(pp.dom);? ? ?var ppdd3 = document.getElementById('div1');? ? 上面除pp对象外其他的其实都是相同的对象,你用==判断得到的都是true
? ?2. 直接通过Ext.query()方法获得dom? ?

?

var div = Ext.query("div"); ?//获取页面所有的div元素,相当于
var divdd = document.getElementsByTagName("div");? ??var p = Ext.query("p","pid"); //获得p标签中id为pid的? ? var cdiv = Ext.query(".div");//获取class为div的? ? var bb = Ext.query("#div1");//获取id为div1的var a = Ext.query("div div");//获得最外层div下的所有第一个子div
var aa = Ext.query("div div div");//没有这种var b = Ext.query("[class^=idiv]");//class是一idiv开头的var c = Ext.query("[id*=idiv]");//id包含idiv的var d = Ext.query("[id$=v]");//id以v结尾的上面如果有匹配的换回的都是数组形式的,没有则为null,

操作dom,加样式等
?Ext.fly('elId').addClass('elCss'); ? ?//还可删除,替换样式类?
? ? ? ?Ext.fly('elId').setStyle({?
? ? ? ?color: 'red',?
? ? ? ?background: 'yellow',?
? ? ? ?font-weight: 'bold'?
? ? ? ?}) ? ?//还可以获得属性?
还有很多
var rc =Ext.query("*{color=red}"); // 所有color为red的标签var rc2 =Ext.query("span:first-child"); // span标签的第一个子节点?var rc3 =Ext.query("a:last-child"); //得到a标签var rc4 =Ext.query("span:nth-child(2)"); // [span.bar]?var rc5 =Ext.query("tr:nth-child(odd)"); // tr的奇数标签?var rc6 =Ext.query("li:nth-child(even)"); //tr的偶数标签var rc7 =Ext.query("a:only-child"); // 最后一个a?var rc8 =Ext.query("input:checked"); // 选择的inputvar rc9 =Ext.query("tr:first"); // 第一个tr?var rc12 =Ext.query("input:last"); // 最后一个input?var rc13 =Ext.query("td:nth(2)"); // 第二个td?var rc14 =Ext.query("div:contains(within)"); // 被div包围的var rc15 =Ext.query("div:not(form)");// 没有在form内的var rc16 =Ext.query("div:has(a)"); // 包含a的div?var rc22 =Ext.query("td:next(td)"); // td的下一个tdvar rc23 =Ext.query("label:prev(input)"); //input前的lael

二:Jquery操作dom基础:可以通过Id,Element,class这些获得。例如:$("#id") ? $("div") ? $(".class")
层次:ancestor>descendant$("form input") //form里的所有inputparent>child在给定的父元素下匹配所有的子元素 ?

//不包括第二代子节点

prev+next

匹配找到的第一个元素 ?$("tr:first")?last ?匹配找到的最后一个元素 ??$("tr:last")

not?

?

去除所有与给定选择器匹配的元素 ? ?$("input:not(:checked)")

?

even?

?

匹配所有索引值为偶数的元素,从 0 开始计数?

$("tr:even")

?

匹配所有索引值为奇数的元素,从 0 开始计数 ?$("tr:odd")匹配一个给定索引值的元素?$("tr:eq(1)")匹配所有大于给定索引值的元素 ?$("tr:gt(0)")匹配所有小于给定索引值的元素 ?$("tr:lt(2)")匹配如 h1, h2, h3之类的标题元素 ?$(":header")
animated?匹配所有正在执行动画效果的元素?$("div:not(:animated)")

内容
empty ?匹配所有不包含子元素或者文本的空元素?$("td:empty")
has(a)?匹配含有选择器所匹配的元素的元素?$("div:has(p)")
prarent() ?匹配含有子元素或者文本的元素 ?$("td:parent")

可见性
hidden ?匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到?$("tr:hidden")匹配所有的可见元素?$("tr:visible")


查找所有含有 id 属性的 div 元素

$("div[id]")?

[attribute=value] ?

查找所有 name 属性是 newsletter 的 input 元素?$("input[name='newsletter']")

[attribute!=value]?匹配所有含有指定的属性,但属性不等于特定值的元素

[attribute^=value]?匹配给定的属性是以某些值开始的元素

[attribute$=value]?匹配给定的属性是以某些值结尾的元素

?


?

?

热点排行