Jo is a JavaScript library designed for next-generation browsers that simplify developer's life.
Add the Jo library to your webpage.
<script type="text/javascript" src="path/to/jo.js"></script>
You can now use Jo() or $() shortens.
Select any element from the document (or the context).
HTML model :
<section>
<div>
<p>Hello World! My name is <a>Jo</a></p>
</div>
<p>Follow us on <a href=https://twitter.com/JordanDelcros">Twitter</a></p>
<section>
If [selector] is a CSS selector string :
var elements = Jo("section > p a");
The result will be an array containing :
<a href="https://twitter.com/JordanDelcros">Twitter</a>
If [selector] is an element :
var element = document.createElement("section"); // or document.getElementsByTagName);
var elements = Jo(element);
The result will be an array containing :
<a href=https://twitter.com/JordanDelcros">Twitter</a>
If [selector] is a function :
Jo(function(){
// Do stuff when document is ready
});
It is a shortens for Jo(window).on("load", function(){}, false);
An event is created to wait until the window was fully loaded before executing the given function.
Find any descendants elements in the previous selection.
HTML model :
<ul>
<li>one</li>
<li>two</li>
<li>three
<ul>subchild</ul>
<li>subchild</li>
<ul>subchild</ul>
</li>
<li>four</li>
<li>five</li>
</ul>
If [selector] is a CSS selector string :
var elements = Jo("ul").find("li:first-child, li:nth-child(2)");
The result will be an array containing :
<li>one</li>
<li>two</li>
<li>subchild</li>
Find any siblings elements of the previous selection.
HTML model :
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
If [selector] is a CSS selector string :
var element = Jo("ul li:nth-child(4)").siblings("li:nth-child(2)");
The result will be an array containing :
<li>two</li>
Else if [selector] is empty or null
var elements = Jo("ul li:nth-child(4)").siblings();
The result will be an array containing :
<li>one</li>
<li>two</li>
<li>three</li>
<li>five</li>
Find any siblings elements before the previous selection.
HTML model :
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
If [selector] is a CSS selector string :
var element = Jo("ul li:nth-child(4)").siblingsBefore("li:nth-child(2)");
The result will be an array containing :
<li>two</li>
Else if [selector] is empty or null
var elements = Jo("ul li:nth-child(4)").siblingsBefore();
The result will be an array containing :
<li>one</li>
<li>two</li>
<li>three</li>
Find any siblings elements after the previous selection.
HTML model :
<ul>
<li class="active">one</li>
<li>two</li>
<li class="active">three</li>
<li>four</li>
<li class="active">five</li>
</ul>
If [selector] is a CSS selector string :
var element = Jo("ul li:nth-child(2)").siblingsAfter("li.active");
The result will be an array containing :
<li class="active">three</li>
<li class="active">five</li>
Else if [selector] is empty or null
var elements = Jo("ul li:nth-child(2)").siblingsAfter();
The result will be an array containing :
<li class="active">three</li>
<li>four</li>
<li class="active">five</li>
Find all direct child nodes from the previous selection.
HTML model :
<p>Hello World! My name is <strong>Jo</strong>.</p>