一: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 元素
简单:
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")