jquery.extras

Introduction

jQuery.extras is a library that augments jquery with extra helper methods. This collection was written to support jquery.behaviorize framework and includes extensions to both static ($) and prototype ($.fn) objects.

Installation

npm install --save jquery.extras

Static methods

$.jsonify: converts JSON and "naked" JSON to a JavaScript object. (To learn more about "naked" JSON, read the following documentation).

<!-- example.html -->

<input type = "text" naked-json = "{name: some name, age: 25, enrolled:}" />

/* example.js */

let nakedJson = $('input:first').attr('naked-json');
let obj = $.jsonify(nakedJson);
//obj = {name: 'some name', age: 25, enrolled: null}

Prototype methods

$.fn.attr: overrides jquery's native attr function and implements a support to return an array of attribute values when there is more than one element in the selection.

<!-- example.html -->

<input type = "text" />
<input type = "text" />
<input id = "something" />

/* example.js */

let attrValue = $('input:first').attr('type');
//attrValue = 'text'

let attrValues = $('input:nth-child(-n + 2)').attr('type');
//attrValues = ['text', 'text']

let attrValues = $('input').attr('type');
//should throw an error because one input does not have a type attribute

let attrValue = $('input:last').attr('type');
//attrValue = 'undefined'

$.fn.attrArr: wraps an overridden attr function and will return any primitive (returned by attr) as an array.

<!-- example.html -->

<input type = "text" />
<input id = "something" />

/* example.js */

let attrValue = $('input:first').attrArr('type');
//attrValue = ['text']

let attrValue1 = $('input:last').attrArr('type');
//attrValue1 = [undefined]

$.fn.attrValues: selects a first element's attributes, whose names match the provided pattern (string or regular expression), and returns an object of the matched attributes' names and values pairs. Or, if an attribute name is provided as the second parameter, the function will build a larger object mapping an object of matches attributes' names and values to the value of the provided attribute name.

<!-- example.html -->

<input type = "text" dn-property = "prop1" dn-extra = "extra" />
<input type = "password" dn-method = "method" dn-extra = "something" />
<input name = "some name" />

/* example-1.js */

let obj = $('input').attrValues('dn-');
//obj = {'dn-property': 'prop1', 'dn-extra': 'extra'}

/* example-2.js */

let obj = $('input:eq(1)').attrValues(/extra$/);
//obj = {'dn-extra': 'something'}

/* example-3.js */

let obj = $('input:nth-child(-n + 2)').attrValues('dn-', 'type')
/* 
  obj = {
    text: {'dn-property': 'prop1', 'dn-extra': 'extra'},
    password: {'dn-method': 'method', 'dn-extra': 'something'}
  }
*/

/* example-4.js */

let obj = $('input').attrValues('dn-', 'type')
//will throw an error because last input does not have a type attribute

//to ignore elements with undefined hash attribute, add true as third parameter
let obj = $('input').attrValues('dn-', 'type', true);

$.fn.byAttrName: filters selected elements by attribute names that match the provided pattern (string or regular expression) and returns a collection of matched elements.

<!-- example.html -->

<div pfaaa></div>
<div pfa></div>
<div pft></div>

/* example.js */

let $pfaAll = $('div').byAttrName('pfa');
//$pfaAll = the first two divs

let $pft = $('div').byAttrName(/^pft$/);
//$pft = the second div

$.fn.disable: disables all selected elements by setting their disabled attribute to disabled value.

<!-- example.html -->

<input type = "text" name = "first-name" />
<input type = "text" name = "last-name" />

/* example.js */

$('input').disable();

$.fn.enable: enables all selected elements by removing their disabled attribute.

<!-- example.html -->

<input type = "text" name = "first-name" disabled = "disabled" />
<input type = "text" name = "last-name" disabled = "disabled" />

/* example.js */

$('input').enable();

$.fn.events: fetches an events object for the first element in the selection.

/* example.js */

$('input').on('keyup', evt => {});
$('input').on('click', evt => {});

let events = $('input').events();
//events = {'keyup': {...}, 'click': {...}}

$.fn.hasEvent: returns a specific event configuration object (for the first element in the selection) if an event handler has been registered; otherwise returns undefined.

/* example.js */

$('input').on('keyup', evt => {});
$('input').on('click', evt => {});

if($('input').hasEvent('click')) {
  //should do something because event handler has been registered
}

$.fn.id: gets a value of an id attribute, sets an id to some specified value, sets an id to an auto-generated unique value, or overrides an existing id with an auto-generated value. (The function will be applied to the first element in the selection).

<!-- example.html -->

<input id = "some-id" type = "text" />
<input type = "password"  name = "password" />
<input type = "email" />
<input id = "another-id" type = "checkbox" />

/* example.js */

let id = $('input:eq(0)').id();
//id = 'some-id'

let id1 = $('[type = "password"]').id('password-id');
//id1 = 'password-id'

let id2 = $('[type = "email"]').id(true);
//id2 should be auto-generated and equal to 'jquery-extras-id-1'

let id3 = $('input:last').id(true);
//because id attribute exists, id3 = 'another-id'

let id4 = $('input:last').id(true, true);
//id4 = 'jquery-extras-id-2'; second true indicates to override an existing id

$.fn.name: gets and sets a value of a name attribute.

<!-- example.html -->

<input id = "username" name = "username" />
<input id = "password" />

/* example.js */

let userName = $('input:eq(0)').name();
//userName = 'username'

let password = $('[id = "password"]').name('password');
//password = 'password'

$.fn.val: overrides jquery's native val function and implements a support to return an array of values when there is more than one element in the selection and also implements functionality to return an object of values indexed by some attribute's value.

<!-- example.html -->

<input id = "username" value = "something" />
<input id = "password" value = "password" />

/* example.js */

$('input').val('something else');
//first input's value should be 'something else'

let values = $('input').val();
//values = ['something else', 'password']

let obj = $('input').val('id', true);
//obj = {username: 'something else', password: 'password'}

$.fn.valArr: wraps an overridden val function and will return any primitive (returned by val) as an array.

<!-- example.html -->

<input id = "username" value = "something" />
<input id = "password" value = "password" />
<div></div>

/* example.js */

let value = $('input:last').valArr();
//value = ['password']

let value1 = $('div').valArr();
//value1 = ['']