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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM