Mo.js

Mo.js - 高效 JavaScript 函数库

Mo( selector[, context] )

页面元素对象，通常用 ID、name、class 等属性匹配。

selector 选择器表达式或 Element 对象

context 基准对象，默认为 document

Mo("#example");

支持以下 CSS 选择器：

选择器：	含义：	选择器：	含义：
tag		tag > .className
tag > tag		#id > tag.className
.className tag		tag, tag, #id
tag#id.className		.className
span > * > b		input[name=password]
input[name='config[theme]']

注意：此处元素对象为 Mo 对象，并不能像 DOM 对象一样直接操作和访问，如有需要，请使用 .item() 和 .each() 来转换成 DOM 对象。

.size()

返回元素数量，如果没有则返回 0

Mo("#example").size();

.item( index[, self] )

返回指定位置元素 DOM，如果没有则返回 null

index 元素索引，从 0 开始计数，可以使用负数来倒序获取

self [可选]是否将当前元素置为所选元素，默认为 false

Mo("#example").item( 0 );

使用负数（-），从尾至首（倒序）返回指定位置元素

Mo("*").item( -4 );

.hide( [speed, func] )

将元素隐藏，并且可以设置回调事件

speed 速度

func 回调函数

func 可接受参数

ele 当前元素对象，也可直接使用 this

Mo("#example").hide();

测试

我叫 Mo.js ，你可以称呼我为小 Mo。

.show( [speed, func] )

将元素显示，并且可以设置回调事件

speed 速度

func 回调函数

func 可接受参数

ele 当前元素对象，也可直接使用 this

Mo("#example").show();

测试

我叫 Mo.js ，你可以称呼我为小 Mo。

.toggle( [speed, func] )

显示或隐藏元素。

speed 速度

func 回调函数

func 可接受参数

ele 当前元素对象，也可直接使用 this

res 当前元素对象是否可见，true 或 false

Mo("#example").toggle();

测试

我叫 Mo.js ，你可以称呼我为小 Mo。

.value()

返回元素的值，仅针对表单元素：input | radio | checkbox | button | file | select | textarea

Mo("#example").value();

测试

Mo("input[name=multi]").value();

测试

Mo("input[name=chkbox]").value();

A B C 测试

.value( text[, add] )

设置元素的值，仅针对表单元素：input | button | select | textarea

text 字符串（checkbox 和 radio 支持数组）

add [可选]是否在原字符串上追加

Mo("#example").value( 'Hello!');

text	hidden
radio	checkbox
A B C	A B C
textarea	select
xxx	A B C
select multiple
A B C

.text()

返回选中元素的文本，仅针对表单元素：select

Mo("#example").text();

A+ B+ C+

.text( text[, replace] )

设置选中元素的文本，仅针对表单元素：select

text 字符串

replace [可选]新的文本

Mo("#example").text( 'C+' );

A+ B+ C+

Mo("#example").text( 'C+', 'D+' );

测试

.html( )

返回元素的 HTML 代码片段。

Mo("#example").html( );

.html( html[, add] )

设置或返回元素的 HTML 代码片段。

html HTML 代码片段

add [可选]是否在原代码上追加

Mo("#example").html( '<a href="http://www.veryide.com/">VeryIDE</a>' );

测试

我叫 Mo.js ，你可以称呼我为小 Mo。

.attr( attr )

返回元素的属性信息，不存在则返回 null

attr 属性名称

Mo("#example").attr( "width" );

.attr( { key : val } )

设置元素的属性信息

key 属性名称

val 属性值

Mo("#example").attr( "width" , Mo.between( 100 , 200 ) );

测试

.style( attr )

返回元素的 CSS 样式信息。

attr 属性名称

Mo("#example").style( "color" );

.style( { key : val } )

设置元素的 CSS 样式信息。

key 属性名称

val 属性值

Mo("#example").style( { "color" : "red" } );

请使用如下语法：

语法	作用
color	颜色
backgroundImage	背景图片
fontSize	字号
zIndex	深度

.position()

返回第一个元素的位置和尺寸信息。

Mo("#example").position();

测试

.each( func )

遍历元素，对每个元素执行回调函数。

func 函数名称或匿名函数

func 可接受参数

ele 当前元素对象，也可直接使用 this

index 当前元素索引值

Mo("#example").each( function( ele, index ){} );

注意：如果需要在执行过程中终止遍历，需要使用 return false;

Mo("#example").each( function( ele, index ){
                
        if( index == 2 ){
            return false;
        }
        
} );

.prev( [self] )

访问上一个兄弟节点，并将其设置为当前节点。

self [可选]是否将当前元素置为所选元素，默认为 false

Mo("#example").prev( true );

.next( [self] )

访问下一个兄弟节点，并将其设置为当前节点。

self [可选]是否将当前元素置为所选元素，默认为 false

Mo("#example").prev( true );

.parent( level )

访问元素父节点，并将其设置为当前节点。

level 节点层次，默认为 1

Mo("#example").parent( 2 );

.blur( func )

将当前元素失去焦点，并回调函数。

func 回调函数

func 可接受参数

ele 当前元素对象，也可直接使用 this

index 当前元素索引值

Mo("#example").blur();

测试

.bind( event, func )

为当前元素绑定指定的事件。

event 事件名称

func 函数名称或匿名函数

func 可接受参数

this 当前元素对象

this.index 当前元素索引值

event event 对象

Mo("#example").bind( 'click',function(){ Mo("#bind_box").html("你点了我一下！"); } )

测试

这里是操作的内容。

.unbind( event )

取消当前元素指定事件的绑定。

event 事件名称

Mo("#example").unbind();

测试

.event( event )

模拟事件响应。

Mo("#example").event('click');

.submit( func )

将当前表单提交，并在之行执行函数。

func 回调函数

func 可接受参数

ele 当前元素对象，也可直接使用 this

index 当前元素索引值

func 需返回参数

true 继续表单提交

false 取消表单提交

Mo("#example").submit( function(){ return confirm( '确定要提交吗?' ); } );

测试

.reset( func )

将当前表单重置，并在之行执行函数。

func 回调函数

func 可接受参数

ele 当前元素对象，也可直接使用 this

index 当前元素索引值

func 需返回参数

true 继续表单重置

false 取消表单重置

Mo("#example").reset( function(){ return confirm( '确定要重置吗?' ); } );

测试

.focus( func )

将当前元素设置焦点，并回调函数。

func 回调函数

func 可接受参数

ele 当前元素对象，也可直接使用 this

index 当前元素索引值

Mo("#example").focus( function(){ Mo( this ).html( '光标在这里！' ); } );

测试

.blur( func )

将当前元素失去焦点，并回调函数。

func 回调函数

func 可接受参数

ele 当前元素对象，也可直接使用 this

index 当前元素索引值

Mo("#example").blur();

测试

.disabled()

将当前元素禁用。

Mo("#example").disabled();

测试

这里是操作的内容。

注意：在 Webkit 为核心的浏览器中，.disabled() 容器并不会影响子元素，如有必要请使用 Mo("#example *").disabled(); 来实现 。

.enabled()

将当前元素启用。

Mo("#example").enabled();

测试

这里是操作的内容。

注意：在 Webkit 为核心的浏览器中，.enabled() 容器并不会影响子元素，如有必要请使用 Mo("#example *").enabled(); 来实现 。

.checked( [boolean] )

选中或取消选中当前元素，本方法只针对 checkbox 元素有效。

boolean 布尔值，true 或 false，为空时为反选

Mo("input[type=checkbox]").checked( true );

全选

Mo("input[type=checkbox]").checked( false );

不选

Mo("input[type=checkbox]").checked();

反选

A B C C D E

.create( tag[, attr, self] )

在当前元素上创建子元素。

tag 标签名称

attr 属性集合，{ "abc" : "def" } 形式，可以多个

self [可选]是否将当前元素置为所选元素，默认为 false

Mo("#example").create( "strong" , { "innerHTML" : "我是刚创建的 strong 标签。", "data-test" : "strong" } );

测试

.insert( tag[, attr, self] )

在当前元素前面位置创建兄弟元素。

tag 标签名称

attr 属性集合，{ "abc" : "def" } 形式，可以多个

self [可选]是否将当前元素置为所选元素，默认为 false

Mo("#example").insert( "p" , { "innerHTML" : "我是刚创建的 p 标签。" } );

测试

我是参照对象

.append( ele )

将当前元素插入到指定位置。

ele 元素集合，hr, br 形式，可以多个

Mo("#example").append( document.createElement("hr") );

同时插入多个元素。

Mo("#example").append( document.createElement("hr"), document.createElement("br") );

测试

.remove( [attr] )

将当前元素从页面中移除。

Mo("#example").remove();

测试

这里是操作的内容。

将当前属性从元素中移除。

Mo("#example").remove( 'style' );

测试

这里是操作的内容。

Copyright © 2011 VeryIDE |Projects | Mo.js | Packer | Regex