Upload files to "/"
This commit is contained in:
commit
1fa6d558c7
149 changed files with 27987 additions and 0 deletions
292
wiki/A-Z.md
Normal file
292
wiki/A-Z.md
Normal file
|
|
@ -0,0 +1,292 @@
|
|||
### A
|
||||
* **.add**
|
||||
* [$.data.add (Array)](DATA-Utilities-(Arrays)#add)
|
||||
* [$.data.add (Object)](DATA-Utilities-(Objects)#add)
|
||||
* [.addClass](CSS-Classes-&-Styles#addclass)
|
||||
* [.after](DOM-Manipulation#after)
|
||||
* **.all**
|
||||
* [$.data.find.all (Array)](DATA-Utilities-(Arrays)#findall)
|
||||
* [$.data.find.all (Object)](DATA-Utilities-(Objects)#findall)
|
||||
* [$.data.remove.all (Array)](DATA-Utilities-(Arrays)#removeall)
|
||||
* [$.data.remove.all (Object)](DATA-Utilities-(Objects)#removeall)
|
||||
* [.append](DOM-Manipulation#append)
|
||||
* [.appendTo](DOM-Manipulation#appendto)
|
||||
* **.at**
|
||||
* [$.data.find.at (Array)](DATA-Utilities-(Arrays)#findat)
|
||||
* [$.data.find.at (Object)](DATA-Utilities-(Objects)#findat)
|
||||
* [$.data.remove.at (Array)](DATA-Utilities-(Arrays)#removeat)
|
||||
* [$.data.remove.at (Object)](DATA-Utilities-(Objects)#removeat)
|
||||
* [.attr](DOM-Attributes#attr)
|
||||
|
||||
### B
|
||||
* [.before](DOM-Manipulation#before)
|
||||
* [.blur](EVENTS-Form#blur)
|
||||
* **.byKey**
|
||||
* [$.data.remove.byKey (Array)](DATA-Utilities-(Arrays)#removebykey)
|
||||
* [$.data.remove.byKey (Object)](DATA-Utilities-(Objects)#removebykey)
|
||||
* **.byValue**
|
||||
* [$.data.remove.byValue (Array)](DATA-Utilities-(Arrays)#removebyvalue)
|
||||
* [$.data.remove.byValue (Object)](DATA-Utilities-(Objects)#removebyvalue)
|
||||
* **.byMatch**
|
||||
* [$.data.find.byMatch (Array)](DATA-Utilities-(Arrays)#findbymatch)
|
||||
* [$.data.find.byMatch (Object)](DATA-Utilities-(Objects)#findbymatch)
|
||||
* [$.data.remove.byMatch (Array)](DATA-Utilities-(Array)#removebymatch)
|
||||
* [$.data.remove.byMatch (Object)](DATA-Utilities-(Objects)#removebymatch)
|
||||
|
||||
### C
|
||||
* [.change](EVENTS-Form#change)
|
||||
* [.check](DOM-States#check)
|
||||
* [.checked](DOM-States#checked)
|
||||
* [.children](DOM-Traversal#children)
|
||||
* **.chunk**
|
||||
* [$.data.chunk (Array)](DATA-Utilities-(Arrays)#chunk)
|
||||
* [$.data.chunk (Object)](DATA-Utilities-(Objects)#chunk)
|
||||
* **.clear**
|
||||
* [$.data.clear (Array)](DATA-Utilities-(Arrays)#clear)
|
||||
* [$.data.clear (Object)](DATA-Utilities-(Objects)#clear)
|
||||
* [.click](EVENTS-Mouse#click)
|
||||
* [.closest](DOM-Traversal#closest)
|
||||
* [.css](CSS-Classes-&-Styles#css)
|
||||
* [CSS Classes & Styles](CSS-Classes-&-Styles)
|
||||
|
||||
### D
|
||||
* [.dblclick](EVENTS-Mouse#dblclick)
|
||||
* [.disable](DOM-States#disable)
|
||||
* [.disabled](DOM-States#disabled)
|
||||
* [.descendants](DOM-Traversal#descendants)
|
||||
* [.descendantsUntil](DOM-Traversal#descendantsuntil)
|
||||
* **.data**
|
||||
* [$.data (Arrays)](DATA-Utilities-(Arrays))
|
||||
* [$.data (Objects)](DATA-Utilities-(Objects))
|
||||
* [$.debounce](UTILITIES#debounce)
|
||||
* [DATA Utilities (Arrays)](DATA-Utilities-(Arrays))
|
||||
* [DATA Utilities (Objects)](DATA-Utilities-(Objects))
|
||||
* [DOM Attributes](DOM-Attributes)
|
||||
* [DOM Content](DOM-Content)
|
||||
* [DOM Manipulation](DOM-Manipulation)
|
||||
* [DOM States](DOM-States)
|
||||
* [DOM Traversal](DOM-Traversal)
|
||||
|
||||
### E
|
||||
* **.empty**
|
||||
* [.empty](DOM-Manipulation#empty)
|
||||
* [$.data.empty (Array)](DATA-Utilities-(Arrays)#empty)
|
||||
* [$.data.empty (Object)](DATA-Utilities-(Objects)#empty)
|
||||
* [.enable](DOM-States#enable)
|
||||
* [.eq](DOM-Traversal#eq)
|
||||
* [$.each](Utilities#each)
|
||||
* [EFFECTS Fade](EFFECTS-Fade)
|
||||
* [EFFECTS Slide (horizontal)](EFFECTS-Slide-(horizontal))
|
||||
* [EFFECTS Slide (vertical)](EFFECTS-Slide-(vertical))
|
||||
* [EVENTS Bindings](EVENTS-Bindings)
|
||||
* [EVENTS Form](EVENTS-Form)
|
||||
* [EVENTS Keyboard](EVENTS-Keyboard)
|
||||
* [EVENTS Lifecycle](EVENTS-Lifecycle)
|
||||
* [EVENTS Mouse](EVENTS-Mouse)
|
||||
* [EVENTS Touch](EVENTS-Touch)
|
||||
|
||||
### F
|
||||
* [.fadeIn](EFFECTS-Fade#fadein)
|
||||
* [.fadeOut](EFFECTS-Fade#fadeout)
|
||||
* [.fadeToggle](EFFECTS-Fade#fadetoggle)
|
||||
* **.find**
|
||||
* **.at**
|
||||
* [$.data.find.at (Array)](DATA-Utilities-(Arrays)#findat)
|
||||
* [$.data.find.at (Objects)](DATA-Utilities-(Objects)#findat)
|
||||
* [$.data.remove.at (Array)](DATA-Utilities-(Arrays)#removeat)
|
||||
* [$.data.remove.at (Objects)](DATA-Utilities-(Objects)#removeat)
|
||||
* **.all**
|
||||
* [$.data.find.all (Array)](DATA-Utilities-(Arrays)#findall)
|
||||
* [$.data.find.all (Objects)](DATA-Utilities-(Objects)#findall)
|
||||
* **.first**
|
||||
* [$.data.find.first (Array)](DATA-Utilities-(Arrays)#findfirst)
|
||||
* [$.data.find.first (Objects)](DATA-Utilities-(Objects)#findfirst)
|
||||
* **.last**
|
||||
* [$.data.find.last (Array)](DATA-Utilities-(Arrays)#findlast)
|
||||
* [$.data.find.last (Objects)](DATA-Utilities-(Objects)#findlast)
|
||||
* **.byMatch**
|
||||
* [$.data.find.byMatch (Array)](DATA-Utilities-(Arrays)#findbymatch)
|
||||
* [$.data.find.byMatch (Objects)](DATA-Utilities-(Objects)#findbymatch)
|
||||
* **.key**
|
||||
* [$.data.find.key (Array)](DATA-Utilities-(Arrays)#findkey)
|
||||
* [$.data.find.key (Objects)](DATA-Utilities-(Objects)#findkey)
|
||||
* **.value**
|
||||
* [$.data.find.value (Array)](DATA-Utilities-(Arrays)#findvalue)
|
||||
* [$.data.find.value (Objects)](DATA-Utilities-(Objects)#findvalue)
|
||||
* **.first**
|
||||
* [.first](DOM-Traversal#first)
|
||||
* [$.data.find.first (Array)](DATA-Utilities-(Arrays)#findfirst)
|
||||
* [$.data.find.first (Objects)](DATA-Utilities-(Objects)#findfirst)
|
||||
* [$.data.remove.first (Array)](DATA-Utilities-(Arrays)#removefirst)
|
||||
* [$.data.remove.first (Objects)](DATA-Utilities-(Objects)#removefirst)
|
||||
* [.filterBy](DOM-Traversal#filterby)
|
||||
* [.findAll](DOM-Traversal#findall)
|
||||
* [.focus](EVENTS-Form#focus)
|
||||
|
||||
### G
|
||||
* **.get**
|
||||
* [$.data.get (Array)](DATA-Utilities-(Arrays)#get)
|
||||
* [$.data.get (Object)](DATA-Utilities-(Objects)#get)
|
||||
* [$.http.get](HTTP-Requests#get)
|
||||
* **.getText**
|
||||
* [$.http.getText](HTTP-Requests#gettext)
|
||||
|
||||
### H
|
||||
* [.hasClass](CSS-Classes-&-Styles#hasclass)
|
||||
* [.hide](EFFECTS-Fade#hide)
|
||||
* [.hover](EVENTS-Mouse#hover)
|
||||
* [.html](DOM-Content#html)
|
||||
* [Home](Home)
|
||||
* [HTTP Requests](HTTP-Requests)
|
||||
|
||||
### I
|
||||
* [.input](EVENTS-Form#input)
|
||||
* [.insertAfter](DOM-Manipulation#insertafter)
|
||||
* [.insertBefore](DOM-Manipulation#insertbefore)
|
||||
* [Installation](Installation)
|
||||
|
||||
### K
|
||||
* **.key**
|
||||
* [$.data.find.key (Array)](DATA-Utilities-(Arrays)#findkey)
|
||||
* [$.data.find.key (Objects)](DATA-Utilities-(Objects)#findkey)
|
||||
* [.keydown](EVENTS-Keyboard#keydown)
|
||||
* [.keypress](EVENTS-Keyboard#keypress)
|
||||
* [.keyup](EVENTS-Keyboard#keyup)
|
||||
|
||||
### L
|
||||
* **.last**
|
||||
* [.last](DOM-Traversal#last)
|
||||
* [$.data.find.last (Array)](DATA-Utilities-(Arrays)#findlast)
|
||||
* [$.data.find.last (Objects)](DATA-Utilities-(Objects)#findlast)
|
||||
* [$.data.remove.last (Array)](DATA-Utilities-(Arrays)#removelast)
|
||||
* [$.data.remove.last (Objects)](DATA-Utilities-(Objects)#removelast)
|
||||
* [.load](DOM-Content#load)
|
||||
|
||||
### M
|
||||
* **.merge**
|
||||
* [$.data.merge (Array)](DATA-Utilities-(Arrays)#merge)
|
||||
* [$.data.merge (Object)](DATA-Utilities-(Objects)#merge)
|
||||
* [.mergeArray](DATA-Utilities-(Arrays)#mergearray)
|
||||
* [.mergeObjects](DATA-Utilities-(Objects)#mergeobjects)
|
||||
* [.mousedown](EVENTS-Mouse#mousedown)
|
||||
* [.mouseenter](EVENTS-Mouse#mouseenter)
|
||||
* [.mouseleave](EVENTS-Mouse#mouseleave)
|
||||
* [.mousemove](EVENTS-Mouse#mousemove)
|
||||
* [.mouseout](EVENTS-Mouse#mouseout)
|
||||
* [.mouseover](EVENTS-Mouse#mouseover)
|
||||
* [.mouseup](EVENTS-Mouse#mouseup)
|
||||
|
||||
### N
|
||||
* [.next](DOM-Traversal#next)
|
||||
* [.nextAll](DOM-Traversal#nextall)
|
||||
* [.nextSibling](DOM-Traversal#nextsibling)
|
||||
* [.nextUntil](DOM-Traversal#nextuntil)
|
||||
* [.not](DOM-Traversal#not)
|
||||
|
||||
### O
|
||||
* [.off](EVENTS-Bindings#off)
|
||||
* **.omit**
|
||||
* [$.data.omit (Array)](DATA-Utilities-(Arrays)#omit)
|
||||
* [$.data.omit (Object)](DATA-Utilities-(Objects)#omit)
|
||||
* [.on](EVENTS-Bindings#on)
|
||||
* [.once](EVENTS-Bindings#once)
|
||||
|
||||
### P
|
||||
* [.parent](DOM-Traversal#parent)
|
||||
* [.parents](DOM-Traversal#parents)
|
||||
* [.parentsUntil](DOM-Traversal#parentsuntil)
|
||||
* **.pick**
|
||||
* [$.data.pick (Array)](DATA-Utilities-(Arrays)#pick)
|
||||
* [$.data.pick (Object)](DATA-Utilities-(Objects)#pick)
|
||||
* **.post**
|
||||
* [$.http.post](HTTP-Requests#post)
|
||||
* [.prepend](DOM-Manipulation#prepend)
|
||||
* [.prependTo](DOM-Manipulation#prependto)
|
||||
* [.pressedkey](EVENTS-Keyboard#pressedkey)
|
||||
* [.prev](DOM-Traversal#prev)
|
||||
* [.prevAll](DOM-Traversal#prevall)
|
||||
* [.prevSibling](DOM-Traversal#prevsibling)
|
||||
* [.prevUntil](DOM-Traversal#prevuntil)
|
||||
* [.prop](DOM-Attributes#prop)
|
||||
|
||||
### Q
|
||||
* [Quick Start](Quick-Start)
|
||||
|
||||
### R
|
||||
* [.ready](EVENTS-Lifecycle#ready)
|
||||
* **.remove**
|
||||
* [.remove](DOM-Manipulation#remove)
|
||||
* [$.data.remove.all (Array)](DATA-Utilities-(Arrays)#removeall)
|
||||
* [$.data.remove.all (Object)](DATA-Utilities-(Objects)#removeall)
|
||||
* [$.data.remove.at (Array)](DATA-Utilities-(Arrays)#removeat)
|
||||
* [$.data.remove.at (Object)](DATA-Utilities-(Objects)#removeat)
|
||||
* [$.data.remove.byKey (Array)](DATA-Utilities-(Arrays)#removebykey)
|
||||
* [$.data.remove.by.Key (Object)](DATA-Utilities-(Objects)#removebykey)
|
||||
* [$.data.remove.byMatch (Array)](DATA-Utilities-(Arrays)#removebymatch)
|
||||
* [$.data.remove.byMatch (Object)](DATA-Utilities-(Objects)#removebymatch)
|
||||
* [$.data.remove.byValue (Array)](DATA-Utilities-(Arrays)#removebyvalue)
|
||||
* [$.data.remove.byValue (Object)](DATA-Utilities-(Objects)#removebyvalue)
|
||||
* [$.data.remove.first (Array)](DATA-Utilities-(Arrays)#removefirst)
|
||||
* [$.data.remove.first (Object)](DATA-Utilities-(Objects)#removefirst)
|
||||
* [$.data.remove.last (Array)](DATA-Utilities-(Arrays)#removelast)
|
||||
* [$.data.remove.last (Object)](DATA-Utilities-(Objects)#removelast)
|
||||
* [.removeAttr](DOM-Attributes#removeattr)
|
||||
* [.removeClass](CSS-Classes-&-Styles#removeclass)
|
||||
* [.replaceWith](DOM-Manipulation#replacewith)
|
||||
* [.replaceWithClone](DOM-Manipulation#replacewithclone)
|
||||
|
||||
### S
|
||||
* [.select](DOM-States#select)
|
||||
* [.selected](DOM-States#selected)
|
||||
* **.set**
|
||||
* [$.data.set (Array)](DATA-Utilities-(Arrays)#set)
|
||||
* [$.data.set (Object)](DATA-Utilities-(Objects)#set)
|
||||
* [.show](EFFECTS-Fade#show)
|
||||
* [.sibling](DOM-Traversal#sibling)
|
||||
* [.siblings](DOM-Traversal#siblings)
|
||||
* [.slideDown](EFFECTS-Slide-(vertical)#slidedown)
|
||||
* [.slideIn](EFFECTS-Slide-(vertical)#slidein)
|
||||
* [.slideOut](EFFECTS-Slide-(vertical)#slideout)
|
||||
* [.slideToggle](EFFECTS-Slide-(vertical)#slidetoggle)
|
||||
* [.slideToggleBox](EFFECTS-Slide-(vertical)#slidetogglebox)
|
||||
* [.slideUp](EFFECTS-Slide-(vertical)#slideup)
|
||||
* [.submit](EVENTS-Form#submit)
|
||||
* [.swipeDown](EVENTS-Touch#swipedown)
|
||||
* [.swipeLeft](EVENTS-Touch#swipeleft)
|
||||
* [.swipeRight](EVENTS-Touch#swiperight)
|
||||
* [.swipeUp](EVENTS-Touch#swipeup)
|
||||
|
||||
### T
|
||||
* [.text](DOM-Content#text)
|
||||
* [.toggleClass](CSS-Classes-&-Styles#toggleclass)
|
||||
* [.trigger](EVENTS-Bindings#trigger)
|
||||
* [.toggle](EFFECTS-Fade#toggle)
|
||||
* [.touchcancel](EVENTS-Touch#touchcancel)
|
||||
* [.touchend](EVENTS-Touch#touchend)
|
||||
* [.touchmove](EVENTS-Touch#touchmove)
|
||||
* [.touchstart](EVENTS-Touch#touchstart)
|
||||
* [$.throttle](UTILITIES#throttle)
|
||||
* [The Frankenstein Chain](The-Frankenstein-Chain)
|
||||
|
||||
### U
|
||||
* [.uncheck](DOM-States#uncheck)
|
||||
* [.unwrap](DOM-Manipulation#unwrap)
|
||||
* [.upload](HTTP-Requests#upload)
|
||||
* [UTILITIES](UTILITIES)
|
||||
|
||||
### V
|
||||
* [.val](DOM-Attributes#val)
|
||||
* **.value**
|
||||
* [$.data.find.value (Array)](DATA-Utilities-(Arrays)#findvalue)
|
||||
* [$.data.find.value (Object)](DATA-Utilities-(Objects)#findvalue)
|
||||
|
||||
### W
|
||||
* [.wrap](DOM-Manipulation#wrap)
|
||||
|
||||
### $
|
||||
* [$.data (Array)](DATA-Utilities-(Arrays))
|
||||
* [$.data (Object)](DATA-Utilities-(Objects))
|
||||
* [$.debounce](UTILITIES#debounce)
|
||||
* [$.each](Utilities#each)
|
||||
* [$.http](HTTP-Requests)
|
||||
* [$.throttle](UTILITIES#throttle)
|
||||
128
wiki/CSS-Classes-&-Styles.md
Normal file
128
wiki/CSS-Classes-&-Styles.md
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
* [`css`](#usage-css)
|
||||
* [`addClass`](#usage-addClass) | [`removeClass`](#usage-removeClass) | [`toggleClass`](#usage-toggleClass) | [`hasClass`](#usage-hasClass)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-css"></a>.css
|
||||
|
||||
**Description**
|
||||
Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `property` (String|Object): A CSS property name or an object of property-value pairs.
|
||||
* `value` (String|Number, optional): A value to set for the property.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (String): The value of the property (if getter).
|
||||
* (jBase): Current instance (if setter).
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Get value
|
||||
const color = $('.box').css('color');
|
||||
|
||||
// Set single value
|
||||
$('.box').css('width', '500px');
|
||||
|
||||
// Set multiple values
|
||||
$('.box').css({
|
||||
'background-color': 'blue',
|
||||
'font-size': '14px'
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-addClass"></a>.addClass
|
||||
|
||||
**Description**
|
||||
Adds the specified class(es) to each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `className` (String): One or more class names to be added to the class attribute of each matched element.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('p').addClass('lead text-muted');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-removeClass"></a>.removeClass
|
||||
|
||||
**Description**
|
||||
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `className` (String): One or more class names to be removed.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.active').removeClass('active');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-toggleClass"></a>.toggleClass
|
||||
|
||||
**Description**
|
||||
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `className` (String): One or more class names to be toggled.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.btn').click(function() {
|
||||
$(this).toggleClass('btn-active');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-hasClass"></a>.hasClass
|
||||
|
||||
**Description**
|
||||
Determine whether any of the matched elements are assigned the given class.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `className` (String): The class name to search for.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Boolean): True if the class is present, false otherwise.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
if ($('#menu').hasClass('open')) {
|
||||
$('#menu').slideUp();
|
||||
}
|
||||
|
||||
```
|
||||
560
wiki/DATA-Utilities-(Arrays).md
Normal file
560
wiki/DATA-Utilities-(Arrays).md
Normal file
|
|
@ -0,0 +1,560 @@
|
|||
* [`chunk`](#usage-chunk) | [`mergeArray` / `merge`](#usage-mergeArray) | [`add`](#usage-add) | [`clear` / `empty`](#usage-clear)
|
||||
* [`pick`](#usage-pick) | [`omit`](#usage-omit) | [`get`](#usage-get) | [`set`](#usage-set)
|
||||
* [`remove.at`](#usage-remove-at) | [`remove.first`](#usage-remove-first) | [`remove.last`](#usage-remove-last) | [`remove.byMatch`](#usage-remove-byMatch) | [`remove.byKey`](#usage-remove-byKey) | [`remove.byValue`](#usage-remove-byValue) | [`remove.all`](#usage-remove-all)
|
||||
* [`find.at`](#usage-find-at) | [`find.first`](#usage-find-first) | [`find.last`](#usage-find-last) | [`find.all`](#usage-find-all) | [`find.key`](#usage-find-key) | [`find.value`](#usage-find-value) | [`find.byMatch`](#usage-find-byMatch)
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-chunk"></a>.chunk
|
||||
|
||||
**Description**
|
||||
Creates an array of elements split into groups the length of `size`.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The array to process.
|
||||
* `size` (Number): The length of each chunk.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array[]): An array containing the chunked arrays.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const data = [1, 2, 3, 4, 5];
|
||||
const chunks = $.data.chunk(data, 2);
|
||||
// Result: [[1, 2], [3, 4], [5]]
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-mergeArray"></a>.mergeArray (Alias: .merge)
|
||||
|
||||
**Description**
|
||||
Merges multiple arrays into a single, flat array.
|
||||
*(Note: This creates a new array and does not modify the inputs).*
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `...arrays` (Array[]): A list of arrays to merge (e.g. `arr1, arr2, arr3`).
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new, single merged array.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const a = [1, 2];
|
||||
const b = [3, 4];
|
||||
const c = [5, 6];
|
||||
const result = $.data.merge(a, b, c);
|
||||
//Alternative: $.data.mergeArray(a, b, c);
|
||||
|
||||
// Result: [1, 2, 3, 4, 5, 6]
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-add"></a>.add
|
||||
|
||||
**Description**
|
||||
Safely adds an element to the array at a specific position without mutating the original array (Immutable).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The original array.
|
||||
* `item` (Any): The item to add.
|
||||
* `index` (Number, optional): The position to insert at. Defaults to the end (`array.length`). Negative values count from the back.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new array including the added element.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const list = ['a', 'c'];
|
||||
// Insert 'b' at index 1
|
||||
const result = $.data.add(list, 'b', 1);
|
||||
// Result: ['a', 'b', 'c']
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-clear"></a>.clear (Alias: .empty)
|
||||
|
||||
**Description**
|
||||
Clears the array and returns a new empty array. This method is strictly immutable; it does not mutate the original array, but instead provides a clean, predictable way to reset data states.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The array to clear.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new, empty array (`[]`).
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const myData = [1, 2, 3, 4, 5];
|
||||
const resetData = $.data.clear(myData);
|
||||
// Alternatively: $.data.empty(myData);
|
||||
|
||||
// Result: resetData is [], myData remains [1, 2, 3, 4, 5]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-pick"></a>.pick
|
||||
|
||||
**Description**
|
||||
Creates a new array containing only the elements at the specified indices (Allowlist). Mirrors the object API.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The source array.
|
||||
* `indices` (Number[]): Array of indices to keep.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new array with selected elements.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const list = ['a', 'b', 'c', 'd'];
|
||||
const result = $.data.pick(list, [0, 2]);
|
||||
// Result: ['a', 'c']
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-omit"></a>.omit
|
||||
|
||||
**Description**
|
||||
Creates a new array containing all elements EXCEPT those at the specified indices (Blocklist). Mirrors the object API.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The source array.
|
||||
* `indices` (Number[]): Array of indices to remove.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new array without the specified elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const list = ['a', 'b', 'c', 'd'];
|
||||
const result = $.data.omit(list, [1, 3]);
|
||||
// Result: ['a', 'c']
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-get"></a>.get
|
||||
|
||||
**Description**
|
||||
Safely retrieves a value from a nested array/object structure (Safe Navigation) using dot-notation. Mirrors the object API.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The source array.
|
||||
* `path` (String): The path as a dot-notation string.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Any | undefined): The found value or `undefined` if any part is missing.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const users = [{ profile: { name: 'Sven' } }];
|
||||
const name = $.data.get(users, '0.profile.name');
|
||||
// Result: 'Sven'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-set"></a>.set
|
||||
|
||||
**Description**
|
||||
Sets a value deeply within a nested array/object structure. Automatically creates missing intermediate objects or arrays based on the path. Mirrors the object API.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The array to modify.
|
||||
* `path` (String): The path as a string (e.g., '0.profile.name').
|
||||
* `value` (Any): The value to set.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (void): Modifies the array in place.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const users = [];
|
||||
$.data.set(users, '0.profile.role', 'admin');
|
||||
// Result: [{ profile: { role: 'admin' } }]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-at"></a>.remove.at
|
||||
|
||||
**Description**
|
||||
Removes an element at a specific index and returns a new array. Supports negative indices to count from the end.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The source array.
|
||||
* `index` (Number): The index to remove. Negative values count from the back (e.g., `-1` is the last item).
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new array without the item at the specified index.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const numbers = [10, 20, 30, 40];
|
||||
const result = $.data.remove.at(numbers, -2); // Removes 30
|
||||
// Result: [10, 20, 40]
|
||||
// Original 'numbers' array remains [10, 20, 30, 40]
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-first"></a>.remove.first
|
||||
|
||||
**Description**
|
||||
Removes the first element of the array and returns the rest as a new array.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The source array.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new array without the first element.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const queue = ['Task 1', 'Task 2', 'Task 3'];
|
||||
const nextQueue = $.data.remove.first(queue);
|
||||
// Result: ['Task 2', 'Task 3']
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-last"></a>.remove.last
|
||||
|
||||
**Description**
|
||||
Removes the last element of the array and returns the rest as a new array.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The source array.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new array without the last element.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const stack = ['A', 'B', 'C'];
|
||||
const newStack = $.data.remove.last(stack);
|
||||
// Result: ['A', 'B']
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-byMatch"></a>.remove.byMatch
|
||||
|
||||
**Description**
|
||||
Removes **all** elements that match the search query condition.
|
||||
*(This effectively acts as an inverse filter).*
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The source array.
|
||||
* `query` (String|Number): The search term to match against.
|
||||
* `mode` (String, optional): Comparison mode: `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `key` (String, optional): If the array contains objects, specify the property key to check.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new array containing only the items that **did not** match.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const users = [
|
||||
{ id: 1, role: 'admin' },
|
||||
{ id: 2, role: 'user' },
|
||||
{ id: 3, role: 'admin' }
|
||||
];
|
||||
|
||||
// Remove all admins
|
||||
const nonAdmins = $.data.remove.byMatch(users, 'admin', 'exact', 'role');
|
||||
// Result: [{ id: 2, role: 'user' }]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-byKey"></a>.remove.byKey
|
||||
|
||||
**Description**
|
||||
Removes the element at a specific index. Mirrors `object.remove.byKey`. Functionally identical to `remove.at` for arrays.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The source array.
|
||||
* `index` (Number): The index (key) to remove.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new array without the specified index.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const list = ['a', 'b', 'c'];
|
||||
const result = $.data.remove.byKey(list, 1);
|
||||
// Result: ['a', 'c']
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-byValue"></a>.remove.byValue
|
||||
|
||||
**Description**
|
||||
Removes all elements that match a specific value exactly (using strict equality `!==`).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The source array.
|
||||
* `value` (Any): The exact value to remove.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): A new array without the specified values.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const nums = [1, 2, 1, 3];
|
||||
const result = $.data.remove.byValue(nums, 1);
|
||||
// Result: [2, 3]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-all"></a>.remove.all
|
||||
|
||||
**Description**
|
||||
Alias for `.clear()`. Empties the array immutably.
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-at"></a>.find.at
|
||||
|
||||
**Description**
|
||||
Finds the **index** of the first element that matches the query.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The array to search.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): Comparison mode: `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `key` (String, optional): If the array contains objects, specify the property key to search in.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Number): The index of the match, or `-1` if not found.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
|
||||
// Find index of user with name starting with 'Bo'
|
||||
const index = $.data.find.at(users, 'Bo', 'startsWith', 'name');
|
||||
// Result: 1
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-all"></a>.find.all
|
||||
|
||||
**Description**
|
||||
Returns **all elements** (as a new array) that match the condition. Similar to `filter()`.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The array to search.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `key` (String, optional): The object property key to check (if array of objects).
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): An array containing all matching elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const files = ['image.png', 'script.js', 'logo.png', 'style.css'];
|
||||
// Find all .png files
|
||||
const images = $.data.find.all(files, '.png', 'endsWith');
|
||||
// Result: ['image.png', 'logo.png']
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-first"></a>.find.first
|
||||
|
||||
**Description**
|
||||
Returns the **first element** (the actual item, not the index) that matches the query.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The array to search.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `key` (String, optional): The object property key to check.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Any | undefined): The found element, or `undefined`.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const fruits = ['apple', 'banana', 'cherry'];
|
||||
const match = $.data.find.first(fruits, 'nana', 'contains');
|
||||
// Result: 'banana'
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-last"></a>.find.last
|
||||
|
||||
**Description**
|
||||
Returns the **last element** that matches the query. Searches the array in reverse order.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The array to search.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `key` (String, optional): The object property key to check.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Any | undefined): The last matching element, or `undefined`.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const log = [
|
||||
{ level: 'info', msg: 'Start' },
|
||||
{ level: 'error', msg: 'Fail' },
|
||||
{ level: 'info', msg: 'End' }
|
||||
];
|
||||
// Find last info message
|
||||
const lastInfo = $.data.find.last(log, 'info', 'exact', 'level');
|
||||
// Result: { level: 'info', msg: 'End' }
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-byMatch"></a>.find.byMatch
|
||||
|
||||
**Description**
|
||||
Finds the **index** of the first match based on the query condition.
|
||||
*(Note: Functionally similar to `find.at` in the current implementation).*
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The array to search.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `key` (String, optional): The object property key to check.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Number): The index of the match, or `-1`.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const nums = [10, 20, 30, 40];
|
||||
const idx = $.data.find.byMatch(nums, 30);
|
||||
// Result: 2
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-key"></a>.find.key
|
||||
|
||||
**Description**
|
||||
Finds all indices (keys) matching the query. For arrays, keys are the indices (represented as strings). Mirrors the object API.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The array to search.
|
||||
* `query` (String|Number): The search query.
|
||||
* `mode` (String, optional): Comparison mode: `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (String[]): An array of matching indices as strings.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const list = ['apple', 'banana', 'apricot'];
|
||||
// Find indices containing '0'
|
||||
const indices = $.data.find.key(list, '0', 'exact');
|
||||
// Result: ['0']
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-value"></a>.find.value
|
||||
|
||||
**Description**
|
||||
Finds all values matching the query. Identical to `find.all()` for flat arrays, provided for strict API symmetry with objects.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `array` (Array): The array to search.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): Comparison mode. Default is `'exact'`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array): An array of matching values.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const list = ['apple', 'banana', 'apricot'];
|
||||
const matches = $.data.find.value(list, 'ap', 'startsWith');
|
||||
// Result: ['apple', 'apricot']
|
||||
```
|
||||
543
wiki/DATA-Utilities-(Objects).md
Normal file
543
wiki/DATA-Utilities-(Objects).md
Normal file
|
|
@ -0,0 +1,543 @@
|
|||
* [`chunk`](#usage-chunk) | [`mergeObjects` / `merge`](#usage-mergeObjects) | [`add`](#usage-add) | [`clear` / `empty`](#usage-clear)
|
||||
* [`pick`](#usage-pick) | [`omit`](#usage-omit) | [`get`](#usage-get) | [`set`](#usage-set)
|
||||
* [`remove.at`](#usage-remove-at) | [`remove.first`](#usage-remove-first) | [`remove.last`](#usage-remove-last) | [`remove.byMatch`](#usage-remove-byMatch) | [`remove.byKey`](#usage-remove-byKey) | [`remove.byValue`](#usage-remove-byValue) | [`remove.all`](#usage-remove-all)
|
||||
* [`find.at`](#usage-find-at) | [`find.first`](#usage-find-first) | [`find.last`](#usage-find-last) | [`find.all`](#usage-find-all) | [`find.key`](#usage-find-key) | [`find.value`](#usage-find-value) | [`find.byMatch`](#usage-find-byMatch)
|
||||
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-chunk"></a>.chunk
|
||||
|
||||
**Description**
|
||||
Splits an object into an array of smaller objects (chunks). Ideal for batched processing of object properties. Mirrors the array API.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The source object.
|
||||
* `size` (Number): The maximum number of keys per chunk.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object[]): An array of partial objects.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const data = { a: 1, b: 2, c: 3 };
|
||||
const chunks = $.data.chunk(data, 2);
|
||||
// Result: [{ a: 1, b: 2 }, { c: 3 }]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-add"></a>.add
|
||||
|
||||
**Description**
|
||||
Safely adds a key-value pair at a specific index without mutating the original object (Immutable). Note: While modern browsers generally respect object insertion order, relying strictly on object key order is not always recommended.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The original object.
|
||||
* `key` (String): The key to add.
|
||||
* `value` (Any): The value to add.
|
||||
* `index` (Number, optional): The position to insert at. Defaults to the end. Negative values count from the back.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new object including the added element.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const list = { a: 1, c: 3 };
|
||||
const result = $.data.add(list, 'b', 2, 1);
|
||||
// Result: { a: 1, b: 2, c: 3 }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-clear"></a>.clear (Alias: .empty)
|
||||
|
||||
**Description**
|
||||
Clears the object and returns a new empty object. This method is strictly immutable; it does not mutate the original object, ensuring a safe functional approach when resetting state.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The object to clear.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new, empty object (`{}`).
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const userProfile = { name: 'Sven', role: 'Admin' };
|
||||
const resetProfile = $.data.clear(userProfile);
|
||||
// Alternatively: $.data.empty(userProfile);
|
||||
|
||||
// Result: resetProfile is {}, userProfile remains unchanged
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-mergeObjects"></a>.mergeObjects (Alias: .merge)
|
||||
|
||||
|
||||
**Description**
|
||||
Recursively merges one or more source objects into a target object (Deep Merge).
|
||||
*Note: This modifies the `target` object in place.*
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `target` (Object): The target object to receive properties.
|
||||
* `...sources` (Object[]): One or more source objects to merge into the target.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): The modified target object.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const defaults = { app: { theme: 'light', debug: false } };
|
||||
const config = { app: { debug: true } };
|
||||
|
||||
$.data.merge(defaults, config);
|
||||
// Alternatively: $.data.mergeObjects(defaults, config);
|
||||
|
||||
// defaults is now: { app: { theme: 'light', debug: true } }
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-pick"></a>.pick
|
||||
|
||||
**Description**
|
||||
Creates a new object containing *only* the specified keys (Allowlist).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The source object.
|
||||
* `keys` (String[]): An array of keys to keep.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new object with the selected keys.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const user = { id: 1, name: 'Alice', role: 'admin' };
|
||||
const publicProfile = $.data.pick(user, ['name']);
|
||||
// Result: { name: 'Alice' }
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-omit"></a>.omit
|
||||
|
||||
**Description**
|
||||
Creates a new object containing all keys *except* the specified ones (Blocklist).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The source object.
|
||||
* `keys` (String[]): An array of keys to remove.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new object without the specified keys.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const user = { id: 1, name: 'Alice', password: '123' };
|
||||
const safeUser = $.data.omit(user, ['password']);
|
||||
// Result: { id: 1, name: 'Alice' }
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-get"></a>.get
|
||||
|
||||
**Description**
|
||||
Safely retrieves a value from a nested object using dot-notation. Returns `undefined` if the path does not exist, preventing runtime errors.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The object to query.
|
||||
* `path` (String): The path as a dot-notation string (e.g., `'user.address.city'`).
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Any): The found value or `undefined`.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const val = $.data.get(response, 'data.items.0.id');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-set"></a>.set
|
||||
|
||||
**Description**
|
||||
Sets a value deeply within a nested object. It automatically creates missing intermediate objects if the path doesn't exist.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The object to modify.
|
||||
* `path` (String): The path string (e.g., `'settings.theme.color'`).
|
||||
* `value` (Any): The value to set.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Void): This function mutates the object and returns nothing.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const config = {};
|
||||
$.data.set(config, 'database.connection.host', 'localhost');
|
||||
// config is now: { database: { connection: { host: 'localhost' } } }
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-at"></a>.remove.at
|
||||
|
||||
**Description**
|
||||
Removes an entry at a specific index and returns a new object (Immutable). Supports negative indices to count from the end.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The source object.
|
||||
* `index` (Number): The index to remove.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new object without the entry at the specified index.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const data = { a: 1, b: 2, c: 3 };
|
||||
const result = $.data.remove.at(data, -1);
|
||||
// Result: { a: 1, b: 2 }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-first"></a>.remove.first
|
||||
|
||||
**Description**
|
||||
Removes the first entry of the object and returns the rest as a new object (Immutable).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The source object.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new object without the first entry.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const queue = { first: 'Task 1', second: 'Task 2' };
|
||||
const nextQueue = $.data.remove.first(queue);
|
||||
// Result: { second: 'Task 2' }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-last"></a>.remove.last
|
||||
|
||||
**Description**
|
||||
Removes the last entry of the object and returns the rest as a new object (Immutable).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The source object.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new object without the last entry.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const stack = { a: 1, b: 2, c: 3 };
|
||||
const newStack = $.data.remove.last(stack);
|
||||
// Result: { a: 1, b: 2 }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-byMatch"></a>.remove.byMatch
|
||||
|
||||
**Description**
|
||||
Removes **all** entries that match the search query condition (Immutable). Acts as an inverse filter.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The source object.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): Comparison mode: `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `searchBy` (String, optional): Search by `'key'` or `'value'`. Default is `'key'`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new object containing only the items that **did not** match.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const config = { api_key: '123', secret: 'abc', api_url: 'http' };
|
||||
const safeConfig = $.data.remove.byMatch(config, 'api_', 'startsWith', 'key');
|
||||
// Result: { secret: 'abc' }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-byKey"></a>.remove.byKey
|
||||
|
||||
**Description**
|
||||
Removes a specific key-value pair from the object based on its key (Immutable).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The source object.
|
||||
* `key` (String): The exact key to remove.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new object without the specified key.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const user = { a: 1, b: 2, c: 3 };
|
||||
const result = $.data.remove.byKey(user, 'b');
|
||||
// Result: { a: 1, c: 3 }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-byValue"></a>.remove.byValue
|
||||
|
||||
**Description**
|
||||
Removes all entries that match a specific value exactly (using strict equality `!==`).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The source object.
|
||||
* `value` (Any): The exact value to remove.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new object without the matching values.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const scores = { alice: 10, bob: 5, charlie: 10 };
|
||||
const result = $.data.remove.byValue(scores, 10);
|
||||
// Result: { bob: 5 }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove-all"></a>.remove.all
|
||||
|
||||
**Description**
|
||||
Alias for `.clear()`. Empties the object immutably.
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-at"></a>.find.at
|
||||
|
||||
**Description**
|
||||
Returns the n-th entry of an object as a `[key, value]` pair. Supports negative indices to count from the end.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The object to search.
|
||||
* `index` (Number): The 0-based index. Negative numbers count from the back.
|
||||
|
||||
**Returns**
|
||||
|
||||
* ([String, Any] | undefined): A tuple containing the key and value, or undefined.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const data = { a: 1, b: 2, c: 3 };
|
||||
const entry = $.data.find.at(data, -1);
|
||||
// Result: ['c', 3]
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-all"></a>.find.all
|
||||
|
||||
**Description**
|
||||
Returns a NEW OBJECT containing ALL elements that match the condition. Similar to `filter()` but returns a partial object. Mirrors the array API.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The object to search.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `searchBy` (String, optional): Search by `'key'` or `'value'`. Default is `'key'`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Object): A new object containing only the matching elements.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
const config = { a: 1, b: 2, c: 1 };
|
||||
// Find all entries where the value is exactly 1
|
||||
const matches = $.data.find.all(config, 1, 'exact', 'value');
|
||||
// Result: { a: 1, c: 1 }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-first"></a>.find.first
|
||||
|
||||
**Description**
|
||||
Finds the **first** entry where the key or value matches the query.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The object to search.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): Comparison mode: `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `searchBy` (String, optional): Search by `'key'` or `'value'`. Default is `'key'`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* ([String, Any] | undefined): The first matching `[key, value]` pair.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const config = { admin_id: 10, user_id: 20 };
|
||||
// Find first entry where key starts with 'user'
|
||||
const match = $.data.find.first(config, 'user', 'startsWith', 'key');
|
||||
// Result: ['user_id', 20]
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-last"></a>.find.last
|
||||
|
||||
**Description**
|
||||
Finds the **last** entry where the key or value matches the query. Useful for prioritized overrides or ordered objects.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The object to search.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `searchBy` (String, optional): `'key'` or `'value'`. Default is `'key'`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* ([String, Any] | undefined): The last matching `[key, value]` pair.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const files = { 'script.js': 1, 'style.css': 2, 'main.css': 3 };
|
||||
// Find last entry where key ends with '.css'
|
||||
const match = $.data.find.last(files, '.css', 'endsWith', 'key');
|
||||
// Result: ['main.css', 3]
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-key"></a>.find.key
|
||||
|
||||
**Description**
|
||||
Finds **all keys** in the object that match the query.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The object to search.
|
||||
* `query` (String): The search term.
|
||||
* `mode` (String, optional): `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (String[]): An array of matching keys.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const settings = { theme_dark: true, theme_light: false, lang: 'en' };
|
||||
const themes = $.data.find.key(settings, 'theme_', 'startsWith');
|
||||
// Result: ['theme_dark', 'theme_light']
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-value"></a>.find.value
|
||||
|
||||
**Description**
|
||||
Finds **all values** in the object that match the query.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The object to search.
|
||||
* `query` (String): The search term.
|
||||
* `mode` (String, optional): `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Any[]): An array of matching values.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const roles = { bob: 'admin', alice: 'editor', john: 'admin' };
|
||||
const admins = $.data.find.value(roles, 'admin', 'exact');
|
||||
// Result: ['admin', 'admin']
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-find-byMatch"></a>.find.byMatch
|
||||
|
||||
**Description**
|
||||
Finds the **key** of the first match based on the query condition. This mirrors the array method (which returns a numeric index), but returns the string key for objects.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `obj` (Object): The object to search.
|
||||
* `query` (String|Number): The search term.
|
||||
* `mode` (String, optional): `'exact'`, `'contains'`, `'startsWith'`, `'endsWith'`. Default is `'exact'`.
|
||||
* `searchBy` (String, optional): Search by `'key'` or `'value'`. Default is `'key'`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (String | undefined): The key of the first matching entry, or `undefined`.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const roles = { user: 'standard', alice: 'admin', bob: 'editor' };
|
||||
|
||||
// Find the key of the first entry where the value is 'admin'
|
||||
const adminKey = $.data.find.byMatch(roles, 'admin', 'exact', 'value');
|
||||
// Result: 'alice'
|
||||
```
|
||||
110
wiki/DOM-Attributes.md
Normal file
110
wiki/DOM-Attributes.md
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
* [`attr`](#usage-attr) | [`val`](#usage-val) | [`removeAttr`](#usage-removeattr) | [`prop`](#usage-prop)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-attr"></a>.attr
|
||||
|
||||
**Description**
|
||||
Get the value of an attribute for the first element in the set, or set one or more attributes for every matched element.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `name` (String): The name of the attribute.
|
||||
* `value` (String|Number, optional): The value to set. If omitted, the method acts as a getter.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (String): Value of the attribute (if getter).
|
||||
* (jBase): Current instance for chaining (if setter).
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Get href
|
||||
const link = $('a.my-link').attr('href');
|
||||
|
||||
// Set id and title
|
||||
$('.item').attr('id', 'item-1').attr('title', 'Item One');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-val"></a>.val
|
||||
|
||||
**Description**
|
||||
Get the current value of the first element in the set of matched elements or set the value of every matched element.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `value` (String|Number, optional): The value to set.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (String|Number): The value of the input (if getter).
|
||||
* (jBase): Current instance (if setter).
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Get input value
|
||||
const username = $('#username').val();
|
||||
|
||||
// Set input value
|
||||
$('#username').val('NewUser');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-removeattr"></a>.removeAttr
|
||||
|
||||
**Description**
|
||||
Remove an attribute from each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `name` (String): The name of the attribute to remove.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Remove disabled attribute to enable a button
|
||||
$('button.submit').removeAttr('disabled');
|
||||
|
||||
// Remove readonly attribute from an input
|
||||
$('.input-field').removeAttr('readonly');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-prop"></a>.prop
|
||||
|
||||
**Description**
|
||||
Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element. This is especially useful for properties that do not map directly to HTML attributes (like `checked`, `disabled`, or `selectedIndex`).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `name` (String): The name of the property.
|
||||
* `value` (Any, optional): The value to set. If omitted, the method acts as a getter.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Any): Value of the property (if getter).
|
||||
* (jBase): Current instance for chaining (if setter).
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Get checked state of a checkbox
|
||||
const isChecked = $('#my-checkbox').prop('checked');
|
||||
|
||||
// Set a checkbox to checked
|
||||
$('#my-checkbox').prop('checked', true);
|
||||
|
||||
// Set all inputs in a form to disabled
|
||||
$('form input').prop('disabled', true);
|
||||
|
||||
```
|
||||
90
wiki/DOM-Content.md
Normal file
90
wiki/DOM-Content.md
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
* [`html`](#usage-html) | [`text`](#usage-text) | [`load`](#usage-load)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-html"></a>.html
|
||||
|
||||
**Description**
|
||||
Gets the HTML contents of the first element in the set, or sets the HTML contents of every matched element.
|
||||
|
||||
🛡️ **Security by Default:** When setting HTML, jBase automatically strips dangerous inline event handlers (like `onerror`) and malicious protocols (like `href="javascript:..."`) to mitigate XSS attacks. Embedded `<script>` tags are placed into the DOM but are **not** executed by the browser.
|
||||
|
||||
⚙️ **Executing Scripts:** If you are injecting trusted content that contains `<script>` tags which *must* be executed, you can pass the `executeScripts: true` flag.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `content` (String, optional): The HTML string to set. If omitted, the method acts as a getter.
|
||||
* `options` (Object, optional): Configuration options for the injection.
|
||||
* `executeScripts` (Boolean): If `true`, jBase will extract, execute, and evaluate any `<script>` tags found in the injected HTML string. Default is `false`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (String): The inner HTML of the first matched element (if used as a getter).
|
||||
* (jBase): The current instance for chaining (if used as a setter).
|
||||
|
||||
**Examples**
|
||||
```javascript
|
||||
// 1. GETTER: Retrieve HTML
|
||||
const content = $('#container').html();
|
||||
|
||||
// 2. SETTER (Safe Default): Inject HTML (strips inline events, scripts are ignored)
|
||||
$('#container').html('<div class="child">Hello</div>');
|
||||
|
||||
// 3. SETTER (Trusted Execution): Inject HTML and execute embedded scripts
|
||||
$('#widget').html('<script>initWidget();</script>', { executeScripts: true });
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-text"></a>.text
|
||||
|
||||
**Description**
|
||||
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `content` (String, optional): The text to set.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (String): Text content (if getter).
|
||||
* (jBase): Current instance (if setter).
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('h1').text('Welcome to jBase');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-load"></a>.load
|
||||
|
||||
**Description**
|
||||
Loads HTML content from a server and automatically injects it into the matched elements. This is an asynchronous wrapper utilizing `$.http.getText()`.
|
||||
|
||||
🛡️ **Security by Default:** When setting HTML, jBase automatically strips dangerous inline event handlers (like `onerror`) and malicious protocols (like `href="javascript:..."`) to mitigate XSS attacks. Embedded `<script>` tags are placed into the DOM but are **not** executed by the browser.
|
||||
|
||||
⚙️ **Executing Scripts:** If you are loading trusted content that contains `<script>` tags which *must* be executed upon loading, you can pass the `executeScripts: true` flag.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `url` (String): The URL to fetch the HTML from.
|
||||
* `options` (Object, optional): Standard `RequestInit` fetch options, extended with jBase specific flags.
|
||||
* `executeScripts` (Boolean): If `true`, jBase will extract, execute, and evaluate any `<script>` tags found in the loaded HTML. Default is `false`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Promise<jBase>): A promise that resolves to the current jBase instance.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
// Default: Safe load (no scripts executed, inline events stripped)
|
||||
await $('#sidebar').load('/partials/sidebar.html');
|
||||
|
||||
// Trusted load: Execute scripts found in the fetched HTML
|
||||
await $('#widget-container').load('/partials/interactive-widget.html', {
|
||||
executeScripts: true
|
||||
});
|
||||
```
|
||||
312
wiki/DOM-Manipulation.md
Normal file
312
wiki/DOM-Manipulation.md
Normal file
|
|
@ -0,0 +1,312 @@
|
|||
* [`remove`](#usage-remove) | [`empty`](#usage-empty) | [`replaceWithClone`](#usage-replaceWithClone)
|
||||
* [`append`](#usage-append) | [`prepend`](#usage-prepend) | [`before`](#usage-before) | [`after`](#usage-after)
|
||||
* [`replaceWith`](#usage-replaceWith) | [`appendTo`](#usage-appendTo) | [`prependTo`](#usage-prependTo)
|
||||
* [`insertBefore`](#usage-insertBefore) | [`insertAfter`](#usage-insertAfter)
|
||||
* [`wrap`](#usage-wrap) | [`unwrap`](#usage-unwrap)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-remove"></a>.remove
|
||||
|
||||
**Description**
|
||||
Removes the set of matched elements from the DOM.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The removed elements (detached).
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.ads').remove();
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-empty"></a>.empty
|
||||
|
||||
**Description**
|
||||
Remove all child nodes of the set of matched elements from the DOM.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Clears the content of .container but keeps the container itself
|
||||
$('.container').empty();
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-replaceWithClone"></a>.replaceWithClone
|
||||
|
||||
**Description**
|
||||
Replaces the selected elements with a deep clone of themselves. Useful for stripping event listeners.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The new cloned elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Removes all events attached to the button by cloning it
|
||||
$('button#reset').replaceWithClone();
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-append"></a>.append
|
||||
|
||||
**Description**
|
||||
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `content` (String|HTMLElement|jBase): The content to insert.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.list').append('<li>New Item</li>');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-prepend"></a>.prepend
|
||||
|
||||
**Description**
|
||||
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `content` (String|HTMLElement|jBase): The content to insert.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.list').prepend('<li>First Item</li>');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-before"></a>.before
|
||||
|
||||
**Description**
|
||||
Insert content before each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `content` (String|HTMLElement|jBase): The content to insert.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('#main').before('<div class="header"></div>');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-after"></a>.after
|
||||
|
||||
**Description**
|
||||
Insert content after each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `content` (String|HTMLElement|jBase): The content to insert.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('#main').after('<div class="footer"></div>');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-replaceWith"></a>.replaceWith
|
||||
|
||||
**Description**
|
||||
Replace each element in the set of matched elements with the provided new content.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `content` (String|HTMLElement|jBase): The content to insert.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance (the old, detached elements).
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$('.old-element').replaceWith('<div class="new-element">Updated</div>');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-appendTo"></a>.appendTo
|
||||
|
||||
**Description**
|
||||
Insert every element in the set of matched elements to the end of the target.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `target` (String|HTMLElement|jBase): The element to append to.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('<p>Test</p>').appendTo('.container');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-prependTo"></a>.prependTo
|
||||
|
||||
**Description**
|
||||
Insert every element in the set of matched elements to the beginning of the target.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `target` (String|HTMLElement|jBase): The target element.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('<p>Intro</p>').prependTo('body');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-insertBefore"></a>.insertBefore
|
||||
|
||||
**Description**
|
||||
Insert every element in the set of matched elements immediately before the target element.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `target` (String|HTMLElement): A CSS selector or DOM element before which the content will be inserted.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('<p>New Alert</p>').insertBefore('#main-content');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-insertAfter"></a>.insertAfter
|
||||
|
||||
**Description**
|
||||
Insert every element in the set of matched elements immediately after the target element.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `target` (String|HTMLElement): A CSS selector or DOM element after which the content will be inserted.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('<span>* Required</span>').insertAfter('input.required');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-wrap"></a>.wrap
|
||||
|
||||
**Description**
|
||||
Wrap an HTML structure around each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `structure` (String): HTML string specifying the structure (e.g., `<div class="wrapper"></div>`).
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.item').wrap('<div class="item-wrapper"></div>');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-unwrap"></a>.unwrap
|
||||
|
||||
**Description**
|
||||
Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Removes the parent <div> but keeps the <span>
|
||||
$('span').unwrap();
|
||||
|
||||
```
|
||||
165
wiki/DOM-States.md
Normal file
165
wiki/DOM-States.md
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
* [`checked`](#usage-checked) | [`check`](#usage-check) | [`uncheck`](#usage-uncheck)
|
||||
* [`selected`](#usage-selected) | [`select`](#usage-select)
|
||||
* [`disabled`](#usage-disabled) | [`disable`](#usage-disable) | [`enable`](#usage-enable)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-checked"></a>.checked
|
||||
|
||||
**Description**
|
||||
Get the checked state of the first element or set the state for all matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `state` (Boolean, optional): True to check, false to uncheck.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Boolean): Current state (if getter).
|
||||
* (jBase): Current instance (if setter).
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
if ($('#agree').checked()) {
|
||||
// do something
|
||||
}
|
||||
$('#agree').checked(true);
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-selected"></a>.selected
|
||||
|
||||
**Description**
|
||||
Get the selected state of an option or set it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `state` (Boolean, optional): True to select, false to deselect.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Boolean): Current state (if getter).
|
||||
* (jBase): Current instance (if setter).
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('option[value="de"]').selected(true);
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-disabled"></a>.disabled
|
||||
|
||||
**Description**
|
||||
Get the disabled state of an element or set it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `state` (Boolean, optional): True to disable, false to enable.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Boolean): Current state (if getter).
|
||||
* (jBase): Current instance (if setter).
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('button').disabled(true);
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-check"></a>.check
|
||||
|
||||
**Description**
|
||||
Alias for `.checked(true)`. Checks all matched checkboxes or radio buttons.
|
||||
|
||||
**Parameters**
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$('.terms-checkbox').check();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-uncheck"></a>.uncheck
|
||||
|
||||
**Description**
|
||||
Alias for `.checked(false)`. Unchecks all matched checkboxes or radio buttons.
|
||||
|
||||
**Parameters**
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$('.optional-options').uncheck();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-select"></a>.select
|
||||
|
||||
**Description**
|
||||
Alias for `.selected(true)`. Selects the matched `<option>` elements in a dropdown.
|
||||
|
||||
**Parameters**
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$('select#country option[value="DE"]').select();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-disable"></a>.disable
|
||||
|
||||
**Description**
|
||||
Alias for `.disabled(true)`. Disables the matched form fields or buttons and automatically adds the `.disabled` CSS class.
|
||||
|
||||
**Parameters**
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$('#submit-btn').disable();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-enable"></a>.enable
|
||||
|
||||
**Description**
|
||||
Alias for `.disabled(false)`. Enables the matched form fields or buttons and automatically removes the `.disabled` CSS class.
|
||||
|
||||
**Parameters**
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$('#submit-btn').enable();
|
||||
```
|
||||
529
wiki/DOM-Traversal.md
Normal file
529
wiki/DOM-Traversal.md
Normal file
|
|
@ -0,0 +1,529 @@
|
|||
* [`closest`](#usage-closest) | [`parent`](#usage-parent) | [`children`](#usage-children) | [`findAll`](#usage-findAll)
|
||||
* [`descendants`](#usage-descendants) | [`parents`](#usage-parents) | [`parentsUntil`](#usage-parentsUntil)
|
||||
* [`descendantsUntil`](#usage-descendantsUntil)
|
||||
* [`next`](#usage-next) | [`prev`](#usage-prev) | [`nextSibling`](#usage-nextSibling) | [`prevSibling`](#usage-prevSibling)
|
||||
* [`sibling`](#usage-sibling) | [`nextAll`](#usage-nextAll) | [`prevAll`](#usage-prevAll) | [`siblings`](#usage-siblings)
|
||||
* [`nextUntil`](#usage-nextUntil) | [`prevUntil`](#usage-prevUntil)
|
||||
* [`eq`](#usage-eq) | [`first`](#usage-first) | [`last`](#usage-last) | [`filterBy`](#usage-filterBy) | [`not`](#usage-not)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-closest"></a>.closest
|
||||
|
||||
**Description**
|
||||
Travels up the DOM tree from the current element to find the first ancestor that matches the selector.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String): A string containing a selector expression to match elements against.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): A new jBase object containing the matching ancestor.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Find the nearest container div for a button
|
||||
const container = $('button.save').closest('.container');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-parent"></a>.parent
|
||||
|
||||
**Description**
|
||||
Get the direct parent of each element in the current set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The parent elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.item').parent().addClass('has-items');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-children"></a>.children
|
||||
|
||||
**Description**
|
||||
Get the children of each element in the set of matched elements, optionally filtered by a selector.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String, optional): A string containing a selector expression to match elements against.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The children elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Get only list items with class 'active'
|
||||
$('ul.menu').children('li.active');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-findAll"></a>.findAll
|
||||
|
||||
**Description**
|
||||
Finds all descendant elements that match the selector.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String): The selector to match.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The found elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Find all spans inside the header
|
||||
$('.header').findAll('span');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-descendants"></a>.descendants
|
||||
|
||||
**Description**
|
||||
Get all descendant elements (children, grandchildren, etc.), optionally filtered by a selector.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String, optional): Filter for the descendants.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): All descendant elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('#tree').descendants('.leaf');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-parents"></a>.parents
|
||||
|
||||
**Description**
|
||||
Get the ancestors of each element in the current set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String, optional): If supplied, the ancestors are filtered.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The ancestor elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('span').parents('div');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-parentsUntil"></a>.parentsUntil
|
||||
|
||||
**Description**
|
||||
Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String): The selector that indicates where to stop matching ancestor elements.
|
||||
* `filter` (String, optional): A string containing a selector expression to filter the returned ancestors.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The ancestor elements between the current element and the stop selector.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Get all parents of .item until .container is reached
|
||||
$('.item').parentsUntil('.container');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-descendantsUntil"></a>.descendantsUntil
|
||||
|
||||
**Description**
|
||||
Get all descendant elements, but stop searching deeper in a specific branch once the provided selector is matched.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String): The selector that indicates where to stop the deep traversal.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The descendant elements found before hitting the stop selector.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Find descendants but don't look inside nested .protected-areas
|
||||
$('.root').descendantsUntil('.protected-area');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-next"></a>.next
|
||||
|
||||
**Description**
|
||||
Get the immediately following sibling of each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String, optional): If supplied, the method only returns the element if it matches.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The next sibling.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.current-step').next().addClass('next-step');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-prev"></a>.prev
|
||||
|
||||
**Description**
|
||||
Get the immediately preceding sibling of each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String, optional): If supplied, the method only returns the element if it matches.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The previous sibling.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.step-2').prev();
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-nextSibling"></a>.nextSibling
|
||||
|
||||
**Description**
|
||||
Get the immediately following DOM sibling element. Unlike `next()`, this focuses strictly on the DOM structure `nextElementSibling`.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The next sibling element.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const nextEl = $('.current').nextSibling();
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-prevSibling"></a>.prevSibling
|
||||
|
||||
**Description**
|
||||
Get the immediately preceding DOM sibling element. Unlike `prev()`, this focuses strictly on the DOM structure `previousElementSibling`.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The previous sibling element.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const prevEl = $('.current').prevSibling();
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-sibling"></a>.sibling
|
||||
|
||||
**Description**
|
||||
Get a single, specific sibling element. Unlike `siblings()` which returns all siblings, this method returns a specific one (e.g. the immediate next or matching a specific condition depending on implementation).
|
||||
*(Note: Based on typical usage, this often acts like a directed `next` or `prev` or finds a specific single neighbor).*
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String, optional): A selector to identify the specific sibling.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The specific sibling element.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Get a specific sibling with class 'active'
|
||||
$('.item').sibling('.active');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-nextAll"></a>.nextAll
|
||||
|
||||
**Description**
|
||||
Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String, optional): A string containing a selector expression to match elements against.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): All following sibling elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Select all elements coming after the active one
|
||||
$('.active').nextAll();
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-prevAll"></a>.prevAll
|
||||
|
||||
**Description**
|
||||
Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String, optional): A string containing a selector expression to match elements against.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): All preceding sibling elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Select all elements coming before the active one
|
||||
$('.active').prevAll();
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-siblings"></a>.siblings
|
||||
|
||||
**Description**
|
||||
Get the siblings of each element in the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String, optional): If supplied, the siblings are filtered.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The sibling elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Find all siblings that are not active
|
||||
$('.active').siblings(':not(.active)');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-nextUntil"></a>.nextUntil
|
||||
|
||||
**Description**
|
||||
Get all following siblings of each element up to but not including the element matched by the selector.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String): The selector that indicates where to stop matching following sibling elements.
|
||||
* `filter` (String, optional): A selector to filter the returned siblings.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The following siblings up to the stop selector.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Select all elements between header and footer
|
||||
$('#header').nextUntil('#footer');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-prevUntil"></a>.prevUntil
|
||||
|
||||
**Description**
|
||||
Get all preceding siblings of each element up to but not including the element matched by the selector.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String): The selector that indicates where to stop matching preceding sibling elements.
|
||||
* `filter` (String, optional): A selector to filter the returned siblings.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The preceding siblings up to the stop selector.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Select all items backwards until the start marker
|
||||
$('.end-marker').prevUntil('.start-marker');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-eq"></a>.eq
|
||||
|
||||
**Description**
|
||||
Reduce the set of matched elements to the one at the specified index.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `index` (Number): An integer indicating the 0-based position of the element.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The element at the index.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Select the 3rd element (index 2)
|
||||
$('li').eq(2).css('color', 'red');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-first"></a>.first
|
||||
|
||||
**Description**
|
||||
Reduce the set of matched elements to the first in the set.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The first element.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('p').first();
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-last"></a>.last
|
||||
|
||||
**Description**
|
||||
Reduce the set of matched elements to the final one in the set.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* None.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The last element.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('p').last();
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-filterBy"></a>.filterBy
|
||||
|
||||
**Description**
|
||||
Reduce the set of matched elements to those that match the selector.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String): The selector to match.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The filtered subset.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('div').filterBy('.highlight');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-not"></a>.not
|
||||
|
||||
**Description**
|
||||
Remove elements from the set of matched elements.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `selector` (String): A string containing a selector expression to match elements against.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): The subset without the matched elements.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('input').not('[type="submit"]');
|
||||
|
||||
```
|
||||
114
wiki/EFFECTS-Fade.md
Normal file
114
wiki/EFFECTS-Fade.md
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
* [`fadeIn` / `show`](#usage-fadeIn) | [`fadeOut` / `hide`](#usage-fadeOut) | [`fadeToggle`](#usage-fadeToggle)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-fadeIn"></a>.fadeIn (Alias: .show)
|
||||
|
||||
**Description**
|
||||
Display the matched elements by fading them to opaque (opacity: 1).
|
||||
|
||||
**Parameters**
|
||||
* `options` (Object, optional): Animation options.
|
||||
* `duration` (Number): Animation runtime in milliseconds (default is 300).
|
||||
* `displayType` (String): The CSS display value to set before fading (default is 'block').
|
||||
* `easing` (String): CSS transition timing function (e.g., 'linear', 'ease-in-out').
|
||||
* `bounce` (Boolean): If set to true, applies a dynamic cubic-bezier curve and scale transformation for a spring-like effect.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
// 1. Shorthand syntax (Number)
|
||||
$('div.hidden').fadeIn(400);
|
||||
|
||||
// 2. Custom display type and easing
|
||||
$('.modal').show({
|
||||
duration: 600,
|
||||
displayType: 'flex',
|
||||
easing: 'linear'
|
||||
});
|
||||
|
||||
// 3. The new snappy bounce effect
|
||||
$('.alert').fadeIn({
|
||||
duration: 500,
|
||||
bounce: true
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-fadeOut"></a>.fadeOut (Alias: .hide)
|
||||
|
||||
**Description**
|
||||
Hide the matched elements by fading them to transparent (opacity: 0). Once complete, the display property is often set to 'none'.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `options` (Object, optional): Animation options.
|
||||
* `duration` (Number, optional): Duration in milliseconds.
|
||||
* `easing` (String): CSS transition timing function (e.g., 'linear', 'ease-in-out').
|
||||
* `bounce` (Boolean): If set to true, applies a spring-like 'back-in' animation before disappearing.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.alert-box').fadeOut({ duration: 300 });
|
||||
|
||||
// 1. Shorthand syntax (Number)
|
||||
$('.alert-box').fadeOut(300);
|
||||
|
||||
// Use the alias with custom duration
|
||||
$('.modal').hide({ duration: 500 });
|
||||
|
||||
// 2. Hide with custom easing
|
||||
$('.modal').hide({
|
||||
duration: 500,
|
||||
easing: 'ease-out'
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-fadeToggle"></a>.fadeToggle (Alias: .toggle)
|
||||
|
||||
**Description**
|
||||
Display or hide the matched elements by intelligently animating their opacity based on their current computed display state.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `options` (Object, optional): Animation options.
|
||||
* `duration` (Object | Number, optional): Animation options object, or a number representing the duration in milliseconds. Passes these options to either `fadeIn` or `fadeOut`.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
// Toggle visibility on click
|
||||
$('#toggle-btn').click(() => {
|
||||
$('.content').fadeToggle({ duration: 200 });
|
||||
});
|
||||
|
||||
// 1. Simple toggle with shorthand syntax
|
||||
$('#toggle-btn').on('click', () => {
|
||||
$('.content').fadeToggle(200);
|
||||
});
|
||||
|
||||
// 2. Toggle with modern bounce effect
|
||||
$('#menu-btn').on('click', () => {
|
||||
$('.dropdown').toggle({
|
||||
duration: 400,
|
||||
bounce: true
|
||||
});
|
||||
});
|
||||
|
||||
```
|
||||
101
wiki/EFFECTS-Slide-(horizontal).md
Normal file
101
wiki/EFFECTS-Slide-(horizontal).md
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
* [`slideIn`](#usage-slideIn) | [`slideOut`](#usage-slideOut) | [`slideToggle`](#usage-slideToggle)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-slideIn"></a>.slideIn
|
||||
|
||||
**Description**
|
||||
Displays the matched elements with a sliding motion (usually from left to right or by expanding width).
|
||||
|
||||
**Parameters**
|
||||
* `options` (Object, optional): Animation options.
|
||||
* `duration` (Number): Duration in milliseconds (default is 300).
|
||||
* `direction` (String): 'left' or 'right' (default is 'left').
|
||||
* `easing` (String): CSS transition timing function (default is 'cubic-bezier(0.4, 0.0, 0.2, 1)').
|
||||
* `bounce` (Boolean): If set to true, applies a dynamic spring-like curve that slightly overshoots the target before resting.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('#sidebar').slideIn({ duration: 400, direction: 'left' });
|
||||
|
||||
// 1. Shorthand syntax (Number)
|
||||
$('#sidebar').slideIn(400);
|
||||
|
||||
// 2. Slide in from the right with custom easing
|
||||
$('#sidebar').slideIn({
|
||||
duration: 500,
|
||||
direction: 'right',
|
||||
easing: 'linear'
|
||||
});
|
||||
|
||||
// 3. The new snappy bounce effect
|
||||
$('#drawer').slideIn({
|
||||
duration: 600,
|
||||
bounce: true
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-slideOut"></a>.slideOut
|
||||
|
||||
**Description**
|
||||
Hides the matched elements with a sliding motion (usually collapsing width or moving off-canvas).
|
||||
|
||||
**Parameters**
|
||||
* `options` (Object, optional): Animation options.
|
||||
* `duration` (Number): Duration in milliseconds (default is 300).
|
||||
* `direction` (String): 'left' or 'right' (default is 'left').
|
||||
* `easing` (String): CSS transition timing function.
|
||||
* `bounce` (Boolean): If set to true, the element slightly pulls back before shooting off-canvas.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('#sidebar').slideOut({ duration: 400 });
|
||||
|
||||
// 1. Shorthand syntax (Number)
|
||||
$('#sidebar').slideOut(400);
|
||||
|
||||
// 2. Slide out to the right with bounce effect
|
||||
$('#sidebar').slideOut({
|
||||
duration: 500,
|
||||
direction: 'right',
|
||||
bounce: true
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-slideToggle"></a>.slideToggle
|
||||
|
||||
**Description**
|
||||
Display or hide the matched elements with a horizontal sliding motion.
|
||||
|
||||
**Parameters**
|
||||
* `options` (Object | Number, optional): Animation options object, or a number representing the duration in milliseconds. Passes these options to either `slideIn` or `slideOut`.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.drawer').slideToggle();
|
||||
|
||||
// Toggle an off-canvas menu with a bouncy spring effect
|
||||
$('.menu-toggle-btn').on('click', () => {
|
||||
$('.drawer').slideToggle({
|
||||
duration: 400,
|
||||
bounce: true
|
||||
});
|
||||
});
|
||||
```
|
||||
91
wiki/EFFECTS-Slide-(vertical).md
Normal file
91
wiki/EFFECTS-Slide-(vertical).md
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
|
||||
* [`slideDown`](#usage-slideDown) | [`slideUp`](#usage-slideUp) | [`slideToggleBox`](#usage-slideToggleBox)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-slideDown"></a>.slideDown
|
||||
|
||||
**Description**
|
||||
Display the matched elements with a sliding motion (expanding height downwards).
|
||||
|
||||
**Parameters**
|
||||
* `options` (Object, optional): Animation options.
|
||||
* `duration` (Number): Duration in milliseconds (default is 300).
|
||||
* `displayType` (String): The CSS display value to set before sliding (default is 'block').
|
||||
* `easing` (String): CSS transition timing function (e.g., 'linear', 'ease-in-out').
|
||||
* `bounce` (Boolean): If set to true, applies a dynamic cubic-bezier curve that slightly overshoots the target height for a spring effect.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
// Reveal a dropdown menu
|
||||
$('.dropdown-menu').slideDown({ duration: 200 });
|
||||
|
||||
// 1. Shorthand syntax (Number)
|
||||
$('.dropdown-content').slideDown(400);
|
||||
|
||||
// 2. Custom display type and bounce
|
||||
$('.accordion-panel').slideDown({
|
||||
duration: 500,
|
||||
displayType: 'flex',
|
||||
bounce: true
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-slideUp"></a>.slideUp
|
||||
|
||||
**Description**
|
||||
Hide the matched elements with a sliding motion (collapsing height upwards).
|
||||
|
||||
**Parameters**
|
||||
* `options` (Object, optional): Animation options.
|
||||
* `duration` (Number): Duration in milliseconds (default is 300).
|
||||
* `easing` (String): CSS transition timing function.
|
||||
* `bounce` (Boolean): If set to true, the element slightly expands before collapsing.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$('.dropdown-menu').slideUp({ duration: 200 });
|
||||
|
||||
// 1. Shorthand syntax (Number)
|
||||
$('.alert-box').slideUp(300);
|
||||
|
||||
// 2. Hide with custom easing
|
||||
$('.modal-body').slideUp({
|
||||
duration: 500,
|
||||
easing: 'ease-out'
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-slideToggleBox"></a>.slideToggleBox
|
||||
|
||||
**Description**
|
||||
Display or hide the matched elements with a vertical sliding motion. Ideal for accordions or collapsible boxes.
|
||||
|
||||
**Parameters**
|
||||
* `options` (Object | Number, optional): Animation options object, or a number representing the duration in milliseconds. Passes these options to either `slideDown` or `slideUp`
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$('.accordion-header').click(function() {
|
||||
// Slide toggle the next element (the body)
|
||||
$(this).next().slideToggleBox({ duration: 300 });
|
||||
});
|
||||
|
||||
// Toggle an accordion panel with shorthand syntax
|
||||
$('.accordion-header').on('click', () => {
|
||||
$(this).next('.accordion-content').slideToggleBox(400);
|
||||
});
|
||||
```
|
||||
130
wiki/EVENTS-Bindings.md
Normal file
130
wiki/EVENTS-Bindings.md
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
* [`on`](#usage-on) | [`off`](#usage-off) | [`once`](#usage-once) | [`trigger`](#usage-trigger)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-on"></a>.on
|
||||
|
||||
**Description**
|
||||
Attach an event handler function for one or more events to the selected elements. It fully supports event delegation (listening to dynamically added children) and passing custom data to the event object.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `events` (String): One or more space-separated event types (e.g., "click" or "mouseenter mouseleave").
|
||||
* `selector` (String, optional): A selector string to filter the descendants of the selected elements that trigger the event. If omitted, the event is always triggered when it reaches the selected element.
|
||||
* `data` (Any, optional): Custom data to be passed to the handler in `event.data` when an event is triggered.
|
||||
* `handler` (Function): A function to execute when the event is triggered.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Examples**
|
||||
|
||||
```javascript
|
||||
// 1. Basic binding
|
||||
$('button').on('click', function(e) {
|
||||
console.log('Button clicked!');
|
||||
});
|
||||
|
||||
// 2. Event Delegation (Highly performant for dynamic content)
|
||||
// Listens on the <table>, but only fires if a <tr> was clicked
|
||||
$('table.data-grid').on('click', 'tr', function(e) {
|
||||
console.log('Row clicked:', this);
|
||||
});
|
||||
|
||||
// 3. Passing custom data
|
||||
function greet(event) {
|
||||
alert("Hello " + event.data.name);
|
||||
}
|
||||
$('button.user-btn').on('click', { name: "Karl" }, greet);
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-off"></a>.off
|
||||
|
||||
**Description**
|
||||
Remove an event handler. You can remove all handlers for an event, or be highly specific by passing the exact selector and/or handler function that was used during binding.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `events` (String): One or more space-separated event types.
|
||||
* `selector` (String, optional): A selector which should exactly match the one originally passed to `.on()`.
|
||||
* `handler` (Function, optional): The specific handler function previously attached for the event(s).
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Examples**
|
||||
|
||||
```javascript
|
||||
// 1. Remove ALL click handlers from buttons
|
||||
$('button').off('click');
|
||||
|
||||
// 2. Remove a specific handler
|
||||
function handleClick() { console.log('Clicked'); }
|
||||
$('button').on('click', handleClick);
|
||||
$('button').off('click', handleClick);
|
||||
|
||||
// 3. Remove a delegated event
|
||||
$('table').off('click', 'tr');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-once"></a>.once
|
||||
|
||||
**Description**
|
||||
Attach a handler to an event for the elements. The handler is executed **at most once** per element per event type, and then automatically unbinds itself. It supports the exact same parameters (delegation and data) as `.on()`.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `events` (String): One or more space-separated event types.
|
||||
* `selector` (String, optional): A selector string for event delegation.
|
||||
* `data` (Any, optional): Custom data passed to `event.data`.
|
||||
* `handler` (Function): A function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Examples**
|
||||
|
||||
```javascript
|
||||
// Triggers only the first time the button is clicked
|
||||
$('button.submit').once('click', () => {
|
||||
console.log('Form submitted! Button will ignore further clicks.');
|
||||
});
|
||||
|
||||
// Delegated one-time event
|
||||
$('ul.todo-list').once('click', 'li', function() {
|
||||
$(this).addClass('completed');
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-trigger"></a>.trigger
|
||||
|
||||
**Description**
|
||||
Execute all handlers and behaviors attached to the matched elements for the given event type. You can also pass custom data to the event (accessible via `event.detail`).
|
||||
|
||||
**Parameters**
|
||||
* `eventName` (String): The name of the event to trigger (e.g., 'click' or a custom event like 'user:login').
|
||||
* `data` (Any, optional): Extra data passed to the custom event object.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Examples**
|
||||
```javascript
|
||||
// Trigger a native click
|
||||
$('#btn').trigger('click');
|
||||
|
||||
// Trigger a custom event with data
|
||||
$('.user-card').on('user:update', (e) => console.log(e.detail.id));
|
||||
$('.user-card').trigger('user:update', { id: 42 });
|
||||
```
|
||||
122
wiki/EVENTS-Form.md
Normal file
122
wiki/EVENTS-Form.md
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
* [`submit`](#usage-submit) | [`change`](#usage-change) | [`input`](#usage-input) | [`focus`](#usage-focus) | [`blur`](#usage-blur)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-submit"></a>.submit
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): A function to execute when the event is triggered. If omitted, the event is triggered manually.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```js
|
||||
$('#myForm').submit(function(e) {
|
||||
e.preventDefault();
|
||||
// Validate form...
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-change"></a>.change
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "change" JavaScript event (fires when value is committed), or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```js
|
||||
$('select').change(function() {
|
||||
console.log('New selection: ' + $(this).val());
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-input"></a>.input
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "input" JavaScript event (fires immediately when value changes), or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```js
|
||||
$('#search').input(function() {
|
||||
console.log('Typing: ' + $(this).val());
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-focus"></a>.focus
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "focus" JavaScript event, or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```js
|
||||
$('input').focus(function() {
|
||||
$(this).addClass('focused');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-blur"></a>.blur
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "blur" JavaScript event (lost focus), or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```js
|
||||
$('input').blur(function() {
|
||||
$(this).removeClass('focused');
|
||||
});
|
||||
|
||||
```
|
||||
97
wiki/EVENTS-Keyboard.md
Normal file
97
wiki/EVENTS-Keyboard.md
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
* [`keydown`](#usage-keydown) | [`keyup`](#usage-keyup) | [`keypress`](#usage-keypress) | [`pressedKey`](#usage-pressedKey)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-keydown"></a>.keydown
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "keydown" event, or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$(document).keydown(function(e) {
|
||||
console.log('Key pressed:', e.key);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-keyup"></a>.keyup
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "keyup" event, or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('#input').keyup(function() {
|
||||
console.log('Key released');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-keypress"></a>.keypress
|
||||
|
||||
> **⚠️ DEPRECATED:** This event is officially deprecated in modern web standards. Please use [`.keydown()`](#usage-keydown) instead.
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "keypress" event, or trigger it.
|
||||
|
||||
**Parameters**
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$(document).keypress(function(e) {
|
||||
// Logic here
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-pressedkey"></a>.pressedkey
|
||||
|
||||
**Description**
|
||||
A specialized helper method. It attaches a listener that only executes the handler if a specific key matches.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `key` (String): The key value to check for (e.g., 'Enter', 'Escape').
|
||||
* `handler` (Function): Function to execute if the key matches.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('#search').pressedkey('Enter', function() {
|
||||
console.log('Enter key was pressed, submitting search...');
|
||||
});
|
||||
|
||||
```
|
||||
25
wiki/EVENTS-Lifecycle.md
Normal file
25
wiki/EVENTS-Lifecycle.md
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
* [`ready`](#usage-ready)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-ready"></a>.ready
|
||||
|
||||
**Description**
|
||||
Specify a function to execute when the DOM is fully loaded.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function): A function to execute after the DOM is ready.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$(document).ready(function() {
|
||||
console.log('DOM is ready!');
|
||||
});
|
||||
|
||||
```
|
||||
234
wiki/EVENTS-Mouse.md
Normal file
234
wiki/EVENTS-Mouse.md
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
* [`click`](#usage-click) | [`dblclick`](#usage-dblclick)
|
||||
* [`mouseenter`](#usage-mouseenter) | [`mouseleave`](#usage-mouseleave) | [`mousemove`](#usage-mousemove) | [`mousedown`](#usage-mousedown) | [`mouseup`](#usage-mouseup) | [`mouseover`](#usage-mouseover) | [`mouseout`](#usage-mouseout) | [`hover`](#usage-hover)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-click"></a>.click
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "click" event, or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('#btn').click(function() {
|
||||
alert('Clicked!');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-dblclick"></a>.dblclick
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "dblclick" event, or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.item').dblclick(function() {
|
||||
$(this).toggleClass('expanded');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-mousedown"></a>.mousedown
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "mousedown" event (mouse button is pressed), or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.btn').mousedown(function() {
|
||||
$(this).addClass('active-state');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-mouseup"></a>.mouseup
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "mouseup" event (mouse button is released), or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.btn').mouseup(function() {
|
||||
$(this).removeClass('active-state');
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-mouseenter"></a>.mouseenter
|
||||
|
||||
**Description**
|
||||
Bind an event handler to be fired when the mouse enters an element. This event does not bubble (unlike `mouseover`).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.card').mouseenter(function() {
|
||||
$(this).addClass('hover-effect');
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-mouseleave"></a>.mouseleave
|
||||
|
||||
**Description**
|
||||
Bind an event handler to be fired when the mouse leaves an element. This event does not bubble (unlike `mouseout`).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.card').mouseleave(function() {
|
||||
$(this).removeClass('hover-effect');
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-mousemove"></a>.mousemove
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "mousemove" event, or trigger it.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$(document).mousemove(function(e) {
|
||||
console.log('Coords: ', e.pageX, e.pageY);
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-mouseover"></a>.mouseover
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "mouseover" event. This event bubbles (triggers if mouse enters a child element).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.container').mouseover(function() {
|
||||
// Handle bubbling mouseover
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-mouseout"></a>.mouseout
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "mouseout" event. This event bubbles.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.container').mouseout(function() {
|
||||
// Handle bubbling mouseout
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-hover"></a>.hover
|
||||
|
||||
**Description**
|
||||
Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. This is a convenient shorthand for chaining `.mouseenter()` and `.mouseleave()`.
|
||||
|
||||
**Parameters**
|
||||
* `handlerIn` (Function): A function to execute when the mouse pointer enters the element.
|
||||
* `handlerOut` (Function): A function to execute when the mouse pointer leaves the element.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance for chaining.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$('.card').hover(
|
||||
function(e) { $(this).addClass('shadow-lg'); }, // On Enter
|
||||
function(e) { $(this).removeClass('shadow-lg'); } // On Leave
|
||||
);
|
||||
```
|
||||
185
wiki/EVENTS-Touch.md
Normal file
185
wiki/EVENTS-Touch.md
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
* [`touchstart`](#usage-touchstart) | [`touchend`](#usage-touchend) | [`touchmove`](#usage-touchmove) | [`touchcancel`](#usage-touchcancel)
|
||||
* [`swipeLeft`](#usage-swipeLeft) | [`swipeRight`](#usage-swipeRight) | [`swipeUp`](#usage-swipeUp) | [`swipeDown`](#usage-swipeDown)
|
||||
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-touchstart"></a>.touchstart
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "touchstart" event (finger is placed on a touch surface).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.swipe-area').touchstart(function(e) {
|
||||
console.log('Touch started');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-touchend"></a>.touchend
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "touchend" event (finger is removed from a touch surface).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.swipe-area').touchend(function(e) {
|
||||
console.log('Touch ended');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-touchmove"></a>.touchmove
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "touchmove" event (finger is dragged across the surface).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.swipe-area').touchmove(function(e) {
|
||||
// prevent scrolling while swiping
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-touchcancel"></a>.touchcancel
|
||||
|
||||
**Description**
|
||||
Bind an event handler to the "touchcancel" event (system cancels the touch event).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function, optional): Function to execute.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.swipe-area').touchcancel(function() {
|
||||
console.log('Touch cancelled');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-swipeLeft"></a>.swipeLeft
|
||||
|
||||
**Description**
|
||||
Binds an event handler to be executed when the user swipes their finger to the left across the element. The swipe must cover a minimum distance of 50px.
|
||||
|
||||
**Parameters**
|
||||
* `handler` (Function): Function to execute on left swipe.
|
||||
|
||||
**Returns**
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
```javascript
|
||||
$('.carousel').swipeLeft(() => nextSlide());
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-swipeRight"></a>.swipeRight
|
||||
**Description**
|
||||
Binds an event handler to be executed when the user swipes their finger to the right across the element.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function): Function to execute on right swipe.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.carousel').swipeRight(() => prevSlide());
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-swipeUp"></a>.swipeUp
|
||||
|
||||
**Description**
|
||||
Binds an event handler to be executed when the user swipes their finger upwards across the element.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function): Function to execute on upward swipe.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.carousel').swipeUp(() => {
|
||||
CloseWindow()
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-swipeDown"></a>.swipeDown
|
||||
|
||||
**Description**
|
||||
Binds an event handler to be executed when the user swipes their finger downwards across the element.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `handler` (Function): Function to execute on downward swipe.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (jBase): Current instance.
|
||||
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$('.carousel').swipeDown(() => {
|
||||
Reload();
|
||||
});
|
||||
```
|
||||
159
wiki/HTTP-Requests.md
Normal file
159
wiki/HTTP-Requests.md
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
* [`get`](#usage-http-get) | [`getText`](#usage-http-getText) | [`post`](#usage-http-post) | [`upload`](#usage-http-upload)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-http-get"></a>.get
|
||||
|
||||
**Description**
|
||||
Performs an asynchronous HTTP GET request. This method assumes the response is JSON and will automatically parse it. Includes an automatic timeout of 5000ms to avoid hanging requests.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `url` (String): A string containing the URL to which the request is sent.
|
||||
* `option` (RequestInit, optional): An optional RequestInit object to customize the fetch request (e.g., custom headers, mode). The method is strictly enforced as 'GET'.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Promise): A Promise that resolves with the parsed JSON data or rejects with an error.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$.http.get('[https://api.example.com/users](https://api.example.com/users)')
|
||||
.then(data => {
|
||||
console.log('Users loaded:', data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error loading users:', err);
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-http-getText"></a>.getText
|
||||
|
||||
**Description**
|
||||
Performs an asynchronous HTTP GET request. This method expects a raw text or HTML response and does not attempt to parse it as JSON. Ideal for loading HTML templates (Server-Side Rendering Partials) or config files. Includes an automatic timeout of 5000ms.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `url` (String): A string containing the URL to which the request is sent.
|
||||
* `option` (RequestInit, optional): An optional RequestInit object to customize the fetch request. The method is strictly enforced as 'GET'.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Promise): A Promise that resolves with the raw string data.
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
$.http.getText('/partials/footer.html')
|
||||
.then(html => {
|
||||
$('#footer-container').html(html);
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-http-post"></a>.post
|
||||
|
||||
**Description**
|
||||
Performs an asynchronous HTTP POST request to submit data to a server. The body is automatically stringified to JSON, and the `Content-Type` is set to `application/json`. Includes an automatic timeout of 5000ms.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `url` (String): A string containing the URL to which the request is sent.
|
||||
* `body` (Any, optional): The data to send to the server (automatically JSON serialized). Defaults to `{}`.
|
||||
* `option` (RequestInit, optional): An optional RequestInit object to customize the fetch request. The method is strictly enforced as 'POST'.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Promise): A Promise that resolves with the server's response (parsed as JSON).
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const payload = {
|
||||
username: 'jdoe',
|
||||
email: 'john@example.com'
|
||||
};
|
||||
|
||||
$.http.post('/api/register', payload)
|
||||
.then(response => {
|
||||
if (response.success) {
|
||||
console.log('User registered!');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Registration failed:', err);
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-http-upload"></a>.upload
|
||||
|
||||
**Description**
|
||||
Performs a `multipart/form-data` upload with precise progress tracking. It uses `XMLHttpRequest` under the hood because the native `fetch` API lacks upload progress support.
|
||||
|
||||
It seamlessly accepts either a single `File` object (which is automatically wrapped for you) or a pre-populated `FormData` object (ideal for multi-file uploads and adding extra fields).
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `url` (String): The target endpoint.
|
||||
* `data` (FormData | File): The data to upload. If a single `File` is provided, jBase automatically wraps it in a `FormData` object under the key `'file'`.
|
||||
* `onProgress` (Function, optional): A callback function that triggers repeatedly during the upload.
|
||||
* `percentage` (Number): The rounded progress percentage (0-100).
|
||||
* `loaded` (Number): The amount of bytes loaded so far.
|
||||
* `total` (Number): The total amount of bytes to upload.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Promise<any>): A Promise resolving to the parsed JSON response (or plain text if parsing fails).
|
||||
|
||||
**Examples**
|
||||
|
||||
**1. Single File Upload with a UI Progress Bar**
|
||||
```javascript
|
||||
// Grab a file from an input field
|
||||
const file = $('#file-input').prop('files')[0];
|
||||
|
||||
if (file) {
|
||||
try {
|
||||
// Upload with real-time progress tracking
|
||||
const response = await $.http.upload('/api/media/upload', file, (pct, loaded, total) => {
|
||||
console.log(`Uploading: ${pct}%`);
|
||||
|
||||
// Update a custom progress bar using jBase CSS chaining
|
||||
$('.upload-progress-bar').css('width', pct + '%');
|
||||
});
|
||||
|
||||
console.log('Upload successful!', response);
|
||||
} catch (error) {
|
||||
console.error('Upload failed:', error.message);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**2. Multi-File Upload using FormData**
|
||||
```javascript
|
||||
const fileInput = $('#gallery-upload')[0];
|
||||
|
||||
if (fileInput && fileInput.files.length > 0) {
|
||||
const formData = new FormData();
|
||||
|
||||
// Append all selected files to the FormData object.
|
||||
// The '[]' in the key tells the server to expect an array of files.
|
||||
$.each(fileInput.files, (index, file) => {
|
||||
formData.append('images[]', file);
|
||||
});
|
||||
|
||||
// You can also append regular text fields!
|
||||
formData.append('albumId', '12345');
|
||||
|
||||
// Upload the entire FormData object
|
||||
await $.http.upload('/api/gallery', formData, (percentage) => {
|
||||
console.log(`Total Upload Progress: ${percentage}%`);
|
||||
});
|
||||
}
|
||||
```
|
||||
142
wiki/Home.md
Normal file
142
wiki/Home.md
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
# Welcome to the jBase Documentation
|
||||
|
||||
![Package Version][package-version-badge]
|
||||
![Build][build-badge]
|
||||
![Size][size-badge]
|
||||
![License][license-badge]
|
||||
|
||||
![SSR Ready][ssr-ready-badge]
|
||||
![Browser Ready][browser-ready-badge]
|
||||
![Exports][exports-badge]
|
||||
|
||||
![NPM][available-badge-npm]
|
||||
![GITHUB][available-badge-github]
|
||||
![jsDelivr][cdn-badge-jsdelivr]
|
||||
![Statically][cdn-badge-statically]
|
||||
|
||||
**jBase** is a modern, modular, and lightweight JavaScript framework designed for high-performance DOM manipulation, event handling, and data management. It serves as a robust alternative to legacy libraries, built with modern ES6+ standards.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
New to jBase? Start here to get up and running quickly.
|
||||
|
||||
* **[Installation & Setup](Installation)**
|
||||
* Learn how to include jBase via Script Tag or NPM/Bundlers.
|
||||
* **[Quick Start Guide](Quick-Start)**
|
||||
* Basic usage examples to get you started in minutes.
|
||||
|
||||
---
|
||||
|
||||
## 📚 API Reference
|
||||
|
||||
Explore the comprehensive documentation for all jBase modules.
|
||||
|
||||
### 🌲 DOM & UI
|
||||
Manage your interface with powerful traversal and manipulation tools.
|
||||
|
||||
* **DOM Traversal**
|
||||
* `find`, `closest`, `parent`, `children`, `siblings`, `next`, `prev`...
|
||||
* **DOM Manipulation**
|
||||
* `append`, `prepend`, `remove`, `html`, `text`, `wrap`, `replaceWith`...
|
||||
* **Attributes & States**
|
||||
* `attr`, `val`, `data`, `checked`, `disabled`, `selected`...
|
||||
* **CSS & Styling**
|
||||
* `css`, `addClass`, `removeClass`, `toggleClass`, `hasClass`...
|
||||
* and many more...
|
||||
|
||||
### ⚡ Interaction & Effects
|
||||
Bring your application to life with events and animations.
|
||||
|
||||
* **Event Handling**
|
||||
* **Bindings:** `on`, `off`, `once`
|
||||
* **Mouse/Touch:** `click`, `touchmove`, `mousemove`...
|
||||
* **Keyboard:** `keydown`, `pressedkey`...
|
||||
* **Forms:** `submit`, `change`, `input`...
|
||||
* **Effects & Animations**
|
||||
* `fadeIn`, `fadeOut`, `slideDown`, `slideUp`, `slideToggle`...
|
||||
* and many more...
|
||||
|
||||
### 🌐 Network
|
||||
Communicate with servers easily.
|
||||
|
||||
* **HTTP Client**
|
||||
* `get`, `post`, `getText` (Promise-based AJAX wrappers).
|
||||
|
||||
### 🛠 Data Utilities
|
||||
Advanced helpers for complex data structures (Immutable & Type-Safe).
|
||||
|
||||
* **Array Utilities**
|
||||
* **Manage:** `chunk`, `mergeArray`, `add`
|
||||
* **Immutable Remove:** `remove.at`, `remove.byMatch`...
|
||||
* **Search:** `find.at`, `find.all`, `find.first`...
|
||||
* **Object Utilities**
|
||||
* **Manage:** `mergeObjects`, `pick`, `omit`
|
||||
* **Deep Access:** `get` (dot-notation), `set`
|
||||
* **Search:** `find.key`, `find.value`, `find.first`...
|
||||
* **General Utilities**
|
||||
* `$.each`, `$.throttle`, `$.debounce`
|
||||
|
||||
---
|
||||
|
||||
## 🖥️ Server-Side Rendering (SSR) & Node.js
|
||||
|
||||
jBase is **isomorphic**. You can use the exact same code on the client and the server.
|
||||
To use DOM manipulation in Node.js, simply bind jBase to a `jsdom` window instance.
|
||||
|
||||
### 1. Install JSDOM (Optional Peer Dependency)
|
||||
|
||||
```bash
|
||||
npm install jsdom
|
||||
```
|
||||
|
||||
### 2. Bind to a Virtual Window
|
||||
|
||||
Use the `bind` factory to create a jBase instance scoped to a specific request or document.
|
||||
|
||||
```javascript
|
||||
import { JSDOM } from 'jsdom';
|
||||
import { bind } from '@k37z3r/jbase'; // Adjust to your package name
|
||||
|
||||
// 1. Create a virtual DOM environment
|
||||
const dom = new JSDOM('<!DOCTYPE html><div id="app"></div>');
|
||||
const window = dom.window;
|
||||
|
||||
// 2. Create a scoped instance of jBase
|
||||
const $ = bind(window);
|
||||
|
||||
// 3. Manipulate the DOM exactly like in the browser
|
||||
$('#app')
|
||||
.addClass('ssr-rendered')
|
||||
.html('<h1>Hello from Node.js!</h1>')
|
||||
.append('<p>This HTML was generated on the server.</p>');
|
||||
|
||||
// 4. Output the final HTML string
|
||||
console.log(dom.serialize());
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> Browser-only features like animations (`fadeIn`, `slideUp`) or Event Bindings (`click`) are **safely ignored** in Node.js environments to prevent crashes and save resources.
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Contributing & Support
|
||||
|
||||
* Found a bug? [Open an Issue](../issues)
|
||||
* Back to Repository: [jBase Repo](../)
|
||||
|
||||
---
|
||||
*© 2026 Sven Minio. Licensed under GPL-3.0.*
|
||||
|
||||
[available-badge-npm]: https://img.shields.io/badge/available%20on-npm-CB3837?style=flat-square&logo=npm
|
||||
[available-badge-github]: https://img.shields.io/badge/available%20on-GitHub-181717CB3837?style=flat-square&logo=github
|
||||
[cdn-badge-jsdelivr]: https://img.shields.io/badge/CDN-jsDelivr-E84D3D?style=flat-square&logo=jsdelivr
|
||||
[cdn-badge-statically]: https://img.shields.io/badge/CDN-Statically-ea6545?style=flat-square&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYuNjc1bW0iIGhlaWdodD0iMTYuNjc1bW0iIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbC1ydWxlPSJldmVub2RkIiBpbWFnZS1yZW5kZXJpbmc9Im9wdGltaXplUXVhbGl0eSIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHZpZXdCb3g9IjAgMCA0NDUuNjcgNDQ1LjMzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjExMC42NyIgeDI9IjMzNC4zMiIgeTE9IjQxNC44IiB5Mj0iMzAuMTkiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwxNTU1LjcpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI2Q3MjQzMCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZkYTI1OSIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjMzNDI3IC0xNTU2KSI+PHBhdGggZD0ibTMwIDE2NjYuN2M2Mi0xMDcgMTk4LTE0MyAzMDQtODEgMTA3IDYyIDE0MyAxOTggODEgMzA0LTYyIDEwNy0xOTggMTQzLTMwNCA4MS0xMDctNjItMTQzLTE5OC04MS0zMDR6IiBmaWxsPSJ1cmwoI2EpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMS4yMTk0IC4xMTIzNiAtLjExMjkyIDEuMjI1NSAtMjIuMjUxIDE0NzguNCkiIHN0cm9rZT0iI2ZlZmVmZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyMy4wNDEiPjxnIHN0cm9rZT0iI2ZlZmVmZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyMy4wNDEiPjxwYXRoIGQ9Ik0yODMgMjI2bC00Ny0xOSA3NC0xMDVMMTU2IDIyMmw1MiAxOC03MyAxMDZ6IiBmaWxsPSIjZmVmZWZlIiBzdHJva2U9IiNmZWZlZmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMjMuMDQxIi8+PC9nPjwvZz48L2c+PC9zdmc+
|
||||
[package-version-badge]: https://img.shields.io/github/package-json/v/k37z3r/jBase-2/main?style=flat-square&label=version
|
||||
[ssr-ready-badge]: https://img.shields.io/badge/SSR-Ready-brightgreen?style=flat-square
|
||||
[browser-ready-badge]: https://img.shields.io/badge/Browser-Ready-4CAF50?style=flat-square
|
||||
[exports-badge]: https://img.shields.io/badge/exports-.js%20%7C%20.mjs%20%7C%20.cjs%20%7C%20.d.ts-007ec6?style=flat-square
|
||||
[license-badge]: https://img.shields.io/badge/license-GPL--3.0-green.svg?style=flat-square
|
||||
[size-badge]: https://img.shields.io/badge/size-lightweight-orange.svg?style=flat-square
|
||||
[build-badge]: https://img.shields.io/badge/build-passing-brightgreen.svg?style=flat-square
|
||||
70
wiki/Installation.md
Normal file
70
wiki/Installation.md
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
## 1. Browser (Legacy / Static)
|
||||
Download the [jbase.min.js](/k37z3r/jBase-2/releases/latest/download/jbase.min.js) file, upload it to your server, and include it in your HTML.
|
||||
|
||||
```html
|
||||
<script src="/path/to/js/jbase.min.js"></script>
|
||||
|
||||
<script>
|
||||
// jBase is now available via '$' or 'jBase'
|
||||
$(document).ready(() => {
|
||||
console.log("jBase is ready!");
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
-- OR --
|
||||
|
||||
**via CDN**
|
||||
```html
|
||||
<!-- CDN: jsDelivr @latest Version -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@k37z3r/jbase/dist/jbase.min.js"></script>
|
||||
|
||||
<!-- CDN: Statically @latest version -->
|
||||
<script src="https://cdn.statically.io/npm/@k37z3r/jbase/dist/jbase.min.js"></script>
|
||||
|
||||
<!-- CDN: jsDelivr @2.2.0 Version -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/k37z3r/jBase-2@2.2.0/dist/jbase.min.js"></script>
|
||||
|
||||
<!-- CDN: Statically @2.2.0 Version -->
|
||||
<script src="https://cdn.statically.io/gh/k37z3r/jBase-2@2.2.0/dist/jbase.min.js"></script>
|
||||
|
||||
<!-- Use one of the examples above. You can find further examples in the jsDelivr or Statically documentation -->
|
||||
|
||||
<script>
|
||||
// jBase is now available via '$' or 'jBase'
|
||||
$(document).ready(() => {
|
||||
console.log("jBase is ready!");
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Node.js / Bundlers (Webpack, Vite, Rollup) **coming soon**
|
||||
|
||||
If you are using a modern stack or server-side rendering (SSR), you can import jBase as a module.
|
||||
|
||||
```bash
|
||||
npm install @k37z3r/jbase
|
||||
# or
|
||||
yarn add @k37z3r/jbase
|
||||
|
||||
```
|
||||
|
||||
**Usage in TypeScript/ESM:**
|
||||
|
||||
```typescript
|
||||
import { $ } from 'jbase';
|
||||
|
||||
// Use as usual
|
||||
$('.element').addClass('active');
|
||||
|
||||
```
|
||||
|
||||
**Usage in CommonJS (Node.js require):**
|
||||
|
||||
```javascript
|
||||
const { $ } = require('jbase');
|
||||
$('.element').addClass('active');
|
||||
|
||||
```
|
||||
138
wiki/Quick-Start.md
Normal file
138
wiki/Quick-Start.md
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
# 🚀 Quick Start Guide
|
||||
|
||||
Welcome to jBase! This guide will help you get up and running in minutes. We will cover the basics of selecting elements, handling events, and fetching data.
|
||||
|
||||
---
|
||||
|
||||
## 1. Setup
|
||||
|
||||
Ensure you have included jBase in your project.
|
||||
|
||||
### Option A: CDN / Static
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>jBase App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<script src="path/to/jbase.min.js"></script>
|
||||
<script>
|
||||
// Your code goes here
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
### Option B: Node.js / Bundler
|
||||
|
||||
```javascript
|
||||
import { $ } from 'jbase';
|
||||
// or
|
||||
const { $ } = require('jbase');
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Basic DOM Manipulation
|
||||
|
||||
Selecting elements and changing their content is the most common task. jBase uses the familiar `$(selector)` syntax.
|
||||
|
||||
```javascript
|
||||
// Wait for DOM ready
|
||||
$(document).ready(() => {
|
||||
|
||||
// 1. Select by ID and change text
|
||||
$('#title').text('Hello jBase!');
|
||||
|
||||
// 2. Select by Class and change CSS
|
||||
$('.box').css({
|
||||
'background-color': '#3498db',
|
||||
'color': 'white',
|
||||
'padding': '20px'
|
||||
});
|
||||
|
||||
// 3. Append HTML content
|
||||
$('#app').append('<button id="click-me">Click Me!</button>');
|
||||
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Handling Events
|
||||
|
||||
Interactivity is key. Let's make that button work.
|
||||
|
||||
```javascript
|
||||
// Bind a click event
|
||||
$('#click-me').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
alert('You clicked the button!');
|
||||
});
|
||||
|
||||
// Shorthand method
|
||||
$('#click-me').click(() => {
|
||||
console.log('Clicked via shorthand!');
|
||||
});
|
||||
|
||||
// Hover effect
|
||||
$('.box')
|
||||
.mouseenter(() => console.log('Mouse In'))
|
||||
.mouseleave(() => console.log('Mouse Out'));
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Working with Arrays & Data
|
||||
|
||||
jBase isn't just for the DOM. It includes powerful data utilities.
|
||||
|
||||
```javascript
|
||||
const users = [
|
||||
{ id: 1, name: 'Alice', role: 'admin' },
|
||||
{ id: 2, name: 'Bob', role: 'user' },
|
||||
{ id: 3, name: 'Charlie', role: 'user' }
|
||||
];
|
||||
|
||||
// 1. Find the first admin
|
||||
const admin = $.data.find.first(users, 'admin', 'exact', 'role');
|
||||
console.log(admin); // { id: 1, name: 'Alice', ... }
|
||||
|
||||
// 2. Remove user with ID 2 (Immutable!)
|
||||
const newUsers = $.data.remove.byMatch(users, 2, 'exact', 'id');
|
||||
console.log(newUsers.length); // 2
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Fetching Data (AJAX)
|
||||
|
||||
Loading data from an API is built-in and Promise-based.
|
||||
|
||||
```javascript
|
||||
$.http.get('https://jsonplaceholder.typicode.com/todos/1')
|
||||
.then(data => {
|
||||
// Success
|
||||
$('#app').append(`<p>Loaded: ${data.title}</p>`);
|
||||
})
|
||||
.catch(err => {
|
||||
// Error
|
||||
console.error('Failed to load data', err);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## What's Next?
|
||||
|
||||
Now that you know the basics, explore the detailed modules, look at sidebar!
|
||||
84
wiki/RECIPE-Advanced-Chaining.md
Normal file
84
wiki/RECIPE-Advanced-Chaining.md
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
# 🧪 Advanced Recipe: The "Frankenstein" Chain
|
||||
|
||||
**Description**
|
||||
One of the most powerful features of **jBase** is its fully integrated **Fluent Interface** (Method Chaining). Because jBase unifies DOM manipulation, event handling, effects, and even asynchronous HTTP requests into a cohesive architecture, you can build incredibly complex, interactive UI components without ever breaking the chain or polluting your scope with temporary variables.
|
||||
|
||||
Below is an advanced "sandbox" example—affectionately called the "Frankenstein Chain"—that demonstrates the sheer power of combining CSS object notation, touch gestures, one-time async events, HTTP requests, immutable data utilities, and dynamic element creation into a single, continuous, and beautiful stream of code.
|
||||
|
||||
### The Code
|
||||
```javascript
|
||||
// Target the box and start the craziest chain of your life 🎢
|
||||
$('#magic-box')
|
||||
|
||||
// 1. CSS via Object-Notation (Apply multiple styles at once)
|
||||
.css({
|
||||
'transition': 'all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||||
'transform': 'rotate(0deg) scale(1)',
|
||||
'cursor': 'pointer',
|
||||
'background': '#2c3e50',
|
||||
'color': '#fff'
|
||||
})
|
||||
|
||||
// 2. The hover() helper for a wobbly "click me" effect
|
||||
.hover(
|
||||
function() { $(this).css('transform', 'scale(1.1) rotate(5deg)').addClass('glow'); },
|
||||
function() { $(this).css('transform', 'scale(1) rotate(0deg)').removeClass('glow'); }
|
||||
)
|
||||
|
||||
// 3. Mobile Easter-Egg: Swipe left to dismiss the box
|
||||
.swipeLeft(function() {
|
||||
$(this).slideOut({ duration: 500, direction: 'left' });
|
||||
console.log('Whoosh! The user swiped the box away!');
|
||||
})
|
||||
|
||||
// 4. The Main Act: We allow exactly ONE click (.once) and handle it asynchronously
|
||||
.once('click', async function(e) {
|
||||
const $this = $(this); // Secure the context
|
||||
|
||||
// The box says a dramatic goodbye
|
||||
$this.fadeOut({ duration: 400 });
|
||||
|
||||
try {
|
||||
// While the box fades out, we quietly fetch a random quote from an API
|
||||
const response = await $.http.get('[https://dummyjson.com/quotes/random](https://dummyjson.com/quotes/random)');
|
||||
|
||||
// Use the Data API to immutably pick only the keys we need (Security first 🕵️♂️)
|
||||
const cleanData = $.data.obj.pick(response, ['id', 'quote', 'author']);
|
||||
|
||||
// Things get wild: We generate a new jBase element on-the-fly...
|
||||
$(`<div class="magic-result"></div>`)
|
||||
// ... fill it with our sanitized HTTP data ...
|
||||
.html(`<h3>Quote #${cleanData.id}</h3><p>"${cleanData.quote}"</p><em>- ${cleanData.author}</em>`)
|
||||
// ... style it completely absurdly ...
|
||||
.css({
|
||||
'background': 'linear-gradient(135deg, #ff00cc, #3333ff)',
|
||||
'padding': '2rem',
|
||||
'border-radius': '15px',
|
||||
'box-shadow': '0 10px 30px rgba(0,0,0,0.5)',
|
||||
'display': 'none' // Crucial for the upcoming slideDown!
|
||||
})
|
||||
// ... inject it into the DOM right after our original (now invisible) box ...
|
||||
.insertAfter($this)
|
||||
// ... and let it drop down like a curtain!
|
||||
.slideDown({ duration: 800, displayType: 'block' })
|
||||
// Let's add one more event: Double-click to close the new box!
|
||||
.dblclick(function() {
|
||||
$(this).slideUp({ duration: 300 }).ready(() => {
|
||||
console.log('Show is over. jBase rules.');
|
||||
});
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
// Error handling with chaining magic
|
||||
$this.html('Glitch in the Matrix! 🐛')
|
||||
.css('background', 'red')
|
||||
.fadeIn({ duration: 200 });
|
||||
}
|
||||
});
|
||||
```
|
||||
### Why this is brilliant:
|
||||
|
||||
1. **Zero DOM Pollution:** Notice how we never save elements to variables like `let box = ...` or `let newDiv = ...` (except to secure `this` for the async boundary). The Garbage Collector loves this.
|
||||
2. **Async/Await Harmony:** jBase's event listeners (`.once`, `.on`) don't mind if you pass an `async` function. This allows you to pause the internal execution of your handler (`await $.http.get()`) without blocking the thread or breaking the initial event binding.
|
||||
3. **Living Elements:** The `<div class="magic-result">` element doesn't even exist in the DOM at the start of its chain. In a single breath, it gets created, populated, styled, injected, animated, and receives its own event listeners.
|
||||
4. **The Full Arsenal:** It seamlessly mixes Features from Core, Events, HTTP, Data Utilities, and Effects.
|
||||
98
wiki/UTILITIES.md
Normal file
98
wiki/UTILITIES.md
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
* [`$.each`](#usage-each) | [`$.throttle`](#usage-throttle) | [`$.debounce`](#usage-debounce)
|
||||
|
||||
---
|
||||
|
||||
## <a id="usage-each"></a>$.each
|
||||
|
||||
**Description**
|
||||
A generic, highly performant iterator function that can be used to seamlessly iterate over both arrays (or array-like objects such as NodeLists) and plain objects.
|
||||
|
||||
Unlike the native `Array.prototype.forEach()`, `$.each()` allows you to **break the loop early** by returning `false` within the callback function, saving valuable CPU cycles.
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `collection` (Array | Object | NodeList): The collection to iterate over.
|
||||
* `callback` (Function): The function to execute for each item.
|
||||
* For arrays, the callback is passed `(index, value)`.
|
||||
* For objects, the callback is passed `(key, value)`.
|
||||
* The `this` context inside the callback refers to the current value.
|
||||
|
||||
**Returns**
|
||||
|
||||
* (Array | Object): The original collection.
|
||||
|
||||
**Examples**
|
||||
|
||||
```javascript
|
||||
// 1. Iterating over an Array (with early break)
|
||||
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
|
||||
|
||||
$.each(fruits, function(index, value) {
|
||||
console.log(index + ': ' + value);
|
||||
|
||||
// Stop the loop completely once we find 'Cherry'
|
||||
if (value === 'Cherry') {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// 2. Iterating over an Object
|
||||
const user = { id: 1, name: 'Alice', role: 'Admin' };
|
||||
|
||||
$.each(user, function(key, value) {
|
||||
console.log(key + ' = ' + value);
|
||||
});
|
||||
|
||||
// 3. Iterating over a NodeList directly
|
||||
const buttons = document.querySelectorAll('button');
|
||||
|
||||
$.each(buttons, function(index, btn) {
|
||||
btn.classList.add('processed');
|
||||
});
|
||||
```
|
||||
|
||||
-----
|
||||
|
||||
## <a id="usage-throttle"></a>$.throttle
|
||||
|
||||
**Description**
|
||||
Ensures a function is called at most once in a specified time limit. [cite_start]Perfect for `scroll` or `resize` events. [cite: 561]
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `func` (Function): The function to throttle.
|
||||
* [cite_start]`limit` (Number): The time limit in milliseconds. [cite: 561]
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const throttledScroll = $.throttle(() => {
|
||||
console.log('Scrolling...');
|
||||
}, 200);
|
||||
|
||||
$(window).on('scroll', throttledScroll);
|
||||
```
|
||||
|
||||
-----
|
||||
|
||||
## <a id="usage-debounce"></a>$.debounce
|
||||
|
||||
**Description**
|
||||
Delays the execution of a function until after a specified wait time has passed since the last time it was invoked. [cite_start]Ideal for search inputs. [cite: 565]
|
||||
|
||||
**Parameters**
|
||||
|
||||
* `func` (Function): The function to debounce.
|
||||
* [cite_start]`delay` (Number): The delay in milliseconds. [cite: 565]
|
||||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
const search = $.debounce((query) => {
|
||||
$.http.get('/search?q=' + query).then(console.log);
|
||||
}, 500);
|
||||
|
||||
$('#search-input').on('input', function() {
|
||||
search($(this).val());
|
||||
});
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue