exc.js is a small jQuery-like API JavaScript library inspired by ki.js and zepto.js. The goal is to provide a small footprint, be as close as possible to native javascript while providing a basic compatibility with jquery.
I use exc.js because I find myself using a small subset of jQuery in many projects, and jquery keeps getting fatter. Todays browsers are not as bad as you expect, they have a good set of functionality for web applications, you may not need so much sugar on top of you browsers javascript. The idea behind exc.js is to remove some of the extra sugar.
Currently at ~8kb uncompressed.
Currently only tested in: Chrome, Safari, Firefox.
Include the exc.js script file in your header.
<script src="exc.js"></script>
You can run code as soon as the document is ready (when is safe to manipulate its contents) using exc as in:
$( function() {
alert( "welcome" );
} );
This can also be done as:
function initialize_my_page() {
alert( "welcome" );
}
$(initialize_my_page);
This jquery syntax is also available:
$(document).ready(initialize_my_page);
Must functions that operate on DOM elements accept a selector as defined by the DOM Sepcification and supported by most modern browsers.
This documentation will describe selector arguments as "selector"
. For example: .append("selector")
.
You can also pass DOM nodes as provided by native JavaScript functions. The documentation will describe an argument that accepts a node as elem
. For example: .append(elem)
. Also code examples will use elem
when referring to an instance of a DOM node/element.
A node can also be represented as an instance of an exc
object. The documentation will describe an argument that accepts an exc
instance as exc
. For example: .append(exc)
. Code examples will use variables prefixed with the dollar sign to indicate that their are instances of an exc object, for example var $aForm = $("#myForm");
.
Some functions allows to pass a string with valid HTML code. The documentation will describe an argument that accepts a valid HTML string as "html"
. For example: .append("html")
.
In many instances the documentation will use a pipe character to indicate when more than one type is allowed for example ["selector"|elem|"html"|exc]
as in .append(["selector"|elem|"html"|exc])
.
A string argument is represented in the documentation as "string"
. When a string is a particular thing we may use a name inside the quotes for example a css property like border-left
would be "css-property-name"
, etc.
When you can pass a simple primitive value (a string, number, or boolean) the documentation will use the word value
.
An object as obj
, an array as array
, a boolean value is bool
and numbers as number
.
Use any CSS selector that exists to get elements from the DOM.
$('#anID');
$('.class');
$('div.class');
$('p:nth-last-of-type(2)');
$('[attribute|=value]');
$('p:not(.note)');
$('p:empty');
See a list of all CSS selectors
Events with the known .on()
and .off()
methods
<button>exc.js</button>
$(function () {
// ok now that the dom is ready i would like to add some events
var alertMyName = function () {
alert('My name is ' + this.textContent); // will allert 'ki.js'
};
$('button').on('click', alertMyName);
// to turn it off just use .off()
//$('button').off('click', alertMyName);
});
You can add any JavaScript event even touch events for mobile, under the hood exc.js uses addEventListener, so feel free to use any valid ECMAScript 5 event.
The each()
is also included in the core of ki.js for easy iterating a DOM collection.
// get all p tags
$('p').each(function (i, elem) {
// change color to red
elem.style.color = 'red';
// append the index to the text
elem.textContent += i;
});
Just like jQuery this represents the DOM element you are operating on, use $(this)
to convert it to an exc instance.
The is("selector")
returns true if the item matches the selector given.
<div id="main_news" class="news"></div>
$("#main_news").is(".news");
The extend(obj)
merges the contents of the objects passed into the first object. It returns the first object.
var obj1 = {a:"1"};
var obj2 = {b:"2"};
var obj3 = {c:"3"};
$.extend(obj1,obj2,obj3);
.first(), .last(), .html(), .html("string"), .text(), .text("string"), .parseHTML("html"), .attr("string"), .attr("string", value), .removeAttr("string"), .hasAttr("string"), .prop("string"), .prop("string", value)
Returns the value of a css property name.
Sets an elements css properties. Properties is an object with value pairs. Each entry is a css property name with its value.
$(".mydiv").css({ "background-color": "#ffe", "border-left": "5px solid #ccc" });
You can also use DOM based style properties as used in javascript, for example backgroundColor
for background-color
.
to be documented...
to be documented...
to be documented...
to be documented...
to be documented...
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
```javascript
$( ".inner" ).append( "<p>Test</p>" );
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$( ".hello" ).remove();
to be documented...
to be documented...
to be documented...
Returns the immediate parent of an element.
This method traverses up each immediate parent of an element until a parent element matching the selector
is found.
Test if a checkbox is checked
with:
if( $(aCheckbox).is(":checked") ){
console.log("is checked");
}
if( $(aCheckbox).prop("checked") ){
console.log("is checked");
}
You can use .attr()
to test for checked
but must browsers check attributes against the actual HTML contents. If the checked
attribute was not used on a checkbox you will not be able to test for checked
. The .prop()
method uses the node properties which are values computed by the browser.
Set the check state with the following code:
$(aCheckbox).prop("checked", true);
Based on original work of dciccale and james2doyle.
Inspired by youmightnotneedjquery.