# 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
# 介绍
一个更简单的HTML元素操作库  
此库以TypeScript作为源代码语言
# 安装
### npm：
```bash
npm i edo-htqw
```
### yarn:
```bash
yarn add edo-htqw
```
# 联系我们
海豚青蛙 [1931231838@qq.com](email:1931231838@qq.com)

---
# 教程
用script导入edo会出现一个edo的函数
```html
<script src="umd模块文件路径"></script>
<script>
	console.log(Object.prototype.toString.call(edo));// 输出[object Function]
</script>
```
用其他的模块化规范引入时，应将名称改为edo
```javascript
const edo = require("edo-htqw或umd模块文件");// CommonJS
requirejs.config({
	...
	paths: {
		edo: "edo-htqw或umd模块文件"
	}
});// AMD
import edo from "edo-htqw或umd模块文件";// esm
```
# edo元素
### edo函数
```javascript
edo("CSS选择器"或HTML元素);// 通过css选择器获取元素或直接接受参数中的html元素，并转换成edo元素
```
### 使用edo函数返回的东西，就是一个edo元素
```javascript
const edoEl = edo("h1");
console.log(edoEl.toString());// 输出[object edoElement]
```
edo元素中有一个el属性，他代表着原来的元素
# 基本操作
### 基本操作
可以使用edo元素中的html方法来进行操作  
参数是要改成的html，没有则读取
```javascript
edo元素.html("<b>你好</b>");// 将html设成<b>你好</b>
edo元素.html();// 输出<b>你好</b>
```
### 操作文本内容
可以使用edo元素中的文本内容方法来进行操作  
参数是要改成的文本内容，没有则读取
### 操作href
可以使用edo元素中的href方法来进行操作  
参数是要改成的href，没有则读取
# css操作
### 改变edo元素的样式
可以使用edo元素.css方法  
该方法有两个参数，第一个必填，第二个选填  
方法1：直接更改style
```js
edo元素.css("color: red;background-color: green");
```
方法2：使用对象更改元素css
```js
edo元素.css({
	color: "red",
	backgroundColor: "green"
});
```
方法3：单个更改
```js
edo元素.css("color", "red");
edo元素.css("background-color", "green");
```
### 获取edo元素某个样式的值
```js
edo元素.getCss("color");// red
```
### 动态添加css
```js
edo.css({
	body: {
		color: "blue"
	},
	"#test": {
		backgroundColor: "orange"
	}
});
```
他会添加如下css：
1. body {
2.   color: blue;
3. }
4. #test {
5.   background-color: orange;
6. }
还可以是以下代码：  
```js
edo.css("body", {
	color: "blue"
});
edo.css("#test", {
	backgroundColor: "orange"
});
```
```js
edo.css("body", "color: blue;");
edo.css("test", "backgroundColor: orange;");
```
# 事件
### 点击
```js
edo元素.click(e => {
	console.log(e);
});
```
如果参数是null，则删除该项  
如果参数不是箭头函数，那么this 指向那个edo 元素  
这里点击后会输出{0: 原来的事件对象, prevent: function()}  
prevent用于阻止默认事件
### 启动监听器
```js
edo元素.onEventL(名称, 函数);
```

如果参数不是箭头函数，那么this 指向那个原来的元素  
### 关闭监听器
```js
edo元素.offEventL(名称, 函数);
```

如果参数不是箭头函数，那么this 指向那个原来的元素  

---
# 更新日志
# edo 0.x
### 0.1.x
+ 0.1.0
	+ 新增
		1. edo
		2. edo.proto
		3. edoHTMLElementIsNotFoundError
		4. 基础操作
			1. edo元素.text
			2. edo元素.html
			3. edo元素.href
			4. edo元素.el
		5. 样式操作
			1. edo.css
			2. edo元素.css
			3. edo元素.getCss
		6. 事件监听
			1. edo元素.click
			2. edo元素.onEventL
			3. edo元素.offEventL
		7. umd模块
+ 0.1.1
	+ 修复
		1. 用CommonJS、AMD引入改库的UMD时错误
	+ 新增
		1. ESM模块
+ 0.1.2
	+ 新增
		1. 错误
			1. edoCssSelectorError
			2. edoTypeError
			3. edoUnknownExcept
+ 0.1.3
	+ 改进
		1. 将更新日志和教程改到readme
		2. edo的css函数