ExtJS CSS值选择符详解与DOM操作

"这篇文档是关于ExtJS的简单实用手册，由李炬宏在2009年9月29日编写。它介绍了ExtJS的基本概念、引用方式以及DOM元素的获取和选择符的使用方法，特别关注了CSS值选择符的详细规则。" 在深入探讨ExtJS之前，首先理解一下ExtJS的基础知识。ExtJS是一个功能丰富的JavaScript库，专注于提供DOM操作、Ajax交互、事件处理、动画效果和数据绑定等功能。库分为base包和core包，开发者可以根据需要选择product版或debug版进行引用。引用ExtJS时，需要先引入ext-base.js，然后引入ext-all-debug.js。 当涉及到DOM元素的获取时，ExtJS提供了几个关键方法。`Ext.get()`是一个常用方法，可以接受元素ID、HTML元素对象或已有的Ext.Element对象作为参数，并返回一个Ext.Element实例。`Ext.fly()`与`Ext.get()`类似，但不会缓存获取的结果。此外，`Ext.getDom()`方法用于获取DOM节点，支持ID、DOM节点或Ext.Element作为输入。 选择符在ExtJS中扮演着重要角色，它们帮助我们精确地定位和操作DOM元素。文档中提到了多种类型的选择符： 1. CSS值选择符： - `E{display=none}`：选择所有display属性等于none的E元素。 - `E{ref^=Myfield}`：选择ref属性以Myfield开头的E元素。 - `E{ref$=Myfield}`：选择ref属性以Myfield结尾的E元素。 - `E{ref*=Myfield}`：选择ref属性中包含Myfield的E元素。 - `E{ref%=2}`：选择ref属性值能被2整除的E元素。 - `E{ref!=Myfield/货物清单}`：选择ref属性值不等于Myfield/货物清单的E元素。 2. 元素选择符： - `*`：匹配任何元素。 - `E`：匹配所有E元素。 - `E F`：匹配所有包含F元素的E元素。 - `E > F`：匹配所有E下的直接子元素F。 - `E + F`：匹配紧接在E元素后面的F元素。 - `E ~ F`：匹配在E元素前后出现的F元素。 3. 属性选择符： - `E[F]`：匹配所有具有名为F属性的E元素。 - `E[f=test]`：匹配所有f属性等于test的E元素。 这些选择符的使用极大地提高了代码的灵活性和选择DOM元素的效率。通过结合使用这些选择符，开发者可以在ExtJS环境中实现复杂的DOM操作和布局控制，从而构建出功能丰富的Web应用。