Show: Inherited Protected Private Deprecated

Node Class

Module: node

由node模块提供的类 Node,你只需要把 Node 看做 jquery 中的 $ 就可以了,非常方便

Constructor

`Node`

(

html
[props]
[ownerDocument]

)

Node

Parameters:

html String | HTMLElement | Text | Window | HTMLDocument | HTMLCollection | ArrayList | Node
不同类型有不同意义，如下：
- string : html 字符串, 例如 <div> , 根据该字符串生成 Node 对象
- HTMLElement|Text|Window|HTMLDocument : 把原生 DOM 节点包装成一个 Node 对象, 这个情景一般可用 Node.all 代替
- HTMLCollection|ArrayList : 将原生节点列表包装为一个 Node 对象
- Node : 从当前 Node 对象中克隆一个新对象返回
[props] Object optional

属性键值对, 对生成的 Node 对象代表的原生 DOM 节点设置属性. 仅当 html 参数为 html 字符串时使用
[ownerDocument] HTMLDocument optional

该 Node 产生的原生 DOM 节点所属的文档对象. 仅当 html 参数为 html 字符串时使用

Returns:

Node:

返回Node对象

Note1

Note2

以下的这些方法, filter() ,test() ,clone() ,empty() ,replaceWith() ,hasClass() ,addClass() ,removeClass() ,replaceClass() ,toggleClass() ,removeAttr() ,attr() ,hasAttr() ,prop() ,hasProp() ,val() ,text() ,css() ,toggle() ,offset() ,scrollIntoView() ,parent() ,index() ,next() ,prev() ,first() ,last() ,siblings() ,children() ,contains() ,html() ,remove() ,data() ,removeData() ,hasData() ,contains() ,unselectable() ,innerWidth() ,innerHeight() ,outerWidth() ,outerHeight() ,on() ,detach() ,fire() 的调用都会被转发给 dom , event , 原 DOM , Event 对应方法的第一个参数传入一个原生 DOM 节点数组, 而这个原生 DOM 节点数组则是由当前的 KISSY Node 对象得到的

Index
Methods

Item Index

Methods

add
addStyleSheet
after
all static
all
animate
append
appendTo
before
end
equals
fadeIn
fadeOut
fadeToggle
getDOMNode
getDOMNodes
height
hide
insertAfter
insertBefore
isPaused
isRunning
item
one static
one
pause
prepend
prependTo
resume
scrollLeft
scrollTop
show
slice
slideDown
slideToggle
slideUp
stop
toggle
width

Methods

`add`

(

html
[context]

)

返回包含合并选择器字符串匹配的元素和当前节点列表元素的新 NodeList 对象

Parameters:

html String | HTMLElement | Text | Window | HTMLDocument | HTMLCollection | ArrayList | Node

参数意义同Node.all
[context] Object optional

Example:

<p>1</p><div>2</div>

<script>
    var pdiv = $("p");
    var all=pdiv.add("div");  //  pdiv will not change
    all.css("color","red"); // => 1,2 都为红字
</script>

`addStyleSheet`

(

cssText
[id]

)

将 cssText 字符串作为内联样式表内容添加到节点所属的文档中

Parameters:

cssText String

样式内容
[id] String optional

内联样式表所在 style 节点的 id

`after`

(

content

)

Node

将参数内容插入到当前列表中每个元素后面,功能和insertAfter一样，只是参数意义不同

Parameters:

content HTMLElement | String | Node
将要插入的元素
- HTMLElement|Node: 已有或新创建的节点
- string: 选择器字符串, 查找已有的容器节点

Returns:

Node:

`all`

(

html
context

)

Node static

根据选择器字符串得到节点列表

Parameters:

html String | HTMLElement | Text | Window | HTMLDocument | HTMLCollection | ArrayList | Node

不同参数类型有不同意义，意义请参考Node构造函数说明
context HTMLElement | Document | Node

选择器上下文

Returns:

Node:

返回相应的Node对象

Example:

选择器上下文默认情况下是在文档根节点开始依据选择器字符串开始匹配元素查找. 但是一个上下文可以作为可选的第二个参数来限定查找范围, 例如在事件处理器范围内进行查找匹配元素：
```
$('div.foo').on("click",function() {
$('span', this).addClass('bar');
});
```
当对 span 的选择限定在 this 中时, 只有位于点击元素内的 span 节点会被设置格外的 class.也可以通过 $(this).all("span") 来实现限定搜索范围

使用原生 DOM 节点

$('div.foo').on("click",function() {
$(this).slideUp();
});

`all`

(

selector

)

Node

得到当前节点列表内符合选择器字符串的子孙节点列表

Parameters:

selector String

选择器字符串

Returns:

Node:

Example:

查看demo

`animate`

(

arg...

)

Node

在当前节点列表上开始动画

Parameters:

arg... Object

参数参考Anim的构造函数

Returns:

Node:

`append`

(

content

)

Node

将参数内容插入到当前节点列表中的每个元素的末尾.

Parameters:

content HTMLElement | String | Node

将要插入的内容

Returns:

Node:

Example:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

require(["node"],function($){
    $('.inner').append('<p>Test</p>');
});

内层的每个 div 元素都得到了新内容

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

Note

当把页面上已有的元素添加到目标容器中，若目标容器有多个，则只有第一个被添加进去的是参数节点，其他的都是参数节点的克隆节点

`appendTo`

(

content

)

Node

将当前节点列表中的每个元素插入到容器列表的每个元素的最后一个子节点后面,功能与append已有，只是参数意义不同

Parameters:

content HTMLElement | String | Node
将要插入的内容
- HTMLElement|Node: 已有或新创建的节点
- string: 选择器字符串, 查找已有的容器节点

Returns:

Node:

`before`

(

content

)

Node

将参数内容插入到当前列表中每个元素之前,功能和insertBefore一样，只是参数意义不同

Parameters:

content HTMLElement | String | Node
将要插入的元素
- HTMLElement|Node: 已有或新创建的节点
- string: 选择器字符串, 查找已有的容器节点

Returns:

Node:

`end`

()

得到上一次 Node.one() / Node.all() 操作前的 Node 对象,引入该方法是为了更好的进行链式调用

Example:

<div class='d1'>
    d1
</div>

<div class='d2'>
    d2
</div>

<script>
    require(['node'], function ($) {
        $("body").all(".d1").css("color", "red").end().all(".d2").css("color", "green");

    });
</script>

`equals`

(

others

)

Boolean

比较当前节点列表和 others 代表的节点列表是否完全相同

Parameters:

others Node

要比较的目标节点列表

Returns:

Boolean:

`fadeIn`

(

[speed]
[callback]
[easing]

)

Node

当前节点列表元素以渐隐效果显示

Parameters:

[speed] Number optional

单位秒, 动画持续时间, 不设置无动画
[callback] Function optional

每个动画结束后回调函数
[easing] String optional

动画平滑函数,同Anim

Returns:

Node:

`fadeOut`

(

[speed]
[callback]
[easing]

)

Node

当前节点列表元素以渐隐效果隐藏

Parameters:

[speed] Number optional

单位秒, 动画持续时间, 不设置无动画
[callback] Function optional

每个动画结束后回调函数
[easing] String optional

动画平滑函数,同Anim

Returns:

Node:

`fadeToggle`

(

[speed]
[callback]
[easing]

)

Node

当前节点列表元素为显示时, 切换显示或隐藏, 且动画效果为渐隐

Parameters:

[speed] Number optional

单位秒, 动画持续时间, 不设置无动画
[callback] Function optional

每个动画结束后回调函数
[easing] String optional

动画平滑函数,同Anim

Returns:

Node:

`getDOMNode`

() Array

得到该 NodeList 对象包含的第一个原生节点

Returns:

Array:

返回该 Node 对象包含的第一个原生节点

`getDOMNodes`

() Array

得到该 Node 对象包含的原生节点数组

Returns:

Array:

返回该 Node 对象包含的原生节点数组

Example:

<p id='p1'>1</p><p id='p2'>2</p>

<script>
    require(["node"],function($){
        var pdiv = $("p"),
            all=pdiv.getDOMNodes(); // => all == [document.getElementById("p1"),document.getElementById("p2")]

    })
</script>

`height`

(

[value]

)

得到/设置当前节点列表第一个节点的计算高度，不含margin/padding/border

Parameters:

[value] Number optional
- 当忽略value不填，则是“获取”
- 当value为数值，则是“设置”

Returns:

自身this

`hide`

(

[speed]
[callback]

)

Node

当前节点列表元素以动画效果隐藏

Parameters:

[speed] Number optional

单位秒, 动画持续时间, 不设置无动画
[callback] Function optional

每个动画结束后回调函数

Returns:

Node:

`insertAfter`

(

target

)

Node

将当前列表中的每个元素插入到目标元素后面

Parameters:

target HTMLElement | String | Node
目标元素
- HTMLElement|Node: 已有或新创建的节点
- string: 选择器字符串, 查找已有的容器节点

Returns:

Node:

`insertBefore`

(

target

)

Node

将当前列表中的每个元素插入到目标元素之前

Parameters:

target HTMLElement | String | Node
目标元素
- HTMLElement|Node: 已有或新创建的节点
- string: 选择器字符串, 查找已有的容器节点

Returns:

Node:

`isPaused`

() Boolean

判断当前 Node 对象是否在暂停中, Node对象列表中只要有一个 Node对象在暂停, 就会返回 true 值

Returns:

Boolean:

`isRunning`

() Boolean

判断当前 Node 对象是否在动画中, Node对象列表中只要有一个 Node对象在动画, 就会返回 true 值

Returns:

Boolean:

`item`

(

index

)

Null | Node

获取包含当前节点列表 index 位置处的单个原生节点的新 Node 对象

Parameters:

index Number

Returns:

Null | Node:

null 或者包含一个原生节点的 NodeList 对象

`one`

(

arg..

)

Node static

返回匹配的第一个Node对象

Parameters:

arg.. Object

如果参数为选择字符串, 找不到则返回 null,其他情况参考Node.all说明

Returns:

Node:

`one`

(

selector

)

Null | Node

得到当前节点列表内符合选择器字符串的子孙节点列表的第一个Node对象

Parameters:

selector String

选择器字符串

Returns:

Null | Node:

返回null或者Node对象

`pause`

(

[queueName]

)

Node

暂停当前节点列表的动画

Parameters:

[queueName] Object optional

涵义同 Anim.pause

Returns:

Node:

`prepend`

(

content

)

Node

将参数内容插入到当前节点列表中的每个元素的开头.

Parameters:

content HTMLElement | String | Node

将要插入的内容

Returns:

Node:

`prependTo`

(

content

)

Node

将当前节点列表中的每个元素插入到容器列表的每个元素的最后一个子节点开头,功能与prependTo已有，只是参数意义不同

Parameters:

content HTMLElement | String | Node
将要插入的内容
- HTMLElement|Node: 已有或新创建的节点
- string: 选择器字符串, 查找已有的容器节点

Returns:

Node:

`resume`

(

[queueName]

)

Node

继续当前节点列表的动画

Parameters:

[queueName] Object optional

涵义同 Anim.pause

Returns:

Node:

`scrollLeft`

(

[value]

)

得到/设置当前节点列表第一个节点的滚动条的横向位置

Parameters:

[value] Number optional
- 当忽略value不填，则是“获取”
- 当value为数值，则是“设置”

Returns:

自身this

`scrollTop`

(

[value]

)

得到/设置当前节点列表第一个节点的滚动条的垂直位置

Parameters:

[value] Number optional
- 当忽略value不填，则是“获取”
- 当value为数值，则是“设置”

Returns:

自身this

`show`

(

[speed]
[callback]

)

Node

当前节点列表元素以动画效果显示

Parameters:

[speed] Number optional

单位秒, 动画持续时间, 不设置无动画
[callback] Function optional

每个动画结束后回调函数

Returns:

Node:

`slice`

(

start
[end]

)

Node

获取包含当前节点列表选定范围内原生节点的新 Node 对象,调用该方法并不会改变当前 Node 实例

Parameters:

start Number

范围开始位置
[end] Number optional

范围结束位置，忽略的话结束坐标为当前列表末尾

Returns:

Node:

`slideDown`

(

[speed]
[callback]
[easing]

)

Node

当前节点列表元素从上到下滑动显示

Parameters:

[speed] Number optional

单位秒, 动画持续时间, 不设置无动画
[callback] Function optional

每个动画结束后回调函数
[easing] String optional

动画平滑函数,同Anim

Returns:

Node:

`slideToggle`

(

[speed]
[callback]
[easing]

)

Node

当前节点列表元素为显示时, 切换显示或隐藏, 且动画效果为滑动展开折叠

Parameters:

[speed] Number optional

单位秒, 动画持续时间, 不设置无动画
[callback] Function optional

每个动画结束后回调函数
[easing] String optional

动画平滑函数,同Anim

Returns:

Node:

`slideUp`

(

[speed]
[callback]
[easing]

)

Node

当前节点列表元素从上到下滑动隐藏

Parameters:

[speed] Number optional

单位秒, 动画持续时间, 不设置无动画
[callback] Function optional

每个动画结束后回调函数
[easing] String optional

动画平滑函数,同Anim

Returns:

Node:

`stop`

(

[args..]

)

Node

停止当前节点列表的动画, end, clearQueue, queueName, 涵义同 Anim.stop().

Parameters:

[args..] Object optional

参考Anim.stop

Returns:

Node:

`toggle`

(

[speed]
[callback]

)

Node

当前节点列表元素为显示时动画效果隐藏, 否则动画效果显示

Parameters:

[speed] Number optional

单位秒, 动画持续时间, 不设置无动画
[callback] Function optional

每个动画结束后回调函数

Returns:

Node:

`width`

(

[value]

)

得到/设置当前节点列表第一个节点的计算宽度，不含margin/padding/border

Parameters:

[value] Number optional
- 当忽略value不填，则是“获取”
- 当value为数值，则是“设置”

Returns:

自身this

APIs

Node Class

Constructor

Node

Parameters:

Returns:

Note1

推荐除了需要生成文本节点的情况下, 统统使用 Node.all() 代替

Note2

Item Index

Methods

Methods

add

Parameters:

Example:

addStyleSheet

Parameters:

after

Parameters:

Returns:

all

Parameters:

Returns:

Example:

all

Parameters:

Returns:

Example:

animate

Parameters:

Returns:

append

Parameters:

Returns:

Example:

Note

appendTo

Parameters:

Returns:

before

Parameters:

Returns:

end

Example:

equals

Parameters:

Returns:

fadeIn

Parameters:

Returns:

fadeOut

Parameters:

Returns:

fadeToggle

Parameters:

Returns:

getDOMNode

Returns:

getDOMNodes

Returns:

Example:

height

Parameters:

Returns:

hide

Parameters:

Returns:

insertAfter

Parameters:

Returns:

insertBefore

Parameters:

Returns:

isPaused

Returns:

isRunning

Returns:

item

Parameters:

Returns:

`Node`

`add`

`addStyleSheet`

`after`

`all`

`all`

`animate`

`append`

`appendTo`

`before`

`end`

`equals`

`fadeIn`

`fadeOut`

`fadeToggle`

`getDOMNode`

`getDOMNodes`

`height`

`hide`

`insertAfter`

`insertBefore`

`isPaused`

`isRunning`

`item`

`one`

`one`

`pause`

`prepend`

`prependTo`

`resume`

`scrollLeft`

`scrollTop`

`show`

`slice`

`slideDown`

`slideToggle`

`slideUp`

`stop`

`toggle`

`width`