Docs: Integrate changes into the document

Author: TheColdPot

docs/README.md

@@ -1,9 +1,12 @@
 ## Documents
 Check these documents to understand how to use functions and other functions!  
 We are committed to creating a good community environment.
+
+*Test features will not available at documents but you can use it in typings file*
 ### Contents
 - Constructors  
   * [peb.QuickAudio](./detail/cons-quickaudio.md)
+  * [peb.RElement](./detail/cons-relement.md)
 - Functions  
   <!-- A -->
   * [peb.ajax()](./detail/func-ajax.md)
@@ -49,3 +52,5 @@ We are committed to creating a good community environment.
   * [peb.console](./detail/meth-log.md)
 ### ProTips
 It is not recommended to view the documentation. Please use `peb.d.ts` typings file
+
+The `Docs` folder may be **removed** in 4.0.0

docs/detail/cons-quickaudio.md

@@ -1,8 +1,10 @@
 # Constructor `QuickAudio`
-The last updated version of this function: *3.0.0-pre.3*
+~~The last updated version of this function: *3.0.0-pre.3*~~
+
+This method has been **deprecated**. Will be removed in 4.0.0.
 ## Construct
 ```javascript
-new peb.QuickAudio(url: string)
+new peb.QuickAudio(url)
 ```
 Use JavaScript to play audio
 ## Object Method

docs/detail/cons-relement.md

@@ -0,0 +1,67 @@
+# Constructor `RElement`
+**The last updated version of this function**: *3.1.0*
+## Browser Support
+| <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/chrome.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/firefox.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/safari.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/opera.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/edge.svg" width="30" /> |
+| :---: | :---: | :---: | :---: | :---: |
+| 45 | 39 | 10 | 32 | 12 |
+## Usage
+```javascript
+new peb.RElement(element)
+```
+
+Referenced by [`peb.sel`]()
+## Properties
+### `.attr()`
+Get all attributes
+### `.attr(sequence: object)`
+Change all \[key\] attributes to \[key value\]
+### `.attr(name: string, value: string)`
+
+Change the attribute `name` to `value` when available, otherwise, return the attribute value corresponding to `name`
+### `.data(name: string, value: string)`
+
+Change the dataset `name` to `value` when available, otherwise, return the dataset value corresponding to `name`
+  
+### `insert(...nodes: Node[] | HTMLElement[] | RElement[])`
+Add child elements to the object
+  
+### `del()`
+Remove Element
+
+### `.html(value?: string)`
+Get it if no parameters are passed in, otherwise set value to `value`
+
+### `.text()`
+Get innerText
+  
+### `.val(value?: string)`
+Get it if no parameters are passed in, otherwise set value to `value`
+  
+### `.hide()`
+Hide element
+  
+### `.show(type?: string)
+set value of `Element.style.display` if passed in parameter, otherwise set display type to value of lastest time hide
+
+### `.on(event: string, listener?: function)`
+Add event listener if `listener` is passed in, otherwise remove
+
+### `.class()`
+Returns HTMLSettableTokenList
+
+### `.style(sheet)`
+Set style by sheet. sheet is a object like `{width: .5em}`
+
+### `.next()`
+Get next element sibling
+### `.prev()`
+Get previous element sibling
+### `.parent()`
+Get parent
+### `.child()`
+Get **first** child element  
+*Tip:* Better effect with `.next()`
+### `.domReady(fn)`
+Do `fn` When dom content are ready
+### `.animate(ms, sheet)`
+Animate style to `sheet` in `ms` milliseconds

docs/detail/func-classof.md

@@ -1,4 +1,4 @@
-# Function `switchCase()`
+# Function `classof()`
 **The last updated version of this function**: *3.0.0-pre.3* 
 ## Browser Support
 | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/chrome.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/firefox.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/safari.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/opera.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/edge.svg" width="30" /> |

docs/detail/func-sel.md

@@ -1,5 +1,5 @@
 # Function `sel()`
-**The last updated version of this function**: *2.0.0*  
+**The last updated version of this function**: *3.1.0*  
 ## Browser Support
 | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/chrome.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/firefox.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/safari.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/opera.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/edge.svg" width="30" /> |
 | :---: | :---: | :---: | :---: | :---: |
@@ -8,62 +8,8 @@
 ```javascript
 peb.sel(selector, itemIndex)
 ```
-| Parameter | Type | Optional | Description |
-| :---: | :---: | :---: | :---: |
-| selector | `String` |  | Query Selector to element |
-| itemIndex | `Number` | Yes | Item Index in collection |
-## Properties
-### ID Selector or passed in `itemIndex`
-#### `.attr()`
-Get all attributes
-#### `.attr(sequence: object)`
-Change all \[key\] attributes to \[key value\]
-#### `.attr(name: string, value: string)`
-
-Change the attribute `name` to `value` when available, otherwise, return the attribute value corresponding to `name`
-#### `.data(name: string, value: string)`
-
-Change the dataset `name` to `value` when available, otherwise, return the dataset value corresponding to `name`
-  
-#### `insert(...nodes: Node[] | HTMLElement[] | RElement[])`
-Add child elements to the object
-  
-#### `del()`
-Remove Element
-
-#### `.html(value?: string)`
-Get it if no parameters are passed in, otherwise set value to `value`
-
-#### `.text()`
-Get innerText
-  
-#### `.val(value?: string)`
-Get it if no parameters are passed in, otherwise set value to `value`
-  
-#### `.hide()`
-Hide element
-  
-#### `.show(type?: string)
-set value of `Element.style.display` if passed in parameter, otherwise set display type to value of lastest time hide
-
-#### `.on(event: string, listener?: function)`
-Add event listener if `listener` is passed in, otherwise remove
-
-#### `.class()`
-Returns HTMLSettableTokenList
-
-#### `.style(sheet)`
-Set style by sheet. sheet is a object like `{width: .5em}`
-
-#### `.next()`
-Get next element sibling
-#### `.prev()`
-Get previous element sibling
-#### `.parent()`
-Get parent
-#### `.child()`
-Get **first** child element  
-*Tip:* Better effect with `.next()`
+### ID Selector or `itemIndex`
+[Reffer to `RElement`](cons-relement.md)
 
 ### And Others
 #### `.forEach(callbackFn: function, startIndex: number)`

docs/detail/html-peb-trans.md

@@ -9,16 +9,18 @@ Version with this added: *2.3.0*
 ```
 #### JS
 ```javascript
-const t = new peb.translationTabel({
+const t = new peb.TranslationTable({
     "en-us": {
-        "generic.example_word": "That's a example text"
+        "generic.example_word": "Example text"
     },
     "zh-cn": {
-        "generic.example_word": "这是一个实例文本"
+        "generic.example_word": "实例文本"
     }
 });
 t.translate("en-us");
 ```
+#### Result
+Example text
 ## Browser Support
 | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/chrome.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/firefox.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/safari.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/opera.svg" width="30" /> | <img src="https://cdn.jsdelivr.net/gh/TechPot-Studio/svg-gallery/edge.svg" width="30" /> |
 | :---: | :---: | :---: | :---: | :---: | :---: |