JSVita - JavaScript Framework - Simplicity to the Fullest | Beta 4

This is the beta version of the upcoming JSVita JavaScript Framework. This framework is very simple, hence the motto: "Simplicity to the Fullest". I strive to teach others about pure JavaScript while having them decide whether they want to write it all out, or use my framework, but understand JavaScript at the same time.

This Framework/Library will work in most browsers, some old and all new.

This Framework uses the CSS Selector Engine named Peppy. So, to select something, you simply select it exactly as you would in a CSS StyleSheet!

Examples: Selecting IDs (use the # symbol):

vita('#ID').prepend('<div>TEST</div>') //Creates a new first child of the ID: ID

Selecting Classes (use the . symbol):

vita('.class').prepend('<div>TEST</div>') //Creates a new first child of all classes with the class name: class

Selecting Tags (no symbol):

vita('body').prepend('<div>TEST</div>') //Creates a new first child of the tag: body

Selecting Classes, Tags, and Names Through Node Specification

vita('.name:nth(0)').prepend('<div>TEST</div>') //Creates a new first child of the first element that contains the class name: class

Selecting Chained Elements

vita('div.class p').prepend('<div>TEST</div>') //selects all div elements with class of "class" and then selects all p elements inside of it

Selecting By Attribute

vita('div[alt="test"]').prepend('<div>TEST</div>') //selects all div elements with the alt attribute equaling "test"

Selecting By JavaScript

vita(document.getElementById('ID')).prepend('<div>TEST</div>') //selects the id "ID"

To make it simple and short, just use any CSS Selector you know inside the vita(). For a list of them you can visit: http://www.w3.org/TR/CSS2/selector.html

The main global "selector function" of JSVita is "vita": vita(selector).function(). However, if no library that uses the "$" as a selector function, then you may also use the $, much like jQuery ($(selector).function()).

For an even shorter yet global "selector function", you can use $jsv: $jsv(selector).function().

• .get() Returns the element selected for use with pure JavaScript.
• .html(html) Returns the HTML of an element if there are no set paramaters: "()". This also sets the innerHTML if you input text/html in the paramaters: "('Some Text')".
• .text(text) Returns the text content (only) of an element if there are no set paramaters: "()". This also sets the textContent || innerText if you input text in the paramaters: "('Some Text')".
• .val(value) Returns the value of an element if there are no set paramaters: "()". This also sets the value if you input text in the paramaters: "('Some Text')".
• .showHide() Either hides or shows the element. If it's visible, it will be hidden and vice-versa. This can be used in a function of a button or by itself.
• .show() Makes an element visible.
• .hide() Makes an element invisible.
• .prop(attribute, value) Returns the specified attribute value of an element if you only put the attribute: .prop('alt') returns the value of alt. This also sets the specified attribute's value if you define the next paramater: .prop('alt','Some Text'). This also removes the attribute completely if you put an exclamation before the specified attribute: .prop('!alt') removes the "alt" attribute.
• .className(class) If class is not defined, it will return the class name. If there is a '+' in the class, it will add the class name to the existing class, example: .className('+class'). If no '+' is defined, the current class will be replaced with the new class.
• .css(style, value) If value is undefined, it will return the literal style of the element (even if it's in a CSS style sheet). If you wish to set the style of an element(s), simply add a value: vita('selector').css('color','blue'). OR if you wish to set multiple style attributes use the following format:

vita('selector').css({
'color':'blue',
'font-size':'12px'
});

• .after(element) Adds whatever is defined in 'element' after the specified element(s).
• .before(element) Adds whatever is defined in 'element' before the specified element(s).
• .append(element) Appends whatever is defined in 'element' to a the specified element(s) as the last child.
• .prepend(element) Prepends whatever is defined in 'element' to a the specified element(s) as the first child.
• .remove() Removes the specified element(s) from the DOM.
• .change(element) Changes the specified element(s) to whatever is defined in 'element'.
• .cover(opening, closing) Wraps whatever element(s) are selected in the tags defined. For example: .cover('
  ','
  ') towards Test will result in
  Test
  .
• .locate(position) Gives the offsetLeft and offsetHeight of the specified element. If you leave position blank "()", you will get: (offsetLeft+px, offsetHeight+px). If you specify 'left' in the position, you will be returned the offsetLeft in pixels. If you specify 'height' in the location, you will be returned the offsetHeight of the element in pixels.
• .parent() Allows editing of the parent of the selector. This can be chained: vita('#test').parent().parent().parent() .
• .next() Allows editing of the nextSibling of the selector. This can be chained: vita('#test').next().next().next().
• .prev() Allows editing of the previousSibling of the selector. This can be chained: vita('#test').prev().prev().prev().
• .children() Returns the childNodes of the selector. Could be used with .get().
• .clone() Clones the Element.
• .find(selector) Works exactly like: vita('div p'). Finds whatever you define as the selector within the main selector. Example: vita('div').find('a') returns all of the a tags within a div tag.

• .has(hasthis, attrvalue) Returns true or false as to whether the selected element(s) contain whatever is defined in the parameters. The three selectors are: * for has text, @ for has this attribute and value(must fill in value!), and . for has class. Example:

<div class="class">Test</div>
vita('.class').has('.class') //Returns true

<div class="class">Test</div>
vita('.class').has('*Test') //Returns true

<div class="class" alt="TEST">Test</div>
vita('.class').has('@alt','TEST') //Returns true

• .first() Selects the first occurence of the selector and can be used with other functions. Example: vita('div').first().html().
• .last() Selects the last occurence of the selector and can be used with other functions. Example: vita('div').last().html().

• .hover(function() { }) Executes the function whenever you hover over the specified element(s).
• .hoverOut(function() { }) Executes the function whenever you hover out of the specified element(s).
• .click(function() { }) Executes the function whenever you click the specified element(s).
• .focus(function() { }) Executes the function whenever you focus on the specified element(s).
• .dblclick(function() { }) Executes the function whenever you double click on the specified element(s).
• .submit(function() { }) Executes the function whenever you submit the specified form(s).

• .animate(type, to, step, delay) type — type of animation effect. The type paramter is same as the CSS property name for a DOM element. So, to alter the X-Coordinate of an element, the type needs to be set to 'left'. Other properties you can alter are: opacity — cross-browser property to adjust an element's opacity. backgroundx — background X position. backgroundy — background Y position. to — end property value. Once it has been reached, the effect stops running. step — positive or negative integer value to alter a CSS property, per one iteration (i.e. step). delay — delay between iterations in miliseconds. This parameter is optional, by default it is 100. Do not set this number too high, unless you want choppy animation.
• .fadeOut(duration) Fades out the element(s). The duration can be a number, "slow", "fast", or blank. Blank is a normal speed.
• .fadeIn(duration) Fades in the element(s). The duration can be a number, "slow", "fast", or blank. Blank is a normal speed.
• .fadeToggle(duration) Fade toggles the element(s). If the element is not visible, it will be and vice versa. The duration can be a number, "slow", "fast", or blank. Blank is a normal speed.

This function waits for the document to finish loading, then executes the script within the function. This is not the same as window.onload() which waits for the window to be ready, this waits for the document to be ready and fires as soon as it is. This is faster than window.onload(). Full Code:

vita.onload(function() {
alert('Document Loaded'); //Alerts when the DOM has loaded
});

Short Code (Does exactly the same as the full code. Same speed and everything):

vita(function() {
alert('Document Loaded'); //Alerts when the DOM has loaded
});