ICE库文档v1.01
ICE介绍

iceui是一款前后端框架,核心主要分两部分组成,ice和ui,需要通过这两大模块来充分介绍iceui,第一部分是一个单独的ice.js,第二部分是需要依赖ice.js的ui.js。

ice.js是一个快速、简洁的JavaScript框架,它封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互,如果你很熟悉jQuery的话,那么本文档对你来说是非常易懂的。

ice的核心特性可以总结为:

  • 具有高效灵活的元素选择器
  • 具有灵活的链式语法,减少代码量
  • 封装了常用的功能方法,简单易用

是不是跟jQuery一样?其实jq已经很出色了,但是对我来说我具有强烈的代码洁癖,甚至已经到了匪夷所思的地步,我也不清楚我为什么会变成这样,我喜欢完美,代码整洁,如果用jQuery做一套框架的话,感觉不像是自己的亲生孩子,甚至可能会引发版权问题,以至于我自己开发了一套JavaScript框架,我取名为ice,「冰」的意思,你可以看成是冰清玉洁的意思,最后经过很长一段时间的迭代,如今已经很稳定,经过大量的性能测试,ice的性能要比jQuery快速的多,没错,ice吸取了众多框架的优点,完美的集聚于一身,ice封装了常用的功能,大家甚至可以像使用jQuery一样来使用ice,例如你想要获取某个元素的对象,可以这么做:ice('.item div'),动态添加淡入效果:ice('.item div').fadeIn()

ice会吸取其它框架的优点,并不会搞的那么另类那么唯我独尊,至少让你使用上会很方便。

ice更加简洁,运行更快,文件更小,min版不到30k,而jq(3.5.1)差不多90k。

解释到这里大家就明白了,ice.js是iceui的内核;一套使用非常便捷的JavaScript框架

ice.js 方法介绍
ice 选择器

语法:ice(string,object)

说明:使用方式与jQuery一样,支持各种组合方式,方法返回文档中匹配指定CSS选择器的所有元素,例如:

参数 类型 描述
string string|function 元素的class或者名称,如果为function,则页面加载完成后执行
object object DOM对象,用于获取该对象下的元素
ice选择器的继承对象
each 遍历
each 遍历

语法:ice(selector).each(function(index,element))

提示:function的this指的遍历的当前对象

参数 类型 描述
function(index,element,elementAll,length) function 必需,为每个匹配元素规定运行的函数。
  • index - 选择器的 index 位置。
  • element - 当前的元素(也可使用 "this" 选择器)。
  • elementAll - 当前遍历的元素集合。
  • length - 元素集合的总长度。
s 获取指定索引的对象
s 使用说明

语法:ice(selector).s(index)

提示:s()方法会用集合中的一个元素构造一个新的ice对象

参数 类型 描述
index int 整数,指示元素的位置(最小为 0)。
如果是负数,则从集合中的最后一个元素往回计数。
val 获取或设置对象的值
val 使用说明

语法:ice(selector).val(value)

提示:元素的值是通过 value 属性设置的。该方法大多用于 input 元素。但也支持select和textarea!

参数 类型 描述
value mix 可选,获取或设置对象的值
html 获取或设置html
html 使用说明

语法:ice(selector).html(content)

提示:获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。

参数 类型 描述
content mix 可选,获取或设置html
text 获取或设置text
text 使用说明

语法:ice(selector).text(content)

提示:获取集合中第一个匹配元素的text内容 或 设置每一个匹配元素的text内容。

参数 类型 描述
content mix 可选,获取或设置text
form 获取该对象下的表单内容,序列化name:value
ice.form 使用说明

语法:ice(selector).form()

log 打印对象
log 使用说明

语法:ice(selector).log()

参数 类型 描述
content object 打印对象
append 方法在被选元素的结尾插入内容(仍然在该元素的内部)
append 使用说明

语法:ice(selector).append(content)

参数 类型 描述
content mix DOM元素,文本节点,HTML字符串。
prepend 方法在被选元素的开头插入内容(仍然在该元素的内部)
prepend 使用说明

语法:ice(selector).prepend(content)

参数 类型 描述
content mix DOM元素,文本节点,HTML字符串。
before 方法在被选元素之前插入内容(在该元素的外面,紧挨着)
before 使用说明

语法:ice(selector).before(content)

参数 类型 描述
content mix DOM元素,文本节点,HTML字符串。
after 方法在被选元素之后插入内容(在该元素的外面,紧挨着)
after 使用说明

语法:ice(selector).after(content)

参数 类型 描述
content mix DOM元素,文本节点,HTML字符串。
page 获取对象距离窗口页面的顶部和左部的距离
page 使用说明

语法:ice(selector).page()

checkall 复选框全选
checkall 使用说明

语法:ice(selector).checkall()

inverse 复选框反选
inverse 使用说明

语法:ice(selector).inverse()

getCss 获取css设置的样式属性
getCss 使用说明

语法:ice(selector).getCss(attr)

参数 类型 描述
attr string 例如width、height,如果遇到line-height这种写法,请转为驼峰方式:lineHeight。
del 删除对象
del 使用说明

语法:ice(selector).del()

offset 获取对象距离屏幕的偏移量
offset 使用说明

语法:ice(selector).offset()

返回:object格式 {left:x, top:y}

css 设置或获取对象style的属性值
css 使用说明

语法:ice(selector).css(name, value)

attr 设置或获取对象Attribute的属性值
attr 使用说明

语法:ice(selector).attr(name, value)

delAttr 删除Attribute属性
delAttr 使用说明

语法:ice(selector).delAttr(name)

delCss 删除对象class
delCss 使用说明

语法:ice(selector).delCss(name)

click 给对象添加点击事件
click 使用说明

语法:ice(selector).click(fn)

dblclick 给对象添加双击事件
dblclick 使用说明

语法:ice(selector).dblclick(fn)

change 当元素的值发生改变时触发事件
change 使用说明

语法:ice(selector).change(fn)

on 给对象添加事件
on 使用说明

语法:ice(selector).on(type, fn, bool)

find 返回被选元素的后代元素
find 使用说明

语法:ice(selector).find(selector)

children 返回被选元素的所有直接子元素
children 使用说明

语法:ice(selector).children(selector)

childrens 返回被选元素的所有子元素
childrens 使用说明

语法:ice(selector).childrens()

siblings 获得匹配集合中每个元素的兄弟节点
siblings 使用说明

语法:ice(selector).siblings(selector)

prev 获取上一个兄弟节点
prev 使用说明

语法:ice(selector).prev(selector)

next 获取下一个兄弟节点
next 使用说明

语法:ice(selector).next(selector)

parent 查找当前的祖先元素
parent 使用说明

语法:ice(selector).parent()

返回:所有的祖先元素

parents 查找所有的祖先元素
parents 使用说明

语法:ice(selector).parents()

返回:所有的祖先元素

addCss 给对象添加class
addCss 使用说明

语法:ice(selector).addCss(name)

hasCss 判断对象是否存在class
hasCss 使用说明

语法:ice(selector).hasCss(name)

hasStyle 判断对象是否存在style
hasStyle 使用说明

语法:ice(selector).hasStyle(name)

toggleCss 如果对象存在指定的css,则删除,不存在则创建
toggleCss 使用说明

语法:ice(selector).toggleCss(nameA,nameB,fnA,fnB)

show 显示对象
show 使用说明

语法:ice(selector).show()

hide 隐藏对象
hide 使用说明

语法:ice(selector).hide()

opacity 设置元素透明度(0-1)
opacity 使用说明

语法:ice(selector).opacity(s)

fadeIn 动画:淡入效果
fadeIn 使用说明

语法:ice(selector).fadeIn(speed, callback)

fadeOut 动画:淡出效果
fadeOut 使用说明

语法:ice(selector).fadeOut(speed, callback)

fadeToggle 动画:如果已显示,则淡出隐藏
fadeToggle 使用说明

语法:ice(selector).fadeToggle(speed, callback)

slideDown 动画:向下滑动显示
slideDown 使用说明

语法:ice(selector).slideDown(speed, callback)

slideUp 动画:向上滑动隐藏
slideUp 使用说明

语法:ice(selector).slideUp(speed, callback)

slideToggle 动画:如果已显示,则向上滑动隐藏
slideToggle 使用说明

语法:ice(selector).slideToggle(speed, callback)

animate 动画
animate 使用说明

语法:ice(selector).animate(json,options)

参数 类型 描述
json json 需要修改的属性,例如:{height:'80px',width:'120px'}
options json json格式如下:
  • duration - 运动时间(默认:500,单位:ms,提示:1s=1000ms)
  • easing - 运动方式(默认:linear,提示:匀速=linear、加速=ease-in、减速=ease-out)
  • callback - 运动完成后的回调函数
ice的内置方法
注意,ice选择器的继承方法都可以单独使用,例如ice.addCss(el, 'active'),所有的第一个参数都是对象,之后的入参与选择器继承对象一样。
ice.c 创建节点
ice.c 使用说明

语法:ice.c(tagName)

ice.jsonDecode 解析json
ice.jsonDecode 使用说明

语法:ice.jsonDecode(str, bool)

ice.sp 阻止冒泡
ice.sp 使用说明

语法:ice.sp(event)

ice.pd 阻止默认行为
ice.pd 使用说明

语法:ice.pd(event)

ice.mouseWheel 监听某个元素的滚动条
ice.mouseWheel 使用说明

语法:ice.mouseWheel(obj, fn)

ice.data 设置浏览器数据存储,相当于sessionStorage
ice.data 使用说明

语法:ice.data(name,value)

提示:本方法利用sessionStorage存储数据数据,生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就会被清空。

本方法的设计初衷是为了更加方便的使用,同时最主要的是打破sessionStorage的存储方式界限,可以存储类型的值,而不在是单纯的字符串,可以为number数字,array数组,object对象,function方法,请看下面使用示例:

ice.localData 设置浏览器数据存储,相当于localStorage
ice.localData 使用说明

语法:ice.localData(name,value)

提示:本方法利用localStorage存储数据数据,生命周期是永久的,无时间限制,除非用户手动清除本地缓存。

使用方式同ice.data,数据存储方式也一样的。

ice.setCookie 设置cookie
ice.setCookie 使用说明

语法:ice.setCookie(name,value,day)

ice.getCookie 获取cookie
ice.getCookie 使用说明

语法:ice.getCookie(name)

ice.delCookie 移除cookie
ice.delCookie 使用说明

语法:ice.delCookie(name)

ice.isMobile 判断当前设备是否为移动端
ice.isMobile 使用说明

语法:ice.isMobile()

ice.trim 去掉字符串两端的空格
ice.trim 使用说明

语法:ice.trim(str)

ice.obj2str 对象转为字符串,包括function
ice.obj2str 使用说明

语法:ice.obj2str(object)

ice.delTag 去掉所有的html标记
ice.delTag 使用说明

语法:ice.delTag(str)

ice.toSize 格式化字节单位
ice.toSize 使用说明

语法:ice.toSize(bytes)

返回:B、KB、MB、GB、TB、PB、EB、ZB、YB等单位

ice.ready 当文档解析完毕且为操作准备就绪时,函数作为document的方法调用
ice.ready 使用说明

语法:ice.ready(fn)

ice.ajax ajax请求
ice.ajax 使用说明

语法:ice.ajax(json)

ice.scroll 获取滚动条的偏移量
ice.scroll 使用说明

语法:ice.scroll(pos)

返回:{x,y}

ice.setScrollT 自动将滚动条至于最顶部
ice.setScrollT 使用说明

语法:ice.setScrollT()

ice.setScrollB 自动将滚动条至于最底部
ice.setScrollB 使用说明

语法:ice.setScrollB(str)

ice.keydown 按键回调
ice.keydown 使用说明

语法:ice.keydown(key, callback)

ice.web 页面视口的高宽
ice.web 使用说明

语法:ice.web(str)

返回:{w,h}

ice.getRandom 生成随机数
ice.getRandom 使用说明

语法:ice.getRandom(min, max)

ice.cid 生成一个唯一的id
ice.cid 使用说明

语法:ice.cid(str)

ice.randStr 随机生成指定位数的字符串
ice.randStr 使用说明

语法:ice.randStr(num)

ice.jump 跳转网页
ice.jump 使用说明

语法:ice.jump(url)

ice.setDisplay 设置默认display
ice.setDisplay 使用说明

语法:ice.setDisplay(el)

ice.getDisplay 获取默认display
ice.getDisplay 使用说明

语法:ice.getDisplay(el)

ice.animationFrame 动画帧
ice.animationFrame 使用说明

语法:ice.animationFrame(el)

ice.time 将Date转化为指定格式的String
ice.time 使用说明

语法:ice.time(param, format)

ice.scrollAni 滚动条平滑滚动到该对象位置
ice.scrollAni 使用说明

语法:ice.scrollAni(el, duration)

文档目录