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不是必须的属性。
相关推荐
- **区别**:`dijit.byId`用于获取Dijit组件,而`dojo.byId`用于获取DOM元素,二者针对的对象类型不同。 5. **dojo.forEach**: - **用途**:循环遍历数组中的元素。 - **语法**:`dojo.forEach(array, function...
在此示例中,通过调用 `dojo.byId('username')` 获取 ID 为 `username` 的文本框元素,并读取其值。可以看到,与普通的 JavaScript 操作并无太大差异。 #### 四、页面加载事件:`dojo.addOnLoad` 当需要在页面完全...
2. **DOM操作**:Dojo 提供了`dojo.query`和`dojo.byId`等方法,方便地对DOM元素进行选择和操作。这使得处理页面元素变得简单,类似jQuery的语法风格。 3. **事件处理**:Dojo 的`dojo.connect`方法用于事件监听,...
var button = dom.byId('myButton'); on(button, 'click', function() { console.log('Button clicked!'); }); }); } ``` 3. **运行在Tomcat6**:将项目部署到Tomcat 6服务器上,确保所有依赖的JavaScript文件...
var btn = dojo.byId('hello'); dojo.connect(btn, "onclick", sayHello); }); ``` 这里的`sayHello`函数会在按钮被点击时执行,弹出一个警告框显示“Hello”。 ##### 3.2 对象方法作为事件处理函数 在实际开发...
var button = dom.byId("myButton"); on(button, "click", function(){ alert("Hello, Dojo!"); }); }); ``` 这段代码创建了一个点击按钮显示警告的简单应用。 总结,学习Dojo需要理解其模块化机制、核心API、...
var dialog = dijit.byId("myDialog"); dialog.show(); // 显示对话框 dialog.hide(); // 隐藏对话框 ``` 当我们谈论与ArcGIS API的集成时,ArcGIS API for JavaScript是一个强大的地图和地理处理工具集,它也支持...
5. **DOM操作**: `dojo.query`和`dojo.byId`等方法简化了DOM元素的选择和访问。这些函数在0.3版本中已经相当成熟,为后续版本的DOM操作接口打下了坚实的基础。 6. **数据绑定**: Dojo 0.3也提供了数据绑定的功能,...
3. **DOJO对象和API**:DOJO提供了丰富的API,如DOM操作(`dojo.query()`,`dojo.byId()`),事件处理(`dojo.connect()`),AJAX请求(`dojo.xhrGet()`)等,这些都是在HTML页面中通过JavaScript实现功能的关键。...
- `dijit.byId`:获取 Dojo 控件对象。 - `XSP.getElementById`:客户端访问 Xpage 控件。 - `getComponent`:服务器端访问控件。 ### 4. Xpage VS 表单 Xpage 相比传统的表单提供了更丰富的界面和交互能力,更适合...
var viewNode = dom.byId("view1"); var view1 = registry.byId("view1"); view1.domNode.innerHTML = "..."; } }); ``` 2. **模块拆分** 为了适应AMD,Dojo核心和dijit中的许多模块被拆分为更小的模块,...
Dojo提供了一系列方便的DOM操作函数,如`dojo.byId`用于通过ID选择DOM元素,`dojo.query`用于使用类似CSS的选择器语法来查找DOM节点,以及`dojo.forEach`和`dojo.filter`等用于数组迭代和过滤的函数。这些函数简化了...
- 最后,通过`dijit.byId('season')`获取下拉框的引用,并在其按钮的点击事件中调用`get('value')`和`get('displayedValue')`方法。 3. **实现结果**: - **(1)** 初始化时,下拉框显示为"春季",因为这是初始...