`
snowing11812
  • 浏览: 119848 次
  • 来自: ...
社区版块
存档分类
最新评论

使用js, jquery YUI2 YUI3设定dom位置的做法

阅读更多

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);

 

0
1
分享到:
评论

相关推荐

    Jquery、YUI、ExtJs 三大javascript框架表单验证带提示功能的demo

    本教程将深入探讨Jquery、YUI和ExtJs这三大JavaScript框架在表单验证和提示功能方面的应用。 **jQuery** jQuery是一款轻量级、高性能的JavaScript库,以其简洁的API和跨浏览器兼容性闻名。在表单验证方面,jQuery...

    YUI js方法使用列子

    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 JavaScript库 YUI源码详解** Yahoo User Interface (YUI) 是Yahoo公司推出的一款强大的JavaScript库,旨在帮助开发者构建高性能、可维护的Web应用程序。作为一款免费且开源的工具,YUI为开发者提供了丰富的...

    YAHOO YUI3简单入门

    这些方法与jQuery类似,但YUI3的设计更加面向对象,如`Node`和`Selector`模块,它们提供了更加高效和灵活的方式来处理DOM元素。 **事件处理** YUI3的事件系统支持DOM事件绑定、解绑和触发,以及自定义事件。它还...

    JavaScript libraries--->jQuery, Prototype, Mootools, YUI, Extjs, Dojo

    在给定的标题"JavaScript libraries---&gt;jQuery, Prototype, Mootools, YUI, Extjs, Dojo"中,提到了五种著名的JavaScript库:jQuery、Prototype、Mootools、YUI和ExtJS。这些库都有各自的特性和优势,下面将详细介绍...

    jquery-3.2.1.js 、 jquery-3.2.1.min.js 【jquery包,最新的截止到2017-11-1】

    jQuery是世界上最流行的JavaScript库之一,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在给定的压缩包中,我们有两个文件:`jquery-3.2.1.js` 和 `jquery-3.2.1.min.js`。这两个文件都是...

    yui_2.5.2 类库

    YUI与jQuery、Prototype等其他JavaScript库相比,更注重企业级应用的稳定性和可维护性,但可能在社区活跃度和第三方插件数量上稍显不足。选择哪个库取决于具体项目需求和个人喜好。 总结,YUI 2.5.2是一个功能全面...

    雅虎YUI组建

    - **Selector**: 选择器引擎,提供了类似jQuery的选择器功能,方便选取DOM元素。 - **Utilities**: 工具函数集合,包含许多实用的JavaScript辅助方法,如字符串处理、数组操作等。 **4. 实例与应用** 雅虎YUI组件...

    yui_2.7.0b

    4. **DOM操作**:YUI提供了对DOM(文档对象模型)的强大支持,包括选择元素、修改属性、添加删除节点等功能,简化了DOM操作。 5. **动画效果**:YUI的动画模块可以创建平滑的CSS3动画,同时支持旧版浏览器的渐进...

    锋利的jQuery.锋利的jQuery.

    2. **DOM 操作**:jQuery 提供了一套简洁的 API 来操作 DOM。例如,`$(selector).html()` 可以获取或设置元素的 HTML 内容,`$(selector).append()` 和 `$(selector).prepend()` 用于在元素内部添加内容,`$...

    jquery 为什么使用jQuery,优点 可以做什么,

    - **Ext JS**:Ext JS是一套基于JavaScript的企业级Web应用程序开发框架,提供了大量的UI组件和工具。它适合开发复杂的商业应用程序,但相较于jQuery来说体积较大且学习成本较高。 ### 学习jQuery的原因 - **简化...

    Jquery1.2.6源码分析教程

    2. **优化的 DOM 操作**:jQuery 避免了直接操作 DOM,而是使用缓存和批量操作来减少浏览器重绘和回流。例如,`$(...).hide()` 会一次性处理所有匹配的元素,而不是逐个处理。 3. **高效的事件处理**:jQuery 使用...

    JQuery入门,JQuery总结

    虽然jQuery非常流行,但还有其他库如Prototype、Dojo、YUI、Ext JS和MooTools等,它们各有特点。例如,Prototype使用简单,结构松散;Dojo为企业级应用设计,但文档不全;YUI扩展性好,但CSS文档不足;Ext JS侧重于...

    jquery1.4.4.min最新

    2. **缓存引用(Caching)**:频繁使用的jQuery对象应存储在变量中,避免多次DOM查询。 3. **合并与压缩(Combining & Minifying)**:将所有脚本文件合并到一个文件中,并使用工具如Google Closure Compiler或YUI ...

    JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述

    JQuery、Extjs、YUI、Prototype、Dojo 是众多JavaScript框架中的佼佼者,它们各自拥有独特的特点和应用场景,下面就详细介绍它们之间的区别以及各自的用途。 首先,JQuery 是目前最为流行的JavaScript库,它支持...

    jquery 技巧总结

    这导致了一系列JavaScript框架的诞生,其中包括Prototype、YUI、jQuery、MooTools、Bindows以及国内的JSVM框架等。这些框架不仅提升了前端开发的效率,还改善了用户体验。 **jQuery**作为一款杰出的JavaScript库,...

Global site tag (gtag.js) - Google Analytics