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