# dom-query

**Repository Path**: Alessandro-pang/dom-query

## Basic Information

- **Project Name**: dom-query
- **Description**: 一个用于操作DOM的类JQuery库
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-27
- **Last Updated**: 2021-03-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dom-query

一个用于操作DOM的类JQuery库

![image alt="logo"](./logo.png)

#### 介绍

不可否认，这就是一个仿 JQuery 的项目；

准确的来说，这是一个用于深入学习原生JS 和 JQuery 源码的项目

尽管我还没有真正的去看过 JQuery 的源码，也尽管现在 Vue,React,Angular 如日中天

但并不妨碍 JQuery 存在以及学习的价值。

#### 安装教程

1.  下载 domQuery.js 即可
	```shell
	git clone https://gitee.com/Alessandro-pang/dom-query.git;
	```

#### 如何使用

1.  在 html 中引入 domQuery.js

	```html
	<script src="./domQuery.js"></script>
	```

#### 使用说明

​	和 Jquery 一样，可以使用 ```$``` 作为库的缩写引用，
​	但不一样的是，现在 DomQuery 里 ```$``` 必须是一个函数，而不能当一个对象使用

1. 查询 dom 元素

   ```js
   const div = $('#app');
   ```

2. 创建新的 dom 元素

   ```js
   const div = $().create('div');
   ```

3. 插入 dom 元素

    ```js
    $('#app').append($('div'));
    ```

4. 给 dom 元素添加样式

    ```js
    $('#app').css({color:"red",fontSize:"28px"});
    ```

4. 给 dom 元素添加属性

    ```js
    $('#app').attr({id:"dom-query",class="dom-query-clas"})
    ```

#### 示例

```js
const h2 = $().create('h2').css({
    transform: "translate('30px','90px')",
    color: 'red'
}).text('Hello,DOM Query').attr({
    id: 'app2',
    name: "myQuery"
});

$('#app').append(h2);
```

![image alt="示例"](./image.png)

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request