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

匹配 prev 元素之后的所有 siblings 元素

简单：

first      

 

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

 

last  

匹配找到的最后一个元素   

$("tr:last")

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) : 属性名   

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

$("div[id]")

 

 

[attribute=value]  

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

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

[attribute^=value] 

匹配给定的属性是以某些值开始的元素

[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")