Simulador de memoria

Se puede hacer lo mismo utilizando vanilla JavaScript, o JavaScript puro:

document.addEventListener('DOMContentLoaded', function () {
    console.log( "ready!" );
});

Añadiendo detectores de eventos

Los detectores de eventos son una parte muy importante del desarrollo en JavaScript. Jquery tiene manera muy sencilla de llevarlo a cabo:

$(someElement).on('click', function() {
    // TODO event handler logic
});

No necesitas jQuery para crear detectores de eventos en JavaScript. Aquí tienes como hacerlo:

someElement.addEventListener('click', function() {
    // TODO event handler logic
});

Seleccionando elementos

jQuery hace que sea supersencillo seleccionar elementos mediante un ID, una clase, un tag, etc.

// By ID
$('#myElement');

// By Class name
$('.myElement');

// By tag name
$('div');

// Children
$('#myParent').children();

// Complex selecting
$('article#first p.summary');

JavaScript cuenta con diversos modos para seleccionar elementos. Todos los métodos que puedes ver a continuación funcionan en todos los navegadores modernos, así como en IE8+.

// By ID
document.querySelector('#myElement');

// By Class name
document.querySelectorAll('.myElement');

// By tag name
document.querySelectorAll('div');

// Children
$('#myParent').children();

// Complex selecting
document.querySelectorAll('article#first p.summary');

Utilizar AJAX

Como muchos sabéis, AJAX es un conjunto de tecnologías que te permiten crear aplicaciones web asíncronas. Jquery cuenta con un conjunto de útiles métodos para AJAX, incluyendo get() como puedes ver más abajo.

$.get( "ajax/test.html", function( data ) {
    $( ".result" ).html( data );
    alert( "Load was performed." );
});

A pesar de que con jQuery es mucho más fácil y más rápido, también puedes llevarlo a cabo mediante vanilla JavaScript sin problema alguno:

var request = new XMLHttpRequest();
request.open('GET', 'ajax/test.html', true);

request.onload = function (e) {
    if (request.readyState === 4) {

        // Check if the get was successful.

        if (request.status === 200) {
            console.log(request.responseText);
        } else {
            console.error(request.statusText);
        }
    }
};

Añadir y eliminar clases

Si necesitas añadir y eliminar las clases de elementos, jQuery cuenta con dos métodos dedicados para ello:

// Adding a class
$('#foo').addClass('bold');

// Removing a class
$('#foo').removeClass('bold');

Sin jQuery, añadir una clase a un elemento también es muy sencillo. Para eliminar una clase, debes utilizar el método remplace:

// Adding a class
document.getElementById('foo').className += 'bold';

// Removing a class
document.getElementById('foo').className = document.getElementById('foo').className.replace(/^bold$/, '');

Fade in

Aquí tienes un ejemplo práctico de por qué jQuery es tan popular. Hacer fade en un elemento se consigue con una sola línea de código:

$(el).fadeIn();

El mismo efecto puede conseguirse también con Javascript puro y duro, pero el código es más extenso y más complicado.

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

Esconder y mostrar elementos

Esconder y mostrar elementos es una tarea bastante común en la labor de un desarrollador front-end. Jquery te proporciona los métodos hide() y show() para modificar el display de un elemento.

// Hiding element
$(el).hide();

// Showing element
$(el).show();

En vanilla Javascript, esconder o mostrar elementos no es mucho más complicado:

// Hiding element
el.style.display = 'none';

// Showing element
el.style.display = 'block';

Integrantes:

Noelia Villarroel.

Carlos Arce.

Jhon Aguirre.