Skip to content

Commit 254cd37

Browse files
committed
release v0.7.0
1 parent 5e6a68e commit 254cd37

File tree

4 files changed

+292
-145
lines changed

4 files changed

+292
-145
lines changed

README.md

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,28 @@ UXR has the philosophy of fewer code and low file size. Because of this, widely
2020
| Version | 49+ | 36+ | 37+ | 10+ | 12+ |
2121

2222
## How To Use
23+
You can install UXR via Node package managers
24+
``` js
25+
$ npm install uxr
26+
// or
27+
$ yarn add uxr
28+
```
29+
30+
Or you can directly include you `dist` files to your project after downloading the desired version.
31+
2332
After adding the `dist/uxr.min.js` to your page, you can select an element set from DOM and start to manipulate/modify the selection.
2433

2534
### Loading UXR methods
2635
You can define UXR methods to run when page loads and content ready. Or run when needed.
2736

2837
``` js
2938
uxr.ready(function(){
30-
// inner functions automatically runs when loading finished
31-
39+
// inner functions automatically runs when document is ready
3240
});
3341

42+
uxr.load(function(){
43+
// inner functions automatically runs when document is fully loaded
44+
});
3445
```
3546

3647
### Element Selection
@@ -60,32 +71,54 @@ uxr(selector)
6071
```
6172

6273
### Attribute Manipulation
63-
64-
With `uxr(selector).attr()` methods you can get an attribute's value or set a value
74+
With `uxr(selector).attr()` methods you can get an attribute's value or set a value in HTML tags
6575

6676
``` js
6777
let el = uxr(selector);
6878

6979
// get the ID
7080
let id = el.attr('id');
81+
// getAttr method is an alias to attr(name)
82+
let id = el.getAttr('id');
7183

7284
// set the ID
7385
el.attr('id', 'new-id');
86+
// setAttr method is an alias to attr(name, value);
87+
el.setAttr('id', 'new-id');
7488

7589
// get a data-attr value
7690
// the following both samples gets the same attribute
7791
el.attr('data-attr');
7892
el.attr('dataAttr');
93+
94+
// Remove an attribute from HTML
95+
el.removeAttr('id');
96+
el.removeAttribute('id');
7997
```
8098

8199
There are some, easy to use - easy to remember attribute methods
82100

83-
* `uxr(selector).text(value)` : if you send the `value` it sets the `innerText` value with the new one. Otherwise returns the `innerText` value.
84-
* `uxr(selector).html(value)` : if you send the `value` it sets the `innerHTML` value with the new one. Otherwise returns the `innerHTML` value.
101+
85102
* `uxr(selector).src(value)` : if you send the `value` it sets the `src` of the element. Otherwise returns the `src` value.
86103
* `uxr(selector).href(value)` : if you send the `value` it sets the `href` value of the anchor with the new one. Otherwise returns the `href` value.
87-
* `uxr(selector).value(value)` : if you send the `value` it sets the value of form elements with the new one. Otherwise returns the value of the form element.
88104

105+
### Props
106+
With `uxr(selector).prop()` methods you can get an DOM node element's properties. This is different than attr methods where it get native elements properties rather than HTML attributes.
107+
108+
``` js
109+
let el = uxr(selector);
110+
111+
// get a property
112+
let innerText = el.prop('innerText');
113+
114+
// set a property
115+
el.prop('innerText', 'New Text');
116+
```
117+
118+
There are some, easy to use - easy to remember property methods
119+
* `uxr(selector).text(value)` : if you send the `value` it sets the `innerText` value with the new one. Otherwise returns the `innerText` value.
120+
* `uxr(selector).html(value)` : if you send the `value` it sets the `innerHTML` value with the new one. Otherwise returns the `innerHTML` value.
121+
* `uxr(selector).value(value)` : if you send the `value` it sets the value of form elements with the new one. Otherwise returns the value of the form element.
89122

90123
### Class Manipulation
91124
With `uxr` it is easier to add/remove or check classes. All for class manipulation methods supports multiple class names separated with space and setting class starting with dot (`.`)
@@ -168,6 +201,26 @@ Single Run events are only run once then remove itself from the element.
168201
uxr(selector).once('touchend', e => { console.log('touch ended'); })
169202
```
170203
204+
#### Trigger Events
205+
Native and custom events can be triggered by using trigger method. Similar to event bindings, event trigger can be triggered on children elements. Despite event binding, where you can bind multiple events at once, you can trigger one event at a time.
206+
207+
``` js
208+
// trigger a click event
209+
uxr(selector).trigger('click');
210+
211+
// trigger a custom event
212+
uxr(selector).trigger('custom');
213+
214+
// trigger a focus event in children
215+
uxr(selector).trigger('focus', 'input[type=text]');
216+
217+
// trigger event with params
218+
uxr(selector).trigger('click', {custom: 'params', another: {custom: 'paramater'}});
219+
220+
// trigger event with params in children
221+
uxr(selector).trigger('blur', 'textarea', {custom: 'params', another: {custom: 'paramater'}});
222+
```
223+
171224
### Wrapper Methods
172225
With wrapper methods, you can wrap element or elements to a new parent or unwrap them.
173226
@@ -223,6 +276,22 @@ el.prepend(uxr('#new'));
223276
el.replaceWith('<div id="replaced">Previous element replaced</div>');
224277
```
225278
279+
### Filtering and Finding
280+
Filtering methods help to find or filter elements in a UXR object.
281+
282+
``` js
283+
// create a subset of elements in a UXR object
284+
uxr(selector).filter(anotherSelector);
285+
286+
// create a subset of elements that a not matched the selector in a UXR object
287+
uxr(selector).not(anotherSelector);
288+
289+
// find / select children elements in a UXR object
290+
// has method is an alias to find
291+
uxr(selector).find(childrenSelector);
292+
uxr(selector).has(childrenSelecotr);
293+
```
294+
226295
### Traversing
227296
With traversal methods, you can find adjacent or parent elements accordingly. Almost all traversal methods returns a `uxr` object. You can return the previous `uxr` by chaining `end()`
228297

0 commit comments

Comments
 (0)