9 técnicas de jquery para mejorar tu código

#1 – Carga jQuery framework desde Google or jquery.com

Este truco suele ser muy bueno ya que te ahorras ancho de banda y además los servidores de google suelen ser muy rápidos. El único problema es que dependes de un servidor externo. Una vez hace años google analytics dejó de funcionar y millones de páginas webs tardaban minutos en cargarse

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>

O desde jquery.com:

<script src="http://code.jquery.com/jquery-latest.js"></script>

#2 Saber si una imagen se ha cargado

utilizando el.load() metódo con “img”

$('#myImage').attr('src', 'image.jpg').load(function() {
 alert('Image Loaded');
 //perform action that is dependant of image being fully loaded
});

#3 Alineación Vertical

Si necesitas un elemento central jQuery nos será muy útil. Su uso es muy sencillo, como todo lo que necesita hacer es agregar la verticalcenter class al objeto que quiere centrar en el documento. .

<div onclick="var doc_height = $(document).height();
  var el_height = $('.verticalcenter').height();
  $('.verticalcenter').css({'position' : 'relative' , 'top' :
  doc_height/2 - el_height/2});">Do it</div>
<div id="test2" class="verticalcenter">TESTER</div>;

#4 Reemplazar un

con jQuery

$('#targetdiv').replaceWith('<div>going to be inserted!</div>');

#5 Regular Expressions y jQuery

Puede llevar a cabo acciones bastante potentes con el texto mediante el uso de expresiones regulares Regex. Regex apoyo jQuery de manera sencilla. Aquí hay un ejemplo donde se elimina la palabra "prueba" de texto en un elemento de la página.

<div onclick="var element = $('#test2'); element.html(element.html().replace(/\s+test/gi, ''));">Do it</div>
<div id="test2">Remove it: test</div>

#6 Abriendo links en una nueva ventanapor medio de una class o atributo

Esta técnica jQuery es una manera simple y rápida de hacer todos los enlaces externos se abren en una nueva ventana. Es necesario agregar el atributo rel = "externo" a enlaces externos.

Otra ventaja de este truco es que target = "blank" atributo no es válido XHTML 1.0 Strict. Si usted está usando el siguiente código, se puede conseguir la misma funcionalidad sin tener problemas de validación.

$("a[@rel~='external']").click( function() {
    window.open( $(this).attr('href') );
    return false;
});

Another way to control this and taking it a bit further by setting window size is shown below. Use the code by setting a class “popupwindow” on a link.

$('a.popupwindow').live('click', function(){
 newwindow=window.open($(this).attr('href'),'','height=220,width=170');
 if (window.focus) {newwindow.focus()}
 return false;
});

Otra forma de controlar esto y tomar un poco más por ajuste de tamaño de la ventana se muestra a continuación. Utilice el código mediante el establecimiento de una clase "popupwindow" en un enlace.

jQuery('a.newTab').live('click', function(){
newwindow=window.open($(this).href);
jQuery(this).target = "_blank";
return false;
});

#7 Verificar si un Element está vacio

Esta es una manera simple de probar en jQuery, si un elemento está vacío. El código se imprime "Sí (?)" En un cuadro de alerta, porque div # prueba es lo más vacío que puede ser.

<div onclick="alert($('#test').html() ? 'Certainly not' : 'Yes (?)');">Test it: Is target element empty?</div>
<div id="test"/>

#8 Número de elementos que retorna un selector

Muy simple:

$('targetelement').size();

#9 Desahabilitar click-derecho en el menú contextual

En tres líneas hecho:

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

Esto es una torpe traducción.