DOM工具函数

skylarkjs提供了大量简单而强大的dom工具函数，不需要第三方UI库，只使用这些函数即可开发功能强大的HTML应用程序。

概观

DOM工具函数包含以下三种类型的API，您可以为根据您的场景选择使用最合适的API类型：

节点级API
直接指定对象DOM节点进行相应的操作，简单直观
vme api
使用一个封装了单个DOM节点的vme对象。支持链接调用，因此适用于对同一个DOM节点多次进行操作
query api
使用query对象包装节点列表。适用于对一组DOM节点进行同样的操作

组成

skylarkjs中包含的工具函数按类别列出如下

基础API

browser
该模块封装了一些关于浏览器兼容性的API。
css
该模块封装了一些关于样式表和规则的API。
scripter
该模块封装了一些关于脚本加载和卸载的API。

节点级API

datax
该模块封装了一些操作DOM节点属性的API。.
dnd
该模块封装了一些关于DOM拖放的API
eventer
该模块封装了一些关于DOM事件的API。
filer
该模块封装了一些关于文件操作的API。
finder
该模块封装了一些关于DOM查询的API。
fx
该模块封装了一些关于DOM动画的API。
geom
该模块封装了一些关于DOM节点大小的API。
mover
该模块封装了一些关于DOM节点移动的API。
noder
该模块封装了一些关于DOM节点构造的API。
styler
该模块封装了一些关于DOM节点样式和和类的API。

vme api

velm
该模块实现了VisuleElement类型，用于封装可视DOM节点。
VisualElment提供了从节点级API封装的许多方法，并支持链接调用。

query api

query
该模块提供了类似于jQuery的众多Query API

基于此模块的skylark-jquery则提供了与jquery完全兼容。

用法

使用节点级API

define(["skylarkjs"],function(skylarkjs){
  var finder = skylarkjs.finder,
      geom = skylarkjs.geom;
      
  var el = finder.find(".target:first");
  if (el) {
    var p = geom.pagePosition(el);
    p.left = p.left + 10;
    p.top = p.top + 30;
    styler.css(el,{
      position : "absoute"
    });
    geom.pagePosition(el,p);  
  }
});

使用vme api

vme模块实现了VisuleElement类型，用于包装可视DOM节点。

	
define(["skylarkjs"],function(skylarkjs){ 	
var vme = skylarkjs.vme;
//Get a VisualElement object from id
var ve1 = vme("id11");	

// Get a VisualElement object from dom node
var ve2 = vme(document.getElementById("id11"));	

// Get a VisualElement object from selector
var ve3 = vme.find(".cls1 .cls2");	

//Chains call
ve3.removeClass("cls1").addClass("cls2 cls3")	

});

VisualElement类可通过vme.VisualElement访问，您可以通过添加新的原型方法或静态方法来扩展它。

	
define(["skylarkjs"],function(skylarkjs){ 	
var vme = skylarkjs.vme;
  vme.VisualElement.partial({	
    newProp1 : "value1",	
    newMethod1 : function() {}	
  });	
});

使用query api

query模块提供了一系列与jquery兼容的方法，并且代码更简单，更有效率。您可以使用query，如使用jquery。

目录