1.首先 dom节点的postion属性需要为absolute的,这样才可以设置left与top属性来改变位置
<div id="box" style="position:absolute;width:100px;height:100px;border:1px purple solid;"></div>
2.修改上面的box位置的js代码对应如下
/*直接使用javascript*/
var box = document.getElementById('box');
box.style.left = 100;
box.style.top = 100;
/*使用jquery*/
var postion = {'left':100,'top':100};
$('#box').css(postion);
/*使用YUI2*/
var position = [100,100];
var Dom = YAHOO.util.Dom;
Dom.setXY('box',position);
/*使用YUI3*/
var position = [100,100];
var box = YUI.one('#box');
box.setXY(position);
分享到:
相关推荐
本教程将深入探讨Jquery、YUI和ExtJs这三大JavaScript框架在表单验证和提示功能方面的应用。 **jQuery** jQuery是一款轻量级、高性能的JavaScript库,以其简洁的API和跨浏览器兼容性闻名。在表单验证方面,jQuery...
2. **选择DOM元素**:使用YUI的Node模块,可以像jQuery那样选择和操作DOM元素。 ```javascript YUI().use('node', function(Y) { var element = Y.one('#myElementId'); element.setStyle('color', 'red'); // ...
**Yahoo JavaScript库 YUI源码详解** Yahoo User Interface (YUI) 是Yahoo公司推出的一款强大的JavaScript库,旨在帮助开发者构建高性能、可维护的Web应用程序。作为一款免费且开源的工具,YUI为开发者提供了丰富的...
这些方法与jQuery类似,但YUI3的设计更加面向对象,如`Node`和`Selector`模块,它们提供了更加高效和灵活的方式来处理DOM元素。 **事件处理** YUI3的事件系统支持DOM事件绑定、解绑和触发,以及自定义事件。它还...
在给定的标题"JavaScript libraries--->jQuery, Prototype, Mootools, YUI, Extjs, Dojo"中,提到了五种著名的JavaScript库:jQuery、Prototype、Mootools、YUI和ExtJS。这些库都有各自的特性和优势,下面将详细介绍...
jQuery是世界上最流行的JavaScript库之一,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在给定的压缩包中,我们有两个文件:`jquery-3.2.1.js` 和 `jquery-3.2.1.min.js`。这两个文件都是...
YUI与jQuery、Prototype等其他JavaScript库相比,更注重企业级应用的稳定性和可维护性,但可能在社区活跃度和第三方插件数量上稍显不足。选择哪个库取决于具体项目需求和个人喜好。 总结,YUI 2.5.2是一个功能全面...
- **Selector**: 选择器引擎,提供了类似jQuery的选择器功能,方便选取DOM元素。 - **Utilities**: 工具函数集合,包含许多实用的JavaScript辅助方法,如字符串处理、数组操作等。 **4. 实例与应用** 雅虎YUI组件...
4. **DOM操作**:YUI提供了对DOM(文档对象模型)的强大支持,包括选择元素、修改属性、添加删除节点等功能,简化了DOM操作。 5. **动画效果**:YUI的动画模块可以创建平滑的CSS3动画,同时支持旧版浏览器的渐进...
2. **DOM 操作**:jQuery 提供了一套简洁的 API 来操作 DOM。例如,`$(selector).html()` 可以获取或设置元素的 HTML 内容,`$(selector).append()` 和 `$(selector).prepend()` 用于在元素内部添加内容,`$...
- **Ext JS**:Ext JS是一套基于JavaScript的企业级Web应用程序开发框架,提供了大量的UI组件和工具。它适合开发复杂的商业应用程序,但相较于jQuery来说体积较大且学习成本较高。 ### 学习jQuery的原因 - **简化...
2. **优化的 DOM 操作**:jQuery 避免了直接操作 DOM,而是使用缓存和批量操作来减少浏览器重绘和回流。例如,`$(...).hide()` 会一次性处理所有匹配的元素,而不是逐个处理。 3. **高效的事件处理**:jQuery 使用...
虽然jQuery非常流行,但还有其他库如Prototype、Dojo、YUI、Ext JS和MooTools等,它们各有特点。例如,Prototype使用简单,结构松散;Dojo为企业级应用设计,但文档不全;YUI扩展性好,但CSS文档不足;Ext JS侧重于...
2. **缓存引用(Caching)**:频繁使用的jQuery对象应存储在变量中,避免多次DOM查询。 3. **合并与压缩(Combining & Minifying)**:将所有脚本文件合并到一个文件中,并使用工具如Google Closure Compiler或YUI ...
JQuery、Extjs、YUI、Prototype、Dojo 是众多JavaScript框架中的佼佼者,它们各自拥有独特的特点和应用场景,下面就详细介绍它们之间的区别以及各自的用途。 首先,JQuery 是目前最为流行的JavaScript库,它支持...
这导致了一系列JavaScript框架的诞生,其中包括Prototype、YUI、jQuery、MooTools、Bindows以及国内的JSVM框架等。这些框架不仅提升了前端开发的效率,还改善了用户体验。 **jQuery**作为一款杰出的JavaScript库,...