Node API
========================================================
.. contents::
:depth: 2
.. index:: K
.. _K:
K(expr , root)
--------------------------------------------------------
创建或选取KNode对象,KNode是原生node的封装,KNode对象拥有以下属性和方法。
* 参数:
* string|node expr: DOM元素、选择器表达式、HTML代码
* element root: DOM根元素,在root范围内选择DOM元素
* 返回: KNode
示例:
.. sourcecode:: js
node = K('
abc
');
node = K('#id div');
node = K(document.getElementById('id'));
firstNode = node[0];
.. index:: length
.. _KNode.length:
length
--------------------------------------------------------
node数量
.. sourcecode:: js
var length = K('#id div').length;
.. index:: doc
.. _KNode.doc:
doc
--------------------------------------------------------
第一个node的document对象。
.. sourcecode:: js
var doc = K('#id div').doc;
.. index:: name
.. _KNode.name:
name
--------------------------------------------------------
第一个node的nodeName。
.. index:: type
.. _KNode.type:
type
--------------------------------------------------------
第一个node的nodeType。1: Element, 3: textNode
.. index:: bind
.. _KNode.bind:
bind(type , fn)
--------------------------------------------------------
将指定函数绑定到所有KNode的指定事件上。
* 参数:
* string type: 事件类型
* function fn: 回调函数
* 返回: KNode
示例:
.. sourcecode:: js
K('#id div').bind('click', function() {
alert(this.nodeName + ': clicked');
});
K('#id div').click(function() {
alert(this.nodeName + ': clicked');
});
.. index:: unbind
.. _KNode.unbind:
unbind([type , fn])
--------------------------------------------------------
移除已绑定的事件函数。
* 参数:
* string type: 事件类型
* function fn: 回调函数
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').unbind('click', functionName); //移除指定的事件函数
K('#id').unbind('click'); //移除所有click事件函数
K('#id').unbind(); //移除所有事件函数
.. index:: fire
.. _KNode.fire:
fire(type)
--------------------------------------------------------
执行绑定在第一个node上的事件函数。
* 参数:
* string type: 事件类型
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').fire('click');
K('#id').click();
.. index:: hasAttr
.. _KNode.hasAttr:
hasAttr(key)
--------------------------------------------------------
判断第一个node是否拥有指定属性。
* 参数:
* string key: 属性名
* 返回: boolean
示例:
.. sourcecode:: js
var bool = K('#id').hasAttr('border');
.. index:: attr
.. _KNode.attr:
attr()
--------------------------------------------------------
取得第一个node的所有属性.
* 参数: 无
* 返回: object
示例:
.. sourcecode:: js
var attrList = K('#id').attr(); //return key-value data
attr(key)
--------------------------------------------------------
取得第一个node的指定属性.
* 参数:
* string key: 属性名
* 返回: string
示例:
.. sourcecode:: js
var border = K('#id').attr('border');
attr(key, val)
--------------------------------------------------------
设置所有node的属性。
* 参数:
* string key: 属性名
* string val: 属性值
* 返回: KNode
示例:
.. sourcecode:: js
K('#id img').attr('border', 1);
attr(obj)
--------------------------------------------------------
设置所有node的多个属性。
* 参数:
* object obj: key-value数组
* 返回: KNode
示例:
.. sourcecode:: js
K('#id img').attr({
'width' : '100px',
'border' : 1
});
.. index:: removeAttr
.. _KNode.removeAttr:
removeAttr(key)
--------------------------------------------------------
移除所有node的指定属性.
* 参数:
* string key: 属性名
* 返回: KNode
示例:
.. sourcecode:: js
K('#id img').removeAttr('border');
.. index:: get
.. _KNode.get:
get([i])
--------------------------------------------------------
取得原生node,当KNode的length为0时,返回null.
* 参数:
* int i: offset,默认值为0
* 返回: node
示例:
.. sourcecode:: js
div1 = K('#id div').get(0);
div2 = K('#id div').get(1);
.. index:: eq
.. _KNode.eq:
eq(i)
--------------------------------------------------------
将KNode对象转换成length为1的KNode对象。
* 参数:
* int i: The index of the element in the KNode object.
* 返回: KNode
示例:
.. sourcecode:: js
K('div').eq(2).addClass('blue');
.. index:: hasClass
.. _KNode.hasClass:
hasClass(cls)
--------------------------------------------------------
判断第一个node是否拥有指定class。
* 参数:
* string cls: className
* 返回: boolean
示例:
.. sourcecode:: js
var bool = K('#id').hasClass('class-name');
.. index:: addClass
.. _KNode.addClass:
addClass(cls)
--------------------------------------------------------
将指定className添加到所有node。
* 参数:
* string cls: className
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').addClass('class-name');
.. index:: removeClass
.. _KNode.removeClass:
removeClass(cls)
--------------------------------------------------------
移除所有node上的指定className。
* 参数:
* string cls: className
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').removeClass('class-name');
.. index:: html
.. _KNode.html:
html()
--------------------------------------------------------
取得第一个node的innerHTML。
* 参数: 无
* 返回: string
示例:
.. sourcecode:: js
var html = K('#id').html();
html(val)
--------------------------------------------------------
设置所有node的innerHTML。
* 参数:
* string val: HTML字符串
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').html('abc');
.. index:: hasVal
.. _KNode.hasVal:
hasVal()
--------------------------------------------------------
判断第一个node是否拥有value属性。
* 参数: 无
* 返回: boolean
示例:
.. sourcecode:: js
bool = K('#textarea').hasVal(); //return true
bool = K('#div').hasVal(); //return false
.. index:: val
.. _KNode.val:
val()
--------------------------------------------------------
取得第一个node的value。
* 参数: 无
* 返回: string
示例:
.. sourcecode:: js
var value = K('#textarea').val();
val(val)
--------------------------------------------------------
设置所有node的value。
* 参数: 无
* 返回: KNode
示例:
.. sourcecode:: js
K('#textarea').val('abc');
.. index:: css
.. _KNode.css:
css()
--------------------------------------------------------
取得第一个node的所有CSS.
* 参数: 无
* 返回: object
示例:
.. sourcecode:: js
var cssList = K('#id').css(); //return key-value data
css(key)
--------------------------------------------------------
取得第一个node的指定CSS.
* 参数:
* string key: CSS key
* 返回: string
示例:
.. sourcecode:: js
var padding = K('#id').css('padding');
css(key, val)
--------------------------------------------------------
设置所有node的CSS。
* 参数:
* string key: CSS key
* string val: CSS value
* 返回: KNode
示例:
.. sourcecode:: js
K('#id div').css('border', '1px solid #000');
css(obj)
--------------------------------------------------------
设置所有node的多个CSS。
* 参数:
* object obj: key-value数组
* 返回: KNode
示例:
.. sourcecode:: js
K('#id div').css({
'width' : '100px',
'height' : '50px',
'padding' : '10px'
});
.. index:: width
.. _KNode.width:
width()
--------------------------------------------------------
取得第一个node的宽度(px).
* 参数: 无
* 返回: int
示例:
.. sourcecode:: js
var width = K('#id').width();
width(val)
--------------------------------------------------------
设置所有node的宽度。
* 参数:
* string val: 宽度
* 返回: KNode
示例:
.. sourcecode:: js
K('#id div').width(200);
K('#id div').width('200px');
K('#id div').width('100%');
.. index:: height
.. _KNode.height:
height()
--------------------------------------------------------
取得第一个node的高度(px).
* 参数: 无
* 返回: int
示例:
.. sourcecode:: js
var height = K('#id').height();
height(val)
--------------------------------------------------------
设置所有node的高度。
* 参数:
* string val: 高度
* 返回: KNode
示例:
.. sourcecode:: js
K('#id div').height(200);
K('#id div').height('200px');
K('#id div').height('100%');
.. index:: opacity
.. _KNode.opacity:
opacity(val)
--------------------------------------------------------
设置所有node的透明度.
* 参数:
* float val: 透明度,0~1
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').opacity(0.5);
.. index:: data
.. _KNode.data:
data(key)
--------------------------------------------------------
取得已绑定的自定义数据。
* 参数:
* string key: data key
* 返回: string
示例:
.. sourcecode:: js
var data = K('#id').data('data_id');
data(key, val)
--------------------------------------------------------
绑定自定义数据。
* 参数:
* string key: data key
* string val: data value
* 返回: string
示例:
.. sourcecode:: js
K('#id').data('abc', 1);
.. index:: pos
.. _KNode.pos:
pos()
--------------------------------------------------------
取得第一个node在整个document上的x坐标和y坐标。
* 参数: 无
* 返回: string
示例:
.. sourcecode:: js
var pos = K('#id').pos();
var x = pos.x;
var y = pos.y;
.. index:: clone
.. _KNode.clone:
clone(bool)
--------------------------------------------------------
复制第一个node,并返回第一个node的KNode。
* 参数:
* boolean bool: true时复制所有子节点,false时只复制父节点
* 返回: 新的KNode
示例:
.. sourcecode:: js
var newKNode = K('#id').clone();
.. index:: append
.. _KNode.append:
append(expr)
--------------------------------------------------------
element添加一个子节点。
* 参数:
* string|node expr: DOM元素、选择器表达式、HTML代码
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').append(divNode);
K('#id').append('def
');
.. index:: before
.. _KNode.before:
before(expr)
--------------------------------------------------------
node的前面添加一个节点。
* 参数:
* string|node expr: DOM元素、选择器表达式、HTML代码
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').before(divNode);
K('#id').before('def
');
.. index:: after
.. _KNode.after:
after(expr)
--------------------------------------------------------
node的后面添加一个节点。
* 参数:
* string|node expr: DOM元素、选择器表达式、HTML代码
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').after(divNode);
K('#id').after('def
');
.. index:: replaceWith
.. _KNode.replaceWith:
replaceWith(expr)
--------------------------------------------------------
替换node。
* 参数:
* string|node expr: DOM元素、选择器表达式、HTML代码
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').replaceWith(divNode);
K('#id').replaceWith('def
');
.. index:: remove
.. _KNode.remove:
remove([keepChilds])
--------------------------------------------------------
删除node。
* 参数:
* boolean keepChilds: 是否保留子节点,true或false,默认值为false
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').remove();
.. index:: show
.. _KNode.show:
show([val])
--------------------------------------------------------
显示element。
* 参数:
* string val: display的值,默认值为block
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').show();
.. index:: hide
.. _KNode.hide:
hide()
--------------------------------------------------------
隐藏element。
* 参数: 无
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').hide();
.. index:: outer
.. _KNode.outer:
outer()
--------------------------------------------------------
取得第一个element的outerHTML。
* 参数: 无
* 返回: string
示例:
.. sourcecode:: js
var html = K('#id').outer();
.. index:: isSingle
.. _KNode.isSingle:
isSingle()
--------------------------------------------------------
判断第一个element是否有闭合标签。
* 参数: 无
* 返回: boolean
示例:
.. sourcecode:: js
if (K('div').isSingle()) {
console.log('false');
}
.. index:: isInline
.. _KNode.isInline:
isInline()
--------------------------------------------------------
判断第一个element是不是inline element。
* 参数: 无
* 返回: boolean
示例:
.. sourcecode:: js
if (K('div').isInline()) {
console.log('false');
}
.. index:: isBlock
.. _KNode.isBlock:
isBlock()
--------------------------------------------------------
判断第一个element是不是block element。
* 参数: 无
* 返回: boolean
示例:
.. sourcecode:: js
if (K('div').isBlock()) {
console.log('true');
}
.. index:: contains
.. _KNode.contains:
contains(otherNode)
--------------------------------------------------------
判断第一个element是否包含指定node。
* 参数:
* node otherNode: 任意节点
* 返回: boolean
示例:
.. sourcecode:: js
if (K('div#id').contains(K('div#id p')[0])) {
console.log('true');
}
.. index:: parent
.. _KNode.parent:
parent()
--------------------------------------------------------
取得第一个node的父节点。
* 参数: 无
* 返回: KNode
示例:
.. sourcecode:: js
var parentNode = K('#id').parent();
.. index:: children
.. _KNode.children:
children()
--------------------------------------------------------
取得第一个node的子节点列表。
* 参数: 无
* 返回: KNode
示例:
.. sourcecode:: js
K('#id').children().css('color', 'red');
.. index:: first
.. _KNode.first:
first()
--------------------------------------------------------
取得第一个node的第一个子节点。
* 参数: 无
* 返回: KNode
示例:
.. sourcecode:: js
var firstNode = K('#id').first();
.. index:: last
.. _KNode.last:
last()
--------------------------------------------------------
取得第一个node的最后一个子节点。
* 参数: 无
* 返回: KNode
示例:
.. sourcecode:: js
var lastNode = K('#id').last();
.. index:: index
.. _KNode.index:
index()
--------------------------------------------------------
取得第一个node在父节点中的偏移位置。
* 参数: 无
* 返回: int
示例:
.. sourcecode:: js
var index = K('div#id p').index();
.. index:: prev
.. _KNode.prev:
prev()
--------------------------------------------------------
取得第一个node的上一个节点。
* 参数: 无
* 返回: KNode
示例:
.. sourcecode:: js
var prevNode = K('#id').prev();
.. index:: next
.. _KNode.next:
next()
--------------------------------------------------------
取得第一个node的下一个节点。
* 参数: 无
* 返回: KNode
示例:
.. sourcecode:: js
var nextNode = K('#id').next();
.. index:: scan
.. _KNode.scan:
scan(fn [, order])
--------------------------------------------------------
遍历第一个node的所有子节点。
* 参数:
* function fn: 回调函数
* boolean order: 遍历方向,true为顺序,false为逆序,默认值为true
* 返回: KNode
示例:
.. sourcecode:: js
K('div#id').scan(function(node) (
console.log(node);
));