Cutting Edge
Explorar enriquecido cliente de secuencias de comandos con jQuery, parte 1
Dino Esposito
Contenido
El jQuery (objeto)
Los selectores
Filtros
Filtros de formulario
Las operaciones en conjuntos de ajustado
jQuery Chainability
Conocer el código HTML
Sabe cómo se. La funcionalidad más desea obtener fuera del explorador Web, más que debe escribir en JavaScript. Introdujo alrededor de 1995 para agregar la acción más a las páginas HTML, el lenguaje JavaScript no está expresamente diseñado para los desarrolladores. Realmente se ha diseñado para manipular los elementos HTML que van, establecer estilos y reaccionar a datos proporcionados por el usuario. Se ha también ampliamente utilizado para validación de entrada en el cliente y otras operaciones ligeros.
Ver los usos algo triviales que JavaScript se ha aplicado a puede conllevar para creer que resulta sencillo que se va a escribir. Pero como Ray Djajadinata señalado en" Crear aplicaciones Web avanzadas con técnicas de orientada A objetos "en el de 2007 emitir de MSDN Magazine , escribir JavaScript buena código no es trivial pero si entiende, bien, en realidad puede obtener alguna funcionalidad avanzada en su lugar fuera de ella.
Uno de los inconvenientes de JavaScript, sin embargo, es que es un lenguaje interpretado no compilado y así es asunto en del explorador, bueno, interpretación. No todos los exploradores procesar el mismo código de JavaScript de la misma manera. Pero las bibliotecas como jQuery pueden hacer que el código de JavaScript más predecible a través de exploradores.
Microsoft ahora totalmente compatible con jQuery y distribuye con el marco ASP.NET Model-View controlador (MVC). Además, han desarrollado las extensiones para integrar completamente jQuery IntelliSense en Visual Studio 2008 SP1.
En la entrega de este mes, HABLARÉ sobre las características principales de la biblioteca jQuery y enfoque en particular en CSS selectores, encadenamiento de función y establece ajustado. En un futuro entrega, veremos más específicos temas tales como utiliza jQuery para controlar eventos y efectos, almacenamiento en caché del explorador y las solicitudes de AJAX.
jQuery un vistazo
jQuery hace JavaScript código más fácil y rápido que se va a escribir. La biblioteca proporciona funciones de ayuda que aumentan considerablemente la productividad al reduce la frustración. El código resultante es más fácil de leer y más eficaz porque el nivel superior de abstracción oculta un número de cheques y los procedimientos de tratamiento de errores.
La biblioteca, escrito por John Resig, consta de un archivo .js único que puede descargar desde docs.jquery.com/Downloading_jQuery. La versión más reciente es 1.2.6 que se lanzó en la primavera de 2008. El site descarga ofrece tres versiones de la biblioteca: sin comprimir, empaquetado y minimiza.
La versión sin comprimir es cerca 100KB y es totalmente humana legible y comentados. Esta versión es definitivamente el para recoger para examine y depuración.
La versión minimizada es aproximadamente 50KB. Se quitaron todos los caracteres adicionales que no son estrictamente necesarios para implementar la funcionalidad del código fuente. El código es poco práctico si no imposible leer para los usuarios, pero funciona bien para los equipos.
Por último, la versión empaquetada es apenas 30KB en tamaño, pero requiere más tiempo de inicialización en el cliente. El sitio oficial de jQuery recomienda que considere obtener la versión minimizada en lugar de la empaquetado para los entornos de producción. Además, debe tener en cuenta que GZip compresión a través del cable es una práctica estándar y está controlada por todos los servidores Web y exploradores modernos. GZip compresión muestra el tamaño hacia abajo a unos 20 KB. Si utilizas GZip, la versión empaquetada es prácticamente inútil.
En un proyecto de ASP.NET, también necesita un 1.2.6 vsdoc.js jquery para habilitar IntelliSense y una revisión de Visual Studio 2008 (consulte" Compatibilidad con JScript-KB958502 Editor '-los archivos de documentación de IntelliSense de vsdoc.js ") para admitir totalmente jQuery IntelliSense.
En ASP.NET, puede usar un sin formato <script> etiqueta para vincular la biblioteca o puede mostrar en la sección secuencias de comandos del control ScriptManager, así:
<asp:ScriptManager id="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference path="Scripts/jquery-1.2.6.min.js" />
</Scripts>
</asp:ScriptManager>
Tenga en cuenta que no se recomienda este enfoque con la versión actual de ASP.NET a menos que también desee la biblioteca Microsoft AJAX incrustado en la página. En ASP.NET 4.0, será posible deshabilitar la inclusión de los archivos de marco de trabajo del cliente Microsoft AJAX, así que hace esta aproximación una buena.
El conjunto completo de funcionalidad jQuery puede dividirse en cuatro áreas principales: DOM consulta y manipulación, efectos y animación, AJAX y funciones principales para trabajar con matrices, el filtrado de datos y detectar las funciones del explorador.
El jQuery (objeto)
La palabra "consulta" en nombre de la biblioteca indica todo. Hace referencia al ejecutar consultas sobre el DOM de la página, que es donde jQuery obtiene su eficacia.
La biblioteca proporciona una eficaz interfaz para seleccionar elementos DOM que va mucho más allá de la búsqueda simple de elementos que coinciden con un ID (ID) concreto. Por ejemplo, puede seleccionar fácilmente todos los elementos que comparten una determinada clase CSS, determinados atributos, aparecen en una posición determinada en el árbol de o tienen una relación a otros elementos. Lo que es más importante, puede agregar condiciones de filtro y todas estas características de consulta se pueden encadenar juntos, mucho que se pueden consultar datos de SQL.
La raíz de la biblioteca jQuery es la función jQuery, que se definen como sigue:
var jQuery = window.jQuery = window.$ = function( selector, context )
{
return new jQuery.fn.init( selector, context );
};
La función $ es un alias para la función jQuery. Cuando se crea un objeto jQuery, se pasar un selector y un contexto de. El selector de indica la expresión de consulta; el contexto indica la parte de DOM en el que se ejecutará la consulta. Si no se especifica ningún contexto, la función jQuery busca elementos de DOM dentro de la página completa DOM.
La función jQuery (así como su alias $) realiza algunas tareas en los argumentos proporcionados, ejecuta la consulta y, a continuación, devuelve un objeto nuevo de jQuery que contiene los resultados. El objeto recién creado jQuery puede, a su vez, se más consultar o filtrado, en una instrucción nueva, así como en una cadena de instrucciones.
El objeto de jQuery raíz admite las siguientes firmas:
jQuery( expression, [context] )
jQuery( html, [ownerDocument] )
jQuery( elements )
jQuery( callback )
La primera toma un selector CSS y devuelve una matriz ajustada de elementos HTML, el conjunto denominado ajustado. El segundo acepta una cadena HTML, crea el subárbol relacionado y lo anexa a los documentos de propietario especificado, si hay alguno. La tercera sobrecarga se reanudará el elemento o especificado los elementos. Por último, la cuarta sólo tiene una función de devolución de llamada y ejecuta en el documento completo, tan pronto como documento de la página esté completamente cargado.
Además, el objeto de raíz jQuery también incluye algunos métodos auxiliares, como en la figura 1 . De particular interés para los desarrolladores es el cada método, que puede utilizar como formas abreviadas para una iteración manual sobre el contenido de un objeto jQuery, normalmente, los elementos DOM seleccionados mediante un selector CSS. Le ofrecemos un fragmento de código que muestra el cada método de acción. El bucle procesa todas las etiquetas <input> en un formulario:
$("form input").each(
function(i) {
this.title = "Input #" + i;
}
);
| Figura 1 funciones de servidor perimetral y proxy inverso para OCS 2007 |
| Los métodos | Descripción |
| cada (devolución de llamada) | Ejecuta un bucle sobre el contenido del conjunto ajustado y ejecuta la función de devolución de llamada especificado. |
| longitud | Propiedad que devuelve el número de elementos en el conjunto ajustado. |
| eq (posición) | Reduce el conjunto ajustado al elemento único en la posición especificada. |
| Get() | Devuelve el contenido del conjunto ajustado como una matriz de elementos de DOM.. |
| Get (índice) | Devuelve los elementos DOM en la posición en el conjunto ajustado especificada. |
| índice (elemento) | Devuelve el índice de base cero en el conjunto ajustado del elemento de DOM especificado, si hay alguno. |
La diferencia entre () de each y un bucle de JavaScript manual es que each() asigna automáticamente el objeto "this" al elemento de la colección que se está procesando. Sin embargo, la función de devolución de llamada, recibe un parámetro de entero opcional que es el índice (0-basado) de la iteración. Vamos a más información acerca los selectores de jQuery y su sintaxis en función de CSS.
Éste es el uso más sencillo de la función $:
var elem = $("#grid");
La función $ en el fragmento de código recupera si se eliminan todos los DOM elementos cuya propiedad de IDENTIFICADOR coincide con la expresión especificada. El símbolo # no pertenece a la cadena de IDENTIFICADOR, pero es simplemente un prefijo de la función $ para que las cadenas de ID., clases CSS y nombres de las etiquetas HTML. (El símbolo # es parte de sintaxis CSS estándar de selección de ID.) El fragmento de código anterior es funcionalmente equivalente a la siguiente instrucción de DOM:
var elem = document.getElementById("grid");
Cabe destacar que en el DOM HTML, a diferencia de ASP.NET, varios elementos pueden compartir el mismo identificador. Si una matriz de elementos coincide con el IDENTIFICADOR, método getElementById sólo podría devolver el primer elemento coincidente; getElementsByName, por otro lado, podría devolver el conjunto completo.
La similitud entre clásicos métodos de DOM y la función $ termina existe; la capacidad de $ pasa mucho beyond. A través de $, selecciona elementos DOM y, a continuación, se aplica una función a cada uno.
La expresión selector está controlada por la sintaxis de CSS 3.0 y puede alcanzar un nivel realista de complejidad. la figura 2 muestra los selectores compatibles. La lista no incluye filtros, que hablaremos en un momento. Es clave para que tenga en cuenta que en una jerarquía de selectores el antecesor, el objeto primario, o el elemento anterior puede ser cualquier selector válido, no sólo un elemento HTML. la figura 3 muestra algunas consultas de ejemplo.
| La Figura 2 compatibles jQuery selectores |
| Selector | Descripción |
| #ID | Devuelve el primer elemento, si existe, en el DOM con un atributo ID correspondiente. |
| elemento | Devuelve todos los elementos con un nombre de etiqueta coincidente. |
| .Class | Devuelve todos los elementos con una clase CSS coincidente. |
| * | Devuelve todos los elementos de la página. |
| selector1,..., selectorN | Se aplica a todos los selectores básicos determinados y devuelve los resultados combinados. |
| descendientes del ascendiente | Dado un antecesor selector, devuelve la colección de todos los elementos descendientes que coinciden con el selector de descendiente. Por ejemplo, "DIV p" devuelve todos los elementos de <p> dentro de un <div>. |
| principal > secundario | Dado un selector, devuelve la colección de todos los elementos secundarios que coinciden con el selector de secundarios. |
| Prev + junto | Dado un selector, devuelve la colección de todos los elementos del mismo nivel que coincide con el siguiente selector y se encuentran junto al selector de prev. |
| Prev ~ relacionado | Dado un selector, devuelve la colección de todos los elementos del mismo nivel que coincide con el selector del mismo nivel y sigue el selector de prev. |
| Figura 3 ejemplo jQuery selectores en acción |
| Selector de ejemplo | Efecto |
| entrada de formulario | Devuelve todos los campos de entrada dentro de las etiquetas <form> de la página. |
| Entrada #Form1 | Devuelve la entrada de todos los campos dentro del formulario denominado Form1. |
| H2 + p | Devuelve todas las etiquetas <p> que están junto a un <h2> al elemento secundario de la misma forma primaria. |
| INPUT.textBox | Devuelve todas las etiquetas <input> cuya clase CSS es textBox. |
| DIV span.myClass | Devuelve las etiquetas de <span> cuya clase CSS que se se encuentra dentro de un <div> " MyClass". |
Se pueden definir aún más los selectores de aplicando filtros en atributos, contenido, posición y visibilidad. en la figura 4 se enumeran algunos de los filtros más populares de jQuery. La referencia completa es en docs.jquery.com/Selectors.
Los filtros como primero y último buscar elementos de DOM en una posición determinada de la colección devuelta. También puede utilizar una sintaxis en función de índices a los elementos de filtro mediante la eq, gt y lt filtros. Eq el filtro se reanudará el elemento cuyo índice coincide con el índice especificado, mientras que gt y lt recoja elementos mayores o menor, un índice determinado.
Filtros de atributo son eficaces herramientas que seleccionar elementos HTML donde en que un atributo determinado es en una relación determinada con un valor. En la figura 4 , sólo muestran los filtros de atributos más utilizados. Otros filtros existen para seleccionar elementos en un atributo determinado comienza con, termina con o contiene un valor dado. Ésta es la sintaxis requerida:
[attribute^=value] // begins with value
[attribute$=value] // ends with value
[attribute*=value] // contains value
| Figura 4 filtros jQuery |
| Filtros de posición | Descripción |
| :First | Devuelve el primer elemento de la colección de elementos seleccionado. |
| : último | Devuelve el último elemento de la colección de elementos seleccionado. |
| : not(selector) | Filtra todos los elementos que coinciden con el selector especificado. |
| : incluso | Devuelve todos los elementos incluso en la colección seleccionada. |
| : impar | Devuelve todos los elementos de páginas impares de la colección seleccionada. |
| Filtros de elemento secundario | Descripción |
| : nth-child(expr) | Devuelve todos los elementos secundarios de cualquier principal que coinciden con la expresión dada. La expresión puede ser un índice o una secuencia de matemáticas (por ejemplo, 3n + 1), estándar incluida las secuencias como impar y incluso. |
| : primero: secundarios | Devuelve todos los elementos que son el primer secundario de su elemento primario. |
| : última secundario | Devuelve todos los elementos que son el último secundario de su elemento primario. |
| : sólo secundarios | Devuelve todos los elementos que son el secundario sólo de su elemento primario. |
| Filtros de contenido | Descripción |
| : contains(text) | Devuelve todos los elementos que contienen el texto especificado. |
| : vacía | Devuelve todos los elementos sin nodos secundarios. Texto se considera un nodo secundario. |
| : has(selector) | Devuelve todos los elementos que contengan al menos un elemento que coincida con el selector especificado. |
| : principal | Devuelve todos los elementos que tienen al menos un elemento secundario. Texto se considera un nodo secundario. |
| Filtros de visibilidad | Descripción |
| : oculto | Devuelve todos los elementos que actualmente están ocultas de vista. Los elementos de entrada de tipo "hidden" se agregan a la lista. |
| : visible | Devuelve todos los elementos que están actualmente visibles. |
| Filtros de atributo | Descripción |
| [atributo] | Devuelve todos los elementos que tienen el atributo especificado. |
| [atributo = valor] | Devuelve todos los elementos que tienen el atributo especificado establecido en el valor especificado. |
| [atributo! = valor] | Devuelve todos los elementos cuyo atributo especificado (si está presente) tiene un valor distinto del especificado. |
Filtros de atributo también se pueden encadenados colocando basta con dos o más de ellas en paralelo, así:
[align=right][valign=top]
Un filtro especialmente eficaz es n secundarios. Admite varias expresiones de entrada diferentes, tal como se muestra aquí:
:nth-child(index)
:nth-child(even)
:nth-child(odd)
:nth-child(sequence)
El primer formato selecciona el secundario n de los elementos HTML en el selector de código fuente donde n se refiere al índice proporcionado. Si especifica el filtro o impar, se devuelven todos los elementos que colocar en cualquier posición o impar (en función de 0). Por último, puede pasar n secundarios como la expresión de raíz de una secuencia matemática como 3n para indicar múltiplos de 3.
Por ejemplo, el siguiente selector reanudará todos los filas de una tabla (denominado DataGrid1) que se encuentran en las posiciones determinadas por la secuencia 3n + 1, (1, 4, 7 y así sucesivamente,) recordar que es un índice de base cero:
#DataGrid1 tr:nth-child(3n+1)
El siguiente es una expresión mucho más compleja, y explica la increíble eficacia y flexibilidad de jQuery selectores:
#DataGrid1 tr:nth-child(3n+1):has(td[align=right]) td:odd
Lee los siguientes: de todas las filas de tabla seleccionadas al paso anterior (posición 1, 4, 7 y así sucesivamente), ahora que sólo toma aquellos que tienen una celda (una etiqueta <td>) donde el atributo Alinear es igual al valor de derecho. Además, de las filas restantes, es sólo seguir las celdas en las columnas con un índice impar. Consideremos la tabla HTML en la figura 5 . En la figura 6 , la celda con un fondo amarillo es el resultado de la consulta.
Figura 5 una tabla HTML
<table id="DataGrid1" border="1">
<tr>
<td>Column1</td>
<td>Column2</td></tr>
<tr>
<td>Val1</td>
<td align="right">Num1</td></tr>
<tr>
<td>Val2</td>
<td align="right">Num2</td></tr>
<tr>
<td>Val3</td>
<td align="right">Num3</td></tr>
<tr>
<td>Val4</td>
<td>Num4</td></tr>
<tr>
<td>Val5</td>
<td>Num5</td></tr>
<tr>
<td>Val6</td>
<td>Num6</td></tr>
<tr>
<td>Val7</td>
<td>Num7</td></tr>
</table>
Figura 6 selección de una celda algunos en una tabla
Filtros de formulario
Como se ha mencionado, la sintaxis general de jQuery selectores es parecido a la sintaxis de selectores de CSS 3.0, que sólo se amplía con algunos elementos pseudo adicionales, como los enumerados en La figura 7 .
El: filtro de entrada, en particular, hace referencia a todos los entrada elementos lógicos que puede encontrar en una página y no está limitado a las etiquetas <input>. De hecho, incluye elementos <textarea> y <select> elementos utilizados para mostrar las listas de cuadros y lista desplegable. Los selectores en la figura 7 no coinciden con los selectores CSS, pero proporcionan accesos directos útiles a recoger homogéneas elementos, como todas las etiquetas entradas de un tipo determinado. Como ejemplo, el selector: texto es funcionalmente equivalente a lo siguiente:
form input[type=text]
| Figura 7 filtros de formulario |
| Selector | Descripción |
| : entrada | Devuelve todos los elementos que tienen una función en recopilar datos de entrada, incluyendo textarea y listas desplegables. |
| : texto | Devuelve entrados todos los elementos cuyo atributo de tipo es texto. |
| : contraseña | Devuelve entrados todos los elementos cuyo atributo de tipo es la contraseña. |
| : casilla de verificación | Devuelve entrados todos los elementos cuyo atributo de tipo es casilla de verificación. |
| : radio | Devuelve entrados todos los elementos cuyo atributo de tipo es el radio. |
| : enviar | Devuelve todos los elementos de entrada cuyo atributo de tipo es envíen. |
| : restablecer | Devuelve entrados todos los elementos cuyo atributo de tipo se restablece. |
| : imagen | Devuelve entrados todos los elementos cuyo atributo de tipo es la imagen. |
| : botón | Devuelve entrados todos los elementos cuyo atributo de tipo es el botón. |
| : archivo | Devuelve entrados todos los elementos cuyo atributo de tipo es el archivo. |
| : oculto | Devuelve entrados todos los elementos cuyo atributo de tipo está oculto. |
| : habilitado | Devuelve la entrada de todos los elementos que están actualmente habilitados. |
| : deshabilitado | Devuelve entrados todos los elementos que están deshabilitados actualmente. |
| : activada | Devuelve todos los elementos de radio o casilla de verificación que están protegidos actualmente. |
| : seleccionado | Devuelve todos los elementos de lista que estén seleccionados. |
Están disponibles para tomar la entrada de todos los elementos en una página que están habilitados o deshabilitados y casillas de verificación todos los otros los ayudantes interesantes y botones de opción activada, así como la lista de elementos actualmente seleccionados.
Las operaciones en conjuntos de ajustado
Los elementos HTML que coincidan con un selector se devuelve empaquetado en una nueva instancia del objeto jQuery. Este objeto incorpora una matriz de JavaScript con todas las referencias DOM. Los resultados a menudo se conocen como un conjunto empaquetado. Un conjunto empaquetado nunca es null, incluso si se han encontrado sin elementos coincidentes. Compruebe esta situación examinando la propiedad de longitud del objeto jQuery, tal como se muestra aquí:
// All TDs with a child IMG
var w_set = new jQuery("#DataGrid1 td:has(img))");
if (w_set.length == 0)
alert("No match found.");
else
alert(w_set.length)
El nivel alto de flexibilidad que muestran jQuery es una característica muy que, pero, a continuación, una vez que tenga todos los elementos que busca, necesitará procesarlas. El enfoque más sencillo posible implica configurar un bucle y ejecutar una función sobre cada elemento de la colección, como éste:
var ws = $("#DataGrid1 tr:nth-child(3n+1)");
for(i = 0; i<ws.length; i++)
{
processElement(ws[i]);
}
function processElement(elem)
{
...
}
En tal una iteración manual, obtiene acceso a los elementos de DOM directamente, igual que en programación JavaScript clásica.
La biblioteca jQuery ofrece un par de rutas alternativas que son funcionalmente equivalentes a manual de la iteración. Bien, iteraciones jQuery resultado más compacto y aún más legible el código. El primer enfoque se basa en la función de cada.
Como se ha mencionado, en jQuery cada función de la ejecuta una devolución de llamada definido por el usuario en cualquier elemento asociado con el conjunto ajustado. Un número bastante grande de métodos operativos, sin embargo, existe para facilitar incluso más rápido y fácil para que pueda ejecutar operaciones comunes en el conjunto ajustado. Por ejemplo, puede utilizar la función de la css para aplicar estilos CSS al conjunto ajustado. A continuación se muestra un ejemplo que establece el fondo de color y borde el estilo de entrada todos los elementos en un formulario:
$("form input").css(
{'background-color' : 'yellow',
'border-style' : 'dashed'}
);
Hay que reconocer que este ejemplo breve es un poco confuso como puede sugerir que jQuery debe utilizarse para lo que bien CSS propio. La función de css es excelente cuando trabaja en los estilos aplicados dinámicamente que dependen de interacción del usuario o de algunos otro condición de tiempo de ejecución.
Del mismo modo, puede agregar, quitar y incluso activar o desactivar una clase CSS en los elementos en el conjunto ajustado. Esto se hace mediante la addClass, removeClass y toggleClass funciones. La función atr permite que establecer uno o varios atributos en todos los elementos. Por ejemplo, aquí es cómo deshabilitar los elementos de todos los entrada:
$("form input").attr(
{'disabled' : 'disabled'}
);
La función html establece el contenido HTML de una etiqueta. Utiliza la propiedad innerHTML internamente. Para establecer el texto interno de una etiqueta, en su lugar, se utilice la función de texto pasando el texto para establecer como el argumento. Esto es una forma buena para entender las ventajas de una biblioteca cross-browser como jQuery. InnerHTML de la propiedad se puede considerar una propiedad estándar de-hecho compatible con todos los exploradores de la misma manera.
El mismo no se dice que la propiedad análoga que sólo se establece el texto. Esta propiedad es innerText en Internet Explorer y textElement en Firefox. La función texto jQuery oculta las diferencias y proporciona la misma funcionalidad a través de todos los exploradores.
jQuery Chainability
Una de las mejores características de jQuery es su chainability, es posible porque el propio objeto jQuery, así como la mayoría de las funciones y filtros, devolver un objeto jQuery. El objeto devuelto contiene el conjunto ajustado original como modificado por la propia función. Por ejemplo, si se aplica la función de css a un conjunto empaquetado, el objeto jQuery devuelta contiene el mismo conjunto de elementos junto con un conjunto de modificación de los estilos CSS. Si se aplica un filtro, obtendrá un conjunto más pequeño como filtrado por la función. Merece la pena tener en cuenta que también tenga disponible un no función para excluir todos elementos que coinciden con la consulta especificada.
No se pudo más fácil la concatenación de las funciones de jQuery. Todo lo que necesita para realizar es adjuntar una llamada de función nueva al objeto jQuery devuelto por la llamada anterior. A continuación puede ver un ejemplo:
$("form input")
.not("[type!=text]")
.css(
{'background-color' : 'yellow',
'border-style' : 'dashed'})
.attr("value", "test");
A continuación la expresión de ejemplo selecciona todos los campos de entrada donde en que el atributo de tipo es igual a texto y establece unos pocos estilos CSS y el atributo de valor en valores fijos. (Tenga en cuenta que en el ejemplo, utiliza el no función sólo para agregar un tercer vínculo a la cadena. El resultado de la no condición puede integrarse en la consulta $ como resultado código incluso más claro.)
Lo hace falta decir que el método de encadenamiento genera más compacta código; pero no dar necesariamente código más rápido. El encadenamiento es una técnica que, como desarrollador, puede o no sentirse cómodo con. Si experimenta problemas con una de estas expresiones compactas, quizás desee dividirla en partes para simplificar la depuración.
Por último, tenga en cuenta que no todos los métodos de jQuery devuelven un objeto jQuery modificada. Los métodos como html o texto, por ejemplo, sólo devuelto una cadena que respectivamente señala al contenido HTML o texto del primer elemento del origen de ajusta conjunto. Para la sintaxis exacta de jQuery métodos vea docs.jquery.com/Main_Page.
Conocer el código HTML
Cuanto más se explorar las profundidades de jQuery, más comprenden la importancia de conocer en detalle el código HTML que está trabajando. Los controles de servidor ASP.NET tienden a ocultar la estructura del código HTML de salida. Por otro lado, los controles de servidor sólo se introdujeron para permitir que los desarrolladores se centran en atributos declarativos en lugar de los detalles HTML. Años de experiencia resultó que esto no era siempre la solución correcta.
Hoy en día, tiene que conservar su HTML bajo control total para accesibilidad, el estilo y la conformidad con a XHTML. Por cierto, este hecho establece un vínculo sutil entre jQuery y el marco ASP.NET MVC. Y no es de coincidencia que el marco ASP.NET MVC incluye la versión más reciente de jQuery en el paquete.
Dicho esto, también es importante recordar que la unión lógica para marcado usando los selectores de jQuery podría crear un acoplamiento no deseado entre lógica y la forma del DOM, que es posible que como resultado difíciles de mantener las aplicaciones.
Por último, si está buscando más ideas para con JavaScript en aspectos interesantes, consulte la lista de Artículos de JavaScript en MSDN .
Envíe sus preguntas y comentarios para Dino a dirección cutting@microsoft.com.
Dino Esposito es un arquitecto en IDesign y el coautor de Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press, 2008). Basándonos en Italia, Dino es un orador frecuente en eventos del sector en todo el mundo. Puede combinar su blog en weblogs.asp. NET/despos.