Ext.query与Ext.select 的用法
Ext.query与Ext.select 的用法
Ext.query与Ext.select 的用法一、Ext.select
select方法可以用来获得指定标签的DOM对象,其返回值是一个Ext.CompositeElement对象。是一个Element的数组
返回的结果可直接如同Element般地操作,一般比query方法常用。
实例
1、多选择符
你可以输入多个查询条件,然后在一个对象上面返回。
例如
// 匹配所有的带foo class的li和带bar class的span
Ext.select('li.foo, span.bar');
2、根节点
使用选择符,它可以支持一个根节点的概念。根节点的意思是如果有指定选择符的根节点表示从该节点上开始进行搜索。这样可以助于提升性能,因为若不存在根节点表示从document body开始进行搜索,速度自然比较慢。
Ext.get('myEl').select('li.foo');// 这是等价的
Ext.select('li.foo', true, 'myEl');// 这是等价的
3、查询链
对于构成复杂的查询情况,可以由多个查询条件组成查询链。依次按顺序进行属性链的查询。
例如
// 匹配class为foo的li,要求是有title属性为bar的li,而且还是这个li下面最前头的子元素
Ext.select('li.foo[title=bar]:first');
二、Ext.query
query方法和select方法非常类似,不同的是,它返回的是一个封装了DOM的数组,它是Ext.DomQuery.select()的简写方式。
实例
1、元素选择符
// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span");
// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
Ext.query("span", "foo");
// 这个查询会返回包含我们foo li一个元素的数组!
Ext.query("#foo");
/*这个查询会返回有一个元素的数组, 包含与之前例子一样的li但是我们使用了class name来获取*/
Ext.query(".foo");
// 这会返回一个数组,包含文档的所有元素。
Ext.query("*");
// 这会返回有一个元素的数组,包含p标签的li标签
Ext.query("li p");
// 这会返回有两个元素的数组,包含span标签的li标签
Ext.query("li span");
2、属性选择符
// 我们检查出任何存在有class属性的元素。
// 这个查询会返回5个元素的数组。
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]");
热门推荐
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- 腾讯云换php版本(腾讯云服务器配置php环境的方法)
- js怎么做一个计时器(JavaScript实现简单计时器)
- html怎么使用css居中(HTML+CSS实现单列布局水平居中布局)
- mysql数据备份的几种方式(MySQL数据库备份过程的注意事项)
- mysql的默认数据库例子在哪里(修改MySQL8.0 默认的数据目录快捷操作无配置)
- css3菜单特效(CSS3实现精美横向滚动菜单按钮)
- MySQL与Oracle数据类型对应关系
- app云服务器(为什么APP开发首选云服务器?)
- 无法启动sql serveragent(SQL Agent服务无法启动的解决方法)