tag:blogger.com,1999:blog-89415931423264150272024-02-20T08:04:19.370-08:00Todo sobre jQueryEste es un sitio, donde comparto mi experiencia en jQuery, enfocado a compartir información y detalles de cómo hacer bien el uso de jQuery en plataformas Web.j lopez reacthttp://www.blogger.com/profile/13031689222382965794noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-8941593142326415027.post-33013169161316514922012-04-02T15:42:00.000-07:002012-04-29T07:40:46.768-07:00Ejemplo Hola jQueryEjemplo Hola jQuery<br />
<script><br />
<br />
<pre>$(document).ready(function() {
alert('Hola jQuery')
});</pre>
</script><br />
<br />
AL cargar esta página se mostrará el mensaje "Hola jQuery" <br />
<script>
</script><br />
<script>
Al $(document).ready(function() {
alert('Hola jQuery')
});
</script>j lopez reacthttp://www.blogger.com/profile/13031689222382965794noreply@blogger.com0tag:blogger.com,1999:blog-8941593142326415027.post-50740050058372954462012-04-02T10:09:00.000-07:002012-04-03T07:45:32.459-07:00Iniciando en jQueryEn esta ocasión, vamos a dar nuestro primer paso en jQuery. Por lo tanto es importante tener algunas bases claras:<br />
<ol>
<li>Conocimiento básico en Javascript y HTML</li>
<li>Saber que es jQuery (<a href="http://todosobrejquery.blogspot.com/p/que-es-jquery.html">más info</a>.) </li>
</ol>
Ok, con estos requisitos podemos iniciar.<br />
<br />
<div align="justify">
Paso 1: Antes de nada, debemos descargar la librería jQuery en <a href="http://docs.jquery.com/Downloading_jQuery" target="_blank">http://docs.jquery.com/Downloading_jQuery</a>, aquí encontrarás varias versiones de jQuery, que desarrollan diferentes empresas como Google, recomiendo descargar la oficial del sitio y que sea la versión mini, la versión de desarrollo, se usa en caso de requerir hacer una mejora o adaptación a tu sitio, lo cual no recomiendo, porque más adelante veremos como hacer nuestros propios plugins de jQuery </div>
<br />
<br />
Paso 2: Crea un archivo HTML llamado hellojQuery.html<br />
<br />
Paso 3: Nuestro hello jQuery: una vez descargado la librería y creado el archivo, vamos ha insertar la librería de la siguiente manera<br />
<br />
<html><br />
<head><br />
<script src="js/jquery-1.7.2.min.js"></script> <br />
</head><br />
</body><br />
<br />
</body> <br />
</html><br />
<br />
Debemos tener en cuenta que la librería jQuery (<b><script src="js/jquery-1.7.2.min.js"></script> </b>), debe ir siempre insertada antes de usar cualquier otro archivo javascript (*.js) donde se haga uso de esta. Por lo contrario no funcionará<br />
<br />
4. A probar nuestra primera función: ahora en el cuerpo del archivo, agregamos esta línea<br />
<br />
<script><br />
<pre>$(document).ready(function() {
alert('Hola jQuery')
});</pre>
</script><br />
//Otra forma <br />
<script> <br />
<pre>$(function() {
alert('Hola jQuery')
});</pre>
</script>
<br />
<div align="justify">
En este ejemplo, vemos que se hace llamado a la función "<b>ready</b>", la cual reemplaza "document.body.<b>onload</b>", y solo afecta al elemento "<b>document</b>".<br />
<br />
Explicación de uso jQuery:<br />
La forma de seleccionar un elemento es con el símbolo "<b>$</b>" (dolar), las formas básicas de seleccionar son:<br />
<br />
Seleccionar por '<b>tagName</b>' (etiqueta) se hace así:<br />
$('[<b>tagName</b>]'): $('<b>body</b>'),$('<b>input</b>'),$('<b>label</b>'), de esta forma podemos afectar a todos los elementos que cumplan con el "<b>tagName</b>"<br />
<br />
Para seleccionar por Id:<br />
$('#[id]'): $('#texto'),$('#usuario')<br />
<br />
Más adelante veremos formas más avanzadas de seleccionar un elemento <br />
<br />
5. Guardamos nuestro archivo, y lo abrimos en nuestro navegador preferido<br />
<br />
6. Ver ejemplo <a href="http://todosobrejquery.blogspot.com/2012/04/ejemplo-hola-jquery-document.html">http://todosobrejquery.blogspot.com/2012/04/ejemplo-hola-jquery-document.html</a><br />
<br />
Con este ejemplo básico hemos terminado nuestro "Hello jQuery"</div>
<br />
<div align="justify">
Espero todos sus comentarios y hagan su donación de forma gratuita en http://todosobrejquery.blogspot.com/p/como-donarayuda-gratis.html
</div>j lopez reacthttp://www.blogger.com/profile/13031689222382965794noreply@blogger.com0