sdf-query 0.9.9

Simple utility for selecting and modifying DOM elements used by SDF CSS Framework. Lightweight alternative to some escentials of jQuery compatible with modern browser and ie11+

Live documentation and examples

Live docs and examples

Instalation

npm install sdf-query

Include the script

<script src="path_to_js/js/sdf-query.min.js"></script>

js/sdf-query.js

s(selector, limit)

Query Function

This function enables you to select html elements from the DOM and return an object which lets you modify their attributes, classes, values, styles and add event handlers.

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | selector | string object | A string which is gonna be used to query elements or a Node element. If selector starts with '#' getElementsById will be used limiting the result to 1. |   | | limit | number optional | If set to a number, will limit the results of the query to the amount. If set to one, element will be selected by using querySelector instead of querySelectorAll. |   |

Examples

// adds an event handler for a button of id #button_id
s('#button_id').on('click', function(){});

// sets the attribute data-item to all the li with class '.active'
s('li.active').attr('data-item', 'value');

// removes class .active from all h2 with class '.active' of the page
s('h2.active').removeClass('active');
// removes class .active from 3 of h2 of the page
s('h2.active', 3).removeClass('active');

// Iterates over all the ul of a page and appends an li and prepends li
s('ul').append('<li>appended</li>').prepend('<li>prepended</li>');

 // Custom iterator
 s('span').each(function(){
     s(this).attr('data-active', 'false');
 });
 // Chaining
 s('span[data-attr="value"]').prepend('<br>').append('!');

Returns

• object Which contains the methods for dom manipulation.

s(selector).addClass(classList)

Adds classnames to the elements in the node list

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | classList | string | List of classes separated by space or a signle classname |   |

Examples

// adds classes through custom iterator
s('li').each(function(){
  s(this).addClass('class-1 class-2 class-3');
});

// adds classes through method
s('li').addClass('class-1 class-2 class-3')

Returns

• object Query object for nesting

s(selector).after(value)

Inserts content after each element of the list. If content is a string parses the specified text as HTML and inserts the resulting nodes.

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | value | string node | String or Node to be inserted |   |

Examples

cheat sheet
<!-- before -->
<element>
  <!-- prepend -->
  {{elements content}}
  <!-- append -->
</element>
<!-- after -->

// after a div in the div#first
s('li#first').after('<li id="second"></li>');

Returns

• object Query object for nesting

s(selector).append(value)

Appends content to each element of the list. If content is a string parses the specified text as HTML and inserts the resulting nodes.

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | value | string node | String or Node to be inserted |   |

Examples

cheat sheet
<!-- before -->
<element>
  <!-- prepend -->
  {{elements content}}
  <!-- append -->
</element>
<!-- after -->

// appends a div in the div#first
s('div#first_element').append('<div></div>');

Returns

• object Query object for nesting

s(selector).attr(attr, value)

Sets the attribute of each elements in the list or, Gets the value of attribute of the first element if no arguments

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | attr | string | Attribute to be set |   | | value | string | Optional, the new attribute value |   |

Examples

// reads the attribute data-date from a clicked button
s('button').click(function(){
  var date = s(this).attr('data-date');
  // to do
  s(this).attr('data-date', date);
});

Returns

• mixed Query object for nesting or value if getter

s(selector).before(value)

Inserts content before each element of the list. If content is a string, 'prepend' parses the specified text as HTML and inserts the resulting nodes.

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | value | string node | String or Node to be inserted |   |

Examples

cheat sheet
<!-- before -->
<element>
  <!-- prepend -->
  {{elements content}}
  <!-- append -->
</element>
<!-- after -->

// inserts a div before the div#first
s('div#first').before('<div id="before_first"></div>');

Returns

• object Query object for nesting

s().create(type, html)

Creates an html element to be later appended with append

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | type | string | The type of element: div,li, button, a... |   | | html | string | Inner html of the element |   |

Examples

// creates a node and appends it
s('ul').append(s().create('li', 'list item A'));

Returns

• object Node element of DOM

s(selector).css(attr, value)

Sets the style of each elements in the list or, Gets the value of style of the first element if no arguments

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | attr | string | Attribute to be set |   | | value | string | Optional, the new style value |   |

Examples

// reads the style data-date from a clicked button
s('button').click(function(){
  var opacity = s(this).css('opacity');
  // to do
  opacity -= 0.3;
  s(this).css('opacity', opacity);
  s(this).css({opacity: 1, color: 'red'});
});

Returns

• mixed Query object for nesting or value if getter

s(selector).each(method)

Iterates over every item from the selected element list. Sets "this" to the currently iterated element.

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | method | function | A function to execute for each node |   |

Examples

// Iterates over buttons with class active, gets the attribute data-state,
does something and finally sets data-state to false
s('button.active').each(function(){
  var state = s(this).attr('data-state');
  // to do
  s(this).attr('data-state', 'false');
});

Returns

• object Query object for nesting

s(selector).element()

Gets the first element in the selected list of nodes

Examples

var element = s('div.class-name').element();
element.style.display = 'block';
s(element).css({display: 'block', opacity: '0.5'});

Returns

• object First element in the list

s(selector).first()

Returns the first element in the list Alias to element()

Returns

• object Element

s(selector).find(selector)

Returns a list of decendent elements from the selected element.

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | selector | string | |   |

Returns

• Query object for nesting and dom modification

s(selector).hasClass(className)

Returns true if a class is present in the first element class list

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | className | string | Name of the class without "." |   |

Examples

if(s('#element').hasClass('class-name')){
    // to do
}

// checks if element is active on click, does stuff, removes class active.
s('#element_id').on('click', function(){
    if(s(this).hasClass('active')){
        // to do
        s(this).removeClass('active');
    }
});

Returns

• bool If the classname is present in the list

s(selector).hide()

Hides an element. (Sets display property to none)

Examples

// hides the element
s('selector').hide();

Returns

• object Query object for nesting

s(selector).html(value)

Sets the innerHTML of each element in the list or, Gets the innerHTML of the first element on the list

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | value | string | Optional, the new innerHTML value |   |

Examples

// sets inner conent of body
s('body').html('<h1>Hello, World!</h1>');
// gets the html of the body
var body = s('body').html();

Returns

• object string Query object for nesting or value if getter

s(selector).insert(position, value)

Inserts content to each element of the list. If content is a string, parses the specified text as HTML and inserts the resulting nodes.

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | position | string | Location relative to the element where to be inserted |   | | value | string node | String or Node to be inserted |   |

Examples

cheat sheet
<!-- beforebegin -->
<element>
  <!-- afterbegin -->
  {{elements content}}
  <!-- beforeend -->
</element>
<!-- afterend -->

// inserts a div before the div#first
s('div#first').insert('<div id="before_first"></div>', 'beforebegin');

Returns

• object Query object for nesting

s(selector).on(event, method)

Adds event listener to the selected elements. Sets "this" to the currently iterated element.

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | event | string | Type of the event to listen to |   | | method | function | Method to execute on the event |   |

Examples

s('selector').on('click', function(){
    //to do
});
s('input[type="text"]').on('change', function(){
    var value = s(this).value();
    alert(value);
});

Returns

• object Query object for nesting

s(selector).prepend(value)

Prepends content to each element of the list. If content is a string parses the specified text as HTML and inserts the resulting nodes.

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | value | string node | String or Node to be inserted |   |

Examples

cheat sheet
<!-- before -->
<element>
  <!-- prepend -->
  {{elements content}}
  <!-- append -->
</element>
<!-- after -->

// prepends a div in the div#first
s('div#first').prepend('<div id="start_of_first"></div>');

Returns

• object Query object for nesting

s(selector).remove()

Removes each selected element from the page

Examples

// destroys the body
s('body').remove();

Returns

• object Query object for nesting

s(selector).removeAttr(attr)

Removes an attribute from each element in the list

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | attr | string | Name of the attribute to be removed from the element |   |

Examples

// removes the attribute 'data-active' from all the div with data-active="false"
s('div[data-active="false"]').removeAttr('data-active');

Returns

• object Query object for nesting

s(selector).removeClass(classList)

Removes classes from elements in the list

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | classList | string | List of classes separated by space |   |

Examples

 // removes the classes ".class-1, .class-2" from the first 10 elements with class .class-0
 s('.class-0').removeclass('class-1 class-2');

Returns

• object Query object for nesting

s(selector).show()

Shows an element on the screen. (Restores original display property value)

Examples

// shows the element
s('selector').show();

Returns

• object Query object for nesting

s(selector).text(value)

Sets the textContent of each elements in the list or Gets the value of textContent of the first element if no arguments

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | value | string | Optional, the new textContent value |   |

Examples

// gets the textContent of the element with id #element
var text = s('#element').text();
// sets the textContent of all the first 3 li of ul#list
s('ul#list>li', 3).text('Hello, World!');

Returns

• mixed Query object for nesting or value if getter

s(selector).value(val)

Sets the value of each elements in the list or Gets the value of the first element if no arguments

Parameters

| Name | Type | Description | | | ---- | ---- | ----------- | -------- | | val | string | Optional, the new value value |   |

Examples

// gets the value of the input with id #input_1
var val = s('input#input_1').value();

Returns

• object Query object for nesting

Documentation generated with doxdox.