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
| before | ...Array[dom/Ele] / Array[dom/Ele]| Ele | Insert sibling elements before the element |
83
+
| after | ...Array[dom/Ele] / Array[dom/Ele]| Ele | Insert sibling elements after the element |
84
+
| remove | int/Ele/-- | Ele/-- | Remove child nodes based on position or ele element, or delete itself |
85
+
| parent |[index]| Ele/null | Get the parent element or nth-level parent element of the element |
86
+
| index | -- | number | Get the position of the element in the parent element |
87
+
| children |[index]| Ele/Array[Ele]/null | Get the first or all child elements |
88
+
| children | ...Array[dom/Ele] / Array[dom/Ele]| Ele | Insert child nodes into elements |
89
+
| next |[index]| Ele/null| Get the previous or nth element of the element |
90
+
| prev |[index]| Ele/null | Get the next or nth element after the element |
91
+
| exe | function(dom){} | Ele | Execute a method with Ele as this, and the callback parameter is the corresponding dom element |
94
92
| src | string | Ele | Set the src attribute of dom |
95
-
| query | selector | Array[Ele]| Query all children of an element based on the css selector |
96
-
| name | string | Ele | Add name to element or query element based on name |
97
-
| hide | - | Ele | hide elements |
98
-
| show |[display]| Ele | Display element |
99
-
| setVisible |[visible],[display]| Ele | Display element |
93
+
| query | selector | Array[Ele]| Query all children of an element based on css selector |
100
94
101
-
Some api usage examples:
95
+
Some API usage examples:
102
96
103
-
Basic use
97
+
Basic usage
104
98
105
99
```js
106
-
let el =$.create('div')
107
-
.cls('easy-dom')
108
-
.text('easy-dom')
109
-
.click(()=>{
110
-
alert('click')
111
-
})
100
+
let el =dom.div
101
+
.class('easy-dom')
102
+
.text('easy-dom')
103
+
.click(()=>{
104
+
alert('click')
105
+
})
112
106
```
113
107
114
108
emmet style
115
109
116
110
```js
117
-
let el =$.create('div#app.cls1.cls2[attr1=1][attr2]')
111
+
let el =dom('div#app.cls1.cls2[attr1=1][attr2]')
118
112
```
119
113
120
114
render method
121
115
122
116
```js
123
117
el.render({
124
-
method:{
125
-
alert(text){
126
-
// this: {el,bindEl,self,method}
127
-
console.log(this);
128
-
window.alert(text);
129
-
}
130
-
},
131
-
result(el){
132
-
console.log(el.div1,el.div2);
133
-
},
134
-
// Using the es6-string-html plugin in vscode will make the following html with syntax highlighting
135
-
html:/*html*/`
136
-
<div @el='div1' @event=alert('test')></div>
137
-
<div @el='div2'></div>
138
-
`
118
+
method:{
119
+
alert(text){
120
+
// this: {el,bindEl,self,method}
121
+
console.log(this);
122
+
window.alert(text);
123
+
}
124
+
},
125
+
result(el){
126
+
console.log(el.div1,el.div2);
127
+
},
128
+
// Using the es6-string-html plug-in in vscode will make the following html have syntax highlighting
129
+
html:/*html*/`
130
+
<div @el='div1' @event=alert('test')></div>
131
+
<div @el='div2'></div>
132
+
`
139
133
})
140
134
```
141
135
142
-
.data() usage
136
+
.data() Usage
143
137
144
138
```js
145
139
el.data(); // Get data object
146
140
el.data(null); // Clear the data object
147
-
el.data('name','test'); //set a data
141
+
el.data('name','test'); //Set a data
148
142
el.data('name'); // Get a data
149
-
el.data('name', null); //remove a data
150
-
el.data({ //batch operation
151
-
name:null, //remove a data
152
-
age:12// set a data
143
+
el.data('name', null); //Remove a data
144
+
el.data({ //Batch operation
145
+
name:null, //Remove a data
146
+
age:12//Set a data
153
147
});
154
148
```
155
149
156
-
The only attribute of the Ele element is .el, get the corresponding dom element
150
+
The Ele element has only one attribute, which is .el. Get the corresponding dom element.
157
151
158
152
### 2. api list
159
153
160
154
api list
161
155
162
-
| api |Parameters|Return value |Description|
156
+
| api |parameters|return value |description|
163
157
| :--: | :--: | :--: | :--: |
164
158
| create | string | Ele | Generate an Ele element based on tag |
165
-
| query | selector[,boolean]| Ele/NodeList/null | Query element, the bool parameter behind indicates whether to query all elements, otherwise only the first one is queried|
166
-
| checkDom | string/selector/HTMLElement | HTMLElement/NodeList | Get dom element|
167
-
| classPrefix | string[,function]| - | Add a default prefix to the class name. If a callback function is used as a parameter, the prefix will be cleared after the callback is completed, otherwise please manually call clearClassPrefix to clear |
168
-
| clearClassPrefix | - | - | Clear class name prefix |
169
-
| addCommonStyle | object/name,value | - | Add css variables and common styles |
| version |Attributes| - | easy-dom version information |
159
+
| query | selector[,boolean]| Ele/NodeList/null | Query elements, the following bool parameter indicates whether to query all elements, otherwise only the first one |
160
+
| checkDom | string/selector/HTMLElement | HTMLElement/NodeList | Get dom elements|
161
+
| classPrefix | string[,function]| --| Add a default prefix to the class name. If a callback function is used as a parameter, the prefix will be cleared after the callback is completed. Otherwise, please manually call clearClassPrefix to clear |
162
+
| clearClassPrefix | --|-- | Clear class name prefix |
163
+
| addCommonStyle | object/name,value | --| Add css variables and common styles |
| windowSize | --| {width:height} | Get browser size |
168
+
| version |properties|-- | easy-dom version information |
175
169
176
170
177
171
Detailed use
178
172
179
173
```js
174
+
import $, {dom} from'easy-dom-util';
180
175
$.classPrefix('el-test-');
181
-
$.create('div').cls('1') // class = el-test-1
176
+
dom.div.class('1') // class = el-test-1
182
177
$.clearClassPrefix();
183
178
// or
184
179
$.classPrefix('el-test-',()=>{
185
-
$.create('div').cls('1') // class = el-test-1
180
+
dom.div.class('1') // class = el-test-1
186
181
});
187
182
```
188
183
189
-
Style related
184
+
style related
190
185
191
186
```js
192
187
$.addCommonStyle({
193
-
fontSize:'12px',
194
-
textCenter:'text-align:center;'
188
+
fontSize:'12px',
189
+
textCenter:'text-align:center;'
195
190
})
196
191
197
192
$.reportStyle({
198
-
func:initStyle,
199
-
id:'MyStyle'// id of style tag
200
-
}); //Do not use the style pool, the style will be added to the head immediately
193
+
func:initStyle,
194
+
id:'MyStyle'//The id of the style tag
195
+
}); //Without using the style pool, the style will be added to the head immediately
201
196
202
197
// or
198
+
203
199
$.reportStyle({
204
200
func:initStyle,
205
-
id:'MyStyle', // id of style tag
201
+
id:'MyStyle', // id of style tag
206
202
usePool:true
207
-
}); // Use the style pool, the style will be added to the head after calling initStylePool. When there are many scattered styles, it is recommended to use the style pool
203
+
}); // Use the style pool. The style will be added to the head after calling initStylePool. When there are many scattered styles, it is recommended to use the style pool.
208
204
$.initStylePool();
209
205
210
-
functioninitStyle(common){ // common is a common style
211
-
// Using the es6-string-css plugin in vscode will make the following css syntax highlighting
206
+
functioninitStyle(common){ // common is the public style
207
+
// Using the es6-string-css plug-in in vscode will make the following css with syntax highlighting
212
208
return/*css*/`
213
209
.el-test-1{
214
210
color:#f44;
@@ -221,11 +217,11 @@ function initStyle(common){ // common is a common style
0 commit comments