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) |
| 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) |
| 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) |
| 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) |
| 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 日 更新完毕 杜撰者：石不易