Node API

K(expr , root)¶

创建或选取KNode对象，KNode是原生node的封装，KNode对象拥有以下属性和方法。

• 参数:

  • string|node expr: DOM元素、选择器表达式、HTML代码
  • element root: DOM根元素，在root范围内选择DOM元素

• 返回: KNode

示例:

node = K('<div>abc</div>');
node = K('#id div');
node = K(document.getElementById('id'));
firstNode = node[0];

length¶

node数量

var length = K('#id div').length;

doc¶

第一个node的document对象。

var doc = K('#id div').doc;

name¶

第一个node的nodeName。

type¶

第一个node的nodeType。1: Element, 3: textNode

bind(type , fn)¶

将指定函数绑定到所有KNode的指定事件上。

• 参数:

  • string type: 事件类型
  • function fn: 回调函数

• 返回: KNode

示例:

K('#id div').bind('click', function() {
        alert(this.nodeName + ': clicked');
});
K('#id div').click(function() {
        alert(this.nodeName + ': clicked');
});

unbind([type , fn])¶

移除已绑定的事件函数。

• 参数:

  • string type: 事件类型
  • function fn: 回调函数

• 返回: KNode

示例:

K('#id').unbind('click', functionName); //移除指定的事件函数
K('#id').unbind('click'); //移除所有click事件函数
K('#id').unbind(); //移除所有事件函数

fire(type)¶

执行绑定在第一个node上的事件函数。

• 参数:

  • string type: 事件类型

• 返回: KNode

示例:

K('#id').fire('click');
K('#id').click();

hasAttr(key)¶

判断第一个node是否拥有指定属性。

• 参数:

  • string key: 属性名

• 返回: boolean

示例:

var bool = K('#id').hasAttr('border');

attr()¶

取得第一个node的所有属性.

• 参数: 无
• 返回: object

示例:

var attrList = K('#id').attr(); //return key-value data

attr(key)¶

取得第一个node的指定属性.

• 参数:

  • string key: 属性名

• 返回: string

示例:

var border = K('#id').attr('border');

attr(key, val)¶

设置所有node的属性。

• 参数:

  • string key: 属性名
  • string val: 属性值

• 返回: KNode

示例:

K('#id img').attr('border', 1);

attr(obj)¶

设置所有node的多个属性。

• 参数:

  • object obj: key-value数组

• 返回: KNode

示例:

K('#id img').attr({
        'width' : '100px',
        'border' : 1
});

removeAttr(key)¶

移除所有node的指定属性.

• 参数:

  • string key: 属性名

• 返回: KNode

示例:

K('#id img').removeAttr('border');

get([i])¶

取得原生node，当KNode的length为0时，返回null.

• 参数:

  • int i: offset，默认值为0

• 返回: node

示例:

div1 = K('#id div').get(0);
div2 = K('#id div').get(1);

eq(i)¶

将KNode对象转换成length为1的KNode对象。

• 参数:

  • int i: The index of the element in the KNode object.

• 返回: KNode

示例:

K('div').eq(2).addClass('blue');

hasClass(cls)¶

判断第一个node是否拥有指定class。

• 参数:

  • string cls: className

• 返回: boolean

示例:

var bool = K('#id').hasClass('class-name');

addClass(cls)¶

将指定className添加到所有node。

• 参数:

  • string cls: className

• 返回: KNode

示例:

K('#id').addClass('class-name');

removeClass(cls)¶

移除所有node上的指定className。

• 参数:

  • string cls: className

• 返回: KNode

示例:

K('#id').removeClass('class-name');

html()¶

取得第一个node的innerHTML。

• 参数: 无
• 返回: string

示例:

var html = K('#id').html();

html(val)¶

设置所有node的innerHTML。

• 参数:

  • string val: HTML字符串

• 返回: KNode

示例:

K('#id').html('<strong>abc</strong>');

hasVal()¶

判断第一个node是否拥有value属性。

• 参数: 无
• 返回: boolean

示例:

bool = K('#textarea').hasVal(); //return true
bool = K('#div').hasVal(); //return false

val()¶

取得第一个node的value。

• 参数: 无
• 返回: string

示例:

var value = K('#textarea').val();

val(val)¶

设置所有node的value。

• 参数: 无
• 返回: KNode

示例:

K('#textarea').val('abc');

css()¶

取得第一个node的所有CSS.

• 参数: 无
• 返回: object

示例:

var cssList = K('#id').css(); //return key-value data

css(key)¶

取得第一个node的指定CSS.

• 参数:

  • string key: CSS key

• 返回: string

示例:

var padding = K('#id').css('padding');

css(key, val)¶

设置所有node的CSS。

• 参数:

  • string key: CSS key
  • string val: CSS value

• 返回: KNode

示例:

K('#id div').css('border', '1px solid #000');

css(obj)¶

设置所有node的多个CSS。

• 参数:

  • object obj: key-value数组

• 返回: KNode

示例:

K('#id div').css({
        'width' : '100px',
        'height' : '50px',
        'padding' : '10px'
});

width()¶

取得第一个node的宽度(px).

• 参数: 无
• 返回: int

示例:

var width = K('#id').width();

width(val)¶

设置所有node的宽度。

• 参数:

  • string val: 宽度

• 返回: KNode

示例:

K('#id div').width(200);
K('#id div').width('200px');
K('#id div').width('100%');

height()¶

取得第一个node的高度(px).

• 参数: 无
• 返回: int

示例:

var height = K('#id').height();

height(val)¶

设置所有node的高度。

• 参数:

  • string val: 高度

• 返回: KNode

示例:

K('#id div').height(200);
K('#id div').height('200px');
K('#id div').height('100%');

opacity(val)¶

设置所有node的透明度.

• 参数:

  • float val: 透明度，0~1

• 返回: KNode

示例:

K('#id').opacity(0.5);

data(key)¶

取得已绑定的自定义数据。

• 参数:

  • string key: data key

• 返回: string

示例:

var data = K('#id').data('data_id');

data(key, val)¶

绑定自定义数据。

• 参数:

  • string key: data key
  • string val: data value

• 返回: string

示例:

K('#id').data('abc', 1);

pos()¶

取得第一个node在整个document上的x坐标和y坐标。

• 参数: 无
• 返回: string

示例:

var pos = K('#id').pos();
var x = pos.x;
var y = pos.y;

clone(bool)¶

复制第一个node，并返回第一个node的KNode。

• 参数:

  • boolean bool: true时复制所有子节点，false时只复制父节点

• 返回: 新的KNode

示例:

var newKNode = K('#id').clone();

append(expr)¶

element添加一个子节点。

• 参数:

  • string|node expr: DOM元素、选择器表达式、HTML代码

• 返回: KNode

示例:

K('#id').append(divNode);
K('#id').append('<div class="abc">def</div>');

before(expr)¶

node的前面添加一个节点。

• 参数:

  • string|node expr: DOM元素、选择器表达式、HTML代码

• 返回: KNode

示例:

K('#id').before(divNode);
K('#id').before('<div class="abc">def</div>');

after(expr)¶

node的后面添加一个节点。

• 参数:

  • string|node expr: DOM元素、选择器表达式、HTML代码

• 返回: KNode

示例:

K('#id').after(divNode);
K('#id').after('<div class="abc">def</div>');

replaceWith(expr)¶

替换node。

• 参数:

  • string|node expr: DOM元素、选择器表达式、HTML代码

• 返回: KNode

示例:

K('#id').replaceWith(divNode);
K('#id').replaceWith('<div class="abc">def</div>');

remove([keepChilds])¶

删除node。

• 参数:

  • boolean keepChilds: 是否保留子节点，true或false，默认值为false

• 返回: KNode

示例:

K('#id').remove();

show([val])¶

显示element。

• 参数:

  • string val: display的值，默认值为block

• 返回: KNode

示例:

K('#id').show();

hide()¶

隐藏element。

• 参数: 无
• 返回: KNode

示例:

K('#id').hide();

outer()¶

取得第一个element的outerHTML。

• 参数: 无
• 返回: string

示例:

var html = K('#id').outer();

isSingle()¶

判断第一个element是否有闭合标签。

• 参数: 无
• 返回: boolean

示例:

if (K('div').isSingle()) {
        console.log('false');
}

isInline()¶

判断第一个element是不是inline element。

• 参数: 无
• 返回: boolean

示例:

if (K('div').isInline()) {
        console.log('false');
}

isBlock()¶

判断第一个element是不是block element。

• 参数: 无
• 返回: boolean

示例:

if (K('div').isBlock()) {
        console.log('true');
}

contains(otherNode)¶

判断第一个element是否包含指定node。

• 参数:

  • node otherNode: 任意节点

• 返回: boolean

示例:

if (K('div#id').contains(K('div#id p')[0])) {
        console.log('true');
}

parent()¶

取得第一个node的父节点。

• 参数: 无
• 返回: KNode

示例:

var parentNode = K('#id').parent();

children()¶

取得第一个node的子节点列表。

• 参数: 无
• 返回: KNode

示例:

K('#id').children().css('color', 'red');

first()¶

取得第一个node的第一个子节点。

• 参数: 无
• 返回: KNode

示例:

var firstNode = K('#id').first();

last()¶

取得第一个node的最后一个子节点。

• 参数: 无
• 返回: KNode

示例:

var lastNode = K('#id').last();

index()¶

取得第一个node在父节点中的偏移位置。

• 参数: 无
• 返回: int

示例:

var index = K('div#id p').index();

prev()¶

取得第一个node的上一个节点。

• 参数: 无
• 返回: KNode

示例:

var prevNode = K('#id').prev();

next()¶

取得第一个node的下一个节点。

• 参数: 无
• 返回: KNode

示例:

var nextNode = K('#id').next();

scan(fn [, order])¶

遍历第一个node的所有子节点。

• 参数:

  • function fn: 回调函数
  • boolean order: 遍历方向，true为顺序，false为逆序，默认值为true

• 返回: KNode

示例:

K('div#id').scan(function(node) (
        console.log(node);
));