Diferencia entre revisiones de «Usuario:Juanda/jQuery/Sintaxis»
De WikiEducator
| Línea 1: | Línea 1: | ||
{{Usuario:juanda/jQuery/nav }} | {{Usuario:juanda/jQuery/nav }} | ||
| − | {{#widget:Slides}} {{MiTitulo| Curso de jQuery}} | + | {{#widget:Slides}} {{MiTitulo| Curso de jQuery-Sintaxis}} |
<div class="slides layout-regular template-default"> | <div class="slides layout-regular template-default"> | ||
<div class="slide"> | <div class="slide"> | ||
| − | = | + | = Sintaxis de jQuery = |
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | === | + | ===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 | ||
| + | |||
| + | *Ejemplos: | ||
| + | <source lang="javascript"> | ||
| + | $(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 | ||
| + | </source> | ||
| + | |||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | === | + | === Ejemplos de uso del selector de jQuery === |
| − | + | <source lang="javascript"> | |
| − | + | $("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="#" | |
| − | : | + | |
| + | </source> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | <source lang="javascript"> | ||
| + | $("[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" | ||
| + | |||
| + | </source> | ||
</div> | </div> | ||
Revisión de 09:28 27 oct 2012
|
$("a").click(function(event) {
alert("Hola Mundo");
event.preventDefault();
});
|
