You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+76-7Lines changed: 76 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,17 +20,28 @@ UXR has the philosophy of fewer code and low file size. Because of this, widely
20
20
| Version | 49+ | 36+ | 37+ | 10+ | 12+ |
21
21
22
22
## 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
+
23
32
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.
24
33
25
34
### Loading UXR methods
26
35
You can define UXR methods to run when page loads and content ready. Or run when needed.
27
36
28
37
```js
29
38
uxr.ready(function(){
30
-
// inner functions automatically runs when loading finished
31
-
39
+
// inner functions automatically runs when document is ready
32
40
});
33
41
42
+
uxr.load(function(){
43
+
// inner functions automatically runs when document is fully loaded
44
+
});
34
45
```
35
46
36
47
### Element Selection
@@ -60,32 +71,54 @@ uxr(selector)
60
71
```
61
72
62
73
### 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
65
75
66
76
```js
67
77
let el =uxr(selector);
68
78
69
79
// get the ID
70
80
let id =el.attr('id');
81
+
// getAttr method is an alias to attr(name)
82
+
let id =el.getAttr('id');
71
83
72
84
// set the ID
73
85
el.attr('id', 'new-id');
86
+
// setAttr method is an alias to attr(name, value);
87
+
el.setAttr('id', 'new-id');
74
88
75
89
// get a data-attr value
76
90
// the following both samples gets the same attribute
77
91
el.attr('data-attr');
78
92
el.attr('dataAttr');
93
+
94
+
// Remove an attribute from HTML
95
+
el.removeAttr('id');
96
+
el.removeAttribute('id');
79
97
```
80
98
81
99
There are some, easy to use - easy to remember attribute methods
82
100
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
+
85
102
*`uxr(selector).src(value)` : if you send the `value` it sets the `src` of the element. Otherwise returns the `src` value.
86
103
*`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.
88
104
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.
89
122
90
123
### Class Manipulation
91
124
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.
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.
With wrapper methods, you can wrap element or elements to a new parent or unwrap them.
173
226
@@ -223,6 +276,22 @@ el.prepend(uxr('#new'));
223
276
el.replaceWith('<div id="replaced">Previous element replaced</div>');
224
277
```
225
278
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
+
226
295
### Traversing
227
296
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()`
0 commit comments