jQuery, tips, snippets, funciones (resumen)

//Ambas líneas son equivalentes
jQuery('div').remove();
$('div').remove();
  
// jQuery: Esconder, ocultar
$('div').hide(); //Esconde el div
$('div').show(); //Muestra el div
  
// Encadenando métodos
$('div').addClas('error').fadeIn();
  
// jQuery: Selectors
$('input'); // selección de un tag
$('.error'); // selección de una clase
$('#frmAgregar'); // selección de un id
$('#frmAgregar input.error'); // podemos mezclarlos
$('div:animated'); // elementos siendo animados
$('input[type="text"]'); //atributos de un tag   
$('input[type!="text"]'); //atributos de un tag    (neg.)
$('input[name*="dob"]'); //el atributo contiene 'dob'
$('input[name^="dob"]'); //el atributo termina en'dob'
$('input[name$="dob"]'); //el atributo termina en'dob'
$('input:checkbox '); // $('input[type="checkbox"]');
$('input:checked '); // elementos marcados
$('ul.nav > li'); // selector hijo (inmediato)
$("div:contains('John')"); // contiene (innerHtml)
$("tr:even") // pares (empienza en 0)
$("tr:odd") // impares (empienza en 0)
$("tr:first"); // primera fila
$("tr:last"); // primera fila
$("ul li:nth-child(2)"); // segundo hijo
  
// jQuery: Attributes
$("div").addClass('selected'); // agrega la clase
$("div").removeClass('selected'); // quita la clase
$("div").hasClass('sel');//tiene clase sel? (booleano)
$("div").attr('id'); // obtiene el atributo
$("div").attr('id','nav'); // setea el atributo
$("div").removeAttr('id'); // quita el atributo
$("div").html(); // obtiene el html
$("div").html("Hi"); // setea el html
$("input#txtEdad").val(); // obtiene el valor
  
// jQuery: Traversing
$("div").add("a"); // agrega elementos al selector
$("li").each(callback); // Itera la seleccion
$("ul").first(); // devuelve el primero
$("li.quinto").next(); // devuelve el siguiente
$("li.sexto").prev(); // devuelve el anterior
$("a#toc").parent(); // devuelve el padre
$("a#toc").parents(); // devuelve los padres
$("a#toc").sibilings(); // devuelve los hermanos
  
// jQuery: AJAX
$.ajax({
    url: 'ajax-load-wimarbueno.php',
    type: 'get',//GET, POST
    cache: false,
    dataType: 'html',//html, jsonp
    beforeSend: function() {
        $('#ajax-cont').html('<div class="loading"></div>');
    },
    success: function(response) {
        $('#ajax-cont').html('');
        $('#ajax-cont').fadeOut("slow").html(response).fadeIn("slow");
    },
    error: function(jqXHR, exception) {
        if (jqXHR.status === 0) {
            $('#ajax-cont').html('Not connect. Verify Network.');
        } else if (jqXHR.status == 400) {
            $('#ajax-cont').html('Server understood the request but request content was invalid. [400].');
        } else if (jqXHR.status == 401) {
            $('#ajax-cont').html('Unauthorised access. [401].');
        } else if (jqXHR.status == 403) {
            $('#ajax-cont').html('Forbidden resouce can"t be accessed. [403].');
        } else if (jqXHR.status == 404) {
            $('#ajax-cont').html('Requested page not found. [404].' + jqXHR.status );
        } else if (jqXHR.status == 500) {
            $('#ajax-cont').html('Internal Server Error. [500].');
        } else if (jqXHR.status == 503) {
            $('#ajax-cont').html('Service Unavailable. [503]');
        } else if (exception === 'parsererror') {
            $('#ajax-cont').html('Requested JSON parse failed.');
        } else if (exception === 'timeout') {
            $('#ajax-cont').html('Time out error.');
        } else if (exception === 'abort') {
            $('#ajax-cont').html('Ajax request aborted.');
        } else {
            $('#ajax-cont').html('Uncaught Error. ' + jqXHR.responseText);
        }
    }
}); //fin ajax
  
// jQuery: Serializar un formulario
$("form").on("submit", function(event) {
    event.preventDefault();
    console.log($(this).serialize());
});

01.- PHP - JSON -Si en PHP respondes con mensaje en JSON algo como:

$mysqli = new mysqli("localhost", "wilzonmj", "wilzon_mj", "php_basededatos");
$mysqli->set_charset('UTF8');

$result = $mysqli->query($sqlReport);
if ($mysqli->affected_rows > 0) {
    echo json_encode(array(
        "success" => true,
        "fileName" => $nombreDelArchivo,
        "count" => $mysqli->affected_rows,
        "messagge" => '<div style="text-align:center;">Se exportó correctamente' . $mysqli->affected_rows . ' registros en el archivo con el nombre:' . $nombreDelArchivo . '. <br /><a href="exported-csv/' . $nombreDelArchivo . '">Click aquí para descargar</a></div>'
    ));
} else {
    echo json_encode(array(
        "success" => false,
        "fileName" => $dateToday,
        "messagge" => 'Sentimos el servidor está demasiado ocupado para ejecutar esta orden.'
    ));
}

En JS se recuperaria de esta manera:

$.ajax({
    url: opciones.ruta_php,
    type: 'get',
    data: {
        id: '18',
        categoria: '1'
    },
    cache: false,
    dataType: 'html',
    beforeSend: function() {
        $('.ajax-msg').html("<div class='loading'></div>");
    },
    success: function(response) {
        $('.ajax-msg').html('');
  
        var arrayReporte = JSON.parse(response);//con estor esuperamos el JSON
        alert(arrayReporte.fileName)
  
        $('.message').fadeOut("slow").html(arrayReporte.messagge).fadeIn('slow');
    },
    error: function(jqXHR, exception, error) {
        var err = exception + ", " + error;
        console.log("Error: " + err);
        $('.ajax-msg').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> No se pue ejecutar.</div>')
    }
}); //fin ajax

02.- Calcular el tamaño (ancho y alto) del navegador automáticamente con jQuery

Calcular el tamaño (ancho y alto) del navegador automáticamente con jQuery

# -------------------------------------------------------------------
# - Redimensionamiento creando una función y llamándola
# -------------------------------------------------------------------
jQuery(document).ready(function($) {
    redimencionar();
    $(window).resize(redimencionar);
});
 
function redimencionar() {
    jQuery(document).ready(function($) {
        var height = $(window).height();
        var width = $(window).width();
        $('.wmb').html('Screen: ' + width + ' x ' + height);
    });
}
 
  
  
# -------------------------------------------------------------------
# - Redimensionamiento otro modo y más corto ;)
# -------------------------------------------------------------------
jQuery(document).ready(function($) {
    $(window).bind("load resize", function() {
        $('body').append('<div class="wmb" style="width: 150px;height: 150px;border: 1px solid green;color: green;font-family: Arial;font-size: 14px;position: fixed;left: 1px;top: 1px;z-index: 99999;"></div>');
        var height = $(window).height();
        var width = $(window).width();
        $('.wmb').html('Screen: ' + width + ' x ' + height);
    })
})

03.- Centrar DIV en navegador con jQuery

Ejemplo de como centrar de forma vertical y horizontal el DIV o cualquiera de las etiquetas HTML.

# -------------------------------------------------------------------
# - Centrar DIV en navegador con jQuery
# -------------------------------------------------------------------
 
# Modo 1:
/**
 * version plugins
 * Centrar div en windows ;)
 */
(function($){
    $.fn.extend({
        center: function (options) {
            var options =  $.extend({ // Default values
                inside:window, // element, center into window
                transition: 0, // millisecond, transition time
                minX:0, // pixel, minimum left element value
                minY:0, // pixel, minimum top element value
                withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                vertical:true, // booleen, center vertical
                horizontal:true // booleen, center horizontal
            }, options);
            return this.each(function() {
                var props = {position:'absolute'};
                if (options.vertical) {
                    var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                    if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                    top = (top > options.minY ? top : options.minY);
                    $.extend(props, {top: top+'px'});
                }
  
                if (options.horizontal) {
                    var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                    if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                    left = (left > options.minX ? left : options.minX);
                    $.extend(props, {left: left+'px'});
                }
                if (options.transition > 0) $(this).animate(props, options.transition);
                else $(this).css(props);
                return $(this);
            });
        }
    });
})(jQuery);                      
  
//Modo de uso
jQuery(document).ready(function($){
    $('.wmb').center();               
    $(window).bind('resize', function() {
        $('.wmb').center({transition:300});
    });
})
  
  
# Modo 2:
/**
 * Version corta para centrar div en la pantalla
 * Sin parámetro
 */
(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    });
})(jQuery);
  
//Modo de uso
jQuery(document).ready(function($){
    $('.wmb').center();                                          
})
 
//Modo de uso
<div class="wmb" style="width: 250px;height: 250px;background: #ccc;">texto aquí...</div>
/**
 * Fin Version corta para centrar div en la pantalla
 **/
  
  
  
// Modo 3 centrar titulo verticalmente
//title center vertical   
var altura = ($("h1#page-title").height() - $("h1#page-title span").height()) / 2;//el hijo resta la altura del padre y se diveide en 2
$("h1#page-title span").css({
   'margin-top': altura + 'px'
})

04.- jQuery ancla animado

Query(document).ready(function($) {
    $('a[href*=#]').click(function() {
        $('html,body').animate({
            scrollTop: '0px'
        }, 1000);
        return false;
    });
});
  
//modo de uso
<a href="#" style="position: fixed;bottom: 0;left: 0;z-index: 50">Subir</a>

5.- Diferencia entre $(document).ready y $(window).load y window.onload

Trabaja cuando todo HTML haya sido cargado excepto las imágenes y DOM está listo

jQuery(document).ready(function($){//Para no tener problemas con otras librerias poner el "$" y poner "jQuery" en lugar de "$"
    //Aqui tu codigo
});

2.- $(window).load

Esto trabaja cuando la página completa está completamente cargado, incluyendo todos los marcos, objetos e imágenes

$(window).load(function() {
 
});

06.- Redimensionar imagen proporcionalmente

// Esto debería funcionar para las imágenes con todas las proporciones posibles
jQuery(document).ready(function() {
    $('.thumbnail img').each(function() {
        var maxWidth = 100;
        var maxHeight = 100;
        var width = $(this).width();
        var height = $(this).height();
        var ratioW = maxWidth / width;  // La relación de anchura
        var ratioH = maxHeight / height;  // Proporción de altura
 
        // Si la relación de la altura es más grande de lo que necesitamos para escalar la altura
        if(ratioH > ratioW){
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratioW);  // Altura de escala de acuerdo a la relación de anchura
        }
        else{ // De lo contrario se escala el ancho
            $(this).css("height", maxHeight);
            $(this).css("width", height * ratioH);  // De acuerdo con la relación de altura
        }
    });
});