`
webcode
  • 浏览: 6066096 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Dojo jsId dojo.byId dijit.ById

 
阅读更多

A common question new users of dojo have is what is the difference between jsId, dijit.byId() and dojo.byId().

jsId, dijit.byId() and dojo.byId().这3个用法有哪些区别呢。

Consider the following simple ContentPane widget which has an id property (standard html attribute for any tag) and a jsId attribute (dojo specific id attribute explained below):

看看下面的ContentPane,它包含了ID和JSID的标签属性。
<div id="myDivId" 
     dojoType="dijit.layout.ContentPane"
     jsId="myJSId">
   Hello Everyone!
</div>

dojo.byId()

dojo.byId() is no different than the often used document.getElementById() to access the DOM node for the div tag – simply pass in the tag’s id attribute value.

dojo.byId() 和document.getElementById() 没什么区别,都是查找标签的id属性值,返回一个DOM对象。

For example:

dojo.byId("myDivId").style.height = '300px';

This would set a style height property.

dijit.byId()

dijit.byId() is a little different – first off it only works on parsed dijits either declared in markup with a dojoType attribute or programatically. The same id attribute is used as a paramater, but what is returned in this case is an object that was created by the dojo widget system when the markup is parsed and transformed into a dijit. This allows you to change dojo-specific attributes for the widget or call methods defined in the class the dijit corresponds to (in this case, we can call methods of the ContentPane class). For Example, we can set the content of the ContentPane via setContent().

dijit.byId() 有点不同,它只对有dojoType标签属性或编程式生成的标签有作用。它同样是查找id属性值,不过在查找前,你必须保证DOJO控件生成系统已经将被 查找对象解析好。查找到的对象是一个控件对象,你可以使用dojoType对应的控件的所有方法(这是最重要的功能)。

dijit.byId("myDivId").setContent("Hello World!");

You could also change the style like we did with dojo.byId() above using the domNode property of the ContentPane (actually – domNode is defined higher up the inheritance tree so every dijit has a domNode property – very convenient!) This example also saves the results of dijit.byId() into a local variable.

同时你也可以把此对象当做普通的DOM对象来操作。

myContentPane = dijit.byId("myDivId");
myContentPane.domNode.style.height = '300px';
myContentPane.setContent("Hello World!");

jsId

jsId saves you one more step in working with widgets by automatically creating a global javascript variable for you (the dojo parser does this). This variable contains the same object as returned by dijit.byId(). Whatever value you give to the jsId attribute becomes the name of the global variable so watch out for reserved words or having two widgets with the same jsId! Since my Content Pane has a jsId attribute value of myJSId I could simplify the above code a little by removing the dijit.byId() and using my jsId attribute as the variable name:

有了jsId,在DOJO解析时,会生成以此属性值为名的对象。这个对象和用dijit.byId()获取到的对象功能一样。注意不要把2个标签上的jsId设为同样的值了。

myJSId.domNode.style.height = '300px';
myJSId.setContent("Hello World!");

jsId is not a required attribute, it is there as a convenience.

jsId不是必须的属性。

分享到:
评论

相关推荐

    dojo学习笔记

    - **区别**:`dijit.byId`用于获取Dijit组件,而`dojo.byId`用于获取DOM元素,二者针对的对象类型不同。 5. **dojo.forEach**: - **用途**:循环遍历数组中的元素。 - **语法**:`dojo.forEach(array, function...

    dojo快速入门文档

    在此示例中,通过调用 `dojo.byId('username')` 获取 ID 为 `username` 的文本框元素,并读取其值。可以看到,与普通的 JavaScript 操作并无太大差异。 #### 四、页面加载事件:`dojo.addOnLoad` 当需要在页面完全...

    dojo1.4.1代码下载

    2. **DOM操作**:Dojo 提供了`dojo.query`和`dojo.byId`等方法,方便地对DOM元素进行选择和操作。这使得处理页面元素变得简单,类似jQuery的语法风格。 3. **事件处理**:Dojo 的`dojo.connect`方法用于事件监听,...

    Requirejs异步加载Dojo1.6

    var button = dom.byId('myButton'); on(button, 'click', function() { console.log('Button clicked!'); }); }); } ``` 3. **运行在Tomcat6**:将项目部署到Tomcat 6服务器上,确保所有依赖的JavaScript文件...

    dojo函数+实例[初步整理]

    var btn = dojo.byId('hello'); dojo.connect(btn, "onclick", sayHello); }); ``` 这里的`sayHello`函数会在按钮被点击时执行,弹出一个警告框显示“Hello”。 ##### 3.2 对象方法作为事件处理函数 在实际开发...

    学习dojo

    var button = dom.byId("myButton"); on(button, "click", function(){ alert("Hello, Dojo!"); }); }); ``` 这段代码创建了一个点击按钮显示警告的简单应用。 总结,学习Dojo需要理解其模块化机制、核心API、...

    dojo自定义对话框

    var dialog = dijit.byId("myDialog"); dialog.show(); // 显示对话框 dialog.hide(); // 隐藏对话框 ``` 当我们谈论与ArcGIS API的集成时,ArcGIS API for JavaScript是一个强大的地图和地理处理工具集,它也支持...

    AJAX DOJO0.3 源代码

    5. **DOM操作**: `dojo.query`和`dojo.byId`等方法简化了DOM元素的选择和访问。这些函数在0.3版本中已经相当成熟,为后续版本的DOM操作接口打下了坚实的基础。 6. **数据绑定**: Dojo 0.3也提供了数据绑定的功能,...

    第一个基于DOJO1.0程序

    3. **DOJO对象和API**:DOJO提供了丰富的API,如DOM操作(`dojo.query()`,`dojo.byId()`),事件处理(`dojo.connect()`),AJAX请求(`dojo.xhrGet()`)等,这些都是在HTML页面中通过JavaScript实现功能的关键。...

    Xpage学习笔记

    - `dijit.byId`:获取 Dojo 控件对象。 - `XSP.getElementById`:客户端访问 Xpage 控件。 - `getComponent`:服务器端访问控件。 ### 4. Xpage VS 表单 Xpage 相比传统的表单提供了更丰富的界面和交互能力,更适合...

    Dojo 1.7 中文版本注释功能说明

    var viewNode = dom.byId("view1"); var view1 = registry.byId("view1"); view1.domNode.innerHTML = "..."; } }); ``` 2. **模块拆分** 为了适应AMD,Dojo核心和dijit中的许多模块被拆分为更小的模块,...

    dojo基础知识

    Dojo提供了一系列方便的DOM操作函数,如`dojo.byId`用于通过ID选择DOM元素,`dojo.query`用于使用类似CSS的选择器语法来查找DOM节点,以及`dojo.forEach`和`dojo.filter`等用于数组迭代和过滤的函数。这些函数简化了...

    Dojo获取下拉框的文本和值实例代码

    - 最后,通过`dijit.byId('season')`获取下拉框的引用,并在其按钮的点击事件中调用`get('value')`和`get('displayedValue')`方法。 3. **实现结果**: - **(1)** 初始化时,下拉框显示为"春季",因为这是初始...

Global site tag (gtag.js) - Google Analytics