`
石不易
  • 浏览: 7642 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

【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 日  更新完毕  杜撰者:石不易
 
 
1
1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics