gO library

Simple js library to control the dom elements

Usage examples

gO.ready( function(){
	var divElement = gO.el( 'div' )
		.atr( 'data-title', 'example' )
		.addCls( 'hidden' )
		.val( 'Html example' );

	gO.elCreate( 'input' )
		.atr( 'name', 'example' )
		.val( 'Input example' )
		.show( divElement );
});

Downloads

go.js and go.min.js ( zip ) 11.6 Kb
go.js library ( 8.8 Kb )
go.min.js library ( minified ) - only 5 Kb

Documentation

gO.ready
Usage:
```
gO.ready( function(){

});
```
Description:
Run's when document is ready. It uses the readyState event.
gO.el
Usage:
```
1- gO.el( 'body' )
2- gO.el( 'body' ).el( 'div' )
3- gO.el( 'body' ).el( 'div', true )
```
Description:
Searches and return's the specific element(s) defined as argument. Accept selectors. ex: gO.el( '.container' )
The second argumment, when defined as true, returns all the matched elements.

Details:
1- Return's the body element
2- Return's the first div inside body element.
3- Return's all div's inside body element. ( array )
.atr
Usage:
```
gO.atr( 'type' )
gO.atr( 'type', 'box' )
```
Description:
Create/change a specific atribute value.
.delAtr
Usage:
```
gO.delAtr( 'type' )
```
Description:
Delete a specific atribute.
.val
Usage:
```
1- gO.el( 'input' ).val()
2- gO.el( 'input' ).val( 'new value' )
3- gO.el( 'div' ).val()
4- gO.el( 'div' ).val( 'new value' )
```
Description:
Set/Change/Remove the value from a specific element. Value in elements like div's is the innerHTML.

Details:
1- Returns the input value.
2- Set the new value
3- Returns the innerHTML of div element
4- Sets the new value ( innerHTML ) of element.
.isCls
Usage:
```
gO.el( 'div' ).isCls( 'name-of-class' )
```
Description:
Returns true if the defined class name exist on element.
.cls
Usage:
```
1- gO.el( 'div' ).cls()
2- gO.el( 'div' ).cls( 'new-class' )
```
Description:
Returns all classes/Add new class to the element.

Details:
1- Returns all classes.
2- Add the new-class.
.firstCls
Usage:
```
1- gO.el( 'div' ).firstCls()
```
Description:
Returns the first class defined on element.
.addCls
Usage:
```
gO.el( 'div' ).addCls( 'new-class' )
```
Description:
Add new class to the element if not already exists.
.delCls
Usage:
```
gO.el( 'div' ).delCls( 'old-class' )
```
Description:
Delete the specified class on element.
.getStl
Usage:
```
1- gO.el( 'div' ).getStl( 'width' ) // example: 450px
2- gO.el( 'div' ).getStl( 'width', 'px' ) // example: 450
```
Description:
Returns a specific style atribute value.

Details:
1- Returns the width value.
2- Returns the width value without 'px'.
.setStl
Usage:
```
gO.el( 'div' ).setStl( 'width', '10px' )
```
Description:
Set a specific style atribute value.

.show

Usage:

1- gO.elCreate( 'div' )
	.show( 'body' );

2- gO.elCreate( 'input' )
	.show( 
		gO.el( 'div' ) 
	);

Description:
Show the specific element on the element defined as argument.

.flash
Usage:
```
gO.elCreate( 'input' )
	.flash( gO.el( 'div' ) );
```
Description:
Replace the element defined as argument to the specific element.
.parent
Usage:
```
1- gO.el( 'div' )
	.parent();

2- gO.el( 'div' )
	.parent( 2 );
```
Description:
Returns the parent element. Accepts an argument ( number ).
.parents
Usage:
```
1- gO.el( 'div' )
	.parents();

2- gO.el( 'div' )
	.parents( '.class-name' );
```
Description:
Returns the parents associated to the element. Accepts a selector as argument. Returns all parents associated after the matched selector.

Description:
1- Returns all parents associated to the element.
2- Returns all parents associated to the element after the matched selector ( element with '.class-name' ).
.on
Usage:
```
1- gO.el( 'button' )
	.on( 'click', function( e ){
		// your code after click event
	});

1- gO.el( 'div' )
	.on( 'a', 'click', function( e ){
		// your code after click event
	});

1- gO.el( 'button' )
	.on( 'click', function( e ){
		// your code after click event
	}, context );

1- gO.el( 'div' )
	.on( 'a',  'click', function( e ){
		// your code after click event
	}, context );
```
Description:
Add a listener ( event ) to the specific element.

Description:
1- Add a click listener to button element. The code inside runs after the user clicks on button
2- Add a click listener to all ( a ) links inside the specified div element. The code inside runs after the user clicks on some link on div element.
3- Add a click listener to button element. The code inside runs with the specified context after the user clicks on button.
4- Add a click listener to all ( a ) links inside the specified div element. The code inside runs with the specified context after the user clicks on some link on div element.
.off
Usage:
```
gO.el( 'button' )
	.off( 'click' );
```
Description:
Removes the event specified from element. Accpets a string or an array with the specified events.
.fire
Usage:
```
gO.el( 'button' )
	.fire( 'click' );

gO.el( 'button' )
	.fire( 'click', 'information' );
```
Description:
Dispatch the specified event. Second argument can be used to send some data/information.
.tag
Usage:
```
gO.el( 'button' )
	.tag();
```
Description:
Return the type of element ( DIV, SPAN, ... )
.del
Usage:
```
gO.el( 'button' )
	.del();
```
Description:
Deletes/Removes the specified element.

.elFlash

Usage:

gO.elFlash( gO.el( 'input' ), 'error', 1000, 3 ); // 1000 - animation interval; 3 - frequency

Description:
Flash the element specified ( animation error ) 3 times.

.has
Usage:
```
	[ 'val1', 'val2', 'val3' ].has( 'val2' );
```
Description:
Returns true if the value specified on argument exists in the array.
.rpl
Usage:
```
	"string".rpl( 'str', '' );
```
Description:
Replaces all occurrences in some string to the specific new value.
.null
Usage:
```
	"".null(); // true
```
Description:
Returns true if the string is empty.
.upper
Usage:
```
	"string".upper(); // String

	"String".uppper( 2 ) // STRing
```
Description:
Returns the first character of some string in uppercase format.
You can apply the uppercase format to the other characters by defining a argument value ( pointer ).
.html
Usage:
```
	"string\ntest".html(); // string[<]br[>]test
```
Description:
Converts the breaklines to html ( [<]br[>] )
.text
Usage:
```
	"string
test".html(); // string\ntest
```
Description:
Converts the breaklines in html to \n

.order

Usage:

	[ '1', '2', '3', '4' ].order( 2, 1 ); // result: [ '1', '3', '2', '4' ]

Description:
Switch the position's on some array.

[email protected]

gO library

Usage examples

Downloads

Documentation

gO.ready

gO.el

.atr

.delAtr

.val

.isCls

.cls

.firstCls

.addCls

.delCls

.getStl

.setStl

.show

.flash

.parent

.parents

.on

.off

.fire

.tag

.del

.elFlash

.has

.rpl

.null

.upper

.html

.text

.order