Núcleo jQuery - Método jQuery()
Ejemplo
Encontrar todos los elementos p que son hijos de elementos div, y establecer sus propiedades de borde:
$("div > p").css("border", "1px solid gray");
Definición y uso
El método jQuery() acepta una cadena que contiene un selector CSS para coincidir con un conjunto de elementos.
El método jQuery() tiene tres sintaxis:
Sintaxis 1
Aceptar una cadena que contenga un selector CSS para coincidir con un conjunto de elementos:
jQuery(selector, [context]
Sintaxis 2
Crear elementos DOM utilizando una cadena de HTML original:
jQuery(html,ownerDocument]
Sintaxis 3
Enlazar una función que se ejecuta después de que el documento DOM se haya cargado:
jQuery( callback )
jQuery( selector, [ contexto ] )
Esta sintaxis tiene varios usos:
Uso 1: Establecer el entorno del selector
Sintaxis
jQuery(selector, [context]
Por defecto, el selector realiza la búsqueda en el DOM desde la raíz del documento. Sin embargo, se puede establecer un parámetro opcional de contexto para $().
Por ejemplo, si queremos buscar un elemento en un callback, podemos limitar la búsqueda a lo siguiente:
Ejemplo
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
Dado que ya hemos limitado el selector span a este entorno, solo los span del elemento al que se hace clic recibirán la clase adicional.
Internamente, el entorno de selector se realiza mediante el método .find(), por lo que $("span", this) es equivalente a $(this).find("span").
Todas las funciones nucleares de jQuery se implementan a través de esta función. Todo en jQuery se basa en esta función, o se utiliza de alguna manera esta función. El uso más básico de esta función es pasarle una expresión (generalmente formada por un selector CSS), y luego buscar todos los elementos que coinciden con esta expresión.
Por defecto, si no se especifica el parámetro context, $() buscará elementos DOM en el documento HTML actual; si se especifica el parámetro context, como un conjunto de elementos DOM o un objeto jQuery, se buscarán en ese contexto. A partir de jQuery 1.3.2, el orden de los elementos devueltos es equivalente al orden en que aparecen en el contexto.
Uso 2: Uso de elemento DOM
Sintaxis
jQuery(elemento)
Esta función nos permite crear un objeto jQuery utilizando elementos DOM encontrados de otra manera. El uso común de esta función es llamar a métodos de jQuery en elementos que ya han sido pasados al callback function a través de la palabra clave this:
Ejemplo
$("div.foo".click(function() {
$(this).slideUp();
});
Este ejemplo utiliza un animación de deslizamiento para ocultar el elemento al hacer clic en él. Dado que el elemento al que hace referencia la palabra clave this en el gestor de eventos es un elemento DOM puro, es necesario envolver ese elemento con un objeto jQuery antes de llamar a los métodos de jQuery.
Esta función también puede recibir documentos XML y objetos Window (aunque no son elementos DOM) como parámetros válidos.
Después de que los datos XML se devuelvan de una llamada Ajax, podemos usar la función $() para envolver los datos con un objeto jQuery. Una vez completado, podemos usar .find() y otros métodos de recorrido DOM para recuperar elementos individuales de la estructura XML.
Uso 3: Clonar objeto jQuery
Sintaxis
jQuery(objeto jQuery)
Al pasar un objeto jQuery al $() como parámetro, se crea una copia de ese objeto. Al igual que el objeto inicial, el nuevo objeto jQuery hace referencia al mismo elemento DOM.
Uso 4: Devolver una colección vacía
Sintaxis
jQuery()
Para jQuery 1.4, la llamada al método jQuery() sin parámetros devuelve una colección jQuery vacía. En versiones anteriores de jQuery, esto devolvería una colección que contiene el nodo document.
jQuery( html, [ ownerDocument ] )
Esta sintaxis tiene varios usos:
Uso 1: Crear nuevos elementos
Sintaxis
jQuery(html,ownerDocument]
Puedes pasar una cadena de HTML escrita a mano, o una cadena creada por algún motor de plantillas o complemento, o una cadena cargada a través de AJAX. Pero hay limitaciones cuando creas elementos input, puedes referirte al segundo ejemplo.
Claro, esta cadena puede contener barras invertidas (por ejemplo, una dirección de imagen) y barras bajas. Al crear un solo elemento, utilice etiquetas cerradas o formato XHTML. Por ejemplo, para crear un span, se puede usar $("<span/>") o $("<span></span>"), pero no se recomienda $("<span>")). En jQuery, esta sintaxis es equivalente a $(document.createElement("span"))).
Si se pasa una cadena como parámetro a $(), jQuery verificará si la cadena es HTML (por ejemplo, si ciertas posiciones de la cadena contienen etiquetas). Si no lo es, la cadena se interpretará como una expresión de selector, como se explicó anteriormente. Pero si la cadena es un fragmento HTML, jQuery intentará crear los elementos DOM descritos por ese fragmento HTML. Luego creará y devolverá un objeto jQuery que referencia estos elementos DOM:
Ejemplo
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
Si el fragmento HTML es más complejo que una etiqueta simple sin atributos, como en el ejemplo anterior, el proceso real de creación del elemento es completado por el mecanismo innerHTML del navegador. En términos específicos, jQuery crea un nuevo elemento <div>, y luego configura la propiedad innerHTML del elemento con el fragmento HTML proporcionado. Cuando el parámetro es una etiqueta simple, como $("<img />") o $("<a></a>"), jQuery crea el elemento a través de la función createElement() nativa de JavaScript.
Para asegurar la compatibilidad entre plataformas, la estructura de los fragmentos debe ser buena. Las etiquetas que pueden contener otros elementos deben aparecer en pares (con etiquetas de cierre):
$("<a href="http://jquery.com"></a>");
Sin embargo, jQuery también permite una sintaxis de etiquetas similar a XML:
$("<a/>");
Las etiquetas que no contienen otros elementos pueden cerrarse o no cerrarse:
$("<img />");
$("<input>");
Uso 2: Establecer propiedades y eventos
Sintaxis
jQuery(html,props)
Para jQuery 1.4, podemos pasar un mapeo de propiedades como segundo parámetro. Este parámetro acepta un conjunto más amplio de propiedades que las que pueden pasar a .attr() método. Además, se pueden pasar tipos de eventos arbitrarios y se pueden llamar los siguientes métodos de jQuery: val, css, html, text, data, width, height, o offset.
Nota: Internet Explorer no permite crear elementos input y cambiar su tipo; debe usar, por ejemplo, "<input type="checkbox" />" para especificar el tipo.
Ejemplo
Crea un elemento <input>, estableciendo al mismo tiempo las propiedades del tipo, los valores de las propiedades y algunos eventos.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
Permite enlazar una función que se ejecutará una vez que el documento DOM esté cargado.
La función tiene el mismo efecto que $(document).ready(), pero cuando se utiliza esta función, es necesario encapsular todas las otras operaciones $() que deben ejecutarse una vez que el DOM esté cargado. A pesar de que técnicamente esta función es enlazable, en la práctica no se enlaza de esta manera muy a menudo.
Ejemplo
Al completarse la carga del DOM, ejecuta la función dentro de él:
$(function() {
// Documento listo
});
