edo

describe

A easier HTML element operation libary. This library uses TypeScript as the source code language

install

npm：

npm i edo-htqw

yarn:

yarn add edo-htqw

contact us

海豚青蛙(HaitunQingwa) [email protected]

tutorial

Use "script" element import can summon a "edo" function.

<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".

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

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

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

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

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

Method 2: Use object to change element CSS

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

Method 3: Single Change

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

Get the value of a certain style of the edo element

EdoElement.getCss("color")// Red

Dynamically adding CSS

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:

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

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

Event

Click

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

Edoelement.onEventL(name, function);

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

Turn off the listener

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
    5. Edo Element.text
    6. Edo Elements.HTML
    7. Edo Element.href
    8. Edo Elements.el
    9. Style operation
       1. edo.css
       2. Edo Element.css
       3. edo element. getCss
    10. Event monitoring
        1. Edo Element.click
        2. edo element. onEventL
        3. edo element. offEventL
    11. UMD module

• 0.1.1

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

• 0.1.2

  • New addition
    1. Error
    2. edoCssSelectorError
    3. edoTypeError
    4. edoUnknown Exception

• 0.1.3

  • Improvement
    1. Change update logs and tutorials to readme
    2. edo.css function