一、获取元素(Getting Elements)
1.Ext.get
var el = Ext.get(‘myElementId’);
//获取元素,等同于document.getElementById(‘myElementId’);//会缓存
2. Ext.fly
var el = Ext.fly(‘myElementId’)//不需要缓存。
注:享元模式(Flyweight DesignPattern)是一种节省内存的模式,该模式的大概原理是建立单个全体对象然后不断反复使用它。
3.Ext.getDom
var elDom = Ext.getDom(‘elId’); // 依据id来查dom节点
var elDom1 =Ext.getDom(elDom); // 依据dom节点来查dom节点
二、CSS元素
4.addClass
Ext.fly(‘elId’).addClass(‘myCls’); // 加入元素的’myCls’的样式
5.radioClass
Ext.fly(‘elId’).radioClass(‘myCls’);
//添加一个或多个className到这个元素,并移除其所有侧边(siblings)节点上的同名样式。
6.removeClass
Ext.fly(‘elId’).removeClass(‘myCls’); // 移除元素的样式
7.toggleClass
Ext.fly(‘elId’).toggleClass(‘myCls’); // 加入样式
Ext.fly(‘elId’).toggleClass(‘myCls’); // 移除样式
Ext.fly(‘elId’).toggleClass(‘myCls’); // 再加入样式
8.hasClass
if (Ext.fly(‘elId’).hasClass(‘myCls’)) {
//判断是否已加上这个样式 // 是有样式的
……
}
10.replaceClass
Ext.fly(‘elId’).replaceClass(‘myClsA’, ‘myClsB’);//替换样式
11.getStyle
var color = Ext.fly(‘elId’).getStyle(‘color’); //返回该元素的统一化当前样式和计算样式。
var zIndx = Ext.fly(‘elId’).getStyle(‘z-index’);//返回该元素的统一化当前样式和计算样式。
12.setStyle
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'
});//设置元素的样式,也可以用一个对象参数包含多个样式。
13.getColor
Ext.fly(‘elId’).getColor(‘color’);//为指定的CSS属性返回CSS颜色
14.setOpacity
Ext.fly(‘elId’).setOpacity(.45, true);//设置元素的透明度。
15.clearOpacity
Ext.fly(‘elId’).clearOpacity();//清除这个元素的透明度设置
三、Dom游历
16.
Ext.fly(‘elId’).select(‘li:nth-child(2n)’).addClass(‘red’);
17.
is 测试当前元素是否与传入的选择符相符一致。
复制代码代码如下:
var el = Ext.get('elId');
if (el.is('p.myCls')) {
// 条件成立
}
18.findParent
定位于此节点,以此节点为起点,向外围搜索外层的父节点,搜索条件必须符合并匹配传入的简易选择符。
Ext.fly(‘elId’).findParent(‘div’); // 返回dom节点
Ext.fly(‘elId’).findParent(‘div’, 4); // 查找4个节点
Ext.fly(‘elId’).findParent(‘div’, null, true); // 返回Ext.Element
19.findParentNode
定位于此节点的“父节点”,以此节点的“父节点”为起点,向外围搜索外层的“父父”节点,搜索条件必须符合并匹配传入的简易选择符。
Ext.fly(‘elId’).findParentNode(‘div’);
20.up
沿着DOM,向外围搜索外层的“父父”节点,搜索条件必须符合并匹配传入的简易选择符。 Ext.fly(‘elId’).up(‘div’);
Ext.fly(‘elId’).up(‘div’, 5); // 限5层的内查找
21.select
传入一个CSS选择符的参数,然后依据该CSS选择符从当前元素下面,形成期待匹配子节点的集合,也就是“选择”的操作,最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document可是搜索。
// 返回结果的CompositeElement
Ext.fly(‘elId’).select(‘div:nth-child(2)’);
// 返回数组
Ext.fly(‘elId’).select(‘div:nth-child(2)’, true);
//整个document都会搜索
Ext.select(‘div:nth-child(2)’);
22.query
进行一次query的查询,返回DOM 节点组成的数组。可选地第二参数设置为查询的起点,如不指定则为 document。 //
返回dom节点组成的数组 Ext.query(‘div:nth-child(2)’);
23.child
基于送入的选择符,不限定深度进行搜索,符合的话选取单个子节点。
Ext.fly(‘elId’).child(‘p.highlight’); // 返回的类型是Ext.Element
Ext.fly(‘elId’).child(‘p.highlight’, true); // 返回dom节点
24.down
基于该选择符,"直接"选取单个子节点。
Ext.fly(‘elId’).down(‘span’); // 返回的类型是Ext.Element
Ext.fly(‘elId’).down(‘span’, true); // 返回dom节点
25.parent
返回当前节点的那个父节点,可选地可送入一个期待的选择符。
// 返回父节点,类型是Ext.Element
Ext.fly(‘elId’).parent(); // 返回父节点,类型是html dom
Ext.fly(‘elId’).parent("", true); // 返回父级节点,但一定要是div的,找到就返回,类型是Ext.Element Ext.fly(‘elId’).parent(“div”);
26.next
获取下一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
// 返回下一个侧边节点,类型是Ext.Element
Ext.fly(‘elId’).next();// 返回下一个侧边节点,类型是html dom
Ext.fly(‘elId’).next("", true);
//返回下一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element Ext.fly(‘elId’).next(“div”);
27.prev
获取上一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
// 返回上一个侧边节点,类型是
Ext.Element Ext.fly(‘elId’).prev();
// 返回上一个侧边节点,类型是html dom
Ext.fly(‘elId’).prev("", true);
// 返回上一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element
Ext.fly(‘elId’).prev(“div”);
28.first
获取第一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
// 返回第一个侧边节点,类型是
Ext.Element Ext.fly(‘elId’).first();// 返回第一个侧边节点,类型是html dom
Ext.fly(‘elId’).first("", true);
// 返回第一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element
Ext.fly(‘elId’).first(“div”);
29.last