具体实例:
(1)创建JSP文件,引入CSS和js文件,添加三个Div
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP '004_base05_dom1.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="styleSheet" type="text/css" href="js/extjs/resources/css/ext-all.css" /> <script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script> <script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script> <script type="text/javascript" charset="utf-8" src="base/ext_dom.js"></script> </head> <body> <div id=d1 align="center">我是d1</div> <div id=d2 align="center">我是d2</div> <div id=d3 align="center">我是d3</div> </body> </html>
(2)编写Ext文件
Ext.onReady(function(){ //Ext.dom.Element //Ext.get 使用了缓存机制来提升获取DOM节点的效率 Ext.Element //get方法的描述: /** * 1 首先去Ext.cache缓存里去查找 ,如果缓存里有,直接返回即可 * 2 如果缓存里没有 ,那再去页面上去查找 , 如果页面里没有,返回null * 3 如果页面里有,把当前内容加入到缓存里: { id : {data/events/dom} } * 4 Ext.addCacheEntry加到缓存里的方法 */ var d1 = Ext.get('d1'); //Ext.Element alert(d1.dom.innerHTML); //Ext.fly /** * fly:使用了javascript经典的‘享元模式’来提升效率,从而节约内存,更加低碳化 * 返回的对象:Fly对象 ,当然你可以理解成为返回的就是Ext封装好的Ext.Element对象 * 注意点:fly由于内部使用了享元模式 所以 只适合一次操作 ,从而节省内存 */ var d2 = Ext.fly('d2'); var d3 = Ext.fly('d3'); d2.dom.innerHTML = 'AAA'; d3.dom.innerHTML = 'BBB'; /*//注意:正确的方法应该是下面的 var d2 = Ext.fly('d2'); d2.dom.innerHTML = 'AAA'; var d3 = Ext.fly('d3'); d3.dom.innerHTML = 'BBB';*/ //Ext.getDom /** * 直接从页面上获取元素的DOM元素 */ var dom = Ext.getDom('d3'); //HTMLElement dom.innerHTML="CCCC"; });
(3)程序运行结果
get方法获得的结果。
fly方法的结果
getDom方法的结果
时间: 2024-10-07 02:33:06