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 |