jComponent / Helpers / jQuery extensions
Updated: 25. January 2018
Author: Peter Širka

jQuery extensions

Professional Support Chat with contributors

jComponent extends jQuery by adding new features:


Method: .aclass()

Method adds class from the element/elements.

$(selector).aclass(value);
// @value {String} class name
// return {jQuery}

$('.button').aclass('selected');

Method: .asvg()

Method appends SVG element.

$(selector).asvg(value);
// @value {String} raw HTML or tag name
// return {jQuery}

// With raw HTML:
$('.svg').asvg('<line ... ><rect ... >');

// With tag name:
var rect = $('.svg').asvg('rect');
rect.attr('x', 100);

Method: .attrd()

Method gets/sets data- attribute from the element/elements

$(selector).attrd(key, [value]);
// @key {String} attribute name without "data-"
// @value {String} optional, a value for attribute
// return {jQuery}

$('#element').attrd('name', 'Peter');
// <div id="element" data-name="Peter"></div>

console.log($('#element').attrd('name'));
// Output: Peter

Method: .component()

Method returns one jComponent.

$(selector).component();
// return {jComponent} or null

console.log($('[data-jc]').component());

Method: .components()

Method finds all jComponents on the selector path.

$(selector).component(fn);
// return {jQuery}

$('#components').components(function(component) {
    console.log(component);
});

Method: .hclass()

Method performs jQuery.hasClass().

$(selector).hclass(value);
// @value {String} class name
// return {Boolean}

console.log($('.button').hclass('selected'));

Method: .psvg()

Method prepends SVG element to element.

$(selector).psvg(value);
// @value {String} raw HTML or tag name
// return {jQuery}

// With raw HTML:
$('.rect').psvg('<line ... ><rect ... >');

// With tag name:
var rect = $('.group').psvg('rect');
rect.attr('x', 100);

Method: .rattr()

+v12.0.4 Method removes attribute from the element/elements.

$(selector).rattr(name);
// @name {String} Attribute name
// return {jQuery}

Method: .rattrd()

+v12.0.4 Method removes data-attribute from the element/elements.

$(selector).rattrd(name);
// @name {String} Attribute name without data-
// return {jQuery}

Method: .rescroll()

+v12.0.4 Method re-scrolls a scroll container to element according to the selector. This method uses scrollIntoView(true) method with a custom implementation offset.

$(selector).rescroll([offset]);
// @offset {Number} Optional, default: 0
// return {jQuery}

Method: .rclass()

Method removes class from the element/elements.

$(selector).rclass(value);
// @value {String} class name
// return {jQuery}

$('.button').rclass('selected');

Method: .rclass2()

Method removes classes according to the text to search.

$(selector).rclass2(search);
// @search {String} text to search
// return {jQuery}

$('.button').rclass2('fa-');

Method: .tclass()

Method toggles class for the element/elements.

$(selector).tclass(value);
// @value {String} class name
// return {jQuery}

$('.button').tclass('selected');