【JavaScript 封装库】BETA 5.0 测试版发布！

JavaScript 前端框架(封装库) BETA 5.0 已于10月10日正式发布，今天开始提供 BETA 5.0 的 API 参考文献。相较于之前 5 个版本的发布都是草草的提供源代码，并没有很多人参与进来，而且各大博客对源代码的处理也不是很感冒，导致发表的文章很大程度上并没有人知道。所以从此次开始，今后每次发布新版本都会提供相应的 API 手册，目的就是要让大家都能够参与其中，了解与使用框架。简化大家在平时开发中的步骤，提高产出效率，这也是我的目标。

 

参考文档分为 5 大部分，分别为：1.主方法文档、2.库方法文档、3.插件库文档、工具库文档、嗅探器文档。由于内容体系庞大，并没有一次性全部更新完毕，目前只更新了主方法文档，其他文档会在数日内悉数补完，请大家保持关注。目前的主方法已经能够完成几乎所有的基础功能，大家在对照文档的时候如果有任何的困惑或者不解，请及时的留言，我会在第一时间回复。

 

关于 BETA 5.0 的索取，请大家移至我的个人官网进行下载，且提供其他历代版本的源码下载和在线的实例演示，让大家更加直观的了解到，框架每次更新了哪些内容，目前能做到什么样的程度。

 

BETA 5.0 力求全面兼容 W3C 主流浏览器与 IE6/7/8，但 IE 6/7/8 仍然会有些许隐晦的 BUG 所以大家在使用的过程中，如果发现了任何 BUG 也请第一时间给我留言，我会在今后的版本中尽全力将其修正！

 

目前合作的媒介有：CNBlogs、51CTO、ITeye、CSDN 等 4 大网博平台，希望大家积极的参与其中，有任何问题请留言！

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2014 年 10 月 11 日  更

 

BETA 5.0 API 完全使用手册已经完成全部更新，推荐访问官网在线地址查阅，已获得最佳的查阅舒适体验。

从今天开始 BETA 5.0 的所有后续工作已经全部结束，即日起开始撰写 PHP 模板引擎，并且会在数日内更新 Prototype 原型版，敬请关注！

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2014 年 10 月 13 日  更 

 

我的个人官网地址：http://www.shibuyi.net/

BETA 5.0 在线实例演示地址：http://www.shibuyi.net/demo/javascript/beta_5.0/

【推荐】访问官网在线 BETA 5.0 API 地址：http://www.shibuyi.net/api/javascript/beta_5.0/

 

分为 5 大章节：1. 主方法文档、2. 库方法文档、3. 插件库文档、4. 工具库文档、5. 嗅探器文档。

 

第一章节：主方法文档（合计 59 个方法）

 

API 名称	参数	描述	实例
1. $(positionerList)	positionerList 选填[对象、字符串、方法]	构造方法	$('#id', '.class', '@name', document)
2. $().selector(positioner)	positioner 必填[字符串] 元素	定位选择器	$().selector('div#id')
3. $().getId(ids, positioner)	ids 必填[字符串]，positioner 选填[字符串、对象]	获取 id 元素节点	$().getId('id', document.body)
4. $().getTagName(tagName, positioner)	tagName 必填[字符串]，positioner 选填[字符串、对象]	获取 tag 元素节点	$().getTagName('div', '#id')
5. $().getClass(className, positioner)	className 必填[字符串]，positioner 选填[字符串、对象]	获取 class 元素节点	$().getClass('class', 'span@name')
6. $().getName(name, positioner)	name 必填[字符串]，positioner 选填[字符串、对象]	获取 name 元素节点	$().getName('name', 'span.class')
7. $().getNodes()	无	输出所有元素节点	$('#id', '.class', '@fm').getNodes()
8. $().firstNode()	无	获取首位元素节点	$('div.class').firstNode()
9. $().getFirstNode()	无	输出首位元素节点	$('div.class').getFirstNode()
10. $().lastNode()	无	获取末位元素节点	$('span.class').lastNode()
11. $().getLastNode()	无	输出末位元素节点	$('span.class').getLastNode()
12. $().indexNode(index)	index 必填[正整数]	获取索引元素节点	$('div').indexNode(5)
13. $().getIndexNode(index)	index 必填[正整数]	输出索引元素节点	$('form@fm').indexNode(0)
14. $().firstChild()	无	获取首位子元素节点	$(document.body).firstChild()
15. $().getFirstChild()	无	输出首位子元素节点	$(document.body).getFirstChild()
16. $().lastChild()	无	获取末位子元素节点	$('div@name').lastChild()
17. $().getLastChild()	无	输出末位子元素节点	$('div@name').getLastChild()
18. $().allChild()	无	获取所有子元素节点	$('span#id').allChild()
19. $().getAllChild()	无	输出所有子元素节点	$('span#id').getAllChild()
20. $().parentNode()	无	获取父级元素节点	$('#id').parentNode()
21. $().getParentNode()	无	输出父级元素节点	$('#id').getParentNode()
22. $().previousNode()	无	获取前位兄弟节点	$('strong@name').previousNode()
23. $().getPreviousNode()	无	输出前位兄弟节点	$('strong@name').getPreviousNode()
24. $().nextNode()	无	获取后位兄弟节点	$('div#id').nextNode()
25. $().getNextNode()	无	输出后位兄弟节点	$('div#id').getNextNode()
26. $().bothNode()	无	获取前后位兄弟节点	$('#id').bothNode()
27. $().getBothNode()	无	输出前后位兄弟节点	$('#id').getBothNode()
28. $().allPrevious()	无	获取所有前位兄弟节点	$('#id').allPrevious()
29. $().getAllPrevious()	无	输出所有前位兄弟节点	$('#id').getAllPrevious()
30. $().allNext()	无	获取所有后位兄弟节点	$('#id').allNext()
31. $().getAllNext()	无	输出所有后位兄弟节点	$('#id').getAllNext()
32. $().allBoth()	无	获取所有兄弟节点	$('#id').allBoth()
33. $().getAllBoth()	无	输出所有兄弟节点	$('#id').getAllBoth()
34. $().html(string)	string 选填[字符串]	获取与设置元素节点内容	$('#id').html('<strong>文本</strong>')
35. $().text(string)	string 选填[字符串]	获取与设置元素节点文本	$('#id').text('纯文本')
36. $().value(string)	string 选填[字符串]	获取与设置表单内容	$('#id').value('表单值')
37. $().defaultValue(string)	string 选填[字符串]	获取与设置表单默认内容	$('#id').defaultValue()
38. $().css(cssList)	cssList 选填[字符串]	获取与设置 css 样式	$('#id').css('color:#333;')
39. $().addRule(list, position, sheet)	list 必填[数组]，position 选填[正整数]，sheet 选填[正整数]	添加 css 样式规则	$().addRule(['#box {color:red;}'], 0, 0)
40. $().removeRule(position, sheet)	position 必填[字符串、正整数]，sheet 选填[正整数]	移除 css 样式规则	$().removeRule('#box', 0, 0)
41. $().bind(name, method, mode)	name 必填[字符串]，method 必填[方法]，mode 选填[布尔值]	元素事件绑定	$('#id').bind('click', function () {})
42. $().loaded(method)	method 必填[方法]	HTML DOM 加载	$().loaded(function () {})
43. $().getInfo(sizePosition)	sizePosition 选填[字符串]	获取元素尺寸与方位信息	$('#id').getInfo('width')
44. $().scroll(x, y)	x 选填[正整数]，y 选填[正整数]	获取与设置滚动条	$().scroll(0, 0)
45. $().addClass(classList)	classList 必填[数组、字符串]	添加 class 选择器	$('#id').addClass('a', 'b', 'c')
46. $().removeClass(classList)	classList 必填[数组、字符串]	移除 class 选择器	$('#id').removeClass('a', 'b', 'c')
47. $().add(name, attr, html)	name 必填[字符串]，attr 选填[数组、字符串]，html 选填[字符串]	添加元素节点	$().add('div', 'id=box', '新元素')
48. $().remove()	无	删除元素节点	$('div').remove()
49. $().move(targetElement, mode)	targetElement 必填[对象、字符串]，mode 选填[布尔值]	剪切与复制元素节点	$('#id').move('span.class', false)
50. $().getLength()	无	获取元素总个数	$('div').getLength()
51. $().formAll()	无	获取所有表单元素	$().formAll()
52. $().form(index)	index 必填[字符串、正整数]	获取指定表单元素	$().form('fm')
53. $().formChildAll()	无	获取所有表单子元素	$('@fm').formChildAll()
54. $().formChild(index)	index 必填[字符串、正整数]	获取指定表单子元素	$('@fm').formChild('username')
55. $().addOption(text, value, selected)	text 必填[字符串]，value 选填[字符串]，selected 选填[布尔值]	新增 Option 元素	$('@select').addOption('内容')
56. $().removeOption(index)	index 必填[正整数]	移除 Option 元素	$('@select').removeOption(0)
57. $().keepOption(length)	length 必填[正整数]	指定 Option 元素个数	$('@select').keepOption(1)
58. $().optionAll()	无	获取所有 Option 元素	$('@select').optionAll()
59. $().plugins(methodList)	methodList 必填[方法]	自动加载插件	$().plugins(methodName1, methodName2)

 

 

第二章节：库方法文档（合计 31 个方法）

 

API 名称	参数	描述	实例
1. $.checkChild(elementNode, targetNode)	elementNode 必填[对象]，targetNode必填[对象]	检测元素之间的包含关系	$.checkChild(document.body, document)
2. $.empty(string)	string 必填[字符串]	检测字符是否为空	$.empty('非空')
3. $.getName(method)	method 必填[方法]	获取函数名称	$.getName(methodName)
4. $.checkLength(string, min, max)	string 必填[字符串]，min 选填[正整数]，max 选填[正整数]	检测字符长度	$.checkLength('字符串', 2, 5)
5. $.scrollWidth()	无	获取滚动条宽度(x轴+y轴)	$.scrollWidth().x
6. $.checkRight(sidebar, elementNode)	sidebar 必填[对象]，elementNode 必填[对象]	检测右浮贴靠参数	$.checkRight({x : 30}, document.body)
7. $.checkLeft(sidebar, elementNode)	sidebar 必填[对象]，elementNode 必填[对象]	检测左浮贴靠参数	$.checkLeft({x : -100}, document.body)
8. $.checkAnimation(animation, elementNode)	animation 必填[对象]，elementNode 必填[对象]	检测动画参数	$.checkAnimation({action:'x', target:0})
9. $.fixed(x, y, mode)	x 选填[正整数]，y 选填[正整数]，mode 选填[布尔值]	固定视窗禁止滚动	$.fixed(0, 0, false)
10. addAttribute(attributes, elementNode)	attributes 必填[数组、字符串]，elementNode 必填[对象]	添加元素属性	$.addAttributes('id = box', document.body)
11. $.format(parameter)	parameter 必填[数组]	参数格式化	$.format(arguments)
12. $.htmlRectangle()	无	获取浏览器可视区尺寸	$.htmlRectangle().width
13. $.innerRectangle(elementNode)	elementNode 必填[对象]	获取元素内部尺寸	$.innerRectangle(document.body).height
14. $.outerRectangle(elementNode)	elementNode 必填[对象]	获取元素坐标	$.outerRectangle(document.body).x
15. $.absolutePosition(elememtNode)	elementNode 必填[对象]	设置元素绝对定位	$.absolutePosition(document.body)
16. $.checkRule(rulePosition, sheetIndex)	rulePosition 必填[正整数]，sheetIndex 必填[正整数]	检测 css 样式规则合法性	$.checkRule(0, 0)
17. $.inArray(value, array)	value 必填[字符串、数字]，array 必填[数组]	检测数组是否包含该值	$.inArray(100, [10, 100])
18. $.toStyle(string)	string 必填[字符串]	css 样式转换	$.toStyle('font-size')
19. $.getAllPrevious(elementNode)	elementNode 必填[对象]	获取所有前位兄弟元素节点	$.getAllPrevious(document.body)
20. $.getAllNext(elementNode)	elementNode 必填[对象]	获取所有后位兄弟元素节点	$.getAllNext(document.body)
21. $.positioner(positioner)	positioner 必填[字符串、对象]	获取元素定位器	$.positioner('div.class')
22. $.getPreviousNode(elementNode)	elementNode 必填[对象]	获取前位兄弟元素节点	$.getPreviousNode(document.body)
23. $.getNextNode(elementNode)	elementNode 必填[对象]	获得后位兄弟元素节点	$.getNextNode(document.body)
24. $.trim(string)	string 必填[字符串、数组]	清除字符串两边空格	$.trim([' 小空格 ', '　大空格　'])
25. $.number(number)	number 必填[字符串、数字]	正整数转换	$.number('100abc')
26. $.checkNode(elementNode)	elementNode 必填[对象]	检测是否元素节点	$.checkNode(document.body)
27. $.hasClass(className, elementNode)	className 必填[字符串]，elementNode 必填[对象]	检测 class 是否存在	$.hasClass('aaa', document.body)
28. $.space(elementNode)	elementNode 必填[对象]	删除空白节点	$.space(document.body)
29. $.comment(elementNode)	elementNode 必填[对象]	删除注释节点	$.comment(document.body)
30. $.clear(elementNode)	elementNode 必填[对象]	删除空白与注释节点	$.clear(document.body)
31. $.getAllChild(elementNode)	elementNode 必填[对象]	获取所有子元素节点	$.getAllChild(document.body)

 

 

第三章节：插件库文档（合计 23 个插件）

 

API 名称	参数	描述	实例
基础插件
1. $().show()	无	显示元素	$('div.@name').show()
2. $().hide()	无	隐藏元素	$('span#id').hide()
3. $().hover(over, out, mode)	over 必填[方法]，out 必填[方法]，mode 选填[布尔值]	鼠标移入移出	$('#id').hover(function(){}, function(){})
4. $().input(focus, blur, mode)	focus 必填[方法]，blur 必填[方法]，mode 选填[布尔值]	光标移入移出	$('#id').input(function(){}, function(){})
元素居中插件
5. $().xCenter()	无	元素水平居中	$('div.class').xCenter()
6. $().yCenter()	无	元素垂直居中	$('div.class').yCenter()
7. $().center()	无	元素水平 + 垂直居中	$.('div.class').center()
遮罩锁屏插件
8. $().lock(mode)	mode 选填[布尔值]	遮罩锁屏	$().lock(false)
9. $().unlock()	无	清除遮罩	$().unlock()
拖拽插件
10. $().drag(elementList)	elementList 必填[字符串、数组]	元素拖拽	$('#id').drag('h2', '#box', 'p.class')
禁止溢出插件
11. $().overflow()	无	视窗禁止溢出	$('div.class').overflow()
切换器插件
12. $().toggle(methodList)	methodList 必填[方法、数组]	事件切换器	$('#id').toggle(function(){}, function(){})
动画插件
13. $().animation(animationObject, mode)	animationObject 必填[对象]，mode 选填[布尔值]	元素动画	$('p').animation({action:'o', target:100})
贴靠插件
14. $().leftSidebar(sidebar)	sidebar 必填[对象]	左浮贴靠	$('#id').leftSidebar({x:-100})
15. $().rightSidebar(sidebar)	sidebar 必填[对象]	右浮贴靠	$('#id').rightSidebar({x:30})
表单插件
16. $().ban()	无	禁用表单复制、剪切与粘贴	$('input@username').ban()
17. $().autoComplete(mode)	mode 选填[布尔值]	表单联想开关	$('input@email').autoComplete(false)
18. $().imeMode(mode)	mode 选填[布尔值]	表单输入法开关	$('input@phone').imeMode(false)
19. $().submit()	无	提交表单	$('form@fm').submit()
20. $().reset()	无	重置表单	$('form@fm').reset()
21. $().focus()	无	表单移入焦点	$('select@question').focus()
22. $().blur()	无	表单移出焦点	$('select@question').blur()
23. $().disabled(mode)	mode 选填[布尔值]	表单禁用开关	$('input@button').disabled(true)

 

 

第四章节：工具库文档（合计 28 个方法）

 

API 名称	参数	描述	实例
1. $.tool.sort()	无	数组排序	$.tool.sort().maxToMin
2. $.tool.getText(elementNode)	elementNode 必填[对象]	跨浏览器获取元素文本	$.tool.getText(document.body)
3. $.tool.setText(text, elementNode)	text 必填[字符串]，elementNode 必填[对象]	跨浏览器设置元素文本	$.tool.setText('纯文本', document.body)
4. $.tool.addRule(n, s, p, o)	n 必填[字符串]，s 必填[字符串]，p 必填[正整数]，o 必填[对象]	跨浏览器添加样式规则	$.tool.addRule('p', 'color:red;', 0, obj)
5. $.tool.removeRule(position, sheet)	position 必填[正整数]，sheet 必填[对象]	跨浏览器移除样式规则	$.tool.removeRule(0, obj)
6. $.tool.getStyle(cssKey, elementNode)	cssKey 必填[字符串]，elementNode 必填[对象]	跨浏览器获取计算后的样式	$.tool.getStyle('color', document.body)
7. $.tool.ruleTotal(sheet)	sheet 必填[对象]	跨浏览器获取样式规则总数	$.tool.ruleTotal(obj)
8. $.tool.ruleName(sheet)	sheet 必填[对象]	跨浏览器获取样名称合集	$.tool.ruleName(obj)
9. $.tool.loginEvent(node, name, method)	node 必填[对象]，name 必填[字符串]，method 必填[方法]	跨浏览器绑定: 注册事件	$.tool.loginEvent(o, 'click', function(){})
10. $.tool.logoutEvent(node, name, method)	node 必填[对象]，name 必填[字符串]，method 必填[方法]	跨浏览器绑定: 注销事件	$.tool.logoutEvent(o, 'load', function(){})
11. $.tool.ieEvent(event)	event 必填[对象]	IE 6/7/8专属: Event 匹配	$.tool.ieEvent(window.event)
12. $.tool.button(event)	event 必填[对象]	跨浏览器兼容event.button	$.tool.button(event)
13. $.tool.mouseover(node, method, mode)	node 必填[对象]，method 必填[对象]，mode 必填[布尔值]	跨浏览器修正mouseover事件	$.tool.mouseover(o, function(){}, true)
14. $.tool.mouseout(node, method, mode)	node 必填[对象]，method 必填[对象]，mode 必填[布尔值]	跨浏览器修正mouseout事件	$.tool.mouseout(o, function(){}, true)
15. $.tool.contains(element, target)	element 必填[对象]，target 必填[对象]	跨浏览器获取元素从属关系	$.tool.contains(o, document.body)
16. $.tool.htmlDOM(method)	method 必填[方法]	跨浏览器兼容HTML DOM加载	$.tool.htmlDOM(function () {})
17. $.tool.htmlWidth()	无	跨浏览器获取网页宽度	$.tool.htmlWidth()
18. $.tool.htmlHeight()	无	跨浏览器获取网页高度	$.tool.htmlHeight()
19. $.tool.mousewheel(node, method, mode)	node 必填[对象]，method 必填[方法]，mode 必填[布尔值]	跨浏览器兼容鼠标滚轮事件	$.tool.mosuewheel(o, function () {}, true)
20. $.tool.scroll(node, method, mode)	node 必填[对象]，method 必填[方法]，mode 必填[布尔值]	跨浏览器兼容滚动条事件	$.tool.scroll(o, function () {}, true)
21. $.tool.scrollX(x)	x 选填[正整数]	跨浏览器获取与设置x轴滚动	$.tool.scrollX(0)
22. $.tool.scrollY(y)	y 选填[正整数]	跨浏览器获取与设置y轴滚动	$.tool.scrollY(0)
23. $.tool.setCapture(elementNode)	elementNode 必填[对象]	IE: 浏览器外部捕获鼠标	$.tool.setCapture(document)
24. $.tool.releaseCapture(elementNode)	elementNode 必填[对象]	IE: 浏览器外部释放鼠标	$.tool.releaseCapture(document)
25. $.tool.scrollWidthX()	无	跨浏览器获取滚动条x轴宽度	$.tool.scrollWidthX()
26. $.tool.scrollWidthY()	无	跨浏览器获取滚动条y轴宽度	$.tool.scrollWidthY()
27. $.tool.paste(elementNode, method, mode)	elementNode 必填[对象]，method 必填[方法]，mode 必填[布尔值]	修正 paste 事件延迟	$.tool.paste(document, function(){}, false)
28. $.tool.cut(elementNode, method, mode)	elementNode 必填[对象]，method 必填[方法]，mode 必填[布尔值]	修正 cut 事件延迟	$.tool.cut(document, function(){}, false)

 

 

第五章节：嗅探器文档（合计 24 个属性[字段]）

 

API 名称	参数	描述	实例
浏览器嗅探
1. $.detect.ie	无	IE 浏览器标识	$.detect.ie
2. $.detect.firefox	无	Firefox 浏览器标识	$.detect.firefox
3. $.detect.chrome	无	Chrome 浏览器标识	$.detect.chrome
4. $.detect.chromeMobile	无	Chrome 移动端浏览器标识	$.detect.chromeMobile
5. $.detect.safari	无	Safari 浏览器标识	$.detect.safari
6. $detect.opera	无	Opera 浏览器标识	$.detect.opera
7. $.detect.operaMobile	无	Opera 移动端浏览器标识	$.detect.operaMobile
8. $.detect.other	无	其他浏览器标识	$.detect.other
9. $.detect.browser.name	无	浏览器名称	$.detect.browser.name
10. $.detect.browser.version	无	浏览器版本	$.detect.browser.version
内核嗅探
11. $.detect.trident	无	Trident 内核标识	$.detect.trident
12. $.detect.gecko	无	Gecko 内核标识	$.detect.gecko
13. $.detect.webkit	无	WebKit 内核标识	$.detect.webkit
14. $.detect.presto	无	Presto 内核标识	$.detect.presto
15. $detect.engine.name	无	内核名称	$detect.engine.name
16. $detect.engine.version	无	内核版本	$.detect.engine.version
平台嗅探
17. $.detect.windows	无	Windows 平台标识	$.detect.windows
18. $.detect.linux	无	Linux 平台标识	$.detect.linux
19. $.detect.android	无	Android 平台标识	$.detect.android
20. $.detect.symbian	无	Symbian 平台标识	$.detect.symbian
21. $.detect.ios	无	iOS 平台标识	$.detect.ios
22. $.detect.macintosh	无	Macintosh 平台标识	$.detect.macintosh
23. $.detect.system.name	无	平台名称	$.detect.system.name
24. $.detect.system.version	无	平台版本	$.detect.system.version

 

 

2014 年 10 月 13 日　　更新完毕　　杜撰者：石不易