# edo

**Repository Path**: htqw123/edo

## Basic Information

- **Project Name**: edo
- **Description**: 一个更加简单的HTML元素操作库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-13
- **Last Updated**: 2025-05-17

## Categories & Tags

**Categories**: javascript-toolkits

**Tags**: None

## README

# edo
### describe
A easier HTML element operation libary.
This library uses TypeScript as the source code language
### install
npm：
```bash
npm i edo-htqw
```
yarn:
```bash
yarn add edo-htqw
```
### contact us
海豚青蛙(HaitunQingwa) [1931231838@qq.com](email:1931231838@qq.com)

---
# tutorial
Use "script" element import can summon a "edo" function.
```html
<script src="umd module's file route"></script>
<script>
	console.log(Object.prototype.toString.call(edo));// output "[object Function]"
</script>
```
When use other modular specification import,nam should is "edo".
```javascript
const edo = require("edo-htqw or umd module file");// CommonJS
requirejs.config({
	...
	paths: {
		edo: "edo-htqw or umd module file"
	}
});// AMD
import edo from "edo-htqw or umd module file";// esm
```
# "edoElement"
### edo function
```js
edo("CSS selector" or HTML Element);// Obtain elements through CSS selector or directly accept HTML elements from parameters and convert them into edo elements
```
### The thing returned by using the edo function is an edo element

```JavaScript
const edoEl=edo ("h1");
console.log(edoEl.toString())// Output [object edoElement]
```

There is an el attribute in the edo element, which represents the original element

# Basic operations

### Basic operations

You can use the HTML methods in the edo element to perform operations

The parameter is the HTML to be changed, if not, read it

```JavaScript
EdoElement.html ("Hello</b>")// Set HTML to<b>Hello</b>
Edoelement.html()// Output Hello</b>
```

### Operation Text Content

You can use the text content method in the edo element to perform operations

The parameter is the text content to be changed, if not, read it

### Operation href

You can use the href method in the edo element to perform operations

The parameter is the href to be changed, if not, read it

# CSS operation
### Change the style of edo elements

You can use the edo element. css method

This method has two parameters, the first one is mandatory and the second one is optional

Method 1: Directly change the style

```JS

Edoelement.css("color: red; backgroundcolor: green");

```

Method 2: Use object to change element CSS

```JS

Edo element. css ({
	color: "red",
	backgroundColor: "green"
});

```

Method 3: Single Change

```JS
Edoelement. css ("color", "red");
Edoelement. css ("background color", "green");
```

### Get the value of a certain style of the edo element

```JS

EdoElement.getCss("color")// Red

```

### Dynamically adding CSS

```JS

edo.css ({
	body:{
		color: "blue"
	},
	"#test":{
		backgroundColor: "orange"
	}
});

```

He will add the following CSS:
1. body{
2. color: blue;
3. }
4. #test{
5. background color: orange;
6. }
It can also be the following code:  
```js
edo.css("body", {
	color: "blue"
});
edo.css("#test", {
	backgroundColor: "orange"
});
```
```js
edo.css("body", "color: blue;");
edo.css("test", "backgroundColor: orange;");
```
# Event
### Click
```JS
Edoelement.click(e=>{
	Console. log (e);
});
```
If the parameter is null, delete the item
If the parameter is not an arrow function, then this points to that edo element
After clicking here, {0: The original event object, prevent: function()} will be output
Prevent is used to block default event
### Start the listener
```JS

Edoelement.onEventL(name, function);

```
If the parameter is not an arrow function, then this points to the original element
### Turn off the listener
```JS

Edoelement.offEventL(name, function);

```
If the parameter is not an arrow function, then this points to the original element

---
# Update logs
# Edo 0. x
### 0.1. x
+ 0.1.0
	+ New addition
		1. Edo
		2. edo.proto
		3. edoHTMLElementIsNotFoundError
		4. Basic operations
		1. Edo Element.text
		2. Edo Elements.HTML
		3. Edo Element.href
		4. Edo Elements.el
		5. Style operation
			1. edo.css
			2. Edo Element.css
			3. edo element. getCss
		6. Event monitoring
			1. Edo Element.click
			2. edo element. onEventL
			3. edo element. offEventL
		7. UMD module

+ 0.1.1
	+ Repair
		1. Error in using CommonJS and AMD to introduce UMD for library modification
	+New addition
		1. ESM module

+ 0.1.2
	+ New addition
		1. Error
		1. edoCssSelectorError
		2. edoTypeError
		3. edoUnknown Exception
+ 0.1.3
	+ Improvement
		1. Change update logs and tutorials to readme
		2. edo.css function