sdf-query 0.9.9

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('!');

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')

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>');

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>');

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);
});

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>');

Examples

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

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'});
});

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');
});

Examples

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

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');
    }
});

Examples

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

Examples

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

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');

Examples

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

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>');

Examples

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

Examples

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

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');

Examples

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

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!');

Examples

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