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"); // 选择的input
var 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的下一个td
var rc23 =Ext.query("label:prev(input)"); //input前的lael
二：Jquery操作dom
基础：
可以通过Id，Element，class这些获得。例如：
$("#id") ? $("div") ? $(".class")
层次：
ancestor>descendant
$("form input") //form里的所有input
parent>child
在给定的父元素下匹配所有的子元素 ?
//不包括第二代子节点
prev+next
匹配所有紧接在 prev 元素后的 next 元素
匹配 prev 元素之后的所有 siblings 元素
简单：
first ? ? ?
?
匹配找到的第一个元素 ?$("tr:first")
?
not?
?
去除所有与给定选择器匹配的元素 ? ?$("input:not(:checked)")
?
even?
?
匹配所有索引值为偶数的元素，从 0 开始计数?
$("tr:even")
?
odd ?
匹配所有索引值为奇数的元素，从 0 开始计数 ?
$("tr:odd")
eq ?
匹配一个给定索引值的元素?
$("tr:eq(1)")
gt ?
匹配所有大于给定索引值的元素 ?
$("tr:gt(0)")
lt ??
匹配所有小于给定索引值的元素 ?
$("tr:lt(2)")
header ??
匹配如 h1, h2, h3之类的标题元素 ?$(":header")
animated?
匹配所有正在执行动画效果的元素?$("div:not(:animated)")
内容
contains(text) ?匹配包含给定文本的元素 ?$("div:contains('John')")
empty ?
匹配所有不包含子元素或者文本的空元素?$("td:empty")
has(a)?
匹配含有选择器所匹配的元素的元素?$("div:has(p)")
prarent() ?
匹配含有子元素或者文本的元素 ?$("td:parent")
可见性
hidden ?
匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到?
$("tr:hidden")
visiable ?
匹配所有的可见元素?
$("tr:visible")
属性：[attribute]
attribute (String) : 属性名 ??
?
[attribute=value] ?
查找所有 name 属性是 newsletter 的 input 元素?$("input[name='newsletter']")
[attribute!=value]?匹配所有含有指定的属性，但属性不等于特定值的元素
[attribute*=value]匹配给定的属性是以包含某些值的元素
?
[selector1][selector2][selectorN]?复合属性选择器，需要同时满足多个条件时使用?$("input[id][name$='man']")
?
?
?
子元素
:nth-child(index/even/odd/equation) ? 匹配其父元素下的第N个子或奇偶元素$("ul li:nth-child(2)") //在每个 ul 查找第 2 个li
:first-child ?匹配第一个子元素
':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
:last-child 匹配最后一个子元素?
':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
$("ul li:last-child") //在每个 ul 中查找最后一个 li?
:only-child如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配
例：$("ul li:only-child")?
?
表单
:input
:text ?匹配所有的单行文本框 $(":text")?
:password ? ? 匹配所有密码框
:radio 匹配所有单选按钮 $(":radio")?
:checkbox 匹配所有复选框 $(":checkbox")?
:submit 匹配所有提交按钮 $(":submit")?
:image 匹配所有图像域 $(":image")?
:reset 匹配所有重置按钮 $(":reset")?
:button 匹配所有按钮 $(":button")?
:file ?匹配所有文件域 $(":file")
:hidden 匹配所有不可见元素，或者type为hidden的元素 $("tr:hidden")?
?
?
表单属性
:enabled ?匹配所有可用元素 ?$("input:enabled")?
:disabled ?匹配所有不可用元素 ?$("input:disabled")?
:checked ?匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) ?$("input:checked")?
:selected ?匹配所有选中的option元素 ?$("select option:selected")?
?
?