ext使用学习4
来源:互联网 发布:大数据时代 ppt 编辑:程序博客网 时间:2024/06/07 20:20
DomQuery基础
使用函数“Ext.query”但读者须谨记它是“Ext.DomQuery.select()”的简写方式
第一部分:元素选择符Selector
// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span");
按id获取标签,你需要加上“#”的前缀:
// 这个查询会返回包含我们foo div一个元素的数组!
Ext.query("#foo");
按class name获取标签,你需要加上“.”的前缀:
/*这个查询会返回有一个元素的数组, 包含与之前例子一样的div但是我们使用了class name来获取*/
Ext.query(".foo");
你也可以使用关键字“*”来获取所有的元素:
// 这会返回一个数组,包含文档的所有元素。
Ext.query("*");
要获取子标签,我们只须在两个选择符之间插入一个空格:
// 这会返回有一个元素的数组,包含p标签的div标签
Ext.query("div p");
// 这会返回有两个元素的数组,包含span标签的div标签
Ext.query("div span");
第二部分:属性选择符Attributes selectors
这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id 或 class。
// 我们检查出任何存在有class属性的元素。
Ext.query("*[class]");
// 这会得到class等于“bar”的所有元素
Ext.query("*[class=bar]");
// 这会得到class不等于“bar”的所有元素
Ext.query("*[class!=bar]");
// 这会得到class从“b”字头开始的所有元素
Ext.query("*[class^=b]");
//这会得到class由“r”结尾的所有元素
Ext.query("*[class$=r]");
//这会得到在class中抽出“a”字符的所有元素
Ext.query("*[class*=a]");
第三部分: CSS值元素选择符
它的格式规定是这样的:
元素{属性 操作符 值}
注意我在这里是怎么插入一个不同的括号。 所以,操作符(operators)和属性选择符(attribute selectors)是一样的。
// 获取所以红色的元素
Ext.query("*{color=red}");
// 获取所有粉红颜色的并且是有红色子元素的元素
Ext.query("*{color=red} *{color=pink}");
// 获取所有不是红色文字的元素
Ext.query("*{color!=red}");
// 获取所有颜色属性是从“yel”开始的元素
Ext.query("*{color^=yel}");
// 获取所有颜色属性是以“ow”结束的元素
Ext.query("*{color$=ow}");
第四部分:伪类选择符Pseudo Classes selectors
/* this one gives us the first SPAN child of its parent */
Ext.query("span:first-child");
/* this one gives us the last A child of its parent */
Ext.query("a:last-child")
this one gives us the second SPAN child of its parent */
Ext.query("span:nth-child(2)")
/* this one gives us ODD TR of its parents */
Ext.query("tr:nth-child(odd)")
/* this one gives us even LI of its parents */
Ext.query("li:nth-child(even)")
/* this one gives us A that are the only child of its parents */
Ext.query("a:only-child")
/* this one gives us the checked INPUT */
Ext.query("input:checked")
/* this one gives us the first TR */
Ext.query("tr:first")
/* this one gives us the last INPUT */
Ext.query("input:last")
/* this one gives us the 2nd TD */
Ext.query("td:nth(2)")
/* this one gives us every DIV that has the "within" string */
Ext.query("div:contains(within)")
/* this one gives us every DIV that doesn't have a FORM child */
Ext.query("div:not(form)")
/* This one gives use every DIV that has an A child */
Ext.query("div:has(a)")
/* this one gives us every TD that is followed by another TD. obviously, the one that has a colspan property is ignored. */ Ext.query("td:next(td)")
/* this one gives us every LABEL that is preceded by an INPUT */
Ext.query("label:prev(input)")
- ext使用学习4
- ext使用学习1
- ext使用学习2
- ext使用学习3
- Ext学习日记 grid使用
- Ext JS 学习(4) Ext.FormPanel 组件的使用第一式
- Ext 学习(4)---ExtWindow
- Ext JS 学习(1) Ext.MessageBox.show()方法的使用
- Ext JS 学习(2) Ext.Panel 组件的使用
- Ext JS 学习(3) Ext.Window 组件的使用
- Ext JS 学习(11) Ext.Template的使用
- Ext JS 学习(12) Ext.TreePanel的使用 第一式
- Ext Js 学习日记 (1) 开始使用Ext JS
- 学习EXT第四天--开始使用Grid
- ext学习之fckeditor的使用
- Ext学习笔记(2):Element使用Demo
- Ext学习笔记(5):DrawComponent使用 Demo
- ExtJS学习笔记(六) 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- VM上的LINUX虚拟机共享Windows文件夹
- Linux网络编程之广播
- zigbee帧类型
- 汉诺塔(第十三周上机任务)
- New hanoi
- ext使用学习4
- 我对C++ VTable 的理解
- 汉诺塔!
- 调用finish()返回时刷新父Activity
- 宝塔
- 计算几何算法概览——算法篇之位置关系
- 关于ListView获取焦点的问题
- HOJ 2785 The Game
- iOS隐藏状态栏