NJQ - Examples Page

NoJQuery by Stefano Vazzoler (stefanovazzocell@gmail.com)

In this page will show sample code for the NJQ Library.

Checks: RED is failing, GREEN is passing, and BLACK indicates that no automatic test was performed.





Selecting element(s)

Here are some examples of how an element can be selected

// Select by element

$$('html').html();

// Select by id

$$('#id').html();

// Select by class

$$('.class').html();

// Select by reference

$$(this).html();




Page Ready

ready(callback) calls the callback when the page is done loading.

// Show a message when the page is loaded

$$().ready(function(){

alert('The page is loaded!');

});




For Each

each(fn) calls a function on every selected element.
The function should have two parameters:

  1. element - is the current selected element
  2. index - is the index of the current element

// Log a message for every 'p' element

$$('p').each(function(element, index){

console.log(index + ' - A paragraph element!');

});




First Element

first() Returns the first selected element.

// Returns the first div element

$$('div').first();




Select/Click Element

select() Simulates an user selecting an element.

// Equivalent to user clicking element

$$('#clickme').select();




Get or Set inner HTML of element

html(newHtml) gets or sets the inner html of an element(s)
Has an optional newHtml parameter. This parameter should be a string containing the new inner html to set to each selected element.
If no parameter is passed, it returns a string with the inner html of the first element.

// Returns the inner html of the first .readme

$$('.readme').html();

/* Writes 'Hello World!' to every selected

* paragraph element

*/

$$('p').html('Hello World!');




Add a class

addClass(newClass) Simulates an user selecting an element.

// Adds the class 'expanded' to each instance of .menu

$$('.menu').addClass('expanded');




Remove a class

removeClass(oldClass) Removes the given class from all elements selected

// Removes the class 'expanded' to each instance of .menu

$$('.menu').removeClass('expanded');




Toggle a class

toggleClass(className) Toggles the given class from all elements selected

// Toggles the class 'expanded' to each instance of .menu (on/off)

$$('.menu').toggleClass('expanded');




Has a class

hasClass(className) Checks if the class is selected

// If the class expanded is part of menu, show an alert

if ($$('.menu').hasClass('expanded')) alert('Menu is expanded!');




Gets or Sets style properties

style(property,newValue) gets or sets a given css property
Has an property parameter which indicates the property to look at.
Has an Optional newValue parameter. This parameter should be a string containing the new value to set to the css property
If no parameter is passed, it returns a string with the value of the requested css property of the first element.

// Hides all the .loading elements by setting 'display: none'

$$('.loading').style('display', 'none');

// Returns the height property of the #div3

$$('#div3').style('height');




Get or Set value of an element

val(newValue) gets or sets the value of an element(s)
Has an optional newValue parameter. This parameter should be a string containing the new value to set to each selected element.
If no parameter is passed, it returns a string with the value of the first element.

// Returns the value of #username

$$('#username').val();

// Sets the username as 'Bob'

$$('#username').val('Bob');




Get or Set a property of an element

prop(property,newValue) gets or sets the property of an element(s)
Has an optional newValue parameter. This parameter should be a string containing the new property to set to each selected element.
If no parameter is passed, it returns a string with the value of the first element.

// Returns the name property of the first input

$$('input').prop('name');

// Sets the username's name as 'user'

$$('#username').prop('name','user');




Add an event listener with a callback

event(event,callback) set's a callback for an event on the current set of elements
Callback is the function to callback and the event is a string name of the callback
A list of callbacks can be found on w3schools' site

// Returns a message on right click on the page

$$('html').event('contextmenu',function () {

alert('Annoying message'); });




Click event

onClick(callback) set's a click callback for an event on the current set of elements
Callback is the function to callback.

// Returns a message on right click on the page

$$('button').onClick(function () {

alert('Button clicked!'); });




Ajax POST Requests

post(url,data,onSuccess,onFail,isJson) makes an asynchronous ajax POST request to a given url.
url string the url that is being called
data (optional) object containing the body of the post request
onSuccess(response,xhr) (optional) function called if success. Optional response is the string with the body of the returned data, and xhr is to access the original XMLHttpRequest
onFail(xhr) (optional) function function called in case of failure. Optionally access xhr, the original XMLHttpRequest
isJson (optional) bool true if there is the need to encode data as json, false otherwise

// Make a request to a sample site to get an user's ip

$$().post('https://example.com/getip/?format=json',

{},

function (response) {

var ipdata = JSON.parse(reponse);

alert("Your ip is " + ipdata['ip']);

},

function (xhr) {

alert("An error occurred. Response code: " + xhr.status);

});




Ajax GET Requests

get(url,data,onSuccess,onFail) makes an asynchronous ajax GET request to a given url.
url string the url that is being called
data (optional) object containing the parameters of the get request to be passed with the url
onSuccess(response,xhr) (optional) function called if success. Optional response is the string with the body of the returned data, and xhr is to access the original XMLHttpRequest
onFail(xhr) (optional) function function called in case of failure. Optionally access xhr, the original XMLHttpRequest

// Make a request to a sample site to get an user's ip

$$().get('https://example.com/getip/',

{ format: 'json' },

function (response) {

var ipdata = JSON.parse(reponse);

alert("Your ip is " + ipdata['ip']);

},

function (xhr) {

alert("An error occurred. Response code: " + xhr.status);

});




Ajax Custom Request

ajax(url,method,data,onSuccess,onFail,contentType,isJson) makes an asynchronous ajax request to a given url.
url string the url that is being called
method (optional) string specifies the method of the request
data (optional) object containing the parameters of the get request to be passed with the url
onSuccess(response,xhr) (optional) function called if success. Optional response is the string with the body of the returned data, and xhr is to access the original XMLHttpRequest
onFail(xhr) (optional) function function called in case of failure. Optionally access xhr, the original XMLHttpRequest
contentType (optional) string specifies the content type header
isJson (optional) bool true if there is the need to encode data as json, false otherwise

// Make a request to a sample site to get an user's ip

$$().ajax('https://example.com/getip/',

'POST',

{ format: 'json' },

function (response) {

var ipdata = JSON.parse(reponse);

alert("Your ip is " + ipdata['ip']);

},

function (xhr) {

alert("An error occurred. Response code: " + xhr.status);

});




Encode object for ajax request

encodeUri(data) encodes an object such as {user: 'bob', password: 'secret'} to a string 'user=bob&password=secret'.
data (optional) object containing the data to encode

// Encodes an action for a url

var cmd = 'newuser';

var u = 'example.com/?';

u += $$().encodeUri({

todo: action

});

// Prints 'example.com/?todo=newuser'

console.log(u);




Check if obj empty

emptyObj(obj) checks if a javascript objecct is empty.
obj object containing the data to check

// This first example will not do anything

var obj = {};

if (! $$().emptyObj(obj)) {

// Do something

}

// This first example will do anything

obj = { user: 'alice' };

if (! $$().emptyObj(obj)) {

// Do something

}




Read me!
Don't read me!
Write on me
and me