Publica tus bonificaciones de funciones de extensión corta para jQuery

Question

En un vano similar al tema de extensión C# en SO Sería genial si pudiéramos reunir una gran cantidad de útiles extensiones de función jQuery.

Tenga en cuenta la idea es tener pequeños fragmentos de código no por completo soplado plugins conocidos o widgets de interfaz de usuario

Answer 1

// Allows chainable logging 
// USAGE: $('#someDiv').hide().log('div hidden').addClass('someClass'); 
// Demo : http://jsbin.com/odeke 
jQuery.log = jQuery.fn.log = function (msg) { 
     if (window.console && window.console.log) { 
     console.log("%s: %o", msg, this); 
     } 
     return this; 
}; 

Answer 2

El validation plug-in es impresionante. Lo usé en una aplicación ASP.NET MVC para validar dinámicamente cosas en el cliente usando ajax ... incluso devolvió mensajes de error personalizados basados ​​en la entrada de los usuarios ... muy bueno.

Answer 3

http://plugins.jquery.com/ aloja todo tipo de complementos, tanto grandes como pequeños, y será un recurso mucho más completo y útil que este hilo, disculpe.

Answer 4

Simplemente un atajo para obtener/configurar la ID de un elemento.

(function($) { 
    $.fn.id = function(newDOMID){ 
     var $this = $(this); 
     if($this.attr('id')){ 
      if(!newDOMID){ 
       $this.id.getID($this); 
      } 
      else { 
       $this.id.setID($this,newDOMID); 
      } 
     } 
     else { 
      alert('The target no longer appears to be a part of the DOM!') 
     } 
    }; 
    $.fn.id.getID = function($this){ 
     return $this.attr('id'); 
    }; 
    $.fn.id.setID = function($this,newDOMID){ 
     $this.attr('id',newDOMID); 
     return this 
    }; 
})(jQuery); 

Es jID en el sitio de jQuery plugins.

Answer 5

puede usar esto para ver si existe un selector.

if($.exists('#mydiv')) { } 

$.exists = function(selector) { 
    return ($(selector).length); 
} 

Answer 6

ah estoy un poco lejos de la cuestión inicial, pero si no es el "obtener/establecer un ID" fragmento, luego tengo algo de código para crear ID únicas:

$.increment = function(){ 
    var me = arguments.callee; 
    if (!me.count) me.count = 0; 
    return ++me.count;  
} 

$.domToSelector = function (jq, options){ 
    var selectors = [], i = 0; defaults = {}, opts = $.extend(defaults,options); 
    $(jq).each(function(){ 
     var $node = $(this);  
     if ($node.attr('id')){ 
      selectors[i] = '#'+$(this).attr('id');  
     } 
     else{ 
      var customId = ''+new Date; 
      customId = customId.replace(/ /g, '').replace(/:/g, '').replace(/\+/g, ''); 
      customId = customId+'_'+$.increment(); 
      if (opts.prefix) customId = opts.prefix+customId; 
      $node.attr('id', customId); 
      selectors[i] = '#'+customId;   
     } 
     i++;  
    }); 
    if (selectors.length == 1) selectors = selectors[0];  
    return selectors; 
} 

Answer 7

rápida y fácil AJAX:

La siguiente le permite realizar anclajes como

<a href='http://www.google.com/' rel='#myselector' class='ajax' /> 

que realizan una consulta AJAX en la URL href e insertan el resultado en el primer elemento definido por el selector en el atributo rel del anclaje.

// Allow hrefs with the class 'ajax' and a rel attribute set with a selector to load content via ajax into the selected element. 
$('.ajax').unbind('click').click 
(
    function(e) 
    { 
     $($(this).attr('rel')).load($(this).attr("href")); 
     e.preventDefault(); 
    } 
); 

Answer 8

Interpreta las URL absolutas en la página como enlaces externos, y establece que se abra en una nueva pestaña y tener mascotas Clase título & para un estilo específico.

$("#content [href^='http']:not(a:has('img'))").each(function(){$(this).attr("target", "_blank").addClass("external").attr("title", "External Link to " + $(this).attr("href"))}); 

Answer 9

Ampliar selectores, es decir, escribir sus propios selectores personalizados. Este es un ejemplo para dos:

$(document).ready(function(){ 
    $.extend($.expr[':'], { 
     inputEmpty: inputEmpty, 
     inputNotEmpty: inputNotEmpty 
    }); 
}); 

function inputEmpty(el) { 
    return $(el).val() == ""; 
} 

function inputNotEmpty(el) { 
    return $(el).val() != ""; 
}