|
|
| Línea 48: |
Línea 48: |
| | $("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg | | $("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg |
| | | | |
| − | $("p").css("background-color","yellow"); | + | $("p").css("background-color","yellow"); //modificamos el background-color de todos los párrafos a amarillo |
| − | //modificamos el background-color de todos los párrafos a amarillo | + | |
| | | | |
| | $("p#intro:first") //El primer párrafo con id="intro" | | $("p#intro:first") //El primer párrafo con id="intro" |
| Línea 55: |
Línea 54: |
| | $("ul li:first") El primer elemento <li> de cada <ul> | | $("ul li:first") El primer elemento <li> de cada <ul> |
| | | | |
| − | $("div#intro .head") | + | $("div#intro .head") //Todos los elementos con class="head" dentro de un <div> con id="intro" |
| − | //Todos los elementos con class="head" dentro de un <div> con id="intro" | + | |
| | | | |
| | </source> | | </source> |
Revisión de 09:28 27 oct 2012
jQuery
Tutorial para desarrollar en Web mediante jQuery.
Sintaxis
$(selector).action()
- $: Simbolo para definir JQuery (podríamos usar también JQuery)
- selector: Consulta sobre los elementos HTML (sintaxis muy similar a CSS)
- action: Acción que se ejecuta sobre los elementos
$(this).hide() //oculta el elemento actual
$("p").hide() //oculta todos los elementos de tipo párrafo
$("p.test").hide() //oculta todos los párrafos con class=test
$("#test").hide() //oculta todos los elementos con id=test
Ejemplos de uso del selector de jQuery
$("p") //se seleccionan todos los elementos de tipo párrafo
$("p.intro") //todos los párrafos con class=intro
$("p#demo") //todos los párrafos con id=demo
$("[href]") //todos los elementos con atributo href
$("[href='#']") //todos los elementos con atributo href="#"
$("[href!='#']") //todos los elementos con atributo href diferente de "#"
$("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg
$("p").css("background-color","yellow"); //modificamos el background-color de todos los párrafos a amarillo
$("p#intro:first") //El primer párrafo con id="intro"
$("ul li:first") El primer elemento <li> de cada <ul>
$("div#intro .head") //Todos los elementos con class="head" dentro de un <div> con id="intro"
Versiones de jQuery
- Minified y comprimida
- Aproximadamente 30KB
- Sin comprimir
- Aproximadamente 8 veces más pesada, aproximadamente 240KB
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
Uso de un CDN
- También a través de un CDN (Content Delivery Network).
- ¿Qué es un CDN? Grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros):
- CDN de Google:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
- Minified:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
- Full:
<script type="http://code.jquery.com/jquery-1.8.2.js"></script>
Momento de Ejecución del código Javascript
- Cuando la página se ha cargado.
window.onload = function(){ /*Aquí viene mi código de javascript*/ }
- ¿Por qué? No se puede ejecutar hasta que el DOM se haya cargado completamente
- Desventaja: Habrá que esperar la carga completa de imágenes y anuncios para su ejecución.
Hola Mundo mediante javascript
- Crea una página web con un enlace que muestre un alert con el texto "Hola Mundo" y que "anule" el enlace.
|
Momento de Ejecución del código jQuery
- Cuando el documento (DOM) esté preparado para ser manipulado.
- Antes de que se carguen imágenes o anuncios.
$(document).ready(function(){
// Aquí viene mi código jQuery
});
Hola Mundo mediante jQuery
- Descarga una versión de jQuery e inserta las siguientes instrucciones de jQuery:
$("a").click(function(event) {
alert("Hola Mundo");
event.preventDefault();
});
|
Instalación plugin de jQuery para Eclipse Juno
- Instalamos el marketPlace de Eclipse desde Help->Install new Software
- Ejecutamos Help->Eclipse Marketplace y buscamos JSDT jQuery y lo instalamos
- Configuración:
- Project Explorer->JavaScript Resources
- Properties (botón derecho) y pulsamos en Add JavaScript Library y seleccionamos jQuery.
