¡Esta es una revisión vieja del documento!

jQuery

Es una pequeña pero potente librería para agilizar las acciones de JavaScript sobre el DOM de la página, que se basa en el enlace de funciones a eventos o acciones del DOM.

Básico

Utilización

Para utilizarlo en nuestro código indicaremos en una tag script habiendo incluido previamente el archivo que contiene jquery en la ruta seleccionada:

  <html>
  <head>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
      // Código jquery
    </script>
  </head>
  ...

Cuando se carga el documento

Podemos ejecutar una función cuando el documento esté preparado para ser manipulado, para ello utilizamos $(document).ready e indicamos la función deseada:

$(document).ready(
  function() {
    alert("El DOM está preparado");
  }
);

Acceso a los elementos

Las distintas opciones

A partir del identificador:

$("#identificador")

A partir del tipo de etiqueta:

$("a")

A partir de su clase:

$(".codigo")

Ejemplos

Dentro de esta función ready podemos indicar las cosas que queremos que ocurran cuando, por ejemplo, se haga click sobre un enlace. El siguiente código hace que al pulsar sobre cualquiera de los links aparezca un mensaje:

$(document).ready(function() {
  $("a").click(function(){
    alert ("Click en un enlace");
  });
});

Desde las funciones podemos acceder también a código jQuery del elemento mediante $this.

$(document).ready(function() {
  $("a").click(function(){
    $this.hide();
  });
});

Encadenamiento

El encadenamiento corresponde a la cualidad de jQuery para escoger a cual de los elementos del DOM va a recibir la acción mediante los métodos filter, que indica el elemento, o end que finaliza el encadenamiento.

$(document).ready(function() {
  $("a")
    .filter(".clickme")
      .click(function(){
        ...
      })
    .end()
    .filter(".hideme")
      .click(function(){
        ...
      })
    .end();
});

<a href="http://google.com/" class="clickme">I give a message when you leave</a>
<a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
<a href="http://microsoft.com/">I'm a normal link</a>

En este caso el string que se le pasa a filter es “.nombre”, corresponde al identificador de clase del elemento. Si quisieramos indcarlo por la propiedad id haríamos “#nombre”.

Acceso a las propiedades

Acceso (asignación y lectura) al valor de un input:

$("#TextBox1").val("defg");
alert($("#TextBox1").val());

Acceso (asignación y lectura) de la propiedad innerHtml:

$("#test").html("<span class='red'>Hello <b>Again</b></span>");
alert($("#test2").html());

Encontrar elementos anidados

Realizar una función para cada elemento div dentro de otro elemento:

$('#lTags').find("div").each(function() {
  $(this)...
});

Encontrar cuantos elementos div tiene internamente otro elemento:

$('#lTags').find("div").size();

Encontrar los checkbox activos en otro elemento:

$(this).find("input[type=checkbox][checked]")

Acceso a los estilos

Para mirar el estilo de un elemento:

var weight = $("#myElement").css("text-weight");

Para escribirlo:

$("#myElement").css("text-weight", "bold");

Podemos agregar y elimar clases de un elementos mediante las funciones removeClass('className') y addClass('className').

Funciones

Agregar elementos

Con la función append:

$('<tr><td>hello<\/td><td>hello<\/td><td>hello<\/td><\/tr>').appendTo("#tableResult tbody");
$('<div>hello<\/div>').appendTo(document.body);

Acceder a sus propiedades

… Con la función attr:

$("#MyImg").attr({ 
  src: "/images/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$(idLbl).attr("style", "color:orange;");
var txtImg = $("").attr("alt");

Otras funciones

jQuery.trim(str) permite realizar un trim del string pasado.

var user = $("#add_user").val();
user = jQuery.trim(user);
if (user !== "") {
...

index() te dice el índice de un elemento dentro de su contenedor.

$("#tags li").click(function(){
    alert( "Hi, I'm element " + $(this).index() );
});

remove() elimina el elemento.

$("#divID").remove();

Eventos

Cuando la función enlazada corresponde a un evento lo indicaremos recibiendo un parámetro en la función, por ejemplo en el envento click:

$("a").click(function(event){
  alert("Se ha producido un evento");
});

Para el keypress:

$("#add_user").keypress (function (event) {
    if (event.keyCode == '13')  {
      event.preventDefault();
      $("#btn").click();
    }
});

Para lanzar un evento:

$("#btn").click();
$("#txt").change();

Detener los eventos

Podemos impedir que un evento siga ejecutándose añadiendo event.preventDefault(); a la función enlazada a este:

 $("a").click(function(event){
   event.preventDefault();
   alert("Se ha detenido el evento");
 });

Efectos a los CSS

Si tenemos declarado en el documento algo parecido a lo siguiente:

<style type="text/css">a.test { font-weight: bold; } </style>

Podremos añadir a los links este estilo mediante addClass o eliminar dicho estilo con removeClass:

.filter("#hideme")
  .click(function(){
    $(this).addClass("test");
  })
.end()

Efectos

Ocultar

Mediante la función hide, la cual, si recibe el parámetro slow lo hará paulatinamente:

 $("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

… o …

 $("a").click(function(event){
   $(this).hide();
 });

Controles

Select

Coger el valor seleccionado (o los valores)

$("select#combo").val();

Controlar cuando cambia

$("select#" + idCtrlLine).change(function() { ... }

Borrar todas las options de un select

 $("select#" + idCtrlTrajecte).html('');

Borrar una option concreta

$("#myId").find("option[value='myValue']").remove();

Seleccionar el tercer elemento

$("select#" + idCtrlTrajecte + " option").eq(2).attr("selected", "selected");

Montar un select a partir de un json

$.getJSON(url, function(data) {
     var options = '';
     for (var i = 0; i < data.length; i++) {
         options += '<option value="' + data[i].id + '">' + data[i].denominacion+ '</option>';
     }
     $("select#" + idCtrlTrajecte).html(options);
});

Coger el texto del elemento seleccionado

var text = $('#scombo :selected').text();

Input text

Detectar pulsaciones de tecla

A partir de los eventos: keyup, keydown:

$("#myInput").keydown(function(event){
  alert ($(this).val());
}

Tablas

Para recoger las celdas de una fila utilizaremos la función children pasándole el tag que nos interesa:

$('#tableResult tr').click(function() {
    var id = $(this).children('td').eq(0).text();
    var txt = id + ", " + $(this).children('td').eq(1).text();
  });

Checkbox

Saber si un checkbox está checked:

var showUnTagged = $("#chkUnTagged").attr("checked");

Radio Buttons

Saber qué radio está checked en el grupo “mode”:

$("input[@name='mode']:checked").val()

Siendo los radios:

<input type="radio" name="mode" value="and" /> AND
<input type="radio" name="mode" value="or"  /> OR

AJAX

Para acceder al módulo de AJAX de jQuery haremos:

$.ajax({});

Entre los corchetes irán los parámetros que pueden ser:

async, que indica cómo será la carga del objeto AJAX (síncrona (bloquea el navegador hasta tenerlo) o asíncrona), acepta true o false.
beforeSend indica el nombre de la función a llamar antes de realizar la llamada AJAX.
complete, el nombre de la función que se llamará cuando la llamada AJAX esté completa, los parámetros que recibirá serán el objeto XMLHttpRequest y un string con el resultado de la operación.
contentType
data especifica los dataos que se enviarán (por ejemplo foo=bar&foo2=bar2;).
dataType indica el tipo de datos que vendrán (xml, html, script, json).
error, función que se ejecuta cuando hay un error.
global
ifModified
processData
success, función que se ejecutará si todo ha ido bien, recibe como parámetro los datos.
timeout permite indicar el tiempo de espera.
type indica si el modo de conexión es GET o POST.
url dirección donde están los datos.

Por ejemplo:
Muestra los datos que han llegado en un alert:

$.ajax({
        url: "mi-pagina-cool.html",
        success: function(datos){
            alert(datos);
        }
});

Si indicamos que los datos son dataType: “json” en el parámetro de la función ya vendrá directamente el objeto javascript:

$(document).ready(
    function() {
        $.ajax({
            url: "controller.ashx",
            dataType: "json",
            success: function(datos) {
                $("#TextBox1").val(datos.name);
            }
        });
    }
);

Otras formas

Función getJSON

Función que recoge datos en formato json y devuelve el objeto javascript:

$.getJSON("controller.ashx",
    function(data) {
        $("#TextBox1").val(data.name);
    });

Función load

Carga los datos de un archivo sobre una etiqueta con el identificador indicado:

$("#entryContent").load("./controllers/entry.ashx?id="+entry);
$("#entryContent").load("./controllers/entry.ashx?id="+entry, function () {
  alert('it was fine!');
});

Enviar datos con post()

$.post("test.php", { name: "John", time: "2pm" }, dataType="json" );

Como...

Leer un xml

http://www.webmonkey.com/tutorial/Easy_XML_Consumption_using_jQuery?oldid=20032, o esta web descargada (easyxml.tar.gz(borrar si deja de ser útil))

Básicamente…

Leer un archivo xml:

Leer los atributos de una etiqueta:

Modificar el xml:

Notas

No puedes utilizar el método .html() para recoger el código interno de un elemento que está dentro de un documento .xml en el servidor ya que este devuelve el documento como un XMLObject y en dicho objeto eso no está permitido. Aún así puedes engañar al servidor simplemente cambiando la extensión del archivo por, por ejemplo, .txt.

Lanzar un evento

Mediante la función trigger. En el siguiente ejemplo se recoge el click en una fila de una tabla, esta contiene un checkbox y lo que hace es que, al recoger dicho click se lanza el click sobre el checkbox:

      $(document).ready(function() {
        $('#rowclick2 tr').click(function(event) {
          $(this).toggleClass('selected');
          if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
          }
        });
      });

Pequeños

Preguntar si un elemento existe

jQuery.fn.exists = function(){return jQuery(this).length>0;}
if ($(selector).exists()) {
...
}

O si el length es 0:

$('#myImg').length

Crear\añadir fácilmente elementos

var $option = $("<option></option>").text(d.pnom).val(d.id).attr("selected", true);
$("#listUsers").append($option).change();

Programming

Herramientas de usuario

Herramientas del sitio

Tabla de Contenidos