一个小巧的javascript方法类库,并且提供部分动画交互效果。
DOM选择器
使用方法与jQuery的基本一致,但只提供部分API。
支持tagName
, className
, name
, id
, attribute
, string
等方式选择或创建DOM对象。
支持链式表达,暂不支持只对子级进行查找模式(div > p
)默认子孙级都查找,查找name
时请使用识别码@
,比如:@username
。
each()
遍历结果addClass()
添加样式removeClass()
删除样式hasClass()
包含样式data()
DataSetattr()
属性removeAttr()
删除属性remove()
移除元素after()
在之后添加afterTo()
添加到之后before()
在之前添加beforeTo()
添加到之前append()
内部添加子元素appendTo()
作为子元素添加到clone()
克隆html()
内部HTMLouterHtml()
外部HTMLtext()
文本内容val()
值eq()
索引first()
第一个last()
最后一个prev()
前一个next()
下一个find()
查找下级元素css()
CSS属性、设置width()
宽度height()
高度innerWidth()
内部宽度innerHeight()
内部高度alpha()
透明度show()
显示hide()
隐藏
on()
事件绑定fade()
淡入淡出shake()
震动animateShape()
形状动画get()
坐标值top, left, right, bottomserialize()
序例化表单数据checkbox()
选项框操作
以上API的使用与jQuery的使用基本一致,支持链式操作。部分如outerHtml()
; alpha()
等是jClass自有的API。
var $ = jClass;
$('#open').append($('div p.test').clone().attr('title', 'this is clone.'));
$('a').on('click', function(){
$(this).shake(3); // 重复3次的默认偏移震动
return false;
});
扩展方法
jClass提供扩展方法用于一些日常的效果实现
load()
页面内容加载完成domReady()
页面结构加载完成addEvent()
添加事件delEvent()
移除事件isWho()
浏览器检测colorToRgb()
RGB颜色值colorToHex()
十六进制颜色值listMove()
多选下拉项转换getHTML()
HTML文本内某节点的HTMLcookie
CookiesstopBubble()
阻止冒泡
$.load(function(){
if ($.isWho('ie')) {
$.cookie.set('isIE', 'true', 30);
}
});
AJAX请求
方法执行后返回XHR对象,可将此对象赋值给变量后,执行abort()
操作。
本方法提供AJAX重发功能,可在触发error
回调时执行retry()
方法,重新执行AJAX请求,重试次数由配置retryCount
指定,默认为3次。
注意本方法只提供success
, error
的回调,与jQuery支持的回调方法略有不同,并且不支持$.get()
, $.post()
等方法。
var xhr = $.ajax({
url: 'http://www.simple.com/simple.php',
method: 'POST',
dataType: 'JSON',
data: {
user: 'Angus',
age: 28,
list: [1, 2, 3, 4]
},
success: function (jData, xhr){
// success callback
// this === jConfig
},
error: function (nStatus) {
// error callback
// this.retry();
}
});
© AngusYoung
E-mail: angusyoung@mrxcool.com
Home: http://mrxcool.com