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+
npm install sdf-query
Include the script
<script src="path_to_js/js/sdf-query.min.js"></script>
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.
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. |
// 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('!');
object
Which contains the methods for dom manipulation.
Adds classnames to the elements in the node list
Name | Type | Description | |
---|---|---|---|
classList | string |
List of classes separated by space or a signle classname |
// 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')
object
Query object for nesting
Inserts content after each element of the list. If content is a string parses the specified text as HTML and inserts the resulting nodes.
Name | Type | Description | |
---|---|---|---|
value | string node |
String or Node to be inserted |
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>');
object
Query object for nesting
Appends content to each element of the list. If content is a string parses the specified text as HTML and inserts the resulting nodes.
Name | Type | Description | |
---|---|---|---|
value | string node |
String or Node to be inserted |
cheat sheet
<!-- before -->
<element>
<!-- prepend -->
{{elements content}}
<!-- append -->
</element>
<!-- after -->
// appends a div in the div#first
s('div#first_element').append('<div></div>');
object
Query object for nesting
Sets the attribute of each elements in the list or, Gets the value of attribute of the first element if no arguments
Name | Type | Description | |
---|---|---|---|
attr | string |
Attribute to be set | |
value | string |
Optional, the new attribute value |
// 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);
});
mixed
Query object for nesting or value if getter
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.
Name | Type | Description | |
---|---|---|---|
value | string node |
String or Node to be inserted |
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>');
object
Query object for nesting
Creates an html element to be later appended with append
Name | Type | Description | |
---|---|---|---|
type | string |
The type of element: div,li, button, a... | |
html | string |
Inner html of the element |
// creates a node and appends it
s('ul').append(s().create('li', 'list item A'));
object
Node element of DOM
Sets the style of each elements in the list or, Gets the value of style of the first element if no arguments
Name | Type | Description | |
---|---|---|---|
attr | string |
Attribute to be set | |
value | string |
Optional, the new style value |
// 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'});
});
mixed
Query object for nesting or value if getter
Iterates over every item from the selected element list. Sets "this" to the currently iterated element.
Name | Type | Description | |
---|---|---|---|
method | function |
A function to execute for each node |
// 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');
});
object
Query object for nesting
Gets the first element in the selected list of nodes
var element = s('div.class-name').element();
element.style.display = 'block';
s(element).css({display: 'block', opacity: '0.5'});
object
First element in the list
Returns the first element in the list Alias to element()
object
Element
Returns a list of decendent elements from the selected element.
Name | Type | Description | |
---|---|---|---|
selector | string |
- Query object for nesting and dom modification
Returns true if a class is present in the first element class list
Name | Type | Description | |
---|---|---|---|
className | string |
Name of the class without "." |
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');
}
});
bool
If the classname is present in the list
Hides an element. (Sets display property to none)
// hides the element
s('selector').hide();
object
Query object for nesting
Sets the innerHTML of each element in the list or, Gets the innerHTML of the first element on the list
Name | Type | Description | |
---|---|---|---|
value | string |
Optional, the new innerHTML value |
// sets inner conent of body
s('body').html('<h1>Hello, World!</h1>');
// gets the html of the body
var body = s('body').html();
object
string
Query object for nesting or value if getter
Inserts content to each element of the list. If content is a string, parses the specified text as HTML and inserts the resulting nodes.
Name | Type | Description | |
---|---|---|---|
position | string |
Location relative to the element where to be inserted | |
value | string node |
String or Node to be inserted |
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');
object
Query object for nesting
Adds event listener to the selected elements. Sets "this" to the currently iterated element.
Name | Type | Description | |
---|---|---|---|
event | string |
Type of the event to listen to | |
method | function |
Method to execute on the event |
s('selector').on('click', function(){
//to do
});
s('input[type="text"]').on('change', function(){
var value = s(this).value();
alert(value);
});
object
Query object for nesting
Prepends content to each element of the list. If content is a string parses the specified text as HTML and inserts the resulting nodes.
Name | Type | Description | |
---|---|---|---|
value | string node |
String or Node to be inserted |
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>');
object
Query object for nesting
Removes each selected element from the page
// destroys the body
s('body').remove();
object
Query object for nesting
Removes an attribute from each element in the list
Name | Type | Description | |
---|---|---|---|
attr | string |
Name of the attribute to be removed from the element |
// removes the attribute 'data-active' from all the div with data-active="false"
s('div[data-active="false"]').removeAttr('data-active');
object
Query object for nesting
Removes classes from elements in the list
Name | Type | Description | |
---|---|---|---|
classList | string |
List of classes separated by space |
// removes the classes ".class-1, .class-2" from the first 10 elements with class .class-0
s('.class-0').removeclass('class-1 class-2');
object
Query object for nesting
Shows an element on the screen. (Restores original display property value)
// shows the element
s('selector').show();
object
Query object for nesting
Sets the textContent of each elements in the list or Gets the value of textContent of the first element if no arguments
Name | Type | Description | |
---|---|---|---|
value | string |
Optional, the new textContent value |
// 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!');
mixed
Query object for nesting or value if getter
Sets the value of each elements in the list or Gets the value of the first element if no arguments
Name | Type | Description | |
---|---|---|---|
val | string |
Optional, the new value value |
// gets the value of the input with id #input_1
var val = s('input#input_1').value();
object
Query object for nesting
Documentation generated with doxdox.