ext学习笔记一

Ext.onReady这个方法是指当前DOM加载完毕后,保证页面内的所有元素能被Script引用

Ext.onReady(function(){

  alert("嗯,ext第一个程序!");

});

 

 通过ID获取DOM节点

传统:var testDiv=document.getElementById("testDiv");没有任何问题,为了要让这个节点干点事情,我们还要手工编写不少代码;另外对于不同浏览器间的差异,处理起来也是个麻烦的问题。

ext的做法

var testDiv=Ext.get("testDiv");

我们可以对获取到的这个对象,做各种各校的DOM节点操作,如(增加或删除 CSS类选择器,事件,定位,拖放等)

举个例子:

  testDiv.addClass("red");//添加一个class="red"

  testDiv. center();//将元素居中

  testDiv.setOpacity(.25);//使元素半透明

获取多个DOM的节点

通常获取多个DOM节点,难以依靠ID的方式来获取。有可能因为没设置ID,或者是多个ID容易导致冲突,又或者直接用ID方式引用太多元素。

这种情况下,我们不会用ID来作为获取元素的依据,可能会用属性(attribute) 或css classname代替。基于以上原因,ext引入了一个功能强大的DOM Selector库,叫做DomQuery。

DomQuery可作为单独的库使用(DomQuery.js) 但常用于Ext,令人欣喜的是,元素对象本身就有Element.select的方法来实现,即内部调用DomQuery选取元素。

示例:

下面的代码中没有一个P标记是有ID的,而我们想轻松地通过一次操作马上获取每一个段落P,全体执行它们的动作,可以这样做。

<script type="text/javascript">

 Ext.select('p').highlight();

</script>

<body>

 <p>p标记</p>

 <p>p标记</p>

 <p>p标记</p>

 <p>p标记</p>

 <p>p标记</p>

 <p>p标记</p> 

</body>

 DomQuery的选取参数是一段较长的数组,其中包括W3C CSS3 Dom选择器、基本XPath,HTML属性等。。。

 

你可能感兴趣的:(学习笔记)